From a68eba231f4356346d68419b993bb6a7361f8266 Mon Sep 17 00:00:00 2001 From: Peter Jahn Date: Tue, 19 Dec 2017 10:32:14 -0800 Subject: [PATCH] Check in built files for 1.5.0 release --- .gitignore | 1 - dist/components/Breadcrumb/Breadcrumb.hbs | 22 + dist/components/Breadcrumb/Breadcrumb.json | 6 + dist/components/Breadcrumb/Breadcrumb.scss | 178 + dist/components/Button/Button.hbs | 20 + dist/components/Button/Button.json | 7 + dist/components/Button/Button.scss | 303 + dist/components/Callout/Callout.hbs | 26 + dist/components/Callout/Callout.json | 10 + dist/components/Callout/Callout.scss | 160 + dist/components/CheckBox/CheckBox.hbs | 16 + dist/components/CheckBox/CheckBox.json | 6 + dist/components/CheckBox/CheckBox.scss | 175 + .../ChoiceFieldGroup/ChoiceFieldGroup.hbs | 15 + .../ChoiceFieldGroup/ChoiceFieldGroup.json | 7 + .../ChoiceFieldGroup/ChoiceFieldGroup.scss | 17 + dist/components/CommandBar/CommandBar.hbs | 27 + dist/components/CommandBar/CommandBar.json | 11 + dist/components/CommandBar/CommandBar.scss | 141 + .../CommandButton/CommandButton.hbs | 27 + .../CommandButton/CommandButton.json | 13 + .../CommandButton/CommandButton.scss | 296 + .../ContextualHost/ContextualHost.hbs | 15 + .../ContextualHost/ContextualHost.json | 3 + .../ContextualHost/ContextualHost.scss | 145 + .../ContextualMenu/ContextualMenu.hbs | 28 + .../ContextualMenu/ContextualMenu.json | 6 + .../ContextualMenu/ContextualMenu.scss | 211 + dist/components/DatePicker/DatePicker.hbs | 49 + dist/components/DatePicker/DatePicker.json | 3 + dist/components/DatePicker/DatePicker.scss | 530 ++ dist/components/DetailsList/DetailsList.hbs | 115 + dist/components/DetailsList/DetailsList.json | 13 + dist/components/DetailsList/DetailsList.scss | 340 + dist/components/Dialog/Dialog.hbs | 31 + dist/components/Dialog/Dialog.json | 9 + dist/components/Dialog/Dialog.scss | 121 + dist/components/DialogHost/DialogHost.hbs | 10 + dist/components/DialogHost/DialogHost.json | 3 + dist/components/DialogHost/DialogHost.scss | 15 + dist/components/Dropdown/Dropdown.hbs | 18 + dist/components/Dropdown/Dropdown.json | 6 + dist/components/Dropdown/Dropdown.scss | 254 + dist/components/FacePile/FacePile.hbs | 17 + dist/components/FacePile/FacePile.json | 13 + dist/components/FacePile/FacePile.scss | 107 + dist/components/Label/Label.hbs | 8 + dist/components/Label/Label.json | 3 + dist/components/Label/Label.scss | 40 + dist/components/Link/Link.hbs | 11 + dist/components/Link/Link.json | 3 + dist/components/Link/Link.scss | 34 + dist/components/List/List.hbs | 12 + dist/components/List/List.json | 6 + dist/components/List/List.scss | 19 + dist/components/ListItem/ListItem.hbs | 25 + dist/components/ListItem/ListItem.json | 6 + dist/components/ListItem/ListItem.scss | 240 + .../MessageBanner/MessageBanner.hbs | 24 + .../MessageBanner/MessageBanner.json | 17 + .../MessageBanner/MessageBanner.scss | 131 + dist/components/MessageBar/MessageBar.hbs | 19 + dist/components/MessageBar/MessageBar.json | 6 + dist/components/MessageBar/MessageBar.scss | 90 + dist/components/OrgChart/OrgChart.hbs | 23 + dist/components/OrgChart/OrgChart.json | 6 + dist/components/OrgChart/OrgChart.scss | 49 + dist/components/Overlay/Overlay.hbs | 6 + dist/components/Overlay/Overlay.json | 3 + dist/components/Overlay/Overlay.scss | 37 + dist/components/Panel/Panel.hbs | 16 + dist/components/Panel/Panel.json | 3 + dist/components/Panel/Panel.scss | 158 + dist/components/PanelHost/PanelHost.hbs | 7 + dist/components/PanelHost/PanelHost.json | 6 + dist/components/PanelHost/PanelHost.scss | 18 + dist/components/PeoplePicker/PeoplePicker.hbs | 54 + .../components/PeoplePicker/PeoplePicker.json | 12 + .../components/PeoplePicker/PeoplePicker.scss | 452 ++ dist/components/Persona/Persona.hbs | 45 + dist/components/Persona/Persona.json | 7 + dist/components/Persona/Persona.scss | 734 ++ dist/components/PersonaCard/PersonaCard.hbs | 49 + dist/components/PersonaCard/PersonaCard.json | 3 + dist/components/PersonaCard/PersonaCard.scss | 211 + dist/components/Pivot/Pivot.hbs | 24 + dist/components/Pivot/Pivot.json | 3 + dist/components/Pivot/Pivot.scss | 204 + .../ProgressIndicator/ProgressIndicator.hbs | 13 + .../ProgressIndicator/ProgressIndicator.json | 3 + .../ProgressIndicator/ProgressIndicator.scss | 67 + dist/components/RadioButton/RadioButton.hbs | 16 + dist/components/RadioButton/RadioButton.json | 6 + dist/components/RadioButton/RadioButton.scss | 197 + dist/components/SearchBox/SearchBox.hbs | 16 + dist/components/SearchBox/SearchBox.json | 26 + dist/components/SearchBox/SearchBox.scss | 371 + dist/components/Spinner/Spinner.hbs | 13 + dist/components/Spinner/Spinner.json | 3 + dist/components/Spinner/Spinner.scss | 51 + dist/components/Table/Table.hbs | 31 + dist/components/Table/Table.json | 3 + dist/components/Table/Table.scss | 126 + dist/components/TextField/TextField.hbs | 11 + dist/components/TextField/TextField.json | 3 + dist/components/TextField/TextField.scss | 235 + dist/components/Toggle/Toggle.hbs | 16 + dist/components/Toggle/Toggle.json | 6 + dist/components/Toggle/Toggle.scss | 252 + dist/css/fabric.components.css | 6203 +++++++++++++++ dist/css/fabric.components.min.css | 6 + dist/css/fabric.components.rtl.css | 6064 +++++++++++++++ dist/css/fabric.components.rtl.min.css | 6 + dist/css/fabric.min.css | 6 + dist/css/fabric.rtl.min.css | 6 + .../Components/Breadcrumb/Breadcrumb.html | 1088 +++ .../Components/Button/Button.html | 1058 +++ .../Components/Callout/Callout.html | 1285 ++++ .../Components/CheckBox/CheckBox.html | 1065 +++ .../ChoiceFieldGroup/ChoiceFieldGroup.html | 998 +++ .../Components/CommandBar/CommandBar.html | 1813 +++++ .../CommandButton/CommandButton.html | 1317 ++++ .../ContextualMenu/ContextualMenu.html | 1318 ++++ .../Components/DatePicker/DatePicker.html | 1034 +++ .../Components/Dialog/Dialog.html | 1680 +++++ .../Components/Dropdown/Dropdown.html | 971 +++ .../Components/FacePile/FacePile.html | 2167 ++++++ .../documentation/Components/Label/Label.html | 915 +++ dist/documentation/Components/Link/Link.html | 847 +++ dist/documentation/Components/List/List.html | 1117 +++ .../Components/ListItem/ListItem.html | 1295 ++++ .../MessageBanner/MessageBanner.html | 960 +++ .../Components/MessageBar/MessageBar.html | 1085 +++ .../Components/OrgChart/OrgChart.html | 1085 +++ .../Components/Overlay/Overlay.html | 978 +++ .../documentation/Components/Panel/Panel.html | 1341 ++++ .../PeoplePicker/PeoplePicker.Searching.png | Bin 0 -> 1601 bytes .../Components/PeoplePicker/PeoplePicker.html | 1565 ++++ .../Components/Persona/Persona.html | 1877 +++++ .../Components/PersonaCard/PersonaCard.html | 1474 ++++ .../documentation/Components/Pivot/Pivot.html | 1165 +++ .../ProgressIndicator/ProgressIndicator.html | 979 +++ .../Components/SearchBox/SearchBox.html | 1081 +++ .../Components/Spinner/Spinner.html | 996 +++ .../documentation/Components/Table/Table.html | 1306 ++++ .../Components/TextField/TextField.html | 1021 +++ .../Components/Toggle/Toggle.html | 971 +++ dist/documentation/GetStarted/GetStarted.html | 840 +++ dist/documentation/Samples/Form/css/Form.css | 6327 ++++++++++++++++ .../Samples/Form/css/Form.min.css | 1 + dist/documentation/Samples/Form/index.html | 250 + .../documentation/Samples/Form/sass/Form.scss | 94 + .../Samples/Languages/index.html | 283 + .../Samples/VideoPortal/channel.html | 256 + .../Samples/VideoPortal/channels.html | 108 + .../Samples/VideoPortal/css/VideoPortal.css | 6661 +++++++++++++++++ .../VideoPortal/css/VideoPortal.min.css | 1 + .../Samples/VideoPortal/index.html | 302 + .../Samples/VideoPortal/player.html | 216 + .../Samples/VideoPortal/sass/Base.scss | 42 + .../Samples/VideoPortal/sass/ChannelPage.scss | 21 + .../VideoPortal/sass/ChannelsPage.scss | 34 + .../Samples/VideoPortal/sass/HomePage.scss | 22 + .../Samples/VideoPortal/sass/NavBar.scss | 10 + .../Samples/VideoPortal/sass/PlayerPage.scss | 203 + .../Samples/VideoPortal/sass/SpotLight.scss | 72 + .../Samples/VideoPortal/sass/Utilities.scss | 30 + .../VideoPortal/sass/VideoListItem.scss | 75 + .../Samples/VideoPortal/sass/VideoPortal.scss | 23 + dist/documentation/images/favicon.ico | Bin 0 -> 3918 bytes dist/documentation/images/home-background.svg | 1 + dist/documentation/images/logo-js-white.svg | 54 + dist/documentation/images/logo-microsoft.png | Bin 0 -> 5447 bytes dist/documentation/images/logo-office-dev.svg | 45 + dist/documentation/index.html | 742 ++ dist/documentation/styles.css | 2900 +++++++ dist/documentation/styles.min.css | 6 + dist/js/fabric.d.ts | 1118 +++ dist/js/fabric.js | 3633 +++++++++ dist/js/fabric.min.js | 8 + dist/lib/PickaDate.js | 1 + dist/lib/jquery.js | 4 + dist/lib/scrollTo.js | 1 + 183 files changed, 82361 insertions(+), 1 deletion(-) create mode 100644 dist/components/Breadcrumb/Breadcrumb.hbs create mode 100644 dist/components/Breadcrumb/Breadcrumb.json create mode 100644 dist/components/Breadcrumb/Breadcrumb.scss create mode 100644 dist/components/Button/Button.hbs create mode 100644 dist/components/Button/Button.json create mode 100644 dist/components/Button/Button.scss create mode 100644 dist/components/Callout/Callout.hbs create mode 100644 dist/components/Callout/Callout.json create mode 100644 dist/components/Callout/Callout.scss create mode 100644 dist/components/CheckBox/CheckBox.hbs create mode 100644 dist/components/CheckBox/CheckBox.json create mode 100644 dist/components/CheckBox/CheckBox.scss create mode 100644 dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs create mode 100644 dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json create mode 100644 dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss create mode 100644 dist/components/CommandBar/CommandBar.hbs create mode 100644 dist/components/CommandBar/CommandBar.json create mode 100644 dist/components/CommandBar/CommandBar.scss create mode 100644 dist/components/CommandButton/CommandButton.hbs create mode 100644 dist/components/CommandButton/CommandButton.json create mode 100644 dist/components/CommandButton/CommandButton.scss create mode 100644 dist/components/ContextualHost/ContextualHost.hbs create mode 100644 dist/components/ContextualHost/ContextualHost.json create mode 100644 dist/components/ContextualHost/ContextualHost.scss create mode 100644 dist/components/ContextualMenu/ContextualMenu.hbs create mode 100644 dist/components/ContextualMenu/ContextualMenu.json create mode 100644 dist/components/ContextualMenu/ContextualMenu.scss create mode 100644 dist/components/DatePicker/DatePicker.hbs create mode 100644 dist/components/DatePicker/DatePicker.json create mode 100644 dist/components/DatePicker/DatePicker.scss create mode 100644 dist/components/DetailsList/DetailsList.hbs create mode 100644 dist/components/DetailsList/DetailsList.json create mode 100644 dist/components/DetailsList/DetailsList.scss create mode 100644 dist/components/Dialog/Dialog.hbs create mode 100644 dist/components/Dialog/Dialog.json create mode 100644 dist/components/Dialog/Dialog.scss create mode 100644 dist/components/DialogHost/DialogHost.hbs create mode 100644 dist/components/DialogHost/DialogHost.json create mode 100644 dist/components/DialogHost/DialogHost.scss create mode 100644 dist/components/Dropdown/Dropdown.hbs create mode 100644 dist/components/Dropdown/Dropdown.json create mode 100644 dist/components/Dropdown/Dropdown.scss create mode 100644 dist/components/FacePile/FacePile.hbs create mode 100644 dist/components/FacePile/FacePile.json create mode 100644 dist/components/FacePile/FacePile.scss create mode 100644 dist/components/Label/Label.hbs create mode 100644 dist/components/Label/Label.json create mode 100644 dist/components/Label/Label.scss create mode 100644 dist/components/Link/Link.hbs create mode 100644 dist/components/Link/Link.json create mode 100644 dist/components/Link/Link.scss create mode 100644 dist/components/List/List.hbs create mode 100644 dist/components/List/List.json create mode 100644 dist/components/List/List.scss create mode 100644 dist/components/ListItem/ListItem.hbs create mode 100644 dist/components/ListItem/ListItem.json create mode 100644 dist/components/ListItem/ListItem.scss create mode 100644 dist/components/MessageBanner/MessageBanner.hbs create mode 100644 dist/components/MessageBanner/MessageBanner.json create mode 100644 dist/components/MessageBanner/MessageBanner.scss create mode 100644 dist/components/MessageBar/MessageBar.hbs create mode 100644 dist/components/MessageBar/MessageBar.json create mode 100644 dist/components/MessageBar/MessageBar.scss create mode 100644 dist/components/OrgChart/OrgChart.hbs create mode 100644 dist/components/OrgChart/OrgChart.json create mode 100644 dist/components/OrgChart/OrgChart.scss create mode 100644 dist/components/Overlay/Overlay.hbs create mode 100644 dist/components/Overlay/Overlay.json create mode 100644 dist/components/Overlay/Overlay.scss create mode 100644 dist/components/Panel/Panel.hbs create mode 100644 dist/components/Panel/Panel.json create mode 100644 dist/components/Panel/Panel.scss create mode 100644 dist/components/PanelHost/PanelHost.hbs create mode 100644 dist/components/PanelHost/PanelHost.json create mode 100644 dist/components/PanelHost/PanelHost.scss create mode 100644 dist/components/PeoplePicker/PeoplePicker.hbs create mode 100644 dist/components/PeoplePicker/PeoplePicker.json create mode 100644 dist/components/PeoplePicker/PeoplePicker.scss create mode 100644 dist/components/Persona/Persona.hbs create mode 100644 dist/components/Persona/Persona.json create mode 100644 dist/components/Persona/Persona.scss create mode 100644 dist/components/PersonaCard/PersonaCard.hbs create mode 100644 dist/components/PersonaCard/PersonaCard.json create mode 100644 dist/components/PersonaCard/PersonaCard.scss create mode 100644 dist/components/Pivot/Pivot.hbs create mode 100644 dist/components/Pivot/Pivot.json create mode 100644 dist/components/Pivot/Pivot.scss create mode 100644 dist/components/ProgressIndicator/ProgressIndicator.hbs create mode 100644 dist/components/ProgressIndicator/ProgressIndicator.json create mode 100644 dist/components/ProgressIndicator/ProgressIndicator.scss create mode 100644 dist/components/RadioButton/RadioButton.hbs create mode 100644 dist/components/RadioButton/RadioButton.json create mode 100644 dist/components/RadioButton/RadioButton.scss create mode 100644 dist/components/SearchBox/SearchBox.hbs create mode 100644 dist/components/SearchBox/SearchBox.json create mode 100644 dist/components/SearchBox/SearchBox.scss create mode 100644 dist/components/Spinner/Spinner.hbs create mode 100644 dist/components/Spinner/Spinner.json create mode 100644 dist/components/Spinner/Spinner.scss create mode 100644 dist/components/Table/Table.hbs create mode 100644 dist/components/Table/Table.json create mode 100644 dist/components/Table/Table.scss create mode 100644 dist/components/TextField/TextField.hbs create mode 100644 dist/components/TextField/TextField.json create mode 100644 dist/components/TextField/TextField.scss create mode 100644 dist/components/Toggle/Toggle.hbs create mode 100644 dist/components/Toggle/Toggle.json create mode 100644 dist/components/Toggle/Toggle.scss create mode 100644 dist/css/fabric.components.css create mode 100644 dist/css/fabric.components.min.css create mode 100644 dist/css/fabric.components.rtl.css create mode 100644 dist/css/fabric.components.rtl.min.css create mode 100644 dist/css/fabric.min.css create mode 100644 dist/css/fabric.rtl.min.css create mode 100644 dist/documentation/Components/Breadcrumb/Breadcrumb.html create mode 100644 dist/documentation/Components/Button/Button.html create mode 100644 dist/documentation/Components/Callout/Callout.html create mode 100644 dist/documentation/Components/CheckBox/CheckBox.html create mode 100644 dist/documentation/Components/ChoiceFieldGroup/ChoiceFieldGroup.html create mode 100644 dist/documentation/Components/CommandBar/CommandBar.html create mode 100644 dist/documentation/Components/CommandButton/CommandButton.html create mode 100644 dist/documentation/Components/ContextualMenu/ContextualMenu.html create mode 100644 dist/documentation/Components/DatePicker/DatePicker.html create mode 100644 dist/documentation/Components/Dialog/Dialog.html create mode 100644 dist/documentation/Components/Dropdown/Dropdown.html create mode 100644 dist/documentation/Components/FacePile/FacePile.html create mode 100644 dist/documentation/Components/Label/Label.html create mode 100644 dist/documentation/Components/Link/Link.html create mode 100644 dist/documentation/Components/List/List.html create mode 100644 dist/documentation/Components/ListItem/ListItem.html create mode 100644 dist/documentation/Components/MessageBanner/MessageBanner.html create mode 100644 dist/documentation/Components/MessageBar/MessageBar.html create mode 100644 dist/documentation/Components/OrgChart/OrgChart.html create mode 100644 dist/documentation/Components/Overlay/Overlay.html create mode 100644 dist/documentation/Components/Panel/Panel.html create mode 100644 dist/documentation/Components/PeoplePicker/PeoplePicker.Searching.png create mode 100644 dist/documentation/Components/PeoplePicker/PeoplePicker.html create mode 100644 dist/documentation/Components/Persona/Persona.html create mode 100644 dist/documentation/Components/PersonaCard/PersonaCard.html create mode 100644 dist/documentation/Components/Pivot/Pivot.html create mode 100644 dist/documentation/Components/ProgressIndicator/ProgressIndicator.html create mode 100644 dist/documentation/Components/SearchBox/SearchBox.html create mode 100644 dist/documentation/Components/Spinner/Spinner.html create mode 100644 dist/documentation/Components/Table/Table.html create mode 100644 dist/documentation/Components/TextField/TextField.html create mode 100644 dist/documentation/Components/Toggle/Toggle.html create mode 100644 dist/documentation/GetStarted/GetStarted.html create mode 100644 dist/documentation/Samples/Form/css/Form.css create mode 100644 dist/documentation/Samples/Form/css/Form.min.css create mode 100644 dist/documentation/Samples/Form/index.html create mode 100644 dist/documentation/Samples/Form/sass/Form.scss create mode 100644 dist/documentation/Samples/Languages/index.html create mode 100644 dist/documentation/Samples/VideoPortal/channel.html create mode 100644 dist/documentation/Samples/VideoPortal/channels.html create mode 100644 dist/documentation/Samples/VideoPortal/css/VideoPortal.css create mode 100644 dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css create mode 100644 dist/documentation/Samples/VideoPortal/index.html create mode 100644 dist/documentation/Samples/VideoPortal/player.html create mode 100644 dist/documentation/Samples/VideoPortal/sass/Base.scss create mode 100644 dist/documentation/Samples/VideoPortal/sass/ChannelPage.scss create mode 100644 dist/documentation/Samples/VideoPortal/sass/ChannelsPage.scss create mode 100644 dist/documentation/Samples/VideoPortal/sass/HomePage.scss create mode 100644 dist/documentation/Samples/VideoPortal/sass/NavBar.scss create mode 100644 dist/documentation/Samples/VideoPortal/sass/PlayerPage.scss create mode 100644 dist/documentation/Samples/VideoPortal/sass/SpotLight.scss create mode 100644 dist/documentation/Samples/VideoPortal/sass/Utilities.scss create mode 100644 dist/documentation/Samples/VideoPortal/sass/VideoListItem.scss create mode 100644 dist/documentation/Samples/VideoPortal/sass/VideoPortal.scss create mode 100644 dist/documentation/images/favicon.ico create mode 100644 dist/documentation/images/home-background.svg create mode 100644 dist/documentation/images/logo-js-white.svg create mode 100644 dist/documentation/images/logo-microsoft.png create mode 100644 dist/documentation/images/logo-office-dev.svg create mode 100644 dist/documentation/index.html create mode 100644 dist/documentation/styles.css create mode 100644 dist/documentation/styles.min.css create mode 100644 dist/js/fabric.d.ts create mode 100644 dist/js/fabric.js create mode 100644 dist/js/fabric.min.js create mode 100644 dist/lib/PickaDate.js create mode 100644 dist/lib/jquery.js create mode 100644 dist/lib/scrollTo.js diff --git a/.gitignore b/.gitignore index cb742fce..d5d9fff4 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 00000000..df885620 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.hbs @@ -0,0 +1,22 @@ + + +
+
+
+
+
    +
    + +
    + +
    \ No newline at end of file diff --git a/dist/components/Breadcrumb/Breadcrumb.json b/dist/components/Breadcrumb/Breadcrumb.json new file mode 100644 index 00000000..42d5f7c1 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.json @@ -0,0 +1,6 @@ +{ + "name": "Breadcrumb", + "dependencies": [ + "ContextualMenu" + ] +} diff --git a/dist/components/Breadcrumb/Breadcrumb.scss b/dist/components/Breadcrumb/Breadcrumb.scss new file mode 100644 index 00000000..96b9653e --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.scss @@ -0,0 +1,178 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Breadcrumb styles + + +.ms-Breadcrumb { + @include ms-baseFont; + margin: 23px 0 1px; + + &.is-overflow { + .ms-Breadcrumb-overflow { + display: inline-block; + margin-right: -4px; + } + } +} + +.ms-Breadcrumb-chevron { + font-size: $ms-font-size-s; + color: $ms-color-neutralSecondary; + vertical-align: top; + margin: 13px 4px; + line-height: 1; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; + + .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; + + &:last-of-type { + .ms-Breadcrumb-chevron { + display: none; + } + } + } +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; + + .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: $ms-color-themePrimary; + padding: 8px; + cursor: pointer; + vertical-align: top; + } +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; + + &.is-open { + display: block; + top: 36px; + left: 0; + @include drop-shadow; + background-color: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle); + } + + &::before { + position: absolute; + @include drop-shadow; + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + transform: rotate(45deg); + background-color: $ms-color-white; + } + + .ms-ContextualMenu { + border: 0; + box-shadow: none; + position: relative; + width: 190px; + + &.is-open { + margin-bottom: 0; + } + } +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; + + &:hover { + background-color: $ms-color-neutralLighter; + cursor: pointer; + } + + &:focus { + outline: $ms-color-neutralSecondaryAlt solid 1px; + color: $ms-color-black; + } + + &:active { + outline: transparent; + background-color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-Breadcrumb-itemLink { + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; +} + + +@media screen and (max-width: $ms-screen-md-max) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-l; + } + + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 9px 3px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 2px 0; + } + } +} + +@media screen and (max-width: $ms-screen-sm-max) { + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-m; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } + } +} diff --git a/dist/components/Button/Button.hbs b/dist/components/Button/Button.hbs new file mode 100644 index 00000000..b1804dde --- /dev/null +++ b/dist/components/Button/Button.hbs @@ -0,0 +1,20 @@ + + +<{{props.tag}} class="ms-Button +{{~#if props.customClasses}} {{props.customClasses}}{{/if}} +{{~#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 00000000..2026b0a2 --- /dev/null +++ b/dist/components/Button/Button.json @@ -0,0 +1,7 @@ +{ + "name": "Button", + "props": { + "label": "Create Account", + "tag": "button" + } +} diff --git a/dist/components/Button/Button.scss b/dist/components/Button/Button.scss new file mode 100644 index 00000000..c2d1d933 --- /dev/null +++ b/dist/components/Button/Button.scss @@ -0,0 +1,303 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Button styles + + +.ms-Button { + @include ms-u-normalize; + @include ms-baseFont; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + background-color: $ms-color-neutralLighter; + border: 1px solid $ms-color-neutralLighter; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; + + &.is-hidden { + display: none; + } + + &:hover { + background-color: $ms-color-neutralLight; + border-color: $ms-color-neutralLight; + + .ms-Button-label { + color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackSelected; + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteSelected; + border-color: $ms-color-contrastWhiteSelected; + } + } + + &:focus { + background-color: $ms-color-neutralLight; + border-color: $ms-color-themePrimary; + outline: 1px solid transparent; + + .ms-Button-label { + color: $ms-color-black; + } + } + + &:active { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + .ms-Button-label { + color: $ms-color-white; + } + } + + &:disabled, + &.is-disabled { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + cursor: default; + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + + &:hover, + &:focus { + outline: 0; + } + } +} + +.ms-Button-label { + color: $ms-color-neutralPrimary; + font-weight: $ms-font-weight-semibold; + font-size: $ms-font-size-m; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +//== Modifier: Primary action button +// +.ms-Button.ms-Button--primary { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + .ms-Button-label { + color: $ms-color-white; + } + + &:hover { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDark; + } + + &:focus { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDarker; + } + + &:active { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + } + + &:disabled, + &.is-disabled { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + +//== Modifier: Small button +// +.ms-Button.ms-Button--small { + min-width: 60px; + min-height: 24px; + height: auto; + padding-top: 0; + padding-bottom: 4px; + + .ms-Button-label { + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-s; + } +} + +//== Modifier: Hero button +// +.ms-Button.ms-Button--hero { + align-items: center; + background-color: transparent; + border: 0; + padding: 0; + position: relative; + + .ms-Button-icon { + color: $ms-color-themePrimary; + display: inline-block; + font-size: $ms-font-size-s; + margin-right: 4px; + padding-top: 5px; + text-align: center; + + .ms-Icon { + border-radius: 18px; + border: 1px solid $ms-color-themePrimary; + font-size: $ms-font-size-s; + height: 18px; + line-height: 18px; + width: 18px; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + font-size: $ms-font-size-xl; + font-weight: $ms-font-weight-light; + position: relative; + text-decoration: none; + vertical-align: top; + } + + &:hover, + &:focus { + .ms-Button-icon { + color: $ms-color-themeDark; + + .ms-Icon { + border: 1px solid $ms-color-themeDark; + } + } + + .ms-Button-label { + color: $ms-color-themeDarker; + } + } + + &:active { + .ms-Button-icon { + color: $ms-color-themePrimary; + + .ms-Icon { + border: 1px solid $ms-color-themePrimary; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-icon { + color: $ms-color-neutralTertiaryAlt; + + .ms-Icon { + border: 1px solid $ms-color-neutralTertiaryAlt; + } + } + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Compound button +// +.ms-Button.ms-Button--compound { + display: block; + height: auto; + max-width: 280px; + min-height: 72px; + padding: 20px; + + .ms-Button-label { + display: block; + font-weight: $ms-font-weight-semibold; + position: relative; + text-align: left; + margin-top: -5px; + } + + .ms-Button-description { + color: $ms-color-neutralSecondary; + display: block; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-s; + position: relative; + text-align: left; + top: 3px; + } + + &:hover { + .ms-Button-description { + color: $ms-color-neutralDark; + } + } + + &:focus { + border-color: $ms-color-themePrimary; + background-color: $ms-color-neutralLighter; + + .ms-Button-label { + color: $ms-color-neutralPrimary; + } + + .ms-Button-description { + color: $ms-color-neutralSecondary; + } + } + + &:active { + background-color: $ms-color-themePrimary; + + .ms-Button-description, + .ms-Button-label { + color: $ms-color-white; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-label, + .ms-Button-description { + color: $ms-color-neutralTertiary; + } + + &:focus, + &:active { + border-color: $ms-color-neutralLighter; + background-color: $ms-color-neutralLighter; + + .ms-Button-label, + .ms-Button-description { + color: $ms-color-neutralTertiary; + } + } + } +} diff --git a/dist/components/Callout/Callout.hbs b/dist/components/Callout/Callout.hbs new file mode 100644 index 00000000..6aea9634 --- /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}} +
    +
    +
    +
    \ No newline at end of file diff --git a/dist/components/Callout/Callout.json b/dist/components/Callout/Callout.json new file mode 100644 index 00000000..50cb4193 --- /dev/null +++ b/dist/components/Callout/Callout.json @@ -0,0 +1,10 @@ +{ + "name": "Callout", + "dependencies": [ + "Button", + "Label", + "Link", + "ContextualHost", + "CommandButton" + ] +} diff --git a/dist/components/Callout/Callout.scss b/dist/components/Callout/Callout.scss new file mode 100644 index 00000000..4282b838 --- /dev/null +++ b/dist/components/Callout/Callout.scss @@ -0,0 +1,160 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Callout styles + +$ms-Callout-commandButtonHeight: 27px; + +.ms-Callout { + @include ms-baseFont; + width: 288px; + + &.is-hidden { + display: none; + } +} + +.ms-Callout-header { + z-index: ($ms-zIndex-Callout + $ms-zIndex-middle); + padding-top: 24px; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-title { + margin: 0; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xl; +} + +.ms-Callout-subText { + margin: 0; + font-weight: $ms-font-weight-semilight; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: $ms-color-neutralSecondary; + z-index: 110; +} + +.ms-Callout-link { + font-size: $ms-font-size-m; +} + +.ms-Callout-inner { + height: 100%; + padding-top: 0; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; + + .ms-CommandButton.ms-CommandButton--inline { + height: $ms-Callout-commandButtonHeight; + line-height: $ms-Callout-commandButtonHeight; + + .ms-CommandButton-button { + height: $ms-Callout-commandButtonHeight; + line-height: $ms-Callout-commandButtonHeight; + } + + .ms-CommandButton-label { + line-height: $ms-Callout-commandButtonHeight; + } + + .ms-CommandButton-icon { + line-height: $ms-Callout-commandButtonHeight; + } + + &:hover .ms-Button, + &:focus .ms-Button { + color: $ms-color-themePrimary; + } + } + + .ms-Callout-button { + margin-right: 12px; + } +} + +//= Modifier: OOBE (Out of box experience) callout +// +.ms-Callout.ms-Callout--OOBE { + + .ms-Callout-header { + padding: 28px 24px; + background-color: $ms-color-themePrimary; + } + + .ms-Callout-title { + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xxl; + color: $ms-color-white; + } + + .ms-Callout-inner { + padding-top: 20px; + } + + .ms-Callout-subText { + font-size: $ms-font-size-m; + } +} + + +//= Modifier: ActionText callout +// +.ms-Callout.ms-Callout--actionText { + .ms-Callout-actions { + border-top: 1px solid $ms-color-neutralLight; + padding-top: 12px; + } + + .ms-Callout-inner { + padding-bottom: 12px; + } +} + + +//= Modifier: Peek callout +// +.ms-Callout.ms-Callout--peek { + .ms-Callout-header { + padding-bottom: 0; + } + + .ms-Callout-title { + font-size: $ms-font-size-m; + } + + .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; + } +} diff --git a/dist/components/CheckBox/CheckBox.hbs b/dist/components/CheckBox/CheckBox.hbs new file mode 100644 index 00000000..a530e537 --- /dev/null +++ b/dist/components/CheckBox/CheckBox.hbs @@ -0,0 +1,16 @@ + + +
    + + +
    \ 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 00000000..ac890ff0 --- /dev/null +++ b/dist/components/CheckBox/CheckBox.json @@ -0,0 +1,6 @@ +{ + "name": "CheckBox", + "dependencies": [ + "Label" + ] +} diff --git a/dist/components/CheckBox/CheckBox.scss b/dist/components/CheckBox/CheckBox.scss new file mode 100644 index 00000000..1c032c00 --- /dev/null +++ b/dist/components/CheckBox/CheckBox.scss @@ -0,0 +1,175 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// CheckBox styles + +$ms-checkbox-field-size: 20px; +$ms-checkbox-transition-duration: 200ms; +$ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1); + + +.ms-CheckBox { + box-sizing: border-box; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + min-height: 36px; + position: relative; + + .ms-Label { + font-size: $ms-font-size-m; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; + } +} + +// The hidden input +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +// The checkbox square container +.ms-CheckBox-field::before { + content: ''; + display: inline-block; + border: 2px solid $ms-color-neutralTertiary; + width: $ms-checkbox-field-size; + height: $ms-checkbox-field-size; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: $ms-checkbox-transition-duration; + transition-timing-function: $ms-checkbox-transition-timing; +} + +// The check mark icon +.ms-CheckBox-field::after { + @include ms-Icon--CheckMark; + font-family: 'FabricMDL2Icons'; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: $ms-font-size-s-plus; + top: 0; + color: $ms-color-white; + line-height: $ms-checkbox-field-size; + width: $ms-checkbox-field-size; + text-align: center; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-white; + } +} + +// The checkbox field +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; + + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } + + //== State: A disabled checkbox + // + &.is-disabled { + cursor: default; + + &::before { + background-color: $ms-color-neutralTertiaryAlt; + border-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + } + } + + .ms-Label { + color: $ms-color-neutralTertiary; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } + } + } + + //== State: A checkbox in focus + // + &.in-focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + &.is-disabled::before { + border-color: $ms-color-neutralTertiaryAlt; + } + + &.is-checked::before { + border-color: $ms-color-themeDarkAlt; + } + } +} + +//== State: When the checkbox is checked +// +.ms-CheckBox-field.is-checked { + &::before { + border: 10px solid $ms-color-themePrimary; + background-color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &::after { + display: block; + } + + &:hover, + &:focus { + &::before { + border-color: $ms-color-themeDarkAlt; + } + } +} diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs new file mode 100644 index 00000000..6d8fc839 --- /dev/null +++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs @@ -0,0 +1,15 @@ + + +
    +
    + +
    + +
    \ No newline at end of file diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json new file mode 100644 index 00000000..710cfa8b --- /dev/null +++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json @@ -0,0 +1,7 @@ +{ + "name": "ChoiceFieldGroup", + "dependencies": [ + "Label", + "CheckBox" + ] +} diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss new file mode 100644 index 00000000..3a80d071 --- /dev/null +++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss @@ -0,0 +1,17 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +//== Component: Choicefield group +// +// Choice field groups contain multiple radio buttons or checkboxes +.ms-ChoiceFieldGroup { + @include ms-baseFont; + margin-bottom: 4px; + + .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; + list-style: none; + } +} diff --git a/dist/components/CommandBar/CommandBar.hbs b/dist/components/CommandBar/CommandBar.hbs new file mode 100644 index 00000000..b915792b --- /dev/null +++ b/dist/components/CommandBar/CommandBar.hbs @@ -0,0 +1,27 @@ + + +
    + {{#if props.sideCommands}} +
    + {{#each props.sideCommands}} + {{renderPartial component props}} + {{/each}} +
    + {{/if}} +
    + {{#if props.transientComponent}} + {{renderPartial props.transientComponent.component props.transientComponent.props}} + {{/if}} + {{#each props.commands}} + {{renderPartial component props}} + {{/each}} + {{#if props.overflow}} + + {{renderPartial props.overflow.component props.overflow.props}} + + {{/if}} +
    +
    \ No newline at end of file diff --git a/dist/components/CommandBar/CommandBar.json b/dist/components/CommandBar/CommandBar.json new file mode 100644 index 00000000..be5ece1f --- /dev/null +++ b/dist/components/CommandBar/CommandBar.json @@ -0,0 +1,11 @@ +{ + "name": "CommandBar", + "dependencies": [ + "ContextualMenu", + "Button", + "Label", + "SearchBox", + "CommandButton", + "ContextualHost" + ] +} diff --git a/dist/components/CommandBar/CommandBar.scss b/dist/components/CommandBar/CommandBar.scss new file mode 100644 index 00000000..a2daddc4 --- /dev/null +++ b/dist/components/CommandBar/CommandBar.scss @@ -0,0 +1,141 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Command Bar styles + +$CommandBar-height: 40px; +$CommandBar-md-height: 44px; +$CommandBar-iconSize: 18px; +$CommandBar-sideAreaWidthsm: 128px; +$SearchBox-width: 220px; +$CommandBarItem-height: $CommandBar-height; +$red: #FF0000; + +@mixin highContrastBorder($color) { + border-left: 1px solid $color; + border-right: 1px solid $color; +} + +.ms-CommandBar { + @include ms-baseFont; + background-color: $ms-color-neutralLighter; + height: $CommandBar-height; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; + + &:focus { + outline: none; + } + + .ms-CommandButton--actionButton { + border-right: 1px solid $ms-color-neutralLight; + } + + //== CommandBar -> ms-Button specific changes + // + .ms-Button { + height: 100%; + + &.ms-Button--noLabel { + .ms-Button-icon { + padding-right: 0; + } + } + + &.is-hidden { + display: none; + } + } + + .ms-SearchBox, + .ms-SearchBox-field, + .ms-SearchBox-label { + height: 100%; + } + + .ms-SearchBox { + display: inline-block; + vertical-align: top; + transition: margin-right $ms-duration2; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: $SearchBox-width; + + @media only screen and (max-width: $ms-screen-md-max) { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: $ms-zIndex-front; + } + } + + .ms-CommandBar-overflowButton { + .ms-CommandButton-button { + font-size: 18px; + padding: 0 11px; + } + } + + // Search is collapsed unless activated and its only + // collapsed < L break points + + @media only screen and (min-width: $ms-screen-xl-min) { + .ms-SearchBox { + margin-right: 24px; + } + } + + @media only screen and (max-width: $ms-screen-md-max) { + height: $CommandBar-md-height; + } + + @media only screen and (min-width: $ms-screen-lg-min) { + + &.search-expanded { + .ms-SearchBox { + margin-right: 8px; + } + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + transition: none; + } + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 4px; + height: 100%; + + .ms-Button:last-child { + margin-right: 0; + } + + @media only screen and (min-width: $ms-screen-lg-min) { + min-width: $CommandBar-sideAreaWidthsm; + } + + @media only screen and (min-width: $ms-screen-xl-min) { + padding-right: 20px; + } +} diff --git a/dist/components/CommandButton/CommandButton.hbs b/dist/components/CommandButton/CommandButton.hbs new file mode 100644 index 00000000..2c213b33 --- /dev/null +++ b/dist/components/CommandButton/CommandButton.hbs @@ -0,0 +1,27 @@ + + +
    + <{{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 00000000..d4d92167 --- /dev/null +++ b/dist/components/CommandButton/CommandButton.json @@ -0,0 +1,13 @@ +{ + "name": "CommandButton", + "dependencies": [ + "ContextualMenu", + "ContextualHost" + ], + "props": { + "label": "Command", + "icon": "circleFill", + "tag": "button", + "iconColor": "themePrimary" + } +} diff --git a/dist/components/CommandButton/CommandButton.scss b/dist/components/CommandButton/CommandButton.scss new file mode 100644 index 00000000..37a00383 --- /dev/null +++ b/dist/components/CommandButton/CommandButton.scss @@ -0,0 +1,296 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Button styles + +$CommandButton-height: 40px; +$CommandButton-md-height: 44px; +$CommandButton-padding: 8px; +$CommandButtonIcon-size: 16px; +$CommandButtonIcon-md-size: 20px; + +.ms-CommandButton { + @include ms-baseFont; + display: inline-block; + position: relative; + vertical-align: top; + + &.is-hidden { + display: none; + } + + &:disabled, + &.is-disabled { + .ms-CommandButton-button { + cursor: default; + + &:hover { + background-color: $ms-color-themeLighterAlt; + } + + .ms-CommandButton-label { + color: $ms-color-neutralTertiary; + } + + .ms-CommandButton-icon { + color: $ms-color-neutralTertiary; + } + } + } + + .ms-ContextualMenu { + display: none; + } +} + +//== Mixins: Base button, focus, and icon alignments +// +@mixin ms-CommandButton-iconBase { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +@mixin ms-CommandBar-focusRectangle { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid $ms-color-neutralPrimary; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +@mixin ms-CommandBarButton-buttonBase { + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + // background-color: $ms-color-themeLighterAlt; + // border: 1px solid $ms-color-themeLighterAlt; + cursor: pointer; + display: inline-block; + height: $CommandButton-height; + line-height: $CommandButton-height; + outline: 1px solid transparent; + padding: 0 $CommandButton-padding; + position: relative; + vertical-align: top; + background: transparent; + + &:hover { + background-color: $ms-color-neutralLight; + + .ms-CommandButton-label { + color: $ms-color-neutralDark; + } + } + + &:active { + background-color: $ms-color-neutralLight; + } + + &:focus::before { + @include ms-CommandBar-focusRectangle; + } + + &:focus { + outline: 0; + } + + @media only screen and (max-width: $ms-screen-md-max) { + height: $CommandButton-md-height; + + .ms-CommandButton-icon { + font-size: $CommandButtonIcon-md-size; + } + + .ms-CommandButton-label { + line-height: $CommandButton-md-height; + } + } +} + +.ms-CommandButton-button, +.ms-CommandButton-splitIcon { + @include ms-CommandBarButton-buttonBase; +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +// Add space between adjacent command buttons. +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; + + @media only screen and (max-width: $ms-screen-md-max) { + margin-left: 4px; + } +} + +.ms-CommandButton-icon { + display: inline-block; + margin-right: $CommandButton-padding; + position: relative; + font-size: $CommandButtonIcon-size; + min-width: 16px; + height: 100%; + + .ms-Icon { + @include ms-CommandButton-iconBase; + } +} + +.ms-CommandButton-label { + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + color: $ms-color-neutralPrimary; + line-height: $CommandButton-height; + height: 100%; + display: inline-block; + vertical-align: top; + + &:hover { + color: $ms-color-neutralDark; + } +} + +.ms-CommandButton-dropdownIcon, +.ms-CommandButton-splitIcon { + display: inline-block; + position: relative; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-semilight; + min-width: 12px; + height: 100%; + vertical-align: top; + margin-left: 8px; + + .ms-Icon { + line-height: normal; + padding-top: $CommandButton-padding * 2; + } + + &:focus::before { + @include ms-CommandBar-focusRectangle; + } + + @media only screen and (max-width: $ms-screen-md-max) { + display: none; + } +} + +.ms-CommandButton-splitIcon { + margin-left: -2px; + width: 27px; + border: 0; + + .ms-Icon { + margin-left: -1px; + position: relative; + padding-top: 16px; + + &::after { + position: absolute; + content: ' '; + width: 1px; + height: 16px; + top: 12px; + left: -8px; + border-left: 1px solid $ms-color-neutralTertiaryAlt; + } + } +} + +//= Modifier: No Label modifier +// +.ms-CommandButton.ms-CommandButton--noLabel { + .ms-CommandButton-icon { + margin-right: 0; + } + + .ms-CommandButton-label { + display: none; + } + + .ms-CommandButton-button { + padding: 0 12px; + } +} + +//= Modifier: Inline modifier +// +.ms-CommandButton.ms-CommandButton--inline { + .ms-CommandButton-button { + background: none; + } +} + +//= Modifier: Action Button modifier +// +.ms-CommandButton.ms-CommandButton--actionButton { + .ms-CommandButton-button { + width: 50px; + height: $CommandButton-height; + } + + .ms-CommandButton-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + padding-right: 0; + } +} + +@mixin ms-CommandButton-pivotLine { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: $ms-color-themePrimary; + bottom: 0; + z-index: $ms-zIndex-middle; +} + +//= Modifier: Pivot Button modifier +// +.ms-CommandButton.ms-CommandButton--pivot { + + &.is-active::before { + @include ms-CommandButton-pivotLine; + } + + &:hover { + &::before { + @include ms-CommandButton-pivotLine; + } + } +} + +.ms-CommandButton.ms-CommandButton--textOnly, +.ms-CommandButton.ms-CommandButton--pivot { + + .ms-CommandButton-label { + display: inline-block; + + @media only screen and (max-width: $ms-screen-sm-max) { + font-size: 16px; + } + } +} diff --git a/dist/components/ContextualHost/ContextualHost.hbs b/dist/components/ContextualHost/ContextualHost.hbs new file mode 100644 index 00000000..44336cec --- /dev/null +++ b/dist/components/ContextualHost/ContextualHost.hbs @@ -0,0 +1,15 @@ + + + +
    +
    + {{#if @partial-block}} {{> @partial-block }} {{/if}} +
    +
    +
    \ No newline at end of file diff --git a/dist/components/ContextualHost/ContextualHost.json b/dist/components/ContextualHost/ContextualHost.json new file mode 100644 index 00000000..eadbe3b7 --- /dev/null +++ b/dist/components/ContextualHost/ContextualHost.json @@ -0,0 +1,3 @@ +{ + "name": "ContextualHost" +} diff --git a/dist/components/ContextualHost/ContextualHost.scss b/dist/components/ContextualHost/ContextualHost.scss new file mode 100644 index 00000000..93e66d6c --- /dev/null +++ b/dist/components/ContextualHost/ContextualHost.scss @@ -0,0 +1,145 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +.ms-ContextualHost { + @include ms-baseFont; + z-index: $ms-zIndex-front; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + background-color: $ms-color-white; + @include drop-shadow; + + &.is-positioned { + position: absolute; + margin: 0; + } + + &.is-open { + display: inline-block; + } +} + +// Mixin for arrow size and color +@mixin arrowBorders($ms-color-top, $ms-color-right, $ms-color-bottom, $ms-color-left) { + border-top: 10px solid $ms-color-top; + border-right: 10px solid $ms-color-right; + border-bottom: 10px solid $ms-color-bottom; + border-left: 10px solid $ms-color-left; +} + +.ms-ContextualHost-beak { + box-shadow: 0 0 15px -5px $ms-color-neutralPrimaryAlt; + position: absolute; + width: 28px; + height: 28px; + background: $ms-color-white; + border: 1px solid $ms-color-neutralLight; + box-sizing: border-box; + top: -6px; + display: none; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + z-index: $ms-zIndex-back; + outline: 1px solid transparent; +} + +//= Modifier: ContextualHost with left and right arrows +// +.ms-ContextualHost.ms-ContextualHost--arrowLeft, +.ms-ContextualHost.ms-ContextualHost--arrowRight { + .ms-ContextualHost-beak { + top: 40px; + display: none; // Hide left and right arrows on sm screens + } +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft { + .ms-ContextualHost-beak { + left: -10px; + } +} + +.ms-ContextualHost.ms-ContextualHost--arrowRight { + .ms-ContextualHost-beak { + right: -10px; + } +} + +.ms-ContextualHost.ms-ContextualHost--arrowTop { + .ms-ContextualHost-beak { + display: block; + top: -10px; + } +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom { + .ms-ContextualHost-beak { + display: block; + bottom: -10px; + } +} + +// The actual ContextualHost element +.ms-ContextualHost-main { + position: relative; + background-color: $ms-color-white; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: $ms-zIndex-middle; + min-height: 10px; +} + +.ms-ContextualHost-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: $ms-font-size-m; + color: $ms-color-neutralSecondary; + z-index: $ms-zIndex-front; +} + +//= Modifier: Close button ContextualHost +// +.ms-ContextualHost.ms-ContextualHost--close { + .ms-ContextualHost-title { + margin-right: 20px; // Avoid overlap with close button + } +} + +//= Modifier: Close button ContextualHost +// + +.ms-ContextualHost.ms-ContextualHost--primaryArrow { + .ms-ContextualHost-beak { + background-color: $ms-color-themePrimary; + } +} + +@media (min-width: $ms-screen-md-min) { + // Make width larger and remove centering on md+ screens + .ms-ContextualHost { + margin: 16px; + + &.is-positioned { + margin: 0; + } + } + + // Show arrows right and left + .ms-ContextualHost.ms-ContextualHost--arrowRight, + .ms-ContextualHost.ms-ContextualHost--arrowLeft { + .ms-ContextualHost-beak { + display: block; + } + } +} diff --git a/dist/components/ContextualMenu/ContextualMenu.hbs b/dist/components/ContextualMenu/ContextualMenu.hbs new file mode 100644 index 00000000..24951515 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.hbs @@ -0,0 +1,28 @@ + + + \ No newline at end of file diff --git a/dist/components/ContextualMenu/ContextualMenu.json b/dist/components/ContextualMenu/ContextualMenu.json new file mode 100644 index 00000000..e77900f9 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.json @@ -0,0 +1,6 @@ +{ + "name": "ContextualMenu", + "dependencies": [ + "ContextualHost" + ] +} diff --git a/dist/components/ContextualMenu/ContextualMenu.scss b/dist/components/ContextualMenu/ContextualMenu.scss new file mode 100644 index 00000000..064e371c --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.scss @@ -0,0 +1,211 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Contextual Menu styles + +.ms-ContextualMenu { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + display: block; + min-width: 180px; + max-width: 220px; + list-style-type: none; + position: relative; + background-color: $ms-color-white; + + &.is-hidden { + display: none; + } +} + +.ms-ContextualMenu-item { + position: relative; +} + +.ms-ContextualMenu-link { + @include ms-u-borderBox; + text-decoration: none; + color: $ms-color-neutralPrimary; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 36px; + overflow: hidden; + line-height: 34px; + padding: 0 16px 0 25px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; + + &:hover, + &:active, + &:focus { + background-color: $ms-color-neutralLighter; + color: $ms-color-neutralDark; + + .ms-ContextualMenu-subMenuIcon { + color: $ms-color-neutralDark; + } + } + + &:focus { + outline: transparent; + border: 1px solid $ms-color-neutralSecondary; + } + + &.is-selected { + background-color: $ms-color-neutralQuaternaryAlt; + color: $ms-color-black; + font-weight: $ms-font-weight-semibold; + + ~.ms-ContextualMenu-subMenuIcon { + color: $ms-color-black; + } + + &:hover { + background-color: $ms-color-neutralQuaternary; + } + } + + &.is-disabled { + color: $ms-color-neutralTertiary; + background-color: $ms-color-white; + pointer-events: none; + + &:active, + &:focus { + border-color: $ms-color-white; + } + + .ms-Icon { + color: $ms-color-neutralTertiary; + pointer-events: none; + cursor: default; + } + } +} + +// Modifier: Menu item Dividers +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + background-color: $ms-color-neutralLight; + position: relative; +} + +// Modifier: Menu item Headers +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: $ms-color-themePrimary; + font-size: $ms-font-size-s; + text-transform: uppercase; + height: 36px; + line-height: 36px; + padding: 0 18px; +} + +// Modifier: Contextual menu with submenu +.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; // Move the submenu to the left of the menu item that triggered it +} + +// Right chevron. +// Note: The .ms-ContextualMenu-caretRight class has been deprecated. +// Please use .ms-ContextualMenu-subMenuIcon. +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: $ms-color-neutralPrimary; + font-size: 8px; + font-weight: 600; + width: 24px; + height: 36px; + line-height: 36px; + position: absolute; + text-align: center; + top: 0; + right: 0; + z-index: 1; + pointer-events: none; +} + +//== Modifier: Multi-select menu +// +.ms-ContextualMenu.ms-ContextualMenu--multiselect { + + // Align the header with the items + .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 16px 0 26px; + } + + .ms-ContextualMenu-link { + + // Multi-select checkmark + &.is-selected { + background-color: $ms-color-white; + font-weight: $ms-font-weight-semibold; + color: $ms-color-neutralPrimary; + + // Checkmark + &::after { + @include ms-Icon; + color: $ms-color-neutralPrimary; + content: '\E73E'; + font-size: $ms-icon-size-xs; + font-weight: 800; + height: 36px; + line-height: 36px; + position: absolute; + left: 7px; + } + + &:hover, + &:focus { + color: $ms-color-neutralDark; + background-color: $ms-color-neutralLighter; + + &::after { + color: $ms-color-neutralDark; + } + } + + &:active { + color: $ms-color-black; + background-color: $ms-color-neutralQuaternary; + + &::after { + color: $ms-color-black; + } + } + } + } +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks { + .ms-ContextualMenu-link { + padding-left: 40px; + } + + .ms-Icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + text-align: center; + } +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons { + width: 220px; +} diff --git a/dist/components/DatePicker/DatePicker.hbs b/dist/components/DatePicker/DatePicker.hbs new file mode 100644 index 00000000..c8e29e85 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.hbs @@ -0,0 +1,49 @@ + + + + +
    +
    + + + +
    +
    + + +
    +
    + Go to today +
    +
    +
    + + +
    +
    +
    +
    + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
    +
    +
    +
    + + +
    +
    +
    diff --git a/dist/components/DatePicker/DatePicker.json b/dist/components/DatePicker/DatePicker.json new file mode 100644 index 00000000..86873e2f --- /dev/null +++ b/dist/components/DatePicker/DatePicker.json @@ -0,0 +1,3 @@ +{ + "name": "DatePicker" +} diff --git a/dist/components/DatePicker/DatePicker.scss b/dist/components/DatePicker/DatePicker.scss new file mode 100644 index 00000000..e78b5665 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.scss @@ -0,0 +1,530 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Date Picker styles + + +.ms-DatePicker { + @include ms-baseFont; + @include ms-u-normalize; + margin-bottom: 17px; + z-index: $ms-zIndex-DatePicker; + + .ms-TextField { position: relative; } +} + +// Base wrapper for the date picker. +.ms-DatePicker-picker { + color: $ms-color-black; + font-size: $ms-font-size-m; + position: relative; + text-align: left; + z-index: $ms-zIndex-back; +} + +// Insert a calendar icon over the date field. +.ms-DatePicker-event { + color: $ms-color-neutralSecondary; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: $ms-zIndex-middle; +} + +// The holder is the only "scrollable" top-level container element. +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + @include ms-u-borderBox; + background: $ms-color-white; + position: absolute; + min-width: 300px; + display: none; +} + + +// When the picker opens, reveal the content. +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + @include ms-u-slideDownIn10; + @include ms-u-borderBox; + @include drop-shadow; + border: 1px solid $ms-color-neutralLight; + display: block; +} + +// When a picker opens, always open it in front of other closed pickers +.ms-DatePicker-picker--opened { + position: relative; + z-index: $ms-zIndex-front; +} + + +// The frame and wrap work together to ensure that +// clicks within the picker don’t reach the holder. +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + + +// Wrapper containing the calendar view to pick a specific date. +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + + +// The header containing the month and year. +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + + +// The month and year labels. +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-weight: $ms-font-weight-light; + font-size: 21px; + color: $ms-color-themePrimary; + margin-top: -1px; + + &:hover { + color: $ms-color-themeDark; + cursor: pointer; + } +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + + +// The calendar table of dates. +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; + + td { + margin: 0; + padding: 0; + + &:hover { outline: 1px solid transparent; } + } +} + + +// The days on the calendar. +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-weight: $ms-font-weight-regular; + font-size: 15px; + color: $ms-color-neutralPrimary; +} + + +// Today. +.ms-DatePicker-day--today { + position: relative; + background-color: $ms-color-themeLight; +} + + +// Disabled day. +.ms-DatePicker-day--disabled::before { + border-top-color: $ms-color-neutralTertiary; +} + + +// Out of focus days. +.ms-DatePicker-day--outfocus { + color: $ms-color-neutralTertiary; + font-weight: $ms-font-weight-regular; +} + + +// Hovered date picker items. +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: $ms-color-black; + background: $ms-color-neutralLight; +} + + +// Highlighted and hovered/focused dates. +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: $ms-color-white; + background: $ms-color-themePrimary; +} + + +// Disabled and highlighted dates. +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: $ms-color-neutralTertiary; +} + + +// Month and year pickers, hidden on small screens by default. +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + + +// Month and year previous/next components. +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + font-size: 21px; + color: $ms-color-neutralSecondary; + position: relative; + top: 3px; + + &:hover { + color: $ms-color-neutralDark; + cursor: pointer; + outline: 1px solid transparent; + } +} + +// Without modifying the Pickadate JS, this transparent +// button is necessary to toggle the month view. +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0; + position: absolute; + top: 0; + width: 140px; + z-index: $ms-zIndex-middle; + cursor: pointer; +} + + +// Text showing the currently-selected year. +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: $ms-font-weight-semilight; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +// The current year is blue and actionable. +.ms-DatePicker-currentYear { + color: $ms-color-themePrimary; + + &:hover { + color: $ms-color-themeDark; + cursor: pointer; + } +} + + +// A grid of month or year options, which pushes them over +// five pixels for horizontal centering and moves them down. +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +// Button to select a different month. +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: $ms-color-neutralLighter; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: $ms-font-weight-regular; + font-size: 13px; + color: $ms-color-neutralPrimary; + text-align: center; + + &:hover { + background-color: $ms-color-neutralTertiaryAlt; + outline: 1px solid transparent; + } + + &.is-highlighted { + background-color: $ms-color-neutralPrimary; + color: $ms-color-white; + } +} + + +// Button to navigate to the current date. +.ms-DatePicker-goToday { + bottom: 9px; + color: $ms-color-themePrimary; + cursor: pointer; + font-weight: $ms-font-weight-semilight; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; + + &:hover { + outline: 1px solid transparent; + } +} + +// State: The picker is showing the year components. +.ms-DatePicker.is-pickingYears { + + // Hide the day picking components. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: none; + } + + // Hide the month picking components. + .ms-DatePicker-monthPicker { + display: none; + } + + // Show the year picking components. + .ms-DatePicker-yearPicker { + display: block; + } + +} + +// 460px and up. +// +// On screens that can fit it, we show the month picker next to the day picker at all times. +@media (min-width: 460px) { + + .ms-DatePicker-holder { + width: 440px; + } + + + // Update header text styles. + .ms-DatePicker-month, + .ms-DatePicker-year { + font-weight: $ms-font-weight-semilight; + font-size: 17px; + color: $ms-color-neutralPrimary; + + &:hover { + color: $ms-color-neutralPrimary; + cursor: default; + } + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + // Contains the calendar view for picking a day. + .ms-DatePicker-dayPicker { + @include ms-u-borderBox; + border-right: 1px solid $ms-color-neutralLight; + width: 220px; + margin: -10px 0; + padding: 10px 0; + } + + // Show the month picker. + .ms-DatePicker-monthPicker { + display: block; + } + + // Style the the month and year pickers. + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + // Size the month components to the day picker's new width + .ms-DatePicker-monthComponents { + width: 210px; + } + + // Size and position of the month and year labels. + .ms-DatePicker-month { + margin-left: 12px; + } + + + // Calendar day cells are smaller. + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-weight: $ms-font-weight-semibold; + font-size: 12px; + } + + + // Reduce the size of arrows to change month/year. + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + + // This component is only used on small displays. + .ms-DatePicker-toggleMonthView { + display: none; + } + + + // Position the current year and decade labels. + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + + // Reduce the size of the month buttons. + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + + &:hover { + outline: 1px solid transparent; + } + } + + + // Position the "Go to today" button below the month picker. + .ms-DatePicker-goToday { + @include ms-u-borderBox; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + // State: The picker is showing the year components. + // On larger screens the calendar will remain and the years + // will replace the months. + .ms-DatePicker.is-pickingYears { + + // On large screens, we need to keep the day picker + // and month components in view. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: block; + } + + // Hide the month picking components. + .ms-DatePicker-monthPicker { + display: none; + } + + // Show the year picking components. + .ms-DatePicker-yearPicker { + display: block; + } + } +} + +// On smaller screens the month button toggles to the picking months state. +@media (max-width: 459px) { + + // State: The picker is showing the month components. + .ms-DatePicker.is-pickingMonths { + + // Hide the day picking components. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: none; + } + + // Show the month picking components. + .ms-DatePicker-monthPicker { + display: block; + } + } +} diff --git a/dist/components/DetailsList/DetailsList.hbs b/dist/components/DetailsList/DetailsList.hbs new file mode 100644 index 00000000..299e96cd --- /dev/null +++ b/dist/components/DetailsList/DetailsList.hbs @@ -0,0 +1,115 @@ + + + + +
    + +
    + + +
    +
    + + +
    +
    +
    + +
    +
    + + +
    +
    +
    + +
    +
    + + +
    +
    +
    + +
    +
    + + +
    +
    +
    +
    +
    + + + +
    + +
    +
    + + + +
    Commissioned Research
    +
    Yesterday, 3:34pm
    +
    Alton Lafferty
    +
    Editor
    + + +
    + + +
    +
    + + + +
    Commissioned Research
    +
    Yesterday, 3:34pm
    +
    Alex Darrow
    +
    Editor
    + + +
    + +
    +
    diff --git a/dist/components/DetailsList/DetailsList.json b/dist/components/DetailsList/DetailsList.json new file mode 100644 index 00000000..0eb1c58e --- /dev/null +++ b/dist/components/DetailsList/DetailsList.json @@ -0,0 +1,13 @@ +{ + "name": "DetailsList", + "notes": "", + "description": "DetailsList is a derivative of List and provides a sortable, filterable, justified table for rendering large sets of items.", + "template": "DetailsList.html", + "class": "ms-DetailsList", + "branches": [ + { + "name": "Default", + "default": true + } + ] +} diff --git a/dist/components/DetailsList/DetailsList.scss b/dist/components/DetailsList/DetailsList.scss new file mode 100644 index 00000000..e88aa5f5 --- /dev/null +++ b/dist/components/DetailsList/DetailsList.scss @@ -0,0 +1,340 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Styles for details list + +// Variables +$rowHeight: 36px; +$selectedColor: $ms-color-themeLighter; +$selectedHoverColor: $ms-color-themeLight; +$focusedBorderColor: $ms-color-neutralTertiary; +$selectedColor: $ms-color-themeLighter; +$selectedHoverColor: $ms-color-themeLight; +$unselectedHoverColor: $ms-color-themeLighterAlt; + +//== DetailsList +// +.ms-DetailsList { + position: relative; +} + +.ms-DetailsList.is-horizontalConstrained { + overflow-x: auto; + overflow-y: inherit; +} + +.ms-DetailsList-cell { + word-break: break-word; +} + + +//== DetailsHeader +// +.ms-DetailsHeader { + display: inline-block; + min-width: 100%; + height: $rowHeight; + line-height: $rowHeight; + white-space: nowrap; + padding-bottom: 1px; + border-bottom: 1px solid $ms-color-neutralLight; + margin-bottom: 1px; + cursor: default; + + @include user-select(none); + + &.is-singleSelect { + padding-left: 40px; + } + + &.is-resizingColumn .ms-DetailsHeader-sizerCover { + background: transparent; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 99; + cursor: col-resize; + } +} + +.ms-DetailsHeader-cell.is-check .ms-Check-circle { + visibility: hidden; +} + +.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, +.ms-DetailsHeader.is-allSelected .ms-Check-circle { + visibility: visible; +} + +.ms-DetailsHeader-cellWrapper { + display: inline-block; + position: relative; +} + +.ms-DetailsHeader-cellSizeWrapper { + display: inline-block; + vertical-align: top; + margin-right: 16px; + + &:last-child { + margin-right: 0; + } +} + +.ms-DetailsHeader-filterChevron.ms-Icon { + color: $ms-color-neutralTertiary; + padding-left: 4px; + vertical-align: middle; +} + +.ms-DetailsHeader-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + color: $ms-color-neutralTertiary; + border: 0; + background: none; + line-height: inherit; + margin: 0; + font-size: inherit; + font-family: inherit; + text-align: left; + height: $rowHeight; + vertical-align: top; + + &.is-check { + position: relative; + padding: 8px 10px; + margin: 0; + } + + &:focus { + outline: transparent; + } + + &.is-sortable { + color: $ms-color-black; + cursor: default; + + &:hover { + background-color: $ms-color-neutralLight; + } + } + + &.is-filter { + position: absolute; + right: 0; + width: 20px; + top: 0; + bottom: 0; + padding: 0; + text-align: center; + color: $ms-color-black; + + &:hover { + background-color: $ms-color-neutralLight; + } + } + + &.is-filter::before { + content: ''; + position: absolute; + border-left: 1px solid $ms-color-neutralTertiary; + top: 10px; + bottom: 10px; + left: 0; + } + + &.is-sizer { + position: absolute; + width: 16px; + cursor: col-resize; + bottom: 0; + top: 0; + height: inherit; + z-index: 99; + } + + &.is-sorted.is-sortable .ms-DetailsHeader-sortArrow { + display: inline; + } + + &is-sortedDescending .ms-DetailsHeader-sortArrow { + transform: rotate(180deg); + } +} + +.ms-DetailsHeader-cell.is-resizing.is-sizer::after, +.ms-DetailsHeader-cell.is-sizer:hover::after { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 1px; + background: $ms-color-neutralLight; + border: 1px solid $ms-color-white; +} + +.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsHeader-cell:focus::before { + content: ''; + pointer-events: none; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border: 1px solid $ms-color-neutralTertiary; +} + +.ms-DetailsHeader-sortArrow.ms-Icon { + font-size: 12px; + margin-right: 4px; + display: none; + color: $ms-color-neutralTertiary; +} + + +//== DetailsRow +// +.ms-DetailsRow { + position: relative; + display: inline-block; + min-width: 100%; + min-height: $rowHeight; + vertical-align: top; + white-space: nowrap; + padding: 10px 0; + + @include user-select(none); + + cursor: default; + box-sizing: border-box; + + &:focus { + outline: transparent; + } + + &.ms-DetailsRow.is-selected { + background: $selectedColor; + } +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsRow:hover { + background: $unselectedHoverColor; +} + +.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsRow.is-selected:hover { + background: $selectedHoverColor; +} + +.ms-DetailsRow-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + vertical-align: top; + white-space: normal; + word-break: break-word; + margin-right: 16px; + + &.is-clipped { + overflow: hidden; + } +} + +.ms-DetailsRow-cell:last-child { + margin-right: 0; +} + +.ms-DetailsRow-cellIcon { + display: inline-block; + margin-right: 6px; + position: relative; + bottom: -2px; +} + +.ms-DetailsRow-check { + display: inline-block; + cursor: default; + padding: 10px; + margin: -10px 0; + box-sizing: border-box; + vertical-align: top; + background: none; + border: 0; + visibility: hidden; + + &:focus { + outline: transparent; + } +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow.is-selected .ms-DetailsRow-check { + visibility: visible; +} + +.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsRow:focus .ms-DetailsRow-focusBox { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: 1px solid $focusedBorderColor; +} + +.ms-DetailsRow-cellMeasurer { + position: absolute; + visibility: hidden; + white-space: nowrap; + top: -1000000000; +} + +//== Check +// +.ms-Check { + display: inline-block; + cursor: default; + line-height: 0; + vertical-align: top; + + &.is-checked { + + .ms-Check-circle { + fill: $ms-color-themePrimary; + stroke: $ms-color-white; + stroke-width: 1px; + } + + .ms-Check-check { + stroke: $ms-color-white; + } + } +} + +.ms-Check-circle { + fill: $ms-color-white; + stroke: $ms-color-neutralTertiaryAlt; +} + +.ms-Check-check { + stroke: $ms-color-neutralTertiaryAlt; +} diff --git a/dist/components/Dialog/Dialog.hbs b/dist/components/Dialog/Dialog.hbs new file mode 100644 index 00000000..99bd16b7 --- /dev/null +++ b/dist/components/Dialog/Dialog.hbs @@ -0,0 +1,31 @@ + + +
    + {{#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}} +
    \ No newline at end of file diff --git a/dist/components/Dialog/Dialog.json b/dist/components/Dialog/Dialog.json new file mode 100644 index 00000000..0a3aa60c --- /dev/null +++ b/dist/components/Dialog/Dialog.json @@ -0,0 +1,9 @@ +{ + "name": "Dialog", + "dependencies": [ + "Button", + "CheckBox", + "Overlay", + "ContextualHost" + ] +} diff --git a/dist/components/Dialog/Dialog.scss b/dist/components/Dialog/Dialog.scss new file mode 100644 index 00000000..67c5bae3 --- /dev/null +++ b/dist/components/Dialog/Dialog.scss @@ -0,0 +1,121 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Dialog styles + +.ms-Dialog { + @include ms-baseFont; + @include drop-shadow(0, 0, 5px, 0, .4); + background-color: $ms-color-white; + display: none; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: $ms-zIndex-front; + position: fixed; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} + +.ms-Dialog.is-open { + display: block; +} + +.ms-Dialog-title { + font-size: $ms-font-size-xl; + font-weight: $ms-font-weight-light; + margin-bottom: 24px; +} + +.ms-Dialog-content { + position: relative; +} + +.ms-Dialog-subText { + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-semilight; + line-height: 1.5; +} + +.ms-Dialog-actions { + margin-top: 24px; + text-align: right; +} + +//= Modifier: Multiline button dialog +// +.ms-Dialog--multiline { + .ms-Dialog-title { + font-size: $ms-font-size-xxl; + } +} + +//= Modifier: Large header dialog +// +.ms-Dialog.ms-Dialog--lgHeader { + .ms-Dialog-title { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + font-size: $ms-font-size-xxl; + font-weight: $ms-font-weight-light; + padding: 28px 24px; + margin-top: -28px; + margin-left: -24px; + margin-right: -24px; + } +} + +// Close button, hidden by default +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + right: 12px; + top: 12px; + z-index: $ms-zIndex-front; + + .ms-Icon.ms-Icon--Cancel { + color: $ms-color-neutralSecondary; + font-size: 16px; + } +} + +// Add margin bottom between compound buttons +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +//= Modifier: Dialog with close button +// +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) { + // Push the right side over so the icon doesn't overlap the text + .ms-Dialog-title { + margin-right: 20px; + } + + // Show the close button + .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; + } +} + +@media (min-width: $ms-screen-md-min) { + // Allow wider dialog on larger screens + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} diff --git a/dist/components/DialogHost/DialogHost.hbs b/dist/components/DialogHost/DialogHost.hbs new file mode 100644 index 00000000..9e768b64 --- /dev/null +++ b/dist/components/DialogHost/DialogHost.hbs @@ -0,0 +1,10 @@ + +
    +
    + {{#if @partial-block}} {{> @partial-block }} {{/if}} +
    +
    \ No newline at end of file diff --git a/dist/components/DialogHost/DialogHost.json b/dist/components/DialogHost/DialogHost.json new file mode 100644 index 00000000..9651c4df --- /dev/null +++ b/dist/components/DialogHost/DialogHost.json @@ -0,0 +1,3 @@ +{ + "name": "DialogHost" +} diff --git a/dist/components/DialogHost/DialogHost.scss b/dist/components/DialogHost/DialogHost.scss new file mode 100644 index 00000000..829625d0 --- /dev/null +++ b/dist/components/DialogHost/DialogHost.scss @@ -0,0 +1,15 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +.ms-DialogHost { + @include ms-baseFont; + @include drop-shadow; + background-color: $ms-color-white; + box-sizing: border-box; + line-height: 1.35; + width: 288px; + position: relative; + text-align: left; + outline: 1px solid transparent; +} diff --git a/dist/components/Dropdown/Dropdown.hbs b/dist/components/Dropdown/Dropdown.hbs new file mode 100644 index 00000000..0814b6be --- /dev/null +++ b/dist/components/Dropdown/Dropdown.hbs @@ -0,0 +1,18 @@ + + + + +
    + + + +
    \ No newline at end of file diff --git a/dist/components/Dropdown/Dropdown.json b/dist/components/Dropdown/Dropdown.json new file mode 100644 index 00000000..f10c83ad --- /dev/null +++ b/dist/components/Dropdown/Dropdown.json @@ -0,0 +1,6 @@ +{ + "name": "Dropdown", + "dependencies": [ + "Label" + ] +} diff --git a/dist/components/Dropdown/Dropdown.scss b/dist/components/Dropdown/Dropdown.scss new file mode 100644 index 00000000..44f829ed --- /dev/null +++ b/dist/components/Dropdown/Dropdown.scss @@ -0,0 +1,254 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Dropdown styles + +// Mixin for high contrast mode link states +@mixin highContrastListItemState { + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + border-color: $ms-color-contrastBlackSelected; + color: $ms-color-black; + + &:focus { + border-color: $ms-color-black; + } + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + border-color: $ms-color-contrastWhiteSelected; + color: $ms-color-white; + } +} + +.ms-Dropdown { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + margin-bottom: 10px; + position: relative; + outline: 0; + + &:hover, + &:focus, + &:active { + .ms-Dropdown-title, + .ms-Dropdown-caretDown { + color: $ms-color-black; + } + } + + &:hover, + &:active { + .ms-Dropdown-title { + border-color: $ms-color-neutralSecondaryAlt; + } + } + + &:focus { + .ms-Dropdown-title { + border-color: $ms-color-themePrimary; + } + } + + .ms-Label { + display: inline-block; + margin-bottom: 8px; + } +} + +//== State: A disabled dropdown +.ms-Dropdown.is-disabled { + .ms-Dropdown-title { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + color: $ms-color-neutralTertiary; + cursor: default; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + color: $ms-color-contrastWhiteDisabled; + } + } + + .ms-Dropdown-caretDown { + color: $ms-color-neutralTertiary; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } + } +} + +// When the dropdown is opened +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: absolute; +} + +// Adjustments for when the dropdown is open as a panel on small screens +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; + + .ms-Dropdown-item { + padding: 7px 16px; + overflow: hidden; + text-overflow: ellipsis; + } + + &::before { + content: none; + border: 0; + } +} + +// Hide the original dropdown +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: $ms-color-neutralDark; + font-size: $ms-icon-size-s; + position: absolute; + right: 13px; + bottom: 9px; + z-index: 1; + pointer-events: none; +} + +// Style the new, replacement component +.ms-Dropdown-title { + @include ms-u-normalize; + background: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + cursor: pointer; + display: block; + height: 32px; + padding: 5px 32px 0 10px; + position: relative; + overflow: hidden; + + &.ms-Dropdown-truncator { + height: auto; + display: block; + position: absolute; + visibility: hidden; + } +} + +// Container for the dropdown items, displayed as a panel on small screens. +.ms-Dropdown-items { + @include ms-u-normalize; + @include drop-shadow; + background-color: $ms-color-white; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + z-index: ($ms-zIndex-Dropdown + $ms-zIndex-back); + overflow-y: scroll; + + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; + + &::before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid $ms-color-neutralLight; + } + + @media screen and (-ms-high-contrast: active) { + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 36px; + padding: 7px 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-white; + } + + &:hover { + background-color: $ms-color-neutralLight; + color: $ms-color-black; + + @include highContrastListItemState; + } + + &:active { + background-color: $ms-color-neutralLight; + border-color: $ms-color-themePrimary; + color: $ms-color-black; + } + + &.is-disabled { + background: $ms-color-white; + color: $ms-color-neutralTertiary; + cursor: default; + } +} + +//== State: A selected dropdown item +// Note: .ms-Dropdown-item--selected is deprecated and will be removed in a future version. +// Use .is-selected instead. +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: $ms-color-themeLight; + color: $ms-color-black; + + &:hover { + background-color: $ms-color-themeLight; + } + + @include highContrastListItemState; +} diff --git a/dist/components/FacePile/FacePile.hbs b/dist/components/FacePile/FacePile.hbs new file mode 100644 index 00000000..a99b0934 --- /dev/null +++ b/dist/components/FacePile/FacePile.hbs @@ -0,0 +1,17 @@ + + + +
    + + {{#each props.members}} + {{> Persona props=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 00000000..da44785d --- /dev/null +++ b/dist/components/FacePile/FacePile.json @@ -0,0 +1,13 @@ +{ + "name": "FacePile", + "dependencies": [ + "Overlay", + "Link", + "Panel", + "PeoplePicker", + "Persona", + "PersonaCard", + "Spinner", + "ContextualHost" + ] +} diff --git a/dist/components/FacePile/FacePile.scss b/dist/components/FacePile/FacePile.scss new file mode 100644 index 00000000..654df870 --- /dev/null +++ b/dist/components/FacePile/FacePile.scss @@ -0,0 +1,107 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// FacePile styles + +.ms-FacePile { + @include ms-baseFont; + position: relative; + height: 32px; + width: auto; + + .ms-FacePile-personaCardHost { + display: none; + } +} + +.ms-FacePile-addButton { + @include button-reset; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; + + .ms-Persona-presence, + .ms-Persona-details { + display: none; + } +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + font-size: $ms-font-size-l - 1; + + &:hover, + &:focus { + background-color: $ms-color-themeDark; + } + + &:active { + background-color: $ms-color-themeDarker; + } + + &:disabled { + background-color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralSecondary; + display: none; + + &.is-active { + display: block; + } + + &:hover { + color: $ms-color-neutralDark; + } + + &:disabled { + color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: $ms-font-size-m; +} + +//== Panels +// Overflow panel - only show member list +.ms-FacePile-panel.ms-FacePile-panel--overflow { + .ms-Panel-headerText, + .ms-PeoplePicker-searchBox, + .ms-PeoplePicker-results, + .ms-PeoplePicker-resultAction { + display: none; + } + + .ms-PeoplePicker-selectedHeader { + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + line-height: 82px; + height: 74px; + text-transform: none; + } +} diff --git a/dist/components/Label/Label.hbs b/dist/components/Label/Label.hbs new file mode 100644 index 00000000..cdcda5e5 --- /dev/null +++ b/dist/components/Label/Label.hbs @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/dist/components/Label/Label.json b/dist/components/Label/Label.json new file mode 100644 index 00000000..46d39a60 --- /dev/null +++ b/dist/components/Label/Label.json @@ -0,0 +1,3 @@ +{ + "name": "Label" +} diff --git a/dist/components/Label/Label.scss b/dist/components/Label/Label.scss new file mode 100644 index 00000000..027827bc --- /dev/null +++ b/dist/components/Label/Label.scss @@ -0,0 +1,40 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Form field label styles + +@mixin ms-Label-is-disabled { + color: $ms-color-neutralTertiary; +} + +@mixin ms-Label-is-required { + &::after { + content: ' *'; + color: $ms-color-error; + } +} + +.ms-Label { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; + box-sizing: border-box; + display: block; + padding: 5px 0; + + &.is-required { + @include ms-Label-is-required; + } + + &.is-disabled { + @include ms-Label-is-disabled; + } +} diff --git a/dist/components/Link/Link.hbs b/dist/components/Link/Link.hbs new file mode 100644 index 00000000..d20082db --- /dev/null +++ b/dist/components/Link/Link.hbs @@ -0,0 +1,11 @@ + + +{{props.label}} \ No newline at end of file diff --git a/dist/components/Link/Link.json b/dist/components/Link/Link.json new file mode 100644 index 00000000..13c35771 --- /dev/null +++ b/dist/components/Link/Link.json @@ -0,0 +1,3 @@ +{ + "name": "Link" +} diff --git a/dist/components/Link/Link.scss b/dist/components/Link/Link.scss new file mode 100644 index 00000000..c83cd3fe --- /dev/null +++ b/dist/components/Link/Link.scss @@ -0,0 +1,34 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Link (anchor) styles + + +@mixin ms-Link { + @include ms-baseFont; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + color: $ms-color-themePrimary; + text-decoration: none; + cursor: pointer; + outline: none; + + &:hover, + &:focus { + color: $ms-color-themeDarker; + } + + &:active { + color: $ms-color-themePrimary; + } +} + +.ms-Link { + @include ms-Link; +} diff --git a/dist/components/List/List.hbs b/dist/components/List/List.hbs new file mode 100644 index 00000000..c0b1d911 --- /dev/null +++ b/dist/components/List/List.hbs @@ -0,0 +1,12 @@ + + + + diff --git a/dist/components/List/List.json b/dist/components/List/List.json new file mode 100644 index 00000000..b453a215 --- /dev/null +++ b/dist/components/List/List.json @@ -0,0 +1,6 @@ +{ + "name": "List", + "dependencies": [ + "ListItem" + ] +} diff --git a/dist/components/List/List.scss b/dist/components/List/List.scss new file mode 100644 index 00000000..35315649 --- /dev/null +++ b/dist/components/List/List.scss @@ -0,0 +1,19 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// List styles + +.ms-List { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + list-style-type: none; +} diff --git a/dist/components/ListItem/ListItem.hbs b/dist/components/ListItem/ListItem.hbs new file mode 100644 index 00000000..0870fa2a --- /dev/null +++ b/dist/components/ListItem/ListItem.hbs @@ -0,0 +1,25 @@ + + + +
  • + {{#if props.image}}
    {{/if}} + {{#if props.primaryText}}{{props.primaryText}}{{/if}} + {{#if props.secondaryText}}{{props.secondaryText}}{{/if}} + {{#if props.tertiaryText}}{{props.tertiaryText}}{{/if}} + {{#if props.metaText}}{{props.metaText}}{{/if}} + {{#if props.listIcon}}
    {{/if}} +
    +
    + {{#each props.actions}}{{/each}} +
    +
    +
    +
    +
    +
    • + diff --git a/dist/components/ListItem/ListItem.json b/dist/components/ListItem/ListItem.json new file mode 100644 index 00000000..51a3ba44 --- /dev/null +++ b/dist/components/ListItem/ListItem.json @@ -0,0 +1,6 @@ +{ + "name": "ListItem", + "dependencies": [ + "List" + ] +} diff --git a/dist/components/ListItem/ListItem.scss b/dist/components/ListItem/ListItem.scss new file mode 100644 index 00000000..5d0de2bd --- /dev/null +++ b/dist/components/ListItem/ListItem.scss @@ -0,0 +1,240 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// List item styles + + +.ms-ListItem { + @include ms-baseFont; + @include ms-u-normalize; + @include ms-u-clearfix; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + @include noWrap; + display: block; +} + +.ms-ListItem-primaryText { + color: $ms-color-neutralDark; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xl; + padding-right: 80px; // Prevent overlap with up to three actions. + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: $ms-color-neutralPrimary; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-m; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: $ms-color-neutralSecondaryAlt; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: $ms-color-neutralPrimary; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xs; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; // Images sit closer to the edge than text. + margin-right: 10px; + width: 70px; + background-color: $ms-color-neutralPrimary; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; // Up to three actions. + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: $ms-color-neutralTertiary; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; + + .ms-Icon { + vertical-align: top; + } + + &:hover { + color: $ms-color-neutralSecondary; + outline: 1px solid transparent; + } +} + + +//== State: Unread list item +// +.ms-ListItem.is-unread { + border-left: 3px solid $ms-color-themePrimary; + padding-left: 27px; // Reduce padding to allow room for border. + + .ms-ListItem-secondaryText, + .ms-ListItem-metaText { + color: $ms-color-themePrimary; + font-weight: $ms-font-weight-semibold; + } +} + + +//== State: Unseen list item +// +.ms-ListItem.is-unseen { + &::after { + border-right: 10px solid transparent; + border-top: 10px solid $ms-color-themePrimary; + left: 0; + position: absolute; + top: 0; + } +} + + +//== State: Selectable list item +// +.ms-ListItem.is-selectable { + .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; + } + + .ms-ListItem-image { + margin-left: 0; + } + + &:hover { + background-color: $ms-color-neutralLight; + cursor: pointer; + outline: 1px solid transparent; + + // Insert the empty box. + &::before { + @include ms-Icon; + position: absolute; + top: 14px; + left: 7px; + height: 15px; + width: 15px; + border: 1px solid $ms-color-neutralSecondaryAlt; + } + } +} + + +//== State: Selected list item +// +.ms-ListItem.is-selected { + // Insert the checkmark. + &::before { + border: 1px solid transparent; + } + + &::before, + &:hover::before { + @include ms-Icon; + content: '\e73A'; + font-size: $ms-font-size-l; + color: $ms-color-neutralSecondaryAlt; + position: absolute; + top: 23px; + left: 7px; + border: 0; + } + + &:hover { + background-color: $ms-color-themeLight; + outline: 1px solid transparent; + } +} + + +//== Modifier: Document list item +// +.ms-ListItem.ms-ListItem--document { + padding: 0; + + // The icon for a file or folder in the items list. This may + // be an .ms-Icon or a specific modifier that loads an image. + .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; + } + + // If the item icon is an .ms-Icon, position and color it appropriately. + .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: $ms-color-neutralSecondary; + } + + // Primary text, typically the name. + .ms-ListItem-primaryText { + @include noWrap; + font-size: $ms-font-size-m; + padding-top: 15px; + padding-right: 0; + position: static; + } + + // Secondary text, typically the modified date or some other metadata. + .ms-ListItem-secondaryText { + @include noWrap; + color: $ms-color-neutralSecondary; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-xs; + padding-top: 6px; + } +} diff --git a/dist/components/MessageBanner/MessageBanner.hbs b/dist/components/MessageBanner/MessageBanner.hbs new file mode 100644 index 00000000..06a651f1 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.hbs @@ -0,0 +1,24 @@ + + + +
    +
    +
    +
    + {{props.message}} +
    +
    + +
    + {{renderPartial props.button.name props.button.props}} +
    +
    + +
    diff --git a/dist/components/MessageBanner/MessageBanner.json b/dist/components/MessageBanner/MessageBanner.json new file mode 100644 index 00000000..87c9aad0 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.json @@ -0,0 +1,17 @@ +{ + "name": "MessageBanner", + "dependencies": [ + "Button" + ], + "props": { + "message": "You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.", + "button": { + "name": "Button", + "props": { + "label": "Get More Storage", + "modifier": "primary", + "tag": "button" + } + } + } +} diff --git a/dist/components/MessageBanner/MessageBanner.scss b/dist/components/MessageBanner/MessageBanner.scss new file mode 100644 index 00000000..ae0b0fec --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.scss @@ -0,0 +1,131 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// MessageBanner Styles + +$MessageBanner-height: 52px; +$MessageBanner-iconSize: 40px; + +.ms-MessageBanner { + @include ms-baseFont; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; + position: relative; + border-bottom: 1px solid $ms-color-neutralSecondaryAlt; + background-color: $ms-color-themeLighterAlt; + min-width: 320px; + width: 100%; + height: $MessageBanner-height; + text-align: center; + overflow: hidden; + @include ms-u-slideDownIn20; + + .ms-Icon { + font-size: 16px; + } + + &.hide { + @include ms-u-slideUpOut20; + } + + &.is-hidden { + display: none; + } +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: $MessageBanner-height; + width: $MessageBanner-iconSize; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: $MessageBanner-height; + color: $ms-color-neutralSecondary; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; + + &.is-visible { + display: inline-block; + } +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; + + .ms-Button { + color: $ms-color-white; + } +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; + + .ms-MessageBanner-clipper { + white-space: normal; + } +} + + +@media screen and (max-width: 479px) { + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + display: inline-block; + padding: 0; + margin-left: -5px; + width: 20px; + + .ms-Icon { + color: $ms-color-themePrimary; + } + } +} diff --git a/dist/components/MessageBar/MessageBar.hbs b/dist/components/MessageBar/MessageBar.hbs new file mode 100644 index 00000000..9c139ecc --- /dev/null +++ b/dist/components/MessageBar/MessageBar.hbs @@ -0,0 +1,19 @@ + + + +
    +
    +
    + +
    +
    + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
    + Hyperlink string +
    +
    +
    diff --git a/dist/components/MessageBar/MessageBar.json b/dist/components/MessageBar/MessageBar.json new file mode 100644 index 00000000..0a8cba9c --- /dev/null +++ b/dist/components/MessageBar/MessageBar.json @@ -0,0 +1,6 @@ +{ + "name": "MessageBar", + "dependencies": [ + "Link" + ] +} diff --git a/dist/components/MessageBar/MessageBar.scss b/dist/components/MessageBar/MessageBar.scss new file mode 100644 index 00000000..dd7e471d --- /dev/null +++ b/dist/components/MessageBar/MessageBar.scss @@ -0,0 +1,90 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// MessageBar Styles + +$MessageBar-padding: 8px; + +.ms-MessageBar { + @include ms-baseFont; + padding: $MessageBar-padding; + display: table; + @include ms-bgColor-info; + + .ms-Link { + font-size: $ms-font-size-s; + } +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-right: $MessageBar-padding; + font-size: $ms-icon-size-m; + @include ms-fontColor-neutralSecondaryAlt; +} + +.ms-MessageBar-text { + @include ms-font-s; +} + + +//== Modifier: Warning message +// +.ms-MessageBar.ms-MessageBar--warning { + @include ms-bgColor-warning; +} + + +//== Modifier: Severe Warning message +// +.ms-MessageBar.ms-MessageBar--severeWarning { + @include ms-bgColor-severeWarning; + + .ms-MessageBar-icon { + @include ms-fontColor-severeWarning; + } +} + + +//== Modifier: Error message +// +.ms-MessageBar.ms-MessageBar--error { + @include ms-bgColor-error; + + .ms-MessageBar-icon { + @include ms-fontColor-error; + } +} + + +//== Modifier: Blocked message +// +.ms-MessageBar.ms-MessageBar--blocked { + @include ms-bgColor-error; + + .ms-MessageBar-icon { + @include ms-fontColor-error; + } +} + + +//== Modifier: Success message +// +.ms-MessageBar.ms-MessageBar--success { + @include ms-bgColor-success; + + .ms-MessageBar-icon { + @include ms-fontColor-green; + } +} diff --git a/dist/components/OrgChart/OrgChart.hbs b/dist/components/OrgChart/OrgChart.hbs new file mode 100644 index 00000000..af5de727 --- /dev/null +++ b/dist/components/OrgChart/OrgChart.hbs @@ -0,0 +1,23 @@ + + + +
    + {{#each props.groups}} +
    + {{#if title}}
    {{title}}
    {{/if}} +
      + {{#each personas}} +
    • + +
      • + {{/each}} +
    +
    + {{/each}} +
    \ No newline at end of file diff --git a/dist/components/OrgChart/OrgChart.json b/dist/components/OrgChart/OrgChart.json new file mode 100644 index 00000000..c8fb308e --- /dev/null +++ b/dist/components/OrgChart/OrgChart.json @@ -0,0 +1,6 @@ +{ + "name": "OrgChart", + "dependencies": [ + "Persona" + ] +} diff --git a/dist/components/OrgChart/OrgChart.scss b/dist/components/OrgChart/OrgChart.scss new file mode 100644 index 00000000..a7c79cc5 --- /dev/null +++ b/dist/components/OrgChart/OrgChart.scss @@ -0,0 +1,49 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Org chart styles + + +.ms-OrgChart { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; +} + +.ms-OrgChart-groupTitle { + color: $ms-color-neutralSecondary; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + @include button-reset; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; +} diff --git a/dist/components/Overlay/Overlay.hbs b/dist/components/Overlay/Overlay.hbs new file mode 100644 index 00000000..811ba65f --- /dev/null +++ b/dist/components/Overlay/Overlay.hbs @@ -0,0 +1,6 @@ + + +
    \ No newline at end of file diff --git a/dist/components/Overlay/Overlay.json b/dist/components/Overlay/Overlay.json new file mode 100644 index 00000000..74e58eb2 --- /dev/null +++ b/dist/components/Overlay/Overlay.json @@ -0,0 +1,3 @@ +{ + "name": "Overlay" +} diff --git a/dist/components/Overlay/Overlay.scss b/dist/components/Overlay/Overlay.scss new file mode 100644 index 00000000..353f7d9d --- /dev/null +++ b/dist/components/Overlay/Overlay.scss @@ -0,0 +1,37 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Modal overlay styles + + +.ms-Overlay { + @include ms-baseFont; + background-color: $ms-color-whiteTranslucent40; + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: $ms-zIndex-back; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +//== Modifier: Dark overlay +// +.ms-Overlay--dark { + background-color: $ms-color-blackTranslucent40; +} + +.ms-u-overflowHidden { + overflow: hidden; +} diff --git a/dist/components/Panel/Panel.hbs b/dist/components/Panel/Panel.hbs new file mode 100644 index 00000000..c61fd63d --- /dev/null +++ b/dist/components/Panel/Panel.hbs @@ -0,0 +1,16 @@ + + +
    + +
    +

    {{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 00000000..1306aa8c --- /dev/null +++ b/dist/components/Panel/Panel.json @@ -0,0 +1,3 @@ +{ + "name": "Panel" +} diff --git a/dist/components/Panel/Panel.scss b/dist/components/Panel/Panel.scss new file mode 100644 index 00000000..bd381157 --- /dev/null +++ b/dist/components/Panel/Panel.scss @@ -0,0 +1,158 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Panel styles + +$ms-panel-width-sm: 272px; +$ms-panel-width-md: 340px; +$ms-panel-width-lg: 644px; +$ms-panel-width-xl: 940px; +$ms-panel-width-xxl: 1192px; + +$ms-panel-margin-md: 48px; +$ms-panel-margin-lg: 428px; +$ms-panel-margin-xl: 176px; + +$ms-panel-close-button-height: 40px; + +// The panel itself, where the content goes. +.ms-Panel { + @include ms-baseFont; + background-color: $ms-color-white; + width: 100%; + max-width: $ms-panel-width-md; + @include drop-shadow(-30px, 0, 30px, -30px, .2); + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: $ms-zIndex-front; + display: none; + height: 100%; + + // Animations -- Default (anchored right) + &.animate-in { + @include ms-u-slideLeftIn40; + } + + &.animate-out { + @include ms-u-slideRightOut40; + } + + &.is-open { + display: block; + } + + .ms-CommandBar { + padding-right: 0; + padding-left: 8px; + } +} + +//== Modifier: Medium panel (anchored right, fixed width) +// +.ms-Panel.ms-Panel--md { + max-width: $ms-panel-width-md; +} + +//== Modifier: Large panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--lg { + max-width: $ms-panel-width-lg; +} + +//== Modifier: XLarge panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--xl { + max-width: $ms-panel-width-xl; +} + +//== Modifier: XLarge panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--xxl { + max-width: $ms-panel-width-xxl; +} + +//== Modifier: Left anchored panel (anchored left, fixed width) +// Note: This panel variant should only be used for left nav. +.ms-Panel--left { + @include drop-shadow(-30px, 0, 30px, 30px, .2); + left: 0; + right: auto; + + &.animate-in { + @include ms-u-slideRightIn40; + } + + &.animate-out { + @include ms-u-slideLeftOut40; + } +} + +// The close button in the top right (x) +.ms-Panel-closeButton { + @include button-reset; + position: absolute; + right: 6px; + top: 0; + height: $ms-panel-close-button-height; + width: $ms-panel-close-button-height; + line-height: $ms-panel-close-button-height; + outline: 0; + padding: 0; + color: $ms-color-neutralSecondary; + font-size: $ms-icon-size-m; + + &:hover { + color: $ms-color-neutralPrimary; + } + + .ms-Icon--Cancel { + margin-top: 2px; + } + + @media (max-width: $ms-screen-md-max) { + font-size: $ms-icon-size-l; + line-height: $ms-icon-size-l; + height: 44px; + right: 4px; + } +} + +// Scrollable content area +.ms-Panel-contentInner { + margin-top: $ms-panel-close-button-height; + padding: 0 16px 20px; + overflow-y: auto; + height: 100%; + + @media (min-width: $ms-screen-lg-min) { + padding: 0 32px 20px; + } + + @media (min-width: $ms-screen-xxl-min) { + padding: 0 40px 20px; + } +} + +// Header text at the top of the panel. +.ms-Panel-headerText { + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; + + @media (min-width: $ms-screen-xl-min) { + margin-top: 30px; + } +} diff --git a/dist/components/PanelHost/PanelHost.hbs b/dist/components/PanelHost/PanelHost.hbs new file mode 100644 index 00000000..0c276fbc --- /dev/null +++ b/dist/components/PanelHost/PanelHost.hbs @@ -0,0 +1,7 @@ + +
    + {{> Overlay }} +
    \ No newline at end of file diff --git a/dist/components/PanelHost/PanelHost.json b/dist/components/PanelHost/PanelHost.json new file mode 100644 index 00000000..3e44136f --- /dev/null +++ b/dist/components/PanelHost/PanelHost.json @@ -0,0 +1,6 @@ +{ + "name": "PanelHost", + "dependencies": [ + "Overlay" + ] +} diff --git a/dist/components/PanelHost/PanelHost.scss b/dist/components/PanelHost/PanelHost.scss new file mode 100644 index 00000000..064e2d95 --- /dev/null +++ b/dist/components/PanelHost/PanelHost.scss @@ -0,0 +1,18 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// The panel covers the entire screen. +.ms-PanelHost { + @include ms-baseFont; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: $ms-zIndex-front; +} + +.ms-PanelHost .ms-Overlay { + cursor: pointer; +} diff --git a/dist/components/PeoplePicker/PeoplePicker.hbs b/dist/components/PeoplePicker/PeoplePicker.hbs new file mode 100644 index 00000000..d643c2ea --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.hbs @@ -0,0 +1,54 @@ + + +
    +
    + {{> TextField props=props.textFieldProps}} +
    +
    + {{#each props.groups}} +
    +
    + {{title}} +
    + {{#each personas}} +
    + {{> Persona props=props}} + +
    + {{/each}} +
    + {{/each}} + {{#if props.searchMoreText}} + + {{/if}} +
    + {{#each props.members}} +
    +
    + {{count}} members +
    +
      + {{#each personas}} +
    • + {{> Persona props=props}} + +
      • + {{/each}} +
    +
    + {{/each}} +
    \ No newline at end of file diff --git a/dist/components/PeoplePicker/PeoplePicker.json b/dist/components/PeoplePicker/PeoplePicker.json new file mode 100644 index 00000000..2900b7ae --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.json @@ -0,0 +1,12 @@ +{ + "name": "PeoplePicker", + "dependencies": [ + "Label", + "Persona", + "PersonaCard", + "Spinner", + "TextField", + "ContextualHost", + "OrgChart" + ] +} diff --git a/dist/components/PeoplePicker/PeoplePicker.scss b/dist/components/PeoplePicker/PeoplePicker.scss new file mode 100644 index 00000000..d51e2e4d --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.scss @@ -0,0 +1,452 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// People Picker styles + +$personaItemHeight: 40px; +$ms-Persona-leftPadding: 16px; + +.ms-PeoplePicker { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + background-color: $ms-color-white; + margin-bottom: 10px; +} + +// Box that contains the search field and selected people. +.ms-PeoplePicker-searchBox { + border-bottom: 1px solid $ms-color-neutralTertiaryAlt; + cursor: text; + flex-flow: row wrap; + display: flex; + align-items: stretch; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + } + + &.is-active, + &:focus { + border-color: $ms-color-themePrimary; + } + + &:hover, + &:focus { + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + @include input-placeholder { + color: $ms-color-neutralSecondary; + } + + .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: 100%; + flex: 1; + + .ms-TextField-field { + min-height: 40px; + border: 0; + } + } +} + +// Highlight the search box when the people picker is active +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + .ms-TextField-field { + border-color: $ms-color-themePrimary; + } +} + +.ms-PeoplePicker-persona { + cursor: pointer; +} + +// The selected persona may be in an error state. +.ms-PeoplePicker-persona.has-error { + .ms-Persona-primaryText { + color: $ms-color-error; + } +} + +// Button to remove a selected person. +.ms-PeoplePicker-personaRemove { + @include button-reset; + background-color: $ms-color-neutralLighter; + color: $ms-color-neutralSecondary; + display: inline-block; + text-align: center; + height: 32px; + width: 32px; + + &:hover { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralPrimary; + cursor: pointer; + } + + &:focus { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralPrimary; + border: 1px solid $ms-color-themePrimary; + outline: none; + } +} + +// Results area, hidden by default +.ms-PeoplePicker-results { + background-color: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + margin-bottom: -1px; + padding-top: 9px; + width: 100%; + padding-left: 0; + box-sizing: border-box; +} + +// Show the results area when the people picker is active +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + + +// A group of results +.ms-PeoplePicker-resultGroup { + border-top: 1px solid $ms-color-neutralLight; + + // The first result group needs to be bumped up 1px to account for border on ms-PeoplePicker-results + &:first-child { + border-top: 0; + } +} + +// Title for a group of results (optional) +.ms-PeoplePicker-resultGroupTitle { + color: $ms-color-themePrimary; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-s; + padding-top: 8px; + padding-bottom: 8px; + text-transform: uppercase; + padding-left: $ms-Persona-leftPadding; +} + +// List of results +.ms-PeoplePicker-resultList { + @include ms-u-normalize; + margin-bottom: -1px; + list-style-type: none; // Browser default override. +} + +// A single result in the result list +.ms-PeoplePicker-result { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-left: $ms-Persona-leftPadding; + cursor: pointer; + outline: 0; + + &:hover, + &:focus { + background-color: $ms-color-neutralLight; + } + + &:focus { + box-shadow: 0 0 0 1px $ms-color-themePrimary inset; + } + + &.is-selected { + background-color: $ms-color-themeLight; + + .ms-PeoplePicker-resultAction { + &:hover { + background-color: $ms-color-themeTertiary; + } + + &:active { + background-color: $ms-color-themeTertiary; + } + } + } +} + +// Result buttons +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + @include button-reset; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px; + padding: 0 0 0 9px; + + @media (min-width: $ms-screen-md-min) { + height: 48px; + } + + &:hover { + background-color: $ms-color-neutralLight; + outline: 1px solid transparent; + } + + &:focus { + outline: 1; + } + + &.ms-PeoplePicker-resultBtn--compact { + height: 32px; + } +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; + + &:hover { + background-color: transparent; + } +} + +// Actionable icon on a result +.ms-PeoplePicker-resultAction { + @include button-reset; + display: block; + height: 100%; + transition: background-color .367s $ms-ease1; + position: absolute; + right: 0; + top: 0; + width: 40px; + text-align: center; + + .ms-Icon { + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-m-plus; + } + + &:hover { + background-color: $ms-color-neutralTertiaryAlt; + outline: 1px solid transparent; + } + + &:active { + background-color: $ms-color-neutralTertiary; + } +} + +// A result can contain additional content (usually a ms-PeoplePicker-resultList of Persona components) that is hidden initially +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +// Use the .is-expanded state to reveal the additional content +.ms-PeoplePicker-result.is-expanded { + background-color: $ms-color-neutralLighter; + margin-bottom: 11px; + + // Switch the toggle icon + .ms-PeoplePicker-resultAction .ms-Icon { + transform: rotate(180deg); + } + + // Show the content + .ms-PeoplePicker-resultAdditionalContent { + display: block; + } +} + +// After the result groups we have a button to trigger additional searches +.ms-PeoplePicker-searchMore { + @include button-reset; + height: 40px; + position: relative; + width: 100%; + + &:hover { + background-color: $ms-color-neutralLighter; + } +} + +.ms-PeoplePicker-searchMoreIcon { + font-size: $ms-font-size-xl; + height: 40px; + left: 16px; + line-height: 40px; + position: absolute; + text-align: center; + top: 0; + width: 40px; +} + +.ms-PeoplePicker-searchMoreText { + @include ms-baseFont; + font-size: $ms-font-size-m; + height: 40px; + left: 64px; + line-height: 40px; + position: absolute; + top: 0; +} + +//== Modifier: People Picker Compact +// +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact { + .ms-PeoplePicker-resultAction { + height: 32px; + width: 32px; + } + + .ms-PeoplePicker-resultGroups { + max-height: 209px; + } +} + + +//== Modifier: facePile +// +.ms-PeoplePicker.ms-PeoplePicker--facePile { + //= State: Searching in peoplepicker search field + &.is-searching { + .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; + } + + .ms-PeoplePicker-peopleListHeader { + display: none; + } + } + + .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; + + &.is-active { + display: block; + } + } + + .ms-Persona.ms-Persona--selectable { + padding: 0; + } +} + +// PeoplePicker results - facePile +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid $ms-color-neutralLight; +} + +// Personas are size xs on mobile, sm on md screens and above +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile, +.ms-PeoplePicker-selectedPeople { + @media (max-width: $ms-screen-sm-max) { + .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-s; + line-height: 32px; + } + + .ms-Persona-presence { + left: 19px; + } + + .ms-Persona-details { + padding-left: 8px; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 3px; + } + + .ms-Persona-secondaryText { + display: none; + } + } + + @media (min-width: $ms-screen-md-min) { + .ms-Persona .ms-Persona-secondaryText { + display: block; + } + } + + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + @media (min-width: $ms-screen-md-min) { + height: $personaItemHeight; + } + } + + .ms-PeoplePicker-resultAction { + @media (min-width: $ms-screen-md-min) { + height: $personaItemHeight; + } + } + + .ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; + + &.is-active { + display: block; + } + } +} + + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: $ms-color-themePrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + @include ms-u-normalize; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} diff --git a/dist/components/Persona/Persona.hbs b/dist/components/Persona/Persona.hbs new file mode 100644 index 00000000..99c891a6 --- /dev/null +++ b/dist/components/Persona/Persona.hbs @@ -0,0 +1,45 @@ + + +
    +
    + {{#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}} +
    \ No newline at end of file diff --git a/dist/components/Persona/Persona.json b/dist/components/Persona/Persona.json new file mode 100644 index 00000000..c9387dc7 --- /dev/null +++ b/dist/components/Persona/Persona.json @@ -0,0 +1,7 @@ +{ + "name": "Persona", + "dependencies": [ + "PersonaCard", + "ContextualHost" + ] +} diff --git a/dist/components/Persona/Persona.scss b/dist/components/Persona/Persona.scss new file mode 100644 index 00000000..216f7de8 --- /dev/null +++ b/dist/components/Persona/Persona.scss @@ -0,0 +1,734 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Persona styles + + +// Skype presence colors +$ms-color-presence-available: #7FBA00; +$ms-color-presence-away: #FCD116; +$ms-color-presence-busy: #E81123; +$ms-color-presence-dnd-background: #E81123; +$ms-color-presence-dnd-line: #FFFFFF; +$ms-color-presence-offline: #93ABBD; +$ms-color-presence-out-of-office: $ms-color-magenta; + +// Other presence colors +$ms-color-presence-blocked-background: #DEDEDE; +$ms-color-presence-blocked-line: #C72D25; +$ms-color-presence-busy-stripe-light: #E57A79; +$ms-color-presence-busy-stripe-dark: #D00E0D; +$ms-color-presence-busy-average: #D93B3B; + +// Persona Sizes +$ms-Persona-sizeTiny: 30px; +$ms-Persona-sizeXs: 32px; +$ms-Persona-sizeSm: 40px; +$ms-Persona-sizeMd: 48px; +$ms-Persona-sizeLg: 72px; +$ms-Persona-sizeXl: 100px; + +// Details Spacing +$ms-Persona-imageDetailsSmSpace: 8px; +$ms-Persona-imageDetailsLgSpace: 12px; +$ms-Persona-imageDetailsXlSpace: 20px; + +// Presence Sizes +$ms-Persona-presenceSizeMd: 12px; +$ms-Persona-presenceSizeLg: 20px; +$ms-Persona-presenceSizeXl: 28px; + + +.ms-Persona { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + line-height: 1; + position: relative; + width: 100%; + height: $ms-Persona-sizeMd; + display: table; + table-layout: fixed; + border-collapse: separate; + + .ms-ContextualHost { + display: none; + } +} + +.ms-Persona-imageArea { + position: absolute; + overflow: hidden; + text-align: center; + max-width: $ms-Persona-sizeMd; + height: $ms-Persona-sizeMd; + border-radius: 50%; + z-index: $ms-zIndex-back; + width: 100%; + top: 0; + left: 0; + + @media screen and (-ms-high-contrast: active) { + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } +} + +//= Note: The doughboy placeholder is being deprecated. +// The initials color block (.ms-Persona-initials) will be used going forward +// as a fallback when the persona does not have an image. +.ms-Persona-placeholder { + color: $ms-color-white; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; + z-index: $ms-zIndex-middle; +} + +.ms-Persona-initials { + color: $ms-color-white; + font-size: $ms-font-size-l; + font-weight: $ms-font-weight-light; + line-height: $ms-Persona-sizeMd; + + &.ms-Persona-initials--blueLight { + background-color: $ms-color-blueLight; + } + + &.ms-Persona-initials--blue { + background-color: $ms-color-blue; + } + + &.ms-Persona-initials--blueDark { + background-color: $ms-color-blueDark; + } + + &.ms-Persona-initials--teal { + background-color: $ms-color-teal; + } + + &.ms-Persona-initials--greenLight { + background-color: $ms-color-greenLight; + } + + &.ms-Persona-initials--green { + background-color: $ms-color-green; + } + + &.ms-Persona-initials--greenDark { + background-color: $ms-color-greenDark; + } + + &.ms-Persona-initials--magentaLight { + background-color: $ms-color-magentaLight; + } + + &.ms-Persona-initials--magenta { + background-color: $ms-color-magenta; + } + + &.ms-Persona-initials--purpleLight { + background-color: $ms-color-purpleLight; + } + + &.ms-Persona-initials--purple { + background-color: $ms-color-purple; + } + + &.ms-Persona-initials--black { + background-color: $ms-color-black; + } + + &.ms-Persona-initials--orange { + background-color: $ms-color-orange; + } + + &.ms-Persona-initials--red { + background-color: $ms-color-red; + } + + &.ms-Persona-initials--redDark { + background-color: $ms-color-redDark; + } +} + +.ms-Persona-image { + position: absolute; + top: 0; + left: 0; + height: $ms-Persona-sizeMd; + z-index: $ms-zIndex-front; + width: 100%; + + &[src=''] { + display: none; + } +} + +.ms-Persona-presence { + background-color: $ms-color-presence-available; + position: absolute; + height: $ms-Persona-presenceSizeMd; + width: $ms-Persona-presenceSizeMd; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid $ms-color-white; + text-align: center; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-black; + box-shadow: 0 0 0 1px $ms-color-contrastBlackSelected inset; + color: $ms-color-black; + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-white; + box-shadow: 0 0 0 1px $ms-color-contrastWhiteSelected inset; + color: $ms-color-white; + background-color: $ms-color-black; + } +} + +.ms-Persona-presenceIcon { + color: $ms-color-white; + font-size: 8px; + line-height: $ms-Persona-presenceSizeMd; + vertical-align: top; +} + +.ms-Persona-details { + padding: 0 12px; + vertical-align: middle; + overflow: hidden; + text-align: left; + padding-left: $ms-Persona-sizeMd + $ms-Persona-imageDetailsLgSpace; + display: table-cell; + width: 100%; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + @include noWrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: $ms-color-neutralPrimary; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-l; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: $ms-color-neutralSecondary; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-s; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; // Hidden on default persona +} + + +//== Modifier: Tiny Persona +// +.ms-Persona.ms-Persona--tiny { + height: $ms-Persona-sizeTiny; + display: inline-block; + + .ms-Persona-imageArea { + overflow: visible; + display: none; + } + + .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; + + @media screen and (-ms-high-contrast: active) { + top: 9px; + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } + } + + .ms-Persona-details { + padding-left: 20px; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 9px; + } + + .ms-Persona-secondaryText { + display: none; + } +} + + +//== Modifier: Tiny Persona with read only state +// +// This variant includes a semicolon, and is +// most often presented within a People Picker. +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; + + .ms-Persona-primaryText { + &::after { + content: ';'; + } + } +} + + +//== Modifier: Extra Small Persona, FacePile and Token modifiers +// +.ms-Persona.ms-Persona--xs, +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token { + height: $ms-Persona-sizeXs; + + .ms-Persona-imageArea, + .ms-Persona-image { + max-width: $ms-Persona-sizeXs; + height: $ms-Persona-sizeXs; + } + + .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-s; + line-height: $ms-Persona-sizeXs; + } + + .ms-Persona-presence { + left: 19px; + } + + .ms-Persona-details { + padding-left: $ms-Persona-sizeXs + $ms-Persona-imageDetailsSmSpace; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 3px; + } + + .ms-Persona-secondaryText { + display: none; + } +} + + +//== Modifier: Small Persona +// +.ms-Persona.ms-Persona--sm { + height: $ms-Persona-sizeSm; + + .ms-Persona-imageArea, + .ms-Persona-image { + max-width: $ms-Persona-sizeSm; + height: $ms-Persona-sizeSm; + } + + .ms-Persona-placeholder { + font-size: 38px; + top: 5px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-m; + line-height: $ms-Persona-sizeSm; + } + + .ms-Persona-presence { + left: 27px; + } + + .ms-Persona-details { + padding-left: $ms-Persona-sizeSm + $ms-Persona-imageDetailsSmSpace; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + } + + .ms-Persona-primaryText, + .ms-Persona-secondaryText { + padding-top: 1px; + } +} + + +//== Modifier: Large Persona +// +.ms-Persona.ms-Persona--lg { + height: $ms-Persona-sizeLg; + + .ms-Persona-imageArea, + .ms-Persona-image { + max-width: $ms-Persona-sizeLg; + height: $ms-Persona-sizeLg; + } + + .ms-Persona-placeholder { + font-size: 67px; + top: 10px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-xxl; + line-height: $ms-Persona-sizeLg; + } + + .ms-Persona-presence { + left: 49px; + height: $ms-Persona-presenceSizeLg; + width: $ms-Persona-presenceSizeLg; + border-width: 3px; + } + + .ms-Persona-presenceIcon { + line-height: $ms-Persona-presenceSizeLg; + font-size: $ms-font-size-m; + } + + .ms-Persona-details { + padding-left: $ms-Persona-sizeLg + $ms-Persona-imageDetailsLgSpace; + } + + .ms-Persona-secondaryText { + padding-top: 3px; + } + + .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; // Show tertiary text + } +} + + +//== Modifier: Extra Large Persona +// +.ms-Persona.ms-Persona--xl { + height: $ms-Persona-sizeXl; + + .ms-Persona-imageArea, + .ms-Persona-image { + max-width: $ms-Persona-sizeXl; + height: $ms-Persona-sizeXl; + } + + .ms-Persona-placeholder { + font-size: 95px; + top: 12px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-su; + line-height: $ms-Persona-sizeXl; + } + + .ms-Persona-presence { + height: $ms-Persona-presenceSizeXl; + width: $ms-Persona-presenceSizeXl; + left: 71px; + border-width: 4px; + } + + .ms-Persona-presenceIcon { + line-height: $ms-Persona-presenceSizeXl; + font-size: $ms-font-size-xl; + position: relative; + top: 1px; + } + + .ms-Persona-details { + padding-left: $ms-Persona-sizeXl + $ms-Persona-imageDetailsXlSpace; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-xl; + font-weight: $ms-font-weight-semilight; + margin-top: 0; + } + + .ms-Persona-secondaryText { + padding-top: 2px; + } + + .ms-Persona-tertiaryText, + .ms-Persona-optionalText { + padding-top: 5px; + display: block; // Show tertiary and optional text + } +} + + +//== Modifier: Persona with darker text +// +// Note: Typically applied when the component has a colored background. +.ms-Persona.ms-Persona--darkText { + .ms-Persona-primaryText { + color: $ms-color-neutralDark; + } + + .ms-Persona-secondaryText, + .ms-Persona-tertiaryText, + .ms-Persona-optionalText { + color: $ms-color-neutralPrimary; + } +} + + +//== Modifier: Selectable Persona +// +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; + + &:not(.ms-Persona--xl) { + &:hover, + &:focus { + background-color: $ms-color-themeLighter; + outline: 1px solid transparent; + } + } +} + + +//== Presence indicator variants. + +//== Modifier: Persona with available presence +// +.ms-Persona.ms-Persona--available { + .ms-Persona-presence { + background-color: $ms-color-presence-available; + } +} + + +//== Modifier: Persona with away presence +// +.ms-Persona.ms-Persona--away { + .ms-Persona-presence { + background-color: $ms-color-presence-away; + } + + .ms-Persona-presenceIcon { + position: relative; + left: 1px; + } +} + + +//== Modifier: Persona with blocked presence +// +.ms-Persona.ms-Persona--blocked { + .ms-Persona-presence { + background-color: $ms-color-white; + + &::before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset; + border-radius: 50%; + } + + &::after { + content: ''; + width: 100%; + height: 2px; + background-color: $ms-color-presence-busy-average; + transform: rotate(-45deg); + position: absolute; + top: 5px; + left: 0; + } + } + + &.ms-Persona--lg { + .ms-Persona-presence { + &::after { + top: 9px; + } + } + } + + &.ms-Persona--xl { + .ms-Persona-presence { + &::after { + top: 13px; + } + } + } +} + + +//== Modifier: Persona with busy presence +// +.ms-Persona.ms-Persona--busy { + .ms-Persona-presence { + background-color: $ms-color-presence-busy-average; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + } + } +} + + +//== Modifier: Persona with do not disturb presence +// +.ms-Persona.ms-Persona--dnd { + .ms-Persona-presence { + background-color: $ms-color-presence-dnd-background; + } +} + + +//== Modifier: Persona with offline presence +// +.ms-Persona.ms-Persona--offline { + .ms-Persona-presence { + background-color: $ms-color-presence-offline; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-black; + box-shadow: 0 0 0 1px $ms-color-white inset; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-white; + box-shadow: 0 0 0 1px $ms-color-black inset; + } + } +} + +//== Modifier: FacePile +// +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; + + &:hover { + cursor: pointer; + } + + .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: $ms-Persona-sizeXs; + } + + .ms-Persona-initials { + position: relative; + } + + .ms-Persona-details { + display: none; + } + + .ms-Persona-presence { + display: none; + } +} + +//== Modifier: FacePile +// +.ms-Persona.ms-Persona--token { + display: inline-flex; + width: auto; + background-color: $ms-color-neutralLighter; + border-radius: 20px; + margin: 4px; + + &:hover { + cursor: pointer; + } + + .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: $ms-Persona-sizeXs; + height: $ms-Persona-sizeXs; + padding: 0; + line-height: 30px; + transition: background-color $ms-duration1 $ms-ease1; + text-align: center; + + &:hover { + background-color: $ms-color-neutralLight; + } + } + + .ms-Persona-imageArea { + width: 100%; + min-width: $ms-Persona-sizeXs; + } + + .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-right: 8px; + } + + .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; + } + + .ms-Persona-initials { + position: relative; + } +} diff --git a/dist/components/PersonaCard/PersonaCard.hbs b/dist/components/PersonaCard/PersonaCard.hbs new file mode 100644 index 00000000..5a8e1014 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.hbs @@ -0,0 +1,49 @@ + + +
    +
    + {{> 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 00000000..ec62b5ef --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.json @@ -0,0 +1,3 @@ +{ + "name": "PersonaCard" +} diff --git a/dist/components/PersonaCard/PersonaCard.scss b/dist/components/PersonaCard/PersonaCard.scss new file mode 100644 index 00000000..38e11884 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.scss @@ -0,0 +1,211 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Persona Card styles + + +// Small +// +// The persona card docks to the bottom of the viewport. +.ms-PersonaCard { + @include ms-baseFont; + @include ms-u-slideUpIn10; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: $ms-color-neutralLighter; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 20px; +} + +.ms-PersonaCard-actions { + @include ms-u-borderBox; + position: relative; + list-style: none; + margin: 0; + padding: 0 10px; + background-color: $ms-color-white; + height: 48px; + + &::before { + content: ''; + position: absolute; + top: 47px; + left: 0; + width: 100%; + border-top: 1px solid $ms-color-neutralTertiaryAlt; + } +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: $ms-icon-size-m; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: $ms-color-neutralSecondary; + outline: transparent; + position: relative; + @include ms-u-borderBox; + + &:hover { + color: $ms-color-neutralDark; + } + + &:active { + color: $ms-color-themePrimary; + } + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; + top: 0; + left: 0; + z-index: 100; + } + + // Currently-selected action + &.is-active { + color: $ms-color-themePrimary; + + // Arrow + &::after { + @include ms-u-borderBox; + @include rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid $ms-color-neutralTertiaryAlt; + background-color: $ms-color-white; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 13px; + } + } +} + +.ms-PersonaCard-overflow { + font-size: $ms-font-size-m; + color: $ms-color-neutralPrimary; + float: right; + margin-top: -1px; + + &:hover { + color: $ms-color-themePrimary; + } +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: -95px; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: $ms-color-white; +} + +// Active detail items +.ms-PersonaCard-details { + display: none; + width: 100%; + margin: 0; + max-height: 300px; + min-height: 48px; + color: $ms-color-neutralSecondary; + padding: 9px 20px; + box-sizing: border-box; + + &.is-active { + display: block; + } + + // State: Contents are collapsed to a single line. + &.is-collapsed { + height: 30px; + overflow: hidden; + + // Show the expander icon. + .ms-PersonaCard-detailExpander::after { + @include ms-Icon--ChevronDown; + } + } +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +// Icon to expand a collapsed actionDetails section. +.ms-PersonaCard-detailExpander { + color: $ms-color-neutralPrimary; + cursor: pointer; + font-size: $ms-icon-size-m; + height: 30px; + line-height: 30px; + margin-top: 2px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; + + &::after { + @include ms-Icon; + @include ms-Icon--ChevronUp; + } +} + +.ms-PersonaCard-detailLine { + color: $ms-color-neutralPrimary; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: $ms-color-neutralSecondary; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart { + &::after { + display: none; // Hide arrow for orgchart action + } +} + +@media (min-width: $ms-screen-md-min) { + // Undock the persona card and give it a shadow. + .ms-PersonaCard { + @include drop-shadow; + max-width: 360px; + position: relative; + } + + .ms-ContextualHost { + .ms-PersonaCard { + box-shadow: none; + } + } +} diff --git a/dist/components/Pivot/Pivot.hbs b/dist/components/Pivot/Pivot.hbs new file mode 100644 index 00000000..020c3ae2 --- /dev/null +++ b/dist/components/Pivot/Pivot.hbs @@ -0,0 +1,24 @@ + + +
    + + {{#each props.links}} +
    + {{content}} +
    + {{/each}} +
    \ No newline at end of file diff --git a/dist/components/Pivot/Pivot.json b/dist/components/Pivot/Pivot.json new file mode 100644 index 00000000..1eb16a64 --- /dev/null +++ b/dist/components/Pivot/Pivot.json @@ -0,0 +1,3 @@ +{ + "name": "Pivot" +} diff --git a/dist/components/Pivot/Pivot.scss b/dist/components/Pivot/Pivot.scss new file mode 100644 index 00000000..1c250d65 --- /dev/null +++ b/dist/components/Pivot/Pivot.scss @@ -0,0 +1,204 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Pivot and tab styles + + +.ms-Pivot { + @include ms-baseFont; + @include ms-u-normalize; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; +} + +.ms-Pivot-links { + font-size: 0; // Bring inline-block children together + height: 40px; + list-style-type: none; + padding: 0; + white-space: nowrap; +} + +.ms-Pivot-link { + color: $ms-color-neutralPrimary; + display: inline-block; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + line-height: 40px; + margin-right: 8px; + padding: 0 8px; + text-align: center; + vertical-align: top; + + &:hover { + cursor: pointer; + } + + // Underline, not yet visible + &::before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + left: 8px; + position: absolute; + right: 8px; + transition: background-color $ms-duration2 $ms-ease2; + } + + // Make room for the heavier text of the selected state + &::after { + color: transparent; + content: attr(title); + display: block; + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; + } + + //== State: Selected + &.is-selected { + font-weight: $ms-font-weight-semibold; + position: relative; + + // Show the underline + &::before { + background-color: $ms-color-themePrimary; + } + } + + //== State: Disabled + &.is-disabled { + color: $ms-color-neutralTertiary; + } +} + + + + +// @TODO: Determine if any of the styles below this are necessary anymore. + + +// Overflow (ellipsis) +.ms-Pivot-link.ms-Pivot-link--overflow { + color: $ms-color-neutralSecondary; + + &.is-selected { + color: $ms-color-themePrimary; + } + + &:hover:not(.is-selected), + &:focus:not(.is-selected) { + color: $ms-color-neutralDark; + } + + &:active { + color: $ms-color-themePrimary; + } +} + +// Ellipsis icon +.ms-Pivot-ellipsis { + font-size: $ms-font-size-m-plus; + position: relative; + top: 0; +} + +// Pivot content, hidden by default +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + + +//== Modifier: Large Pivots +// +.ms-Pivot.ms-Pivot--large { + .ms-Pivot-link { + font-size: $ms-font-size-l; + + &.is-selected { + font-weight: $ms-font-weight-semilight; + } + } + + .ms-Pivot-link.ms-Pivot-link--overflow { + &::after { + font-size: $ms-font-size-l; + } + } +} + + +//== Modifier: Tabs +// +.ms-Pivot.ms-Pivot--tabs { + + .ms-Pivot-link { + height: 40px; + background-color: $ms-color-neutralLighter; + line-height: 40px; + margin-right: -2px; // Remove space next to inline-block element + padding: 0 10px; + + &:hover:not(.is-selected):not(.ms-Pivot-link--overflow), + &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: $ms-color-black; + } + + &:active { + color: $ms-color-white; + background-color: $ms-color-themePrimary; + } + + //== State: Selected + &.is-selected { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + font-weight: $ms-font-weight-semilight; + } + } + + .ms-Pivot-link.ms-Pivot-link--overflow { + &:hover:not(.is-selected), + &:focus:not(.is-selected) { + background-color: $ms-color-white; + } + + &:active { + background-color: $ms-color-themePrimary; + } + } +} + +// @TODO: Confirm that this component is not responsive. +// +// @media (min-width: $ms-screen-lg-min) { +// .ms-Pivot-link { +// font-size: $ms-font-size-m; +// } + +// .ms-Pivot-link.ms-Pivot-link--overflow { +// &:after { +// font-size: $ms-font-size-m; +// } +// } +// } + +// All high contrast styling rules +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs { + .ms-Pivot-link { + &.is-selected { + font-weight: $ms-font-weight-semibold; + } + } + } +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.hbs b/dist/components/ProgressIndicator/ProgressIndicator.hbs new file mode 100644 index 00000000..6dd74ff2 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.hbs @@ -0,0 +1,13 @@ + + +
    +
    {{props.title}}
    +
    +
    +
    +
    +
    {{props.title}}
    +
    \ No newline at end of file diff --git a/dist/components/ProgressIndicator/ProgressIndicator.json b/dist/components/ProgressIndicator/ProgressIndicator.json new file mode 100644 index 00000000..a3119c9f --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.json @@ -0,0 +1,3 @@ +{ + "name": "ProgressIndicator" +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.scss b/dist/components/ProgressIndicator/ProgressIndicator.scss new file mode 100644 index 00000000..64f3ffe3 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.scss @@ -0,0 +1,67 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// ProgressIndicator Styles + + +$ProgressIndicatorMarginBetweenText: 8px; +$ProgressIndicatorButtonsWidth: 218px; +$ProgressIndicatorTextHeight: 18px; + +.ms-ProgressIndicator { + @include ms-baseFont; + font-weight: $ms-font-weight-regular; +} + +.ms-ProgressIndicator-itemName { + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: $ProgressIndicatorMarginBetweenText / 2; + line-height: $ProgressIndicatorTextHeight + 2; +} + +.ms-ProgressIndicator-itemDescription { + color: $ms-color-neutralSecondaryAlt; + font-size: $ms-font-size-xs; + line-height: $ProgressIndicatorTextHeight; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: $ProgressIndicatorMarginBetweenText 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: $ms-color-neutralLight; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + background-color: $ms-color-themePrimary; + height: 2px; + position: absolute; + transition: width .3s ease; + width: 0; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; + } +} diff --git a/dist/components/RadioButton/RadioButton.hbs b/dist/components/RadioButton/RadioButton.hbs new file mode 100644 index 00000000..698eff03 --- /dev/null +++ b/dist/components/RadioButton/RadioButton.hbs @@ -0,0 +1,16 @@ + + +
  • + + +
    • \ No newline at end of file diff --git a/dist/components/RadioButton/RadioButton.json b/dist/components/RadioButton/RadioButton.json new file mode 100644 index 00000000..2816006c --- /dev/null +++ b/dist/components/RadioButton/RadioButton.json @@ -0,0 +1,6 @@ +{ + "name": "RadioButton", + "dependencies": [ + "Label" + ] +} diff --git a/dist/components/RadioButton/RadioButton.scss b/dist/components/RadioButton/RadioButton.scss new file mode 100644 index 00000000..c43076c3 --- /dev/null +++ b/dist/components/RadioButton/RadioButton.scss @@ -0,0 +1,197 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// RadioButton styles + +$ms-radiobutton-field-size: 20px; +$ms-radiobutton-transition-duration: 200ms; +$ms-radiobutton-transition-duration-inner: 150ms; +$ms-radiobutton-transition-timing: cubic-bezier(.4, 0, .23, 1); + +.ms-RadioButton { + @include ms-baseFont; + box-sizing: border-box; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + min-height: 36px; + position: relative; + + .ms-Label { + font-size: $ms-font-size-m; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; + } +} + +// The hidden input +.ms-RadioButton-input { + position: absolute; + opacity: 0; +} + +// The radio button circle container +.ms-RadioButton-field::before { + content: ''; + display: inline-block; + border: 2px solid $ms-color-neutralTertiary; + width: $ms-radiobutton-field-size; + height: $ms-radiobutton-field-size; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: border-color; + transition-duration: $ms-radiobutton-transition-duration; + transition-timing-function: $ms-radiobutton-transition-timing; + border-radius: 50%; +} + +// The inner circle indicating a checked radio button +.ms-RadioButton-field::after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: 8px; + left: 8px; + bottom: 0; + right: 0; + transition-property: top, left, width, height; + transition-duration: $ms-radiobutton-transition-duration-inner; + transition-timing-function: $ms-radiobutton-transition-timing; + box-sizing: border-box; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } +} + +// The radio button field +.ms-RadioButton-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; + + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } + + //== State: A disabled radio button + // + &.is-disabled { + cursor: default; + + &::before { + background-color: $ms-color-neutralTertiaryAlt; + border-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + } + } + + .ms-Label { + color: $ms-color-neutralTertiary; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } + } + + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralTertiaryAlt; + } + } + } + + //== State: A radio button in focus + // + &.in-focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + } +} + + +//== State: When the radio button is selected (checked) +// +.ms-RadioButton-field.is-checked { + &::before { + border: 2px solid $ms-color-themePrimary; + background-color: transparent; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &::after { + background-color: $ms-color-themePrimary; + top: 5px; + left: 5px; + width: 10px; + height: 10px; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + } + } + + &:hover, + &:focus { + &::before { + border-color: $ms-color-themePrimary; + } + } + + //== State: A radio button in focus + // + &.in-focus { + &::before { + border-color: $ms-color-themePrimary; + } + } +} diff --git a/dist/components/SearchBox/SearchBox.hbs b/dist/components/SearchBox/SearchBox.hbs new file mode 100644 index 00000000..5422ed13 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.hbs @@ -0,0 +1,16 @@ + + + +
    + + + {{renderPartial props.clearButton.component props.clearButton.props}} + {{#if props.exitButton}}{{renderPartial props.exitButton.component props.exitButton.props}}{{/if~}} + {{#if props.filterButton}}{{renderPartial props.filterButton.component props.filterButton.props}}{{~/if}} +
    \ No newline at end of file diff --git a/dist/components/SearchBox/SearchBox.json b/dist/components/SearchBox/SearchBox.json new file mode 100644 index 00000000..783f569b --- /dev/null +++ b/dist/components/SearchBox/SearchBox.json @@ -0,0 +1,26 @@ +{ + "name": "SearchBox", + "props": { + "label": "Search", + "defaultValue": "", + "icon": "search", + "clearButton": { + "component": "CommandButton", + "props": { + "icon": "x", + "modifier": "noLabel", + "tag": "button", + "customClasses": "ms-SearchBox-close" + } + }, + "filterButton": { + "component": "CommandButton", + "props": { + "icon": "Filter", + "modifier": "noLabel", + "tag": "button", + "customClasses": "ms-SearchBox-filter" + } + } + } +} diff --git a/dist/components/SearchBox/SearchBox.scss b/dist/components/SearchBox/SearchBox.scss new file mode 100644 index 00000000..5babadec --- /dev/null +++ b/dist/components/SearchBox/SearchBox.scss @@ -0,0 +1,371 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Search box styles + +$SearchBox-width: 208px; +$SearchBox-field-padding-left: 45px; +$SearchBox-height: 36px; +$SearchBox-commandbarHeight: 40px; +$SearchBox-commandbar-md-height: 44px; +$disabled-color: #F4F4F4; +$SearchBox-command-color: #F4F4F4; + +.ms-SearchBox { + @include ms-baseFont; + @include ms-u-normalize; + height: $SearchBox-height; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + position: relative; + margin-bottom: 10px; + display: inline-block; + overflow: hidden; + background-color: $ms-color-white; + + // State: Active searchbox + &.is-active { + z-index: $ms-zIndex-front; + + .ms-SearchBox-label { + display: none; + } + + .ms-SearchBox-clear { + display: block; + } + } + + &:hover { + background-color: $ms-color-themeLighter; + + .ms-SearchBox-label { + color: $ms-color-black; + + .ms-Icon { + color: $ms-color-neutralPrimary; + } + } + } + + // State: Disabled searchbox + &.is-disabled { + background-color: $disabled-color; + pointer-events: none; + + .ms-SearchBox-label { + @include ms-Label-is-disabled; + } + + .ms-SearchBox-icon { + color: $ms-color-neutralTertiary; + } + + .ms-SearchBox-field { + color: $ms-color-neutralTertiary; + background-color: transparent; + border-color: $ms-color-neutralLighter; + cursor: default; + } + } +} + +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + right: 0; + z-index: $ms-zIndex-front; + + .ms-CommandButton-button { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + height: $SearchBox-height; + } + + .ms-CommandButton-icon { + color: $ms-color-white; + } +} + +.ms-SearchBox-icon { + position: relative; + top: 50%; + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + margin-left: 12px; + margin-right: 6px; + color: $ms-color-themePrimary; + vertical-align: top; +} + +.ms-SearchBox-field { + position: relative; + @include ms-u-normalize; + border: 1px solid $ms-color-themeTertiary; + outline: transparent 1px solid; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; + color: $ms-color-black; + height: $SearchBox-height; + padding: 6px 3px 7px $SearchBox-field-padding-left; + width: $SearchBox-width; + background-color: transparent; + z-index: $ms-zIndex-middle; + transition: padding-left $ms-duration1; + + &:focus { + padding: 6px 32px 7px 10px; + border-color: $ms-color-themePrimary; + background-color: $ms-color-themeLighter; + } + + &::-ms-clear { + display: none; + } +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + height: $SearchBox-height; + line-height: $SearchBox-height; + color: $ms-color-neutralSecondary; +} + +//== Modifier: CommandBar Search +// +.ms-SearchBox.ms-SearchBox--commandBar { + @include ms-bgColor-white; + width: $SearchBox-width; + height: $SearchBox-commandbarHeight; + + .ms-SearchBox-field, + .ms-SearchBox-label { + height: $SearchBox-commandbarHeight; + } + + .ms-SearchBox-field { + transition: none; + border: 0; + + &:focus { + background-color: transparent; + padding: 6px 3px 7px $SearchBox-field-padding-left; + } + } + + .ms-SearchBox-clear, + .ms-SearchBox-filter, + .ms-SearchBox-exit { + display: none; + position: absolute; + top: 0; + z-index: $ms-zIndex-front; + color: $ms-color-neutralTertiary; + + .ms-CommandButton-button { + height: $SearchBox-commandbarHeight; + background-color: transparent; + } + } + + .ms-SearchBox-clear { + right: 8px; + } + + .ms-SearchBox-filter { + right: 8px; + + .ms-CommandButton-icon { + color: $ms-color-themePrimary; + } + } + + &::before { + position: absolute; + content: ' '; + right: 0; + bottom: 0; + left: 0; + margin: 0 8px; + border-bottom: 1px solid $ms-color-neutralLight; + } + + &:hover { + background-color: $ms-color-white; + + .ms-SearchBox-label { + color: $ms-color-neutralDark; + } + + .ms-SearchBox-icon { + color: $ms-color-themePrimary; + } + } + + &:focus { + background-color: transparent; + } + + &.is-active { + .ms-CommandButton { + .ms-SearchBox-exit, + .ms-SearchBox-filter { + display: block; + } + } + } + + &.is-collapsed { + width: 50px; + min-height: 40px; + z-index: $ms-zIndex-back; + background-color: $SearchBox-command-color; + + .ms-SearchBox-text { + display: none; + } + + .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); + } + + &::before { + visibility: hidden; + } + } + + &.is-collapsed.is-active { + width: 100%; + + .ms-SearchBox-field { + display: block; + cursor: text; + } + + .ms-SearchBox-text { + display: inline-block; + } + + @media only screen and (max-width: $ms-screen-md-max) { + width: 100%; + + .ms-SearchBox-clear { + display: inline-block; + right: 58px; + } + + .ms-SearchBox-filter { + display: inline-block; + } + + &.is-animated { + transition: width $ms-duration1 $ms-ease1; + } + } + + &::before { + visibility: visible; + } + } + + &.has-text { + .ms-SearchBox-clear { + display: inline-block; + + .ms-CommandButton-icon { + color: $ms-color-neutralTertiary; + + &:active { + color: $ms-color-themePrimary; + } + } + } + } + + @media only screen and (min-width: $ms-screen-xl-min) { + @include ms-bgColor-white; + border-right: 1px solid $ms-color-neutralLight; + } + + @media only screen and (max-width: $ms-screen-md-max) { + height: $SearchBox-commandbar-md-height; + + .ms-SearchBox-icon, + .ms-SearchBox-exit, + .ms-SearchBox-field, + .ms-SearchBox-label { + height: $SearchBox-commandbar-md-height; + line-height: $SearchBox-commandbar-md-height; + } + + .ms-SearchBox-icon, + .ms-SearchBox-exit, + .ms-SearchBox-filter, + .ms-SearchBox-clear { + font-size: 20px; + + .ms-CommandButton-button { + height: $SearchBox-commandbar-md-height; + } + } + + .ms-SearchBox-field, + .ms-SearchBox-label { + font-size: 16px; + } + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + @include ms-bgColor-white; + + .ms-SearchBox-label { + display: block; + line-height: $SearchBox-commandbarHeight; + height: $SearchBox-commandbarHeight; + + .ms-SearchBox-text { + display: none; + } + } + + &::before { + visibility: visible; + } + + @media only screen and (max-width: $ms-screen-md-max) { + .ms-SearchBox-field { + width: 100%; + padding-right: 100px; + } + + .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox-exit { + display: inline-block; + } + + &.has-text { + .ms-SearchBox-filter { + .ms-CommandButton-icon { + color: $ms-color-neutralTertiary; + } + } + } + } +} diff --git a/dist/components/Spinner/Spinner.hbs b/dist/components/Spinner/Spinner.hbs new file mode 100644 index 00000000..3fc6e3f8 --- /dev/null +++ b/dist/components/Spinner/Spinner.hbs @@ -0,0 +1,13 @@ + + +
    + {{#if props.label}} +
    + {{props.label}} +
    + {{/if}} +
    \ No newline at end of file diff --git a/dist/components/Spinner/Spinner.json b/dist/components/Spinner/Spinner.json new file mode 100644 index 00000000..a09023e5 --- /dev/null +++ b/dist/components/Spinner/Spinner.json @@ -0,0 +1,3 @@ +{ + "name": "Spinner" +} diff --git a/dist/components/Spinner/Spinner.scss b/dist/components/Spinner/Spinner.scss new file mode 100644 index 00000000..b0856beb --- /dev/null +++ b/dist/components/Spinner/Spinner.scss @@ -0,0 +1,51 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Spinner styles + + +.ms-Spinner { + @include ms-baseFont; + position: relative; + height: 20px; + + &.ms-Spinner--large { + height: 28px; + + .ms-Spinner-label { + left: 34px; + top: 6px; + } + } +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: $ms-color-themePrimary; + opacity: 0; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; + } +} + +.ms-Spinner-label { + @include ms-baseFont; + position: relative; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; + color: $ms-color-themePrimary; + left: 28px; + top: 2px; +} diff --git a/dist/components/Table/Table.hbs b/dist/components/Table/Table.hbs new file mode 100644 index 00000000..75d23fbc --- /dev/null +++ b/dist/components/Table/Table.hbs @@ -0,0 +1,31 @@ + + + + + + + {{#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 00000000..b354b7f1 --- /dev/null +++ b/dist/components/Table/Table.json @@ -0,0 +1,3 @@ +{ + "name": "Table" +} diff --git a/dist/components/Table/Table.scss b/dist/components/Table/Table.scss new file mode 100644 index 00000000..b5050ad8 --- /dev/null +++ b/dist/components/Table/Table.scss @@ -0,0 +1,126 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Data table styles + +.ms-Table { + @include ms-baseFont; + display: table; + width: 100%; + border-collapse: collapse; +} + +// makes the table cells not expand with the content, keeping the table cells at a fixed size +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-s; + color: $ms-color-neutralPrimary; + + // Rows can be selected. + &.is-selected { + background-color: $ms-color-themeLight; + + // A checkmark in a selected row. + .ms-Table-rowCheck { + background-color: $ms-color-themePrimary; + + // Hide the checkbox. + &::before { + display: none; + } + + // But show the mark. + &::after { + @include ms-Icon--CheckboxComposite; + color: $ms-color-white; + } + } + } +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +// Style the first row as a header. +.ms-Table thead th, +.ms-Table-head { + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xs; + color: $ms-color-neutralSecondary; +} + +.ms-Table thead, +.ms-Table-head { + td, + th, + .ms-Table-cell, + .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid $ms-color-neutralLight; + } +} + +// On selectable tables, each row has a checkbox. +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; + + // Empty checkbox. + &::after { + @include ms-Icon; + @include ms-Icon--Checkbox; + color: $ms-color-neutralTertiary; + font-size: 12px; + position: absolute; + left: 4px; + top: 1px; + } +} + +// A table with selectable rows +.ms-Table--selectable { + tr:hover, + .ms-Table-row:hover { + background-color: $ms-color-neutralLighter; + cursor: pointer; + outline: 1px solid transparent; + } +} + +// All high contrast styling rules +@media screen and (-ms-high-contrast: active) { + .ms-Table-row { + // Rows can be selected. + &.is-selected { + // A checkmark in a selected row. + .ms-Table-rowCheck { + background: none; + + // Show the checkbox. + &::before { + display: block; + } + } + } + } +} diff --git a/dist/components/TextField/TextField.hbs b/dist/components/TextField/TextField.hbs new file mode 100644 index 00000000..45bd9d60 --- /dev/null +++ b/dist/components/TextField/TextField.hbs @@ -0,0 +1,11 @@ + + +
    + {{#if props.label}}{{/if}} + {{#if props.textfield}}{{/if}}{{#if props.multiline}}{{/if}}{{#if props.description}}{{props.description}}{{/if}} +
    \ No newline at end of file diff --git a/dist/components/TextField/TextField.json b/dist/components/TextField/TextField.json new file mode 100644 index 00000000..ee904cbd --- /dev/null +++ b/dist/components/TextField/TextField.json @@ -0,0 +1,3 @@ +{ + "name": "TextField" +} diff --git a/dist/components/TextField/TextField.scss b/dist/components/TextField/TextField.scss new file mode 100644 index 00000000..fb65ecb1 --- /dev/null +++ b/dist/components/TextField/TextField.scss @@ -0,0 +1,235 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +@import '../Label/Label'; + +// +// Office UI Fabric +// -------------------------------------------------- +// Single line (input) and multiline (textarea) form field styles + +.ms-TextField { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + margin-bottom: 8px; + + .ms-Label { + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-semibold; + } +} + +//= State: A disabled textfield +.ms-TextField.is-disabled { + .ms-TextField-field { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + + @include input-placeholder { + color: $ms-color-neutralTertiary; + } +} + +//= State: A required textfield +.ms-TextField.is-required { + .ms-Label { + @include ms-Label-is-required + } + + @include input-placeholder { + @include ms-Label-is-required + } +} + +//= State: An active textfield +.ms-TextField.is-active { + border-color: $ms-color-themePrimary; +} + +.ms-TextField-field { + @include ms-u-normalize; + border: 1px solid $ms-color-neutralTertiaryAlt; + border-radius: 0; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; + color: $ms-color-neutralPrimary; + height: 32px; + padding: 6px 12px 7px; + width: 100%; + min-width: 180px; + outline: 0; + text-overflow: ellipsis; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + } + + &:focus { + border-color: $ms-color-themePrimary; + } + + &:hover, + &:focus { + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &[disabled] { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + + @include input-placeholder { + color: $ms-color-neutralSecondary; + } +} + +.ms-TextField-description { + color: $ms-color-neutralSecondaryAlt; + font-size: $ms-font-size-xs; +} + + +//== Modifier: Single line (default), placeholder label +// +.ms-TextField.ms-TextField--placeholder { + position: relative; + background-color: $ms-color-white; + + .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: $ms-zIndex-middle; + } + + .ms-Label { + position: absolute; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; + color: $ms-color-neutralSecondary; + padding: 6px 12px 7px; + pointer-events: none; + z-index: $ms-zIndex-back; + } + + &.is-disabled { + color: $ms-color-neutralTertiary; + + .ms-Label { + @include ms-Label-is-disabled; + } + } +} + + +//== Modifier: Single line (default), underlined +// +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid $ms-color-neutralTertiaryAlt; + display: table; + width: 100%; + min-width: 180px; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &:active, + &:focus { + border-color: $ms-color-themePrimary; + } + + .ms-Label { + font-size: $ms-font-size-m; + margin-right: 8px; + display: table-cell; + vertical-align: top; + padding-left: 12px; + padding-top: 9px; + height: 32px; + width: 1%; + white-space: nowrap; + } + + .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 3px; + + &:active, + &:focus, + &:hover { + outline: 0; + } + } + + &.is-disabled { + border-bottom-color: $ms-color-neutralLight; + + .ms-Label { + @include ms-Label-is-disabled; + } + + .ms-TextField-field { + background-color: transparent; + color: $ms-color-neutralTertiary; + } + } + + &.is-active { + border-color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } +} + + +//== Modifier: Multiline textfield +// +.ms-TextField.ms-TextField--multiline { + .ms-TextField-field { + @include ms-baseFont; + color: $ms-color-neutralSecondary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; + } +} diff --git a/dist/components/Toggle/Toggle.hbs b/dist/components/Toggle/Toggle.hbs new file mode 100644 index 00000000..bad0682c --- /dev/null +++ b/dist/components/Toggle/Toggle.hbs @@ -0,0 +1,16 @@ + + + +
    + {{props.description}} + + +
    diff --git a/dist/components/Toggle/Toggle.json b/dist/components/Toggle/Toggle.json new file mode 100644 index 00000000..c8c368a6 --- /dev/null +++ b/dist/components/Toggle/Toggle.json @@ -0,0 +1,6 @@ +{ + "name": "Toggle", + "dependencies": [ + "Label" + ] +} diff --git a/dist/components/Toggle/Toggle.scss b/dist/components/Toggle/Toggle.scss new file mode 100644 index 00000000..f8a5728d --- /dev/null +++ b/dist/components/Toggle/Toggle.scss @@ -0,0 +1,252 @@ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Toggle styles + + +@import '../Label/Label.scss'; + +// Slider mixin +@mixin ms-Toggle-slider($direction) { + // Slider pseudo element + &::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + #{$direction}: 4px; + background-color: $ms-color-neutralSecondary; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(.4, 0, .23, 1); + + @media screen and (-ms-high-contrast: active) { + border: 2.5px solid $ms-color-white; + height: 15px; + outline: 0; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-black; + } + } + + @if $direction == left { + &::before { + right: auto; + } + } + + @if $direction == right { + &::before { + background-color: $ms-color-white; + left: 28px; + } + } +} + +// Toggle +.ms-Toggle { + @include ms-baseFont; + @include ms-font-m; + @include ms-u-normalize; + position: relative; + display: block; + margin-bottom: 26px; + + // Action label (on/off) on the right of the toggle + .ms-Label { + position: relative; + top: -2px; + padding: 0 0 0 50px; + } + + // 'Off' state - slider on the left + & .ms-Toggle-field { + @include ms-Toggle-slider(left); + + // Show the off label / hide the on label + .ms-Label--off { + display: block; + } + + .ms-Label--on { + display: none; + } + } + + // 'On' state - slider on the right + & .ms-Toggle-field.is-selected { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + @include ms-Toggle-slider(right); + + // Show the on label / hide the off label + .ms-Label--off { + display: none; + } + + .ms-Label--on { + display: block; + } + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; + } + } + + &:focus, + &:hover { + & + .ms-Toggle-field { + border-color: $ms-color-neutralSecondary; + } + + & + .ms-Toggle-field::before { + background-color: $ms-color-neutralPrimary; + } + + &:checked + .ms-Toggle-field { + background-color: $ms-color-themeDarkAlt; + border-color: $ms-color-themeDarkAlt; + } + + &:checked + .ms-Toggle-field::before { + background-color: $ms-color-white; + } + } + + &:active { + &:checked + .ms-Toggle-field { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDark; + } + } + + .ms-Toggle-field { + &:focus, + &:hover { + border-color: $ms-color-neutralPrimary; + } + + &.is-selected { + &:focus, + &:hover { + background-color: $ms-color-themeDarkAlt; + border-color: $ms-color-themeDarkAlt; + } + } + + .ms-Label { + color: $ms-color-black; + user-select: none; + } + + &:hover { + .ms-Label { + color: $ms-color-black; + } + } + + &:active { + .ms-Label { + color: $ms-color-neutralPrimary; + } + } + } + + // Disabled state + &.is-disabled { + .ms-Label { + @include ms-Label-is-disabled; + } + + .ms-Toggle-field { + background-color: $ms-color-white; + border-color: $ms-color-neutralTertiaryAlt; + pointer-events: none; + cursor: default; + + &::before { + background-color: $ms-color-neutralTertiaryAlt; + } + } + + .ms-Toggle-field, + .ms-Toggle-field::before { + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + } + } + } +} + +// Description text +.ms-Toggle-description { + position: relative; + font-size: $ms-font-size-m; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +// Toggle input field +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 45px; + height: 20px; + box-sizing: border-box; + border: 2px solid $ms-color-neutralTertiary; + border-radius: 20px; + cursor: pointer; + transition-property: background, left, border-color; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(.4, 0, .23, 1); + outline: 0; + + &:hover, + &:focus { + border-color: $ms-color-neutralSecondary; + } +} + +// On/Off slide states +.ms-Toggle-input { + display: none; +} + +//== Modifier: Toggle with description text left +// +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; + + .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; + } + + .ms-Toggle-field { + float: right; + } +} diff --git a/dist/css/fabric.components.css b/dist/css/fabric.components.css new file mode 100644 index 00000000..78331ddd --- /dev/null +++ b/dist/css/fabric.components.css @@ -0,0 +1,6203 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Breadcrumb { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline-block; + margin-right: -4px; +} + +.ms-Breadcrumb-chevron { + font-size: 12px; + color: #666666; + vertical-align: top; + margin: 13px 4px; + line-height: 1; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: #0078d7; + padding: 8px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu::before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: #ffffff; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: 0; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + font-weight: 100; + font-size: 21px; + color: #333333; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 9px 3px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 2px 0; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 14px; + font-weight: 400; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button.is-hidden { + display: none; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Button:hover { + color: #1aebff; + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Button:hover { + color: #37006e; + border-color: #37006e; + } +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button-label { + color: #333333; + font-weight: 600; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--small { + min-width: 60px; + min-height: 24px; + height: auto; + padding-top: 0; + padding-bottom: 4px; +} + +.ms-Button.ms-Button--small .ms-Button-label { + font-weight: 400; + font-size: 12px; +} + +.ms-Button.ms-Button--hero { + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border: 0; + padding: 0; + position: relative; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + margin-right: 4px; + padding-top: 5px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + font-size: 12px; + height: 18px; + line-height: 18px; + width: 18px; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-size: 21px; + font-weight: 100; + position: relative; + text-decoration: none; + vertical-align: top; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + border: 1px solid #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + border: 1px solid #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + border: 1px solid #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + display: block; + height: auto; + max-width: 280px; + min-height: 72px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-weight: 600; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-weight: 400; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Callout { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + width: 288px; +} + +.ms-Callout.is-hidden { + display: none; +} + +.ms-Callout-header { + z-index: 105; + padding-top: 24px; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-title { + margin: 0; + font-weight: 300; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-weight: 300; + color: #333333; + font-size: 12px; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-link { + font-size: 14px; +} + +.ms-Callout-inner { + height: 100%; + padding-top: 0; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button { + color: #0078d7; +} + +.ms-Callout-actions .ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-weight: 100; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + padding-top: 12px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-inner { + padding-bottom: 12px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +.ms-CheckBox { + box-sizing: border-box; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-CheckBox .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +.ms-CheckBox-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +.ms-CheckBox-field::after { + content: '\E73E'; + font-family: 'FabricMDL2Icons'; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: 13px; + top: 0; + color: #ffffff; + line-height: 20px; + width: 20px; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field::after { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field::after { + color: #ffffff; + } +} + +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-CheckBox-field:hover::before, +.ms-CheckBox-field:focus::before { + border-color: #767676; +} + +.ms-CheckBox-field:hover .ms-Label, +.ms-CheckBox-field:focus .ms-Label { + color: #000000; +} + +.ms-CheckBox-field.is-disabled { + cursor: default; +} + +.ms-CheckBox-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-CheckBox-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-CheckBox-field.in-focus::before { + border-color: #767676; +} + +.ms-CheckBox-field.in-focus.is-disabled::before { + border-color: #c8c8c8; +} + +.ms-CheckBox-field.in-focus.is-checked::before { + border-color: #106ebe; +} + +.ms-CheckBox-field.is-checked::before { + border: 10px solid #0078d7; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-CheckBox-field.is-checked::after { + display: block; +} + +.ms-CheckBox-field.is-checked:hover::before, +.ms-CheckBox-field.is-checked:focus::before { + border-color: #106ebe; +} + +.ms-RadioButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + color: #333333; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-RadioButton .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-RadioButton-input { + position: absolute; + opacity: 0; +} + +.ms-RadioButton-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + border-radius: 50%; +} + +.ms-RadioButton-field::after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: 8px; + left: 8px; + bottom: 0; + right: 0; + transition-property: top, left, width, height; + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field::after { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field::after { + color: #600000; + } +} + +.ms-RadioButton-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-RadioButton-field:hover::before, +.ms-RadioButton-field:focus::before { + border-color: #767676; +} + +.ms-RadioButton-field:hover .ms-Label, +.ms-RadioButton-field:focus .ms-Label { + color: #000000; +} + +.ms-RadioButton-field.is-disabled { + cursor: default; +} + +.ms-RadioButton-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-RadioButton-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-RadioButton-field.is-disabled:hover::before, +.ms-RadioButton-field.is-disabled:focus::before { + border-color: #c8c8c8; +} + +.ms-RadioButton-field.in-focus::before { + border-color: #767676; +} + +.ms-RadioButton-field.is-checked::before { + border: 2px solid #0078d7; + background-color: transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked::after { + background-color: #0078d7; + top: 5px; + left: 5px; + width: 10px; + height: 10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::after { + background-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked:hover::before, +.ms-RadioButton-field.is-checked:focus::before { + border-color: #0078d7; +} + +.ms-RadioButton-field.is-checked.in-focus::before { + border-color: #0078d7; +} + +.ms-ChoiceFieldGroup { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin-bottom: 4px; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; + list-style: none; +} + +.ms-CommandBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #f4f4f4; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar .ms-CommandButton--actionButton { + border-right: 1px solid #eaeaea; +} + +.ms-CommandBar .ms-Button { + height: 100%; +} + +.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon { + padding-right: 0; +} + +.ms-CommandBar .ms-Button.is-hidden { + display: none; +} + +.ms-CommandBar .ms-SearchBox, +.ms-CommandBar .ms-SearchBox-field, +.ms-CommandBar .ms-SearchBox-label { + height: 100%; +} + +.ms-CommandBar .ms-SearchBox { + display: inline-block; + vertical-align: top; + transition: margin-right 0.267s; +} + +.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 220px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: 10; + } +} + +.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button { + font-size: 18px; + padding: 0 11px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar .ms-SearchBox { + margin-right: 24px; + } +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar { + height: 44px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar.search-expanded .ms-SearchBox { + margin-right: 8px; + } + + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + transition: none; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 4px; + height: 100%; +} + +.ms-CommandBar-sideCommands .ms-Button:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 20px; + } +} + +.ms-CommandButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: inline-block; + position: relative; + vertical-align: top; +} + +.ms-CommandButton.is-hidden { + display: none; +} + +.ms-CommandButton:disabled .ms-CommandButton-button, +.ms-CommandButton.is-disabled .ms-CommandButton-button { + cursor: default; +} + +.ms-CommandButton:disabled .ms-CommandButton-button:hover, +.ms-CommandButton.is-disabled .ms-CommandButton-button:hover { + background-color: #eff6fc; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label { + color: #a6a6a6; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-CommandButton .ms-ContextualMenu { + display: none; +} + +.ms-CommandButton-button, +.ms-CommandButton-splitIcon { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + cursor: pointer; + display: inline-block; + height: 40px; + line-height: 40px; + outline: 1px solid transparent; + padding: 0 8px; + position: relative; + vertical-align: top; + background: transparent; +} + +.ms-CommandButton-button:hover, +.ms-CommandButton-splitIcon:hover { + background-color: #eaeaea; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.ms-CommandButton-button:active, +.ms-CommandButton-splitIcon:active { + background-color: #eaeaea; +} + +.ms-CommandButton-button:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-button:focus, +.ms-CommandButton-splitIcon:focus { + outline: 0; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-button, + .ms-CommandButton-splitIcon { + height: 44px; + } + + .ms-CommandButton-button .ms-CommandButton-icon, + .ms-CommandButton-splitIcon .ms-CommandButton-icon { + font-size: 20px; + } + + .ms-CommandButton-button .ms-CommandButton-label, + .ms-CommandButton-splitIcon .ms-CommandButton-label { + line-height: 44px; + } +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton + .ms-CommandButton { + margin-left: 4px; + } +} + +.ms-CommandButton-icon { + display: inline-block; + margin-right: 8px; + position: relative; + font-size: 16px; + min-width: 16px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.ms-CommandButton-label { + font-size: 14px; + font-weight: 400; + color: #333333; + line-height: 40px; + height: 100%; + display: inline-block; + vertical-align: top; +} + +.ms-CommandButton-label:hover { + color: #212121; +} + +.ms-CommandButton-dropdownIcon, +.ms-CommandButton-splitIcon { + display: inline-block; + position: relative; + color: #333333; + font-size: 12px; + font-weight: 300; + min-width: 12px; + height: 100%; + vertical-align: top; + margin-left: 8px; +} + +.ms-CommandButton-dropdownIcon .ms-Icon, +.ms-CommandButton-splitIcon .ms-Icon { + line-height: normal; + padding-top: 16px; +} + +.ms-CommandButton-dropdownIcon:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-dropdownIcon, + .ms-CommandButton-splitIcon { + display: none; + } +} + +.ms-CommandButton-splitIcon { + margin-left: -2px; + width: 27px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + margin-left: -1px; + position: relative; + padding-top: 16px; +} + +.ms-CommandButton-splitIcon .ms-Icon::after { + position: absolute; + content: ' '; + width: 1px; + height: 16px; + top: 12px; + left: -8px; + border-left: 1px solid #c8c8c8; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + margin-right: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button { + padding: 0 12px; +} + +.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + background: none; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button { + width: 50px; + height: 40px; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + padding-right: 0; +} + +.ms-CommandButton.ms-CommandButton--pivot.is-active::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--pivot:hover::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, +.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + display: inline-block; +} + +@media only screen and (max-width: 479px) { + .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, + .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + font-size: 16px; + } +} + +.ms-ContextualMenu { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + max-width: 220px; + list-style-type: none; + position: relative; + background-color: #ffffff; +} + +.ms-ContextualMenu.is-hidden { + display: none; +} + +.ms-ContextualMenu-item { + position: relative; +} + +.ms-ContextualMenu-link { + box-sizing: border-box; + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 36px; + overflow: hidden; + line-height: 34px; + padding: 0 16px 0 25px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #f4f4f4; + color: #212121; +} + +.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon { + color: #212121; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; + border: 1px solid #666666; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #dadada; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon { + color: #000000; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #d0d0d0; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +.ms-ContextualMenu-link.is-disabled .ms-Icon { + color: #a6a6a6; + pointer-events: none; + cursor: default; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 36px; + line-height: 36px; + padding: 0 18px; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #333333; + font-size: 8px; + font-weight: 600; + width: 24px; + height: 36px; + line-height: 36px; + position: absolute; + text-align: center; + top: 0; + right: 0; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 16px 0 26px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; + font-weight: 600; + color: #333333; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + color: #333333; + content: '\E73E'; + font-size: 10px; + font-weight: 800; + height: 36px; + line-height: 36px; + position: absolute; + left: 7px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus { + color: #212121; + background-color: #f4f4f4; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover::after, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus::after { + color: #212121; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active { + color: #000000; + background-color: #d0d0d0; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active::after { + color: #000000; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link { + padding-left: 40px; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + width: 40px; + text-align: center; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons { + width: 220px; +} + +.ms-DatePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-weight: 100; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-weight: 400; + font-size: 15px; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #b3d6f2; +} + +.ms-DatePicker-day--disabled::before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-weight: 400; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0; + position: absolute; + top: 0; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: 300; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: 400; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-weight: 300; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-weight: 300; + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-weight: 600; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-DetailsList { + position: relative; +} + +.ms-DetailsList.is-horizontalConstrained { + overflow-x: auto; + overflow-y: inherit; +} + +.ms-DetailsList-cell { + word-break: break-word; +} + +.ms-DetailsHeader { + display: inline-block; + min-width: 100%; + height: 36px; + line-height: 36px; + white-space: nowrap; + padding-bottom: 1px; + border-bottom: 1px solid #eaeaea; + margin-bottom: 1px; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-DetailsHeader.is-singleSelect { + padding-left: 40px; +} + +.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover { + background: transparent; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 99; + cursor: col-resize; +} + +.ms-DetailsHeader-cell.is-check .ms-Check-circle { + visibility: hidden; +} + +.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, +.ms-DetailsHeader.is-allSelected .ms-Check-circle { + visibility: visible; +} + +.ms-DetailsHeader-cellWrapper { + display: inline-block; + position: relative; +} + +.ms-DetailsHeader-cellSizeWrapper { + display: inline-block; + vertical-align: top; + margin-right: 16px; +} + +.ms-DetailsHeader-cellSizeWrapper:last-child { + margin-right: 0; +} + +.ms-DetailsHeader-filterChevron.ms-Icon { + color: #a6a6a6; + padding-left: 4px; + vertical-align: middle; +} + +.ms-DetailsHeader-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + color: #a6a6a6; + border: 0; + background: none; + line-height: inherit; + margin: 0; + font-size: inherit; + font-family: inherit; + text-align: left; + height: 36px; + vertical-align: top; +} + +.ms-DetailsHeader-cell.is-check { + position: relative; + padding: 8px 10px; + margin: 0; +} + +.ms-DetailsHeader-cell:focus { + outline: transparent; +} + +.ms-DetailsHeader-cell.is-sortable { + color: #000000; + cursor: default; +} + +.ms-DetailsHeader-cell.is-sortable:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter { + position: absolute; + right: 0; + width: 20px; + top: 0; + bottom: 0; + padding: 0; + text-align: center; + color: #000000; +} + +.ms-DetailsHeader-cell.is-filter:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter::before { + content: ''; + position: absolute; + border-left: 1px solid #a6a6a6; + top: 10px; + bottom: 10px; + left: 0; +} + +.ms-DetailsHeader-cell.is-sizer { + position: absolute; + width: 16px; + cursor: col-resize; + bottom: 0; + top: 0; + height: inherit; + z-index: 99; +} + +.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow { + display: inline; +} + +.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-DetailsHeader-cell.is-resizing.is-sizer::after, +.ms-DetailsHeader-cell.is-sizer:hover::after { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 1px; + background: #eaeaea; + border: 1px solid #ffffff; +} + +.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before, +.ms-DetailsHeader-cell:focus::before { + content: ''; + pointer-events: none; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsHeader-sortArrow.ms-Icon { + font-size: 12px; + margin-right: 4px; + display: none; + color: #a6a6a6; +} + +.ms-DetailsRow { + position: relative; + display: inline-block; + min-width: 100%; + min-height: 36px; + vertical-align: top; + white-space: nowrap; + padding: 10px 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; +} + +.ms-DetailsRow:focus { + outline: transparent; +} + +.ms-DetailsRow.ms-DetailsRow.is-selected { + background: #deecf9; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover, +.ms-DetailsRow:hover { + background: #eff6fc; +} + +.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover, +.ms-DetailsRow.is-selected:hover { + background: #b3d6f2; +} + +.ms-DetailsRow-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + vertical-align: top; + white-space: normal; + word-break: break-word; + margin-right: 16px; +} + +.ms-DetailsRow-cell.is-clipped { + overflow: hidden; +} + +.ms-DetailsRow-cell:last-child { + margin-right: 0; +} + +.ms-DetailsRow-cellIcon { + display: inline-block; + margin-right: 6px; + position: relative; + bottom: -2px; +} + +.ms-DetailsRow-check { + display: inline-block; + cursor: default; + padding: 10px; + margin: -10px 0; + box-sizing: border-box; + vertical-align: top; + background: none; + border: 0; + visibility: hidden; +} + +.ms-DetailsRow-check:focus { + outline: transparent; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow.is-selected .ms-DetailsRow-check { + visibility: visible; +} + +.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox, +.ms-DetailsRow:focus .ms-DetailsRow-focusBox { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsRow-cellMeasurer { + position: absolute; + visibility: hidden; + white-space: nowrap; + top: -1000000000; +} + +.ms-Check { + display: inline-block; + cursor: default; + line-height: 0; + vertical-align: top; +} + +.ms-Check.is-checked .ms-Check-circle { + fill: #0078d7; + stroke: #ffffff; + stroke-width: 1px; +} + +.ms-Check.is-checked .ms-Check-check { + stroke: #ffffff; +} + +.ms-Check-circle { + fill: #ffffff; + stroke: #c8c8c8; +} + +.ms-Check-check { + stroke: #c8c8c8; +} + +.ms-Dialog { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: fixed; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} + +.ms-Dialog.is-open { + display: block; +} + +.ms-Dialog-title { + font-size: 21px; + font-weight: 100; + margin-bottom: 24px; +} + +.ms-Dialog-content { + position: relative; +} + +.ms-Dialog-subText { + color: #333333; + font-size: 12px; + font-weight: 300; + line-height: 1.5; +} + +.ms-Dialog-actions { + margin-top: 24px; + text-align: right; +} + +.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + background-color: #0078d7; + color: #ffffff; + font-size: 28px; + font-weight: 100; + padding: 28px 24px; + margin-top: -28px; + margin-left: -24px; + margin-right: -24px; +} + +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + right: 12px; + top: 12px; + z-index: 10; +} + +.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel { + color: #666666; + font-size: 16px; +} + +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: absolute; +} + +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; +} + +.ms-Panel .ms-Dropdown-items .ms-Dropdown-item { + padding: 7px 16px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Panel .ms-Dropdown-items::before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #212121; + font-size: 12px; + position: absolute; + right: 13px; + bottom: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + padding: 5px 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-title.ms-Dropdown-truncator { + height: auto; + display: block; + position: absolute; + visibility: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + z-index: 400; + overflow-y: scroll; + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; +} + +.ms-Dropdown-items::before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 36px; + padding: 7px 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #b3d6f2; + color: #000000; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #b3d6f2; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-FacePile { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 32px; + width: auto; +} + +.ms-FacePile .ms-FacePile-personaCardHost { + display: none; +} + +.ms-FacePile-addButton { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-FacePile-addButton .ms-Persona-presence, +.ms-FacePile-addButton .ms-Persona-details { + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover, +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus { + background-color: #005a9e; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active { + background-color: #004578; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active { + display: block; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover { + color: #212121; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled { + color: #c8c8c8; +} + +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: 14px; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-weight: 100; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Link { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-List { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + list-style-type: none; +} + +.ms-ListItem { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + color: #333333; + font-size: 14px; + font-weight: 400; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem::before, +.ms-ListItem::after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem::after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-weight: 300; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-weight: 400; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-weight: 300; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-weight: 300; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; + background-color: #333333; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-weight: 600; +} + +.ms-ListItem.is-unseen::after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + position: absolute; + top: 14px; + left: 7px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected::before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected::before, +.ms-ListItem.is-selected:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\e73A'; + font-size: 17px; + color: #767676; + position: absolute; + top: 23px; + left: 7px; + border: 0; +} + +.ms-ListItem.is-selected:hover { + background-color: #b3d6f2; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-weight: 400; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 12px; + font-weight: 400; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + display: inline-block; + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-ContextualHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + background-color: #ffffff; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-ContextualHost.is-positioned { + position: absolute; + margin: 0; +} + +.ms-ContextualHost.is-open { + display: inline-block; +} + +.ms-ContextualHost-beak { + box-shadow: 0 0 15px -5px #3c3c3c; + position: absolute; + width: 28px; + height: 28px; + background: #ffffff; + border: 1px solid #eaeaea; + box-sizing: border-box; + top: -6px; + display: none; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 0; + outline: 1px solid transparent; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak, +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + top: 40px; + display: none; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + left: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + right: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak { + display: block; + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + display: block; + bottom: -10px; +} + +.ms-ContextualHost-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + min-height: 10px; +} + +.ms-ContextualHost-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 10; +} + +.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title { + margin-right: 20px; +} + +.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak { + background-color: #0078d7; +} + +@media (min-width: 480px) { + .ms-ContextualHost { + margin: 16px; + } + + .ms-ContextualHost.is-positioned { + margin: 0; + } + + .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak, + .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + display: block; + } +} + +.ms-MessageBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.ms-MessageBar .ms-Link { + font-size: 12px; +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-right: 8px; + font-size: 16px; + color: #767676; +} + +.ms-MessageBar-text { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 12px; + font-weight: 400; +} + +.ms-MessageBar.ms-MessageBar--warning { + background-color: #fff4ce; +} + +.ms-MessageBar.ms-MessageBar--severeWarning { + background-color: #fed9cc; +} + +.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon { + color: #d83b01; +} + +.ms-MessageBar.ms-MessageBar--error { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--blocked { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-OrgChart { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; +} + +.ms-Overlay { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: rgba(255, 255, 255, 0.4); + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 0; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-u-overflowHidden { + overflow: hidden; +} + +.ms-Panel { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #ffffff; + width: 100%; + max-width: 340px; + box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2); + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: 10; + display: none; + height: 100%; +} + +.ms-Panel.animate-in { + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel.animate-out { + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel .ms-CommandBar { + padding-right: 0; + padding-left: 8px; +} + +.ms-Panel.ms-Panel--md { + max-width: 340px; +} + +.ms-Panel.ms-Panel--lg { + max-width: 644px; +} + +.ms-Panel.ms-Panel--xl { + max-width: 940px; +} + +.ms-Panel.ms-Panel--xxl { + max-width: 1192px; +} + +.ms-Panel--left { + box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2); + left: 0; + right: auto; +} + +.ms-Panel--left.animate-in { + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel--left.animate-out { + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 6px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 16px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-closeButton .ms-Icon--Cancel { + margin-top: 2px; +} + +@media (max-width: 639px) { + .ms-Panel-closeButton { + font-size: 20px; + line-height: 20px; + height: 44px; + right: 4px; + } +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; + height: 100%; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-weight: 100; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +.ms-PanelHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 10; +} + +.ms-PanelHost .ms-Overlay { + cursor: pointer; +} + +.ms-PeoplePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 1px solid #c8c8c8; + cursor: text; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker-searchBox.is-active, +.ms-PeoplePicker-searchBox:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #37006e; + } +} + +.ms-PeoplePicker-searchBox::-webkit-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox::-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-ms-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: 100%; + -ms-flex: 1; + flex: 1; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.ms-PeoplePicker-persona { + cursor: pointer; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + background-color: #ffffff; + border: 1px solid #c8c8c8; + margin-bottom: -1px; + padding-top: 9px; + width: 100%; + padding-left: 0; + box-sizing: border-box; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-weight: 300; + font-size: 12px; + padding-top: 8px; + padding-bottom: 8px; + text-transform: uppercase; + padding-left: 16px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-left: 16px; + cursor: pointer; + outline: 0; +} + +.ms-PeoplePicker-result:hover, +.ms-PeoplePicker-result:focus { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result:focus { + box-shadow: 0 0 0 1px #0078d7 inset; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #b3d6f2; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #69afe5; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active { + background-color: #69afe5; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 100%; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 40px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #a6a6a6; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + background: none; + border: 0; + cursor: pointer; + height: 40px; + position: relative; + width: 100%; +} + +.ms-PeoplePicker-searchMore:hover { + background-color: #f4f4f4; +} + +.ms-PeoplePicker-searchMoreIcon { + font-size: 21px; + height: 40px; + left: 16px; + line-height: 40px; + position: absolute; + text-align: center; + top: 0; + width: 40px; +} + +.ms-PeoplePicker-searchMoreText { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + height: 40px; + left: 64px; + line-height: 40px; + position: absolute; + top: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction { + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder, + .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials, + .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence, + .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details, + .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn { + height: 40px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction { + height: 40px; + } +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-weight: 400; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 1; + position: relative; + width: 100%; + height: 48px; + display: table; + table-layout: fixed; + border-collapse: separate; +} + +.ms-Persona .ms-ContextualHost { + display: none; +} + +.ms-Persona-imageArea { + position: absolute; + overflow: hidden; + text-align: center; + max-width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; + width: 100%; + top: 0; + left: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; + z-index: 5; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-weight: 100; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--blueLight { + background-color: #00bcf2; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #0078d7; +} + +.ms-Persona-initials.ms-Persona-initials--blueDark { + background-color: #002050; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #008272; +} + +.ms-Persona-initials.ms-Persona-initials--greenLight { + background-color: #bad80a; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #107c10; +} + +.ms-Persona-initials.ms-Persona-initials--greenDark { + background-color: #004b1c; +} + +.ms-Persona-initials.ms-Persona-initials--magentaLight { + background-color: #e3008c; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #b4009e; +} + +.ms-Persona-initials.ms-Persona-initials--purpleLight { + background-color: #b4a0ff; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #5c2d91; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #000000; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #d83b01; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #e81123; +} + +.ms-Persona-initials.ms-Persona-initials--redDark { + background-color: #a80000; +} + +.ms-Persona-image { + position: absolute; + top: 0; + left: 0; + height: 48px; + z-index: 10; + width: 100%; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #7fba00; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-presence { + border-color: #000000; + box-shadow: 0 0 0 1px #1aebff inset; + color: #000000; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-presence { + border-color: #ffffff; + box-shadow: 0 0 0 1px #37006e inset; + color: #ffffff; + background-color: #000000; + } +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 8px; + line-height: 12px; + vertical-align: top; +} + +.ms-Persona-details { + padding: 0 12px; + vertical-align: middle; + overflow: hidden; + text-align: left; + padding-left: 60px; + display: table-cell; + width: 100%; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-weight: 400; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-weight: 400; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + display: none; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText::after { + content: ';'; +} + +.ms-Persona.ms-Persona--xs, +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token { + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image, +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea, +.ms-Persona.ms-Persona--facePile .ms-Persona-image, +.ms-Persona.ms-Persona--token .ms-Persona-imageArea, +.ms-Persona.ms-Persona--token .ms-Persona-image { + max-width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder, +.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder, +.ms-Persona.ms-Persona--token .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials, +.ms-Persona.ms-Persona--facePile .ms-Persona-initials, +.ms-Persona.ms-Persona--token .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence, +.ms-Persona.ms-Persona--facePile .ms-Persona-presence, +.ms-Persona.ms-Persona--token .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details, +.ms-Persona.ms-Persona--facePile .ms-Persona-details, +.ms-Persona.ms-Persona--token .ms-Persona-details { + padding-left: 40px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText, +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--token .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--sm { + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + max-width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 48px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--lg { + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + max-width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; + height: 20px; + width: 20px; + border-width: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon { + line-height: 20px; + font-size: 14px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-details { + padding-left: 84px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--xl { + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + max-width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 28px; + width: 28px; + left: 71px; + border-width: 4px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon { + line-height: 28px; + font-size: 21px; + position: relative; + top: 1px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 120px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-weight: 300; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #7fba00; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #fcd116; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon { + position: relative; + left: 1px; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #ffffff; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 0 0 2px #d93b3b inset; + border-radius: 50%; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::after { + content: ''; + width: 100%; + height: 2px; + background-color: #d93b3b; + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + position: absolute; + top: 5px; + left: 0; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence::after { + top: 9px; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence::after { + top: 13px; +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #37006e; + } +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #000000; + box-shadow: 0 0 0 1px #ffffff inset; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #ffffff; + box-shadow: 0 0 0 1px #000000 inset; + } +} + +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; +} + +.ms-Persona.ms-Persona--facePile:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-initials { + position: relative; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-details { + display: none; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-presence { + display: none; +} + +.ms-Persona.ms-Persona--token { + display: -ms-inline-flexbox; + display: inline-flex; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin: 4px; +} + +.ms-Persona.ms-Persona--token:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: 32px; + height: 32px; + padding: 0; + line-height: 30px; + transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + text-align: center; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover { + background-color: #eaeaea; +} + +.ms-Persona.ms-Persona--token .ms-Persona-imageArea { + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-right: 8px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + color: #333333; + font-size: 14px; + font-weight: 400; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 20px; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + position: relative; + list-style: none; + margin: 0; + padding: 0 10px; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-actions::before { + content: ''; + position: absolute; + top: 47px; + left: 0; + width: 100%; + border-top: 1px solid #c8c8c8; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + outline: transparent; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action::before, +.ms-PersonaCard-overflow::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; + top: 0; + left: 0; + z-index: 100; +} + +.ms-PersonaCard-action.is-active, +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active::after, +.ms-PersonaCard-overflow.is-active::after { + box-sizing: border-box; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 13px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: -95px; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-details { + display: none; + width: 100%; + margin: 0; + max-height: 300px; + min-height: 48px; + color: #666666; + padding: 9px 20px; + box-sizing: border-box; +} + +.ms-PersonaCard-details.is-active { + display: block; +} + +.ms-PersonaCard-details.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander::after { + content: '\E70D'; +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 16px; + height: 30px; + line-height: 30px; + margin-top: 2px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E70E'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart::after { + display: none; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } + + .ms-ContextualHost .ms-PersonaCard { + box-shadow: none; + } +} + +.ms-Pivot { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + font-size: 0; + height: 40px; + list-style-type: none; + padding: 0; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-size: 14px; + font-weight: 400; + line-height: 40px; + margin-right: 8px; + padding: 0 8px; + text-align: center; + vertical-align: top; +} + +.ms-Pivot-link:hover { + cursor: pointer; +} + +.ms-Pivot-link::before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + left: 8px; + position: absolute; + right: 8px; + transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-Pivot-link::after { + color: transparent; + content: attr(title); + display: block; + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; +} + +.ms-Pivot-link.is-selected { + font-weight: 600; + position: relative; +} + +.ms-Pivot-link.is-selected::before { + background-color: #0078d7; +} + +.ms-Pivot-link.is-disabled { + color: #a6a6a6; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow::after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff; + background-color: #0078d7; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-weight: 600; + } +} + +.ms-ProgressIndicator { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-weight: 400; +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + background-color: #0078d7; + height: 2px; + position: absolute; + transition: width 0.3s ease; + width: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 36px; + color: #333333; + font-size: 14px; + font-weight: 400; + position: relative; + margin-bottom: 10px; + display: inline-block; + overflow: hidden; + background-color: #ffffff; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-SearchBox-clear { + display: block; +} + +.ms-SearchBox:hover { + background-color: #deecf9; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled { + background-color: #f4f4f4; + pointer-events: none; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + color: #a6a6a6; + background-color: transparent; + border-color: #f4f4f4; + cursor: default; +} + +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + right: 0; + z-index: 10; +} + +.ms-SearchBox-clear .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 36px; +} + +.ms-SearchBox-clear .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-icon { + position: relative; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + margin-left: 12px; + margin-right: 6px; + color: #0078d7; + vertical-align: top; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #69afe5; + outline: transparent 1px solid; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 36px; + padding: 6px 3px 7px 45px; + width: 208px; + background-color: transparent; + z-index: 5; + transition: padding-left 0.167s; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + height: 36px; + line-height: 36px; + color: #666666; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + width: 208px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + transition: none; + border: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus { + background-color: transparent; + padding: 6px 3px 7px 45px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit { + display: none; + position: absolute; + top: 0; + z-index: 10; + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button { + height: 40px; + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar::before { + position: absolute; + content: ' '; + right: 0; + bottom: 0; + left: 0; + margin: 0 8px; + border-bottom: 1px solid #eaeaea; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label { + color: #212121; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:focus { + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit, +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + width: 50px; + min-height: 40px; + z-index: 0; + background-color: #f4f4f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed::before { + visibility: hidden; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field { + display: block; + cursor: text; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text { + display: inline-block; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear { + display: inline-block; + right: 58px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated { + transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active::before { + visibility: visible; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear { + display: inline-block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active { + color: #0078d7; +} + +@media only screen and (min-width: 1024px) { + .ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + border-right: 1px solid #eaeaea; + } +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 44px; + line-height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + font-size: 20px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + font-size: 16px; + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active::before { + visibility: visible; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field { + width: 100%; + padding-right: 100px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon { + color: #a6a6a6; + } +} + +.ms-Spinner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + font-size: 12px; + font-weight: 400; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-weight: 300; + font-size: 12px; + color: #333333; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #b3d6f2; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::before, +.ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::after, +.ms-Table-row.is-selected .ms-Table-rowCheck::after { + content: '\E73A'; + color: #ffffff; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E739'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 1px; +} + +.ms-Table--selectable tr:hover, +.ms-Table--selectable .ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: block; + } +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-TextField { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.ms-TextField .ms-Label { + font-size: 14px; + font-weight: 600; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled::-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-ms-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #333333; + height: 32px; + padding: 6px 12px 7px; + width: 100%; + min-width: 180px; + outline: 0; + text-overflow: ellipsis; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field[disabled] { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField-field::-webkit-input-placeholder { + color: #666666; +} + +.ms-TextField-field::-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; + background-color: #ffffff; +} + +.ms-TextField.ms-TextField--placeholder .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: 5; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 14px; + color: #666666; + padding: 6px 12px 7px; + pointer-events: none; + z-index: 0; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 14px; + margin-right: 8px; + display: table-cell; + vertical-align: top; + padding-left: 12px; + padding-top: 9px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 3px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #666666; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Toggle { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + top: -2px; + padding: 0 0 0 50px; +} + +.ms-Toggle .ms-Toggle-field::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + left: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field::before { + right: auto; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + right: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + background-color: #ffffff; + left: 28px; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #000000; + } +} + +.ms-Toggle:focus + .ms-Toggle-field, +.ms-Toggle:hover + .ms-Toggle-field { + border-color: #666666; +} + +.ms-Toggle:focus + .ms-Toggle-field::before, +.ms-Toggle:hover + .ms-Toggle-field::before { + background-color: #333333; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field, +.ms-Toggle:hover:checked + .ms-Toggle-field { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field::before, +.ms-Toggle:hover:checked + .ms-Toggle-field::before { + background-color: #ffffff; +} + +.ms-Toggle:active:checked + .ms-Toggle-field { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Toggle .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + border-color: #333333; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle .ms-Toggle-field .ms-Label { + color: #000000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Toggle .ms-Toggle-field:hover .ms-Label { + color: #000000; +} + +.ms-Toggle .ms-Toggle-field:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff; + border-color: #c8c8c8; + pointer-events: none; + cursor: default; +} + +.ms-Toggle.is-disabled .ms-Toggle-field::before { + background-color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 14px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 45px; + height: 20px; + box-sizing: border-box; + border: 2px solid #a6a6a6; + border-radius: 20px; + cursor: pointer; + transition-property: background, left, border-color; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + outline: 0; +} + +.ms-Toggle-field:hover, +.ms-Toggle-field:focus { + border-color: #666666; +} + +.ms-Toggle-input { + display: none; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} diff --git a/dist/css/fabric.components.min.css b/dist/css/fabric.components.min.css new file mode 100644 index 00000000..c97b75ad --- /dev/null +++ b/dist/css/fabric.components.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline-block;margin-right:-4px}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:13px 4px;line-height:1}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:" ";width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:9px 3px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:2px 0}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--small{min-width:60px;min-height:24px;height:auto;padding-top:0;padding-bottom:4px}.ms-Button.ms-Button--small .ms-Button-label{font-weight:400;font-size:12px}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;padding:0;position:relative}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-right:4px;padding-top:5px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none;vertical-align:top}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:"";display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:"\E73E";font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:"";display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:"";width:0;height:0;border-radius:50%;position:absolute;top:8px;left:8px;bottom:0;right:0;transition-property:top,left,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;left:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0;list-style:none}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-right:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-right:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-right:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:"";outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-left:4px}}.ms-CommandButton-icon{display:inline-block;margin-right:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-left:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:"";outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-left:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-left:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:" ";width:1px;height:16px;top:12px;left:-8px;border-left:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-right:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:"";height:2px;position:absolute;left:0;right:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 16px 0 25px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;right:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 16px 0 26px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:"\E73E";font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;left:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-left:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-left:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;left:0;top:0;right:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-right:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-right:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-left:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:left;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;right:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:"";position:absolute;border-left:1px solid #a6a6a6;top:10px;bottom:10px;left:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:"";pointer-events:none;position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-right:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-right:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-right:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-right:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);left:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:right}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-left:-24px;margin-right:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;right:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;right:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown-items:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:"";line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;left:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\e73A";font-size:17px;color:#767676;position:absolute;top:23px;left:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-right:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-right:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;left:0;right:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;right:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-right:0;padding-left:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:-30px 0 30px 30px rgba(0,0,0,.2);left:0;right:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;right:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-left:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-left:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-left:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;left:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;left:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;left:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;left:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src=""]{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:left;padding-left:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:";"}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-left:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;left:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;left:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:"";width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;left:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-right:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-left:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:"";position:absolute;top:47px;left:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:"";position:absolute;width:100%;height:100%;background-color:transparent;top:0;left:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:"";width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:"\E70D"}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\E70E"}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-right:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:"";height:2px;left:8px;position:absolute;right:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;right:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-left:12px;margin-right:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 3px 7px 45px;width:208px;background-color:transparent;z-index:5;transition:padding-left .167s}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;left:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 3px 7px 45px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{right:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:" ";right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;right:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-right:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-right:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:"\E73A";color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\E739";color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:" *";color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-right:8px;display:table-cell;vertical-align:top;padding-left:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:" *";color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 0 0 50px}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:"";left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{right:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:"";right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;left:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,left,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right} \ No newline at end of file diff --git a/dist/css/fabric.components.rtl.css b/dist/css/fabric.components.rtl.css new file mode 100644 index 00000000..91af4d75 --- /dev/null +++ b/dist/css/fabric.components.rtl.css @@ -0,0 +1,6064 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ + +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ + +.ms-Breadcrumb { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline-block; + margin-left: -4px; +} + +.ms-Breadcrumb-chevron { + font-size: 12px; + color: #666666; + vertical-align: top; + margin: 13px 4px; + line-height: 1; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: #0078d7; + padding: 8px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + right: 0; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu:before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + top: -6px; + right: 6px; + content: ' '; + width: 16px; + height: 16px; + transform: rotate(45deg); + background-color: #ffffff; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: 0; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: 1px solid #767676; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + font-weight: 100; + font-size: 21px; + color: #333333; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; +} + +@media screen and (max-width:639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 9px 3px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 2px 0; + } +} + +@media screen and (max-width:479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 14px; + font-weight: 400; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button.is-hidden { + display: none; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Button:hover { + color: #1aebff; + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Button:hover { + color: #37006e; + border-color: #37006e; + } +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.is-disabled, +.ms-Button:disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button.is-disabled .ms-Button-label, +.ms-Button:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.is-disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button:disabled:focus, +.ms-Button:disabled:hover { + outline: 0; +} + +.ms-Button-label { + color: #333333; + font-weight: 600; + font-size: 14px; +} + +.ms-Button-description, +.ms-Button-icon { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary.is-disabled, +.ms-Button.ms-Button--primary:disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label, +.ms-Button.ms-Button--primary:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--small { + min-width: 60px; + min-height: 24px; + height: auto; + padding-top: 0; + padding-bottom: 4px; +} + +.ms-Button.ms-Button--small .ms-Button-label { + font-weight: 400; + font-size: 12px; +} + +.ms-Button.ms-Button--hero { + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border: 0; + padding: 0; + position: relative; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + margin-left: 4px; + padding-top: 5px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + font-size: 12px; + height: 18px; + line-height: 18px; + width: 18px; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-size: 21px; + font-weight: 100; + position: relative; + text-decoration: none; + vertical-align: top; +} + +.ms-Button.ms-Button--hero:focus .ms-Button-icon, +.ms-Button.ms-Button--hero:hover .ms-Button-icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon { + border: 1px solid #005a9e; +} + +.ms-Button.ms-Button--hero:focus .ms-Button-label, +.ms-Button.ms-Button--hero:hover .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + border: 1px solid #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon, +.ms-Button.ms-Button--hero:disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon { + border: 1px solid #c8c8c8; +} + +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label, +.ms-Button.ms-Button--hero:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + display: block; + height: auto; + max-width: 280px; + min-height: 72px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-weight: 600; + position: relative; + text-align: right; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-weight: 400; + font-size: 12px; + position: relative; + text-align: right; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound.is-disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound:disabled:focus { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label { + color: #a6a6a6; +} + +.ms-Callout { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + width: 288px; +} + +.ms-Callout.is-hidden { + display: none; +} + +.ms-Callout-header { + z-index: 105; + padding: 24px 28px 12px; +} + +.ms-Callout-title { + margin: 0; + font-weight: 300; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-weight: 300; + color: #333333; + font-size: 12px; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + left: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-link { + font-size: 14px; +} + +.ms-Callout-inner { + height: 100%; + padding: 0 28px 12px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button { + color: #0078d7; +} + +.ms-Callout-actions .ms-Callout-button { + margin-left: 12px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-weight: 100; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + padding-top: 12px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-inner { + padding-bottom: 12px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +.ms-CheckBox { + box-sizing: border-box; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-CheckBox .ms-Label { + font-size: 14px; + padding: 0 26px 0 0; + cursor: pointer; + display: inline-block; +} + +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +.ms-CheckBox-field:before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: 400; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); +} + +.ms-CheckBox-field:after { + content: '\E73E'; + font-family: FabricMDL2Icons; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: 13px; + top: 0; + color: #ffffff; + line-height: 20px; + width: 20px; + text-align: center; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CheckBox-field:after { + color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CheckBox-field:after { + color: #ffffff; + } +} + +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-CheckBox-field:focus:before, +.ms-CheckBox-field:hover:before { + border-color: #767676; +} + +.ms-CheckBox-field:focus .ms-Label, +.ms-CheckBox-field:hover .ms-Label { + color: #000000; +} + +.ms-CheckBox-field.is-disabled { + cursor: default; +} + +.ms-CheckBox-field.is-disabled:before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CheckBox-field.is-disabled:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CheckBox-field.is-disabled:before { + border-color: #600000; + } +} + +.ms-CheckBox-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-CheckBox-field.in-focus:before { + border-color: #767676; +} + +.ms-CheckBox-field.in-focus.is-disabled:before { + border-color: #c8c8c8; +} + +.ms-CheckBox-field.in-focus.is-checked:before { + border-color: #106ebe; +} + +.ms-CheckBox-field.is-checked:before { + border: 10px solid #0078d7; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CheckBox-field.is-checked:before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CheckBox-field.is-checked:before { + border-color: #37006e; + } +} + +.ms-CheckBox-field.is-checked:after { + display: block; +} + +.ms-CheckBox-field.is-checked:focus:before, +.ms-CheckBox-field.is-checked:hover:before { + border-color: #106ebe; +} + +.ms-RadioButton { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + color: #333333; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-RadioButton .ms-Label { + font-size: 14px; + padding: 0 26px 0 0; + cursor: pointer; + display: inline-block; +} + +.ms-RadioButton-input { + position: absolute; + opacity: 0; +} + +.ms-RadioButton-field:before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: 400; + position: absolute; + box-sizing: border-box; + transition-property: border-color; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); + border-radius: 50%; +} + +.ms-RadioButton-field:after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: 8px; + right: 8px; + bottom: 0; + left: 0; + transition-property: top, right, width, height; + transition-duration: 0.15s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field:after { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field:after { + color: #600000; + } +} + +.ms-RadioButton-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-RadioButton-field:focus:before, +.ms-RadioButton-field:hover:before { + border-color: #767676; +} + +.ms-RadioButton-field:focus .ms-Label, +.ms-RadioButton-field:hover .ms-Label { + color: #000000; +} + +.ms-RadioButton-field.is-disabled { + cursor: default; +} + +.ms-RadioButton-field.is-disabled:before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field.is-disabled:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field.is-disabled:before { + border-color: #600000; + } +} + +.ms-RadioButton-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-RadioButton-field.is-disabled:focus:before, +.ms-RadioButton-field.is-disabled:hover:before { + border-color: #c8c8c8; +} + +.ms-RadioButton-field.in-focus:before { + border-color: #767676; +} + +.ms-RadioButton-field.is-checked:before { + border: 2px solid #0078d7; + background-color: transparent; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field.is-checked:before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field.is-checked:before { + border-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked:after { + background-color: #0078d7; + top: 5px; + right: 5px; + width: 10px; + height: 10px; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field.is-checked:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field.is-checked:after { + background-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked.in-focus:before, +.ms-RadioButton-field.is-checked:focus:before, +.ms-RadioButton-field.is-checked:hover:before { + border-color: #0078d7; +} + +.ms-ChoiceFieldGroup { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + margin-bottom: 4px; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; + list-style: none; +} + +.ms-CommandBar { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #f4f4f4; + height: 40px; + white-space: nowrap; + padding-right: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar .ms-CommandButton--actionButton { + border-left: 1px solid #eaeaea; +} + +.ms-CommandBar .ms-Button { + height: 100%; +} + +.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon { + padding-left: 0; +} + +.ms-CommandBar .ms-Button.is-hidden { + display: none; +} + +.ms-CommandBar .ms-SearchBox, +.ms-CommandBar .ms-SearchBox-field, +.ms-CommandBar .ms-SearchBox-label { + height: 100%; +} + +.ms-CommandBar .ms-SearchBox { + display: inline-block; + vertical-align: top; + transition: margin-left 0.267s; +} + +.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 220px; +} + +@media only screen and (max-width:639px) { + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + position: absolute; + right: 0; + left: 0; + z-index: 10; + } +} + +.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button { + font-size: 18px; + padding: 0 11px; +} + +@media only screen and (min-width:1024px) { + .ms-CommandBar .ms-SearchBox { + margin-left: 24px; + } +} + +@media only screen and (max-width:639px) { + .ms-CommandBar { + height: 44px; + } +} + +@media only screen and (min-width:640px) { + .ms-CommandBar.search-expanded .ms-SearchBox { + margin-left: 8px; + } + + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + transition: none; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: left; + text-align: left; + width: auto; + padding-left: 4px; + height: 100%; +} + +.ms-CommandBar-sideCommands .ms-Button:last-child { + margin-left: 0; +} + +@media only screen and (min-width:640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width:1024px) { + .ms-CommandBar-sideCommands { + padding-left: 20px; + } +} + +.ms-CommandButton { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + display: inline-block; + position: relative; + vertical-align: top; +} + +.ms-CommandButton.is-hidden { + display: none; +} + +.ms-CommandButton.is-disabled .ms-CommandButton-button, +.ms-CommandButton:disabled .ms-CommandButton-button { + cursor: default; +} + +.ms-CommandButton.is-disabled .ms-CommandButton-button:hover, +.ms-CommandButton:disabled .ms-CommandButton-button:hover { + background-color: #eff6fc; +} + +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label, +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon, +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label { + color: #a6a6a6; +} + +.ms-CommandButton .ms-ContextualMenu { + display: none; +} + +.ms-CommandButton-button, +.ms-CommandButton-splitIcon { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + cursor: pointer; + display: inline-block; + height: 40px; + line-height: 40px; + outline: 1px solid transparent; + padding: 0 8px; + position: relative; + vertical-align: top; + background: transparent; +} + +.ms-CommandButton-button:hover, +.ms-CommandButton-splitIcon:hover { + background-color: #eaeaea; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.ms-CommandButton-button:active, +.ms-CommandButton-splitIcon:active { + background-color: #eaeaea; +} + +.ms-CommandButton-button:focus:before, +.ms-CommandButton-splitIcon:focus:before { + top: 3px; + right: 3px; + left: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-button:focus, +.ms-CommandButton-splitIcon:focus { + outline: 0; +} + +@media only screen and (max-width:639px) { + .ms-CommandButton-button, + .ms-CommandButton-splitIcon { + height: 44px; + } + + .ms-CommandButton-button .ms-CommandButton-icon, + .ms-CommandButton-splitIcon .ms-CommandButton-icon { + font-size: 20px; + } + + .ms-CommandButton-button .ms-CommandButton-label, + .ms-CommandButton-splitIcon .ms-CommandButton-label { + line-height: 44px; + } +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-right: 8px; +} + +@media only screen and (max-width:639px) { + .ms-CommandButton + .ms-CommandButton { + margin-right: 4px; + } +} + +.ms-CommandButton-icon { + display: inline-block; + margin-left: 8px; + position: relative; + font-size: 16px; + min-width: 16px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + right: 50%; + transform: translate(-50%,-50%); +} + +.ms-CommandButton-label { + font-size: 14px; + font-weight: 400; + color: #333333; + line-height: 40px; + height: 100%; + display: inline-block; + vertical-align: top; +} + +.ms-CommandButton-label:hover { + color: #212121; +} + +.ms-CommandButton-dropdownIcon, +.ms-CommandButton-splitIcon { + display: inline-block; + position: relative; + color: #333333; + font-size: 12px; + font-weight: 300; + min-width: 12px; + height: 100%; + vertical-align: top; + margin-right: 8px; +} + +.ms-CommandButton-dropdownIcon .ms-Icon, +.ms-CommandButton-splitIcon .ms-Icon { + line-height: normal; + padding-top: 16px; +} + +.ms-CommandButton-dropdownIcon:focus:before, +.ms-CommandButton-splitIcon:focus:before { + top: 3px; + right: 3px; + left: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +@media only screen and (max-width:639px) { + .ms-CommandButton-dropdownIcon, + .ms-CommandButton-splitIcon { + display: none; + } +} + +.ms-CommandButton-splitIcon { + margin-right: -2px; + width: 27px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + margin-right: -1px; + position: relative; + padding-top: 16px; +} + +.ms-CommandButton-splitIcon .ms-Icon:after { + position: absolute; + content: ' '; + width: 1px; + height: 16px; + top: 12px; + right: -8px; + border-right: 1px solid #c8c8c8; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + margin-left: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button { + padding: 0 12px; +} + +.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + background: none; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button { + width: 50px; + height: 40px; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon { + position: absolute; + top: 50%; + right: 50%; + transform: translate(-50%,-50%); + width: 16px; + height: 16px; + padding-left: 0; +} + +.ms-CommandButton.ms-CommandButton--pivot.is-active:before, +.ms-CommandButton.ms-CommandButton--pivot:hover:before { + content: ''; + height: 2px; + position: absolute; + right: 0; + left: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label, +.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label { + display: inline-block; +} + +@media only screen and (max-width:479px) { + .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label, + .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label { + font-size: 16px; + } +} + +.ms-ContextualMenu { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + max-width: 220px; + list-style-type: none; + position: relative; + background-color: #ffffff; +} + +.ms-ContextualMenu.is-hidden { + display: none; +} + +.ms-ContextualMenu-item { + position: relative; +} + +.ms-ContextualMenu-link { + box-sizing: border-box; + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 36px; + overflow: hidden; + line-height: 34px; + padding: 0 25px 0 16px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus, +.ms-ContextualMenu-link:hover { + background-color: #f4f4f4; + color: #212121; +} + +.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon { + color: #212121; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; + border: 1px solid #666666; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #dadada; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon { + color: #000000; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #d0d0d0; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +.ms-ContextualMenu-link.is-disabled .ms-Icon { + color: #a6a6a6; + pointer-events: none; + cursor: default; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 36px; + line-height: 36px; + padding: 0 18px; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu { + position: absolute; + top: -1px; + right: 178px; +} + +.ms-ContextualMenu-caretRight, +.ms-ContextualMenu-subMenuIcon { + color: #333333; + font-size: 8px; + font-weight: 600; + width: 24px; + height: 36px; + line-height: 36px; + position: absolute; + text-align: center; + top: 0; + left: 0; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 26px 0 16px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; + font-weight: 600; + color: #333333; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + color: #333333; + content: '\E73E'; + font-size: 10px; + font-weight: 800; + height: 36px; + line-height: 36px; + position: absolute; + right: 7px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover { + color: #212121; + background-color: #f4f4f4; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after { + color: #212121; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active { + color: #000000; + background-color: #d0d0d0; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after { + color: #000000; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link, +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link { + padding-right: 40px; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon, +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + text-align: center; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons { + width: 220px; +} + +.ms-DatePicker { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: right; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + left: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + animation-name: fadeIn,slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-weight: 100; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-right: 15px; +} + +.ms-DatePicker-year { + margin-right: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-weight: 400; + font-size: 15px; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #b3d6f2; +} + +.ms-DatePicker-day--disabled:before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-weight: 400; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + left: 9px; + right: 9px; +} + +.ms-DatePicker-decadeComponents, +.ms-DatePicker-yearComponents { + position: absolute; + left: 10px; +} + +.ms-DatePicker-nextDecade, +.ms-DatePicker-nextMonth, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-prevMonth, +.ms-DatePicker-prevYear { + width: 40px; + height: 40px; + display: block; + float: left; + margin-right: 10px; + text-align: center; + line-height: 40px; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-nextDecade:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-prevYear:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + right: 0; + position: absolute; + top: 0; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentDecade, +.ms-DatePicker-currentYear { + display: block; + font-weight: 300; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-right: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 5px 30px 0; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: right; + margin: 0 0 10px 10px; + font-weight: 400; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-weight: 300; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + left: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width:460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-weight: 300; + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-left: 1px solid #eaeaea; + width: 220px; + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + right: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-right: 12px; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-weight: 600; + font-size: 12px; + } + + .ms-DatePicker-nextDecade, + .ms-DatePicker-nextMonth, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-prevMonth, + .ms-DatePicker-prevYear { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentDecade, + .ms-DatePicker-currentYear { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 0 10px 10px; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + left: 10px; + text-align: left; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width:459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-DetailsList { + position: relative; +} + +.ms-DetailsList.is-horizontalConstrained { + overflow-x: auto; + overflow-y: inherit; +} + +.ms-DetailsList-cell { + word-break: break-word; +} + +.ms-DetailsHeader { + display: inline-block; + min-width: 100%; + height: 36px; + line-height: 36px; + white-space: nowrap; + padding-bottom: 1px; + border-bottom: 1px solid #eaeaea; + margin-bottom: 1px; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-DetailsHeader.is-singleSelect { + padding-right: 40px; +} + +.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover { + background: transparent; + position: fixed; + right: 0; + top: 0; + left: 0; + bottom: 0; + z-index: 99; + cursor: col-resize; +} + +.ms-DetailsHeader-cell.is-check .ms-Check-circle { + visibility: hidden; +} + +.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, +.ms-DetailsHeader.is-allSelected .ms-Check-circle { + visibility: visible; +} + +.ms-DetailsHeader-cellWrapper { + display: inline-block; + position: relative; +} + +.ms-DetailsHeader-cellSizeWrapper { + display: inline-block; + vertical-align: top; + margin-left: 16px; +} + +.ms-DetailsHeader-cellSizeWrapper:last-child { + margin-left: 0; +} + +.ms-DetailsHeader-filterChevron.ms-Icon { + color: #a6a6a6; + padding-right: 4px; + vertical-align: middle; +} + +.ms-DetailsHeader-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + color: #a6a6a6; + border: 0; + background: none; + line-height: inherit; + margin: 0; + font-size: inherit; + font-family: inherit; + text-align: right; + height: 36px; + vertical-align: top; +} + +.ms-DetailsHeader-cell.is-check { + position: relative; + padding: 8px 10px; + margin: 0; +} + +.ms-DetailsHeader-cell:focus { + outline: transparent; +} + +.ms-DetailsHeader-cell.is-sortable { + color: #000000; + cursor: default; +} + +.ms-DetailsHeader-cell.is-sortable:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter { + position: absolute; + left: 0; + width: 20px; + top: 0; + bottom: 0; + padding: 0; + text-align: center; + color: #000000; +} + +.ms-DetailsHeader-cell.is-filter:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter:before { + content: ''; + position: absolute; + border-right: 1px solid #a6a6a6; + top: 10px; + bottom: 10px; + right: 0; +} + +.ms-DetailsHeader-cell.is-sizer { + position: absolute; + width: 16px; + cursor: col-resize; + bottom: 0; + top: 0; + height: inherit; + z-index: 99; +} + +.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow { + display: inline; +} + +.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow { + transform: rotate(180deg); +} + +.ms-DetailsHeader-cell.is-resizing.is-sizer:after, +.ms-DetailsHeader-cell.is-sizer:hover:after { + content: ''; + position: absolute; + right: 50%; + top: 0; + bottom: 0; + width: 1px; + background: #eaeaea; + border: 1px solid #ffffff; +} + +.ms-DetailsHeader-cell:focus:before, +.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before { + content: ''; + pointer-events: none; + position: absolute; + right: 0; + top: 0; + left: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsHeader-sortArrow.ms-Icon { + font-size: 12px; + margin-left: 4px; + display: none; + color: #a6a6a6; +} + +.ms-DetailsRow { + position: relative; + display: inline-block; + min-width: 100%; + min-height: 36px; + vertical-align: top; + white-space: nowrap; + padding: 10px 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; +} + +.ms-DetailsRow:focus { + outline: transparent; +} + +.ms-DetailsRow.ms-DetailsRow.is-selected { + background: #deecf9; +} + +.ms-DetailsRow:hover, +.ms-Fabric.is-stationary .ms-DetailsRow:hover { + background: #eff6fc; +} + +.ms-DetailsRow.is-selected:hover, +.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover { + background: #b3d6f2; +} + +.ms-DetailsRow-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + vertical-align: top; + white-space: normal; + word-break: break-word; + margin-left: 16px; +} + +.ms-DetailsRow-cell.is-clipped { + overflow: hidden; +} + +.ms-DetailsRow-cell:last-child { + margin-left: 0; +} + +.ms-DetailsRow-cellIcon { + display: inline-block; + margin-left: 6px; + position: relative; + bottom: -2px; +} + +.ms-DetailsRow-check { + display: inline-block; + cursor: default; + padding: 10px; + margin: -10px 0; + box-sizing: border-box; + vertical-align: top; + background: none; + border: 0; + visibility: hidden; +} + +.ms-DetailsRow-check:focus { + outline: transparent; +} + +.ms-DetailsRow.is-selected .ms-DetailsRow-check, +.ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check { + visibility: visible; +} + +.ms-DetailsRow:focus .ms-DetailsRow-focusBox, +.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsRow-cellMeasurer { + position: absolute; + visibility: hidden; + white-space: nowrap; + top: -1000000000; +} + +.ms-Check { + display: inline-block; + cursor: default; + line-height: 0; + vertical-align: top; +} + +.ms-Check.is-checked .ms-Check-circle { + fill: #0078d7; + stroke: #ffffff; + stroke-width: 1px; +} + +.ms-Check.is-checked .ms-Check-check { + stroke: #ffffff; +} + +.ms-Check-circle { + fill: #ffffff; + stroke: #c8c8c8; +} + +.ms-Check-check { + stroke: #c8c8c8; +} + +.ms-Dialog { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + display: none; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: fixed; + transform: translate(-50%,-50%); + right: 50%; + top: 50%; +} + +.ms-Dialog.is-open { + display: block; +} + +.ms-Dialog-title { + font-size: 21px; + font-weight: 100; + margin-bottom: 24px; +} + +.ms-Dialog-content { + position: relative; +} + +.ms-Dialog-subText { + color: #333333; + font-size: 12px; + font-weight: 300; + line-height: 1.5; +} + +.ms-Dialog-actions { + margin-top: 24px; + text-align: left; +} + +.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + background-color: #0078d7; + color: #ffffff; + font-size: 28px; + font-weight: 100; + padding: 28px 24px; + margin-top: -28px; + margin-right: -24px; + margin-left: -24px; +} + +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + left: 12px; + top: 12px; + z-index: 10; +} + +.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel { + color: #666666; + font-size: 16px; +} + +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-left: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; +} + +@media (min-width:480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:active .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:hover .ms-Dropdown-title { + color: #000000; +} + +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: absolute; +} + +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; +} + +.ms-Panel .ms-Dropdown-items .ms-Dropdown-item { + padding: 7px 16px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Panel .ms-Dropdown-items:before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #212121; + font-size: 12px; + position: absolute; + left: 13px; + bottom: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + padding: 5px 10px 0 32px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-title.ms-Dropdown-truncator { + height: auto; + display: block; + position: absolute; + visibility: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + z-index: 400; + overflow-y: scroll; + top: auto; + left: auto; + bottom: auto; + right: auto; + max-width: 100%; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + right: 0; + left: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 36px; + padding: 7px 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #b3d6f2; + color: #000000; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #b3d6f2; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-FacePile { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 32px; + width: auto; +} + +.ms-FacePile .ms-FacePile-personaCardHost { + display: none; +} + +.ms-FacePile-addButton { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: right; + padding: 0; + margin-left: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-FacePile-addButton .ms-Persona-details, +.ms-FacePile-addButton .ms-Persona-presence { + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus, +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover { + background-color: #005a9e; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active { + background-color: #004578; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active { + display: block; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover { + color: #212121; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled { + color: #c8c8c8; +} + +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: 14px; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox { + display: none; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-weight: 100; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Link { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; +} + +.ms-Link:focus, +.ms-Link:hover { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-List { + padding: 0; + list-style-type: none; +} + +.ms-List, +.ms-ListItem { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; +} + +.ms-ListItem { + padding: 0; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:after, +.ms-ListItem:before { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-weight: 300; + font-size: 21px; + padding-left: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-weight: 400; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-left: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-weight: 300; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-left: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-weight: 300; + font-size: 11px; + position: absolute; + left: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: right; + height: 70px; + margin-right: -8px; + margin-left: 10px; + width: 70px; + background-color: #333333; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + left: 30px; + text-align: left; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-right: 3px solid #0078d7; + padding-right: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-metaText, +.ms-ListItem.is-unread .ms-ListItem-secondaryText { + color: #0078d7; + font-weight: 600; +} + +.ms-ListItem.is-unseen:after { + border-left: 10px solid transparent; + border-top: 10px solid #0078d7; + right: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + right: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-right: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + position: absolute; + top: 14px; + right: 7px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + content: '\e73A'; + font-size: 17px; + color: #767676; + position: absolute; + top: 23px; + right: 7px; + border: 0; +} + +.ms-ListItem.is-selected:hover { + background-color: #b3d6f2; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: right; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-left: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-weight: 400; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 12px; + font-weight: 400; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + animation-name: fadeIn,slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + animation-name: fadeOut,slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-close, +.ms-MessageBanner-expand { + height: 52px; + width: 40px; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.ms-MessageBanner-close { + position: absolute; + left: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-right: 0; + max-width: 770px; + overflow: hidden; + text-align: right; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-right: 10px; + padding-left: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width:479px) { + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: left; + padding: 0 0 10px 10px; + } + + .ms-MessageBanner-text { + margin-right: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + display: inline-block; + padding: 0; + margin-right: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-ContextualHost { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + background-color: #ffffff; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); +} + +.ms-ContextualHost.is-positioned { + position: absolute; + margin: 0; +} + +.ms-ContextualHost.is-open { + display: inline-block; +} + +.ms-ContextualHost-beak { + box-shadow: 0 0 15px -5px #3c3c3c; + position: absolute; + width: 28px; + height: 28px; + background: #ffffff; + border: 1px solid #eaeaea; + box-sizing: border-box; + top: -6px; + display: none; + transform: rotate(45deg); + z-index: 0; + outline: 1px solid transparent; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak, +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + top: 40px; + display: none; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + right: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + left: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak { + display: block; + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + display: block; + bottom: -10px; +} + +.ms-ContextualHost-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + min-height: 10px; +} + +.ms-ContextualHost-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + left: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 10; +} + +.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title { + margin-left: 20px; +} + +.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak { + background-color: #0078d7; +} + +@media (min-width:480px) { + .ms-ContextualHost { + margin: 16px; + } + + .ms-ContextualHost.is-positioned { + margin: 0; + } + + .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak, + .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + display: block; + } +} + +.ms-MessageBar { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.ms-MessageBar .ms-Link { + font-size: 12px; +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-left: 8px; + font-size: 16px; + color: #767676; +} + +.ms-MessageBar-text { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 12px; + font-weight: 400; +} + +.ms-MessageBar.ms-MessageBar--warning { + background-color: #fff4ce; +} + +.ms-MessageBar.ms-MessageBar--severeWarning { + background-color: #fed9cc; +} + +.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon { + color: #d83b01; +} + +.ms-MessageBar.ms-MessageBar--error { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--blocked { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-OrgChart { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: right; + margin: 0; + padding: 0; +} + +.ms-Overlay { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + background-color: hsla(0,0%,100%,0.4); + position: fixed; + bottom: 0; + right: 0; + left: 0; + top: 0; + z-index: 0; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0,0,0,0.4); +} + +.ms-u-overflowHidden { + overflow: hidden; +} + +.ms-Panel { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #ffffff; + width: 100%; + max-width: 340px; + box-shadow: 30px 0 30px -30px rgba(0,0,0,0.2); + position: absolute; + top: 0; + left: 0; + bottom: 0; + z-index: 10; + display: none; + height: 100%; +} + +.ms-Panel.animate-in { + animation-name: fadeIn,slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-fill-mode: both; +} + +.ms-Panel.animate-out { + animation-name: fadeOut,slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel .ms-CommandBar { + padding-left: 0; + padding-right: 8px; +} + +.ms-Panel.ms-Panel--md { + max-width: 340px; +} + +.ms-Panel.ms-Panel--lg { + max-width: 644px; +} + +.ms-Panel.ms-Panel--xl { + max-width: 940px; +} + +.ms-Panel.ms-Panel--xxl { + max-width: 1192px; +} + +.ms-Panel--left { + box-shadow: 30px 0 30px 30px rgba(0,0,0,0.2); + right: 0; + left: auto; +} + +.ms-Panel--left.animate-in { + animation-name: fadeIn,slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-fill-mode: both; +} + +.ms-Panel--left.animate-out { + animation-name: fadeOut,slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + left: 6px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 16px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-closeButton .ms-Icon--Cancel { + margin-top: 2px; +} + +@media (max-width:639px) { + .ms-Panel-closeButton { + font-size: 20px; + line-height: 20px; + height: 44px; + left: 4px; + } +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; + height: 100%; +} + +@media (min-width:640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width:1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-weight: 100; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width:1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +.ms-PanelHost { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + bottom: 0; + right: 0; + position: fixed; + left: 0; + top: 0; + z-index: 10; +} + +.ms-PanelHost .ms-Overlay { + cursor: pointer; +} + +.ms-PeoplePicker { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 1px solid #c8c8c8; + cursor: text; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker-searchBox.is-active, +.ms-PeoplePicker-searchBox:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-PeoplePicker-searchBox:focus, + .ms-PeoplePicker-searchBox:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-PeoplePicker-searchBox:focus, + .ms-PeoplePicker-searchBox:hover { + border-color: #37006e; + } +} + +.ms-PeoplePicker-searchBox::-webkit-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-moz-placeholder, +.ms-PeoplePicker-searchBox::-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-ms-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: 100%; + -ms-flex: 1; + flex: 1; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.ms-PeoplePicker-persona { + cursor: pointer; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + background-color: #ffffff; + border: 1px solid #c8c8c8; + margin-bottom: -1px; + padding-top: 9px; + width: 100%; + padding-right: 0; + box-sizing: border-box; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-weight: 300; + font-size: 12px; + padding-top: 8px; + padding-bottom: 8px; + text-transform: uppercase; + padding-right: 16px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-right: 16px; + cursor: pointer; + outline: 0; +} + +.ms-PeoplePicker-result:focus, +.ms-PeoplePicker-result:hover { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result:focus { + box-shadow: inset 0 0 0 1px #0078d7; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #b3d6f2; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active, +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #69afe5; +} + +.ms-PeoplePicker-peopleListBtn, +.ms-PeoplePicker-resultBtn { + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: right; + margin: 0 0 10px; + padding: 0 9px 0 0; +} + +@media (min-width:480px) { + .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-resultBtn { + height: 48px; + } +} + +.ms-PeoplePicker-peopleListBtn:hover, +.ms-PeoplePicker-resultBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-peopleListBtn:focus, +.ms-PeoplePicker-resultBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 100%; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + left: 0; + top: 0; + width: 40px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #a6a6a6; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + background: none; + border: 0; + cursor: pointer; + height: 40px; + position: relative; + width: 100%; +} + +.ms-PeoplePicker-searchMore:hover { + background-color: #f4f4f4; +} + +.ms-PeoplePicker-searchMoreIcon { + font-size: 21px; + height: 40px; + right: 16px; + line-height: 40px; + position: absolute; + text-align: center; + top: 0; + width: 40px; +} + +.ms-PeoplePicker-searchMoreText { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + height: 40px; + right: 64px; + line-height: 40px; + position: absolute; + top: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction { + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width:479px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder, + .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials, + .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence, + .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + right: 19px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details, + .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-right: 8px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width:480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width:480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction, + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn { + height: 40px; + } +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-peopleListHeader, +.ms-PeoplePicker-selectedHeader { + color: #0078d7; + font-size: 12px; + font-weight: 400; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-peopleList, +.ms-PeoplePicker-selectedPeople { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 1; + position: relative; + width: 100%; + height: 48px; + display: table; + table-layout: fixed; + border-collapse: separate; +} + +.ms-Persona .ms-ContextualHost { + display: none; +} + +.ms-Persona-imageArea { + position: absolute; + overflow: hidden; + text-align: center; + max-width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; + width: 100%; + top: 0; + right: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + left: 0; + right: 0; + font-size: 47px; + top: 9px; + z-index: 5; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-weight: 100; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--blueLight { + background-color: #00bcf2; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #0078d7; +} + +.ms-Persona-initials.ms-Persona-initials--blueDark { + background-color: #002050; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #008272; +} + +.ms-Persona-initials.ms-Persona-initials--greenLight { + background-color: #bad80a; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #107c10; +} + +.ms-Persona-initials.ms-Persona-initials--greenDark { + background-color: #004b1c; +} + +.ms-Persona-initials.ms-Persona-initials--magentaLight { + background-color: #e3008c; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #b4009e; +} + +.ms-Persona-initials.ms-Persona-initials--purpleLight { + background-color: #b4a0ff; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #5c2d91; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #000000; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #d83b01; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #e81123; +} + +.ms-Persona-initials.ms-Persona-initials--redDark { + background-color: #a80000; +} + +.ms-Persona-image { + position: absolute; + top: 0; + right: 0; + height: 48px; + z-index: 10; + width: 100%; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #7fba00; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + right: 34px; + bottom: -1px; + border: 2px solid #ffffff; + text-align: center; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona-presence { + border-color: #000000; + box-shadow: inset 0 0 0 1px #1aebff; + color: #000000; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona-presence { + border-color: #ffffff; + box-shadow: inset 0 0 0 1px #37006e; + color: #ffffff; + background-color: #000000; + } +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 8px; + line-height: 12px; + vertical-align: top; +} + +.ms-Persona-details { + padding: 0 12px; + vertical-align: middle; + overflow: hidden; + text-align: right; + padding-right: 60px; + display: table-cell; + width: 100%; +} + +.ms-Persona-optionalText, +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText { + display: block; + white-space: nowrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-weight: 400; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-optionalText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText { + color: #666666; + font-weight: 400; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-optionalText, +.ms-Persona-tertiaryText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + display: none; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + left: auto; + top: 10px; + right: 0; + border: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-right: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token, +.ms-Persona.ms-Persona--xs { + height: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-image, +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea, +.ms-Persona.ms-Persona--token .ms-Persona-image, +.ms-Persona.ms-Persona--token .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image, +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea { + max-width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder, +.ms-Persona.ms-Persona--token .ms-Persona-placeholder, +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-initials, +.ms-Persona.ms-Persona--token .ms-Persona-initials, +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-presence, +.ms-Persona.ms-Persona--token .ms-Persona-presence, +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + right: 19px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-details, +.ms-Persona.ms-Persona--token .ms-Persona-details, +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-right: 40px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText, +.ms-Persona.ms-Persona--token .ms-Persona-primaryText, +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--token .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--sm { + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-image, +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea { + max-width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + right: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-right: 48px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--lg { + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-image, +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea { + max-width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + right: 49px; + height: 20px; + width: 20px; + border-width: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon { + line-height: 20px; + font-size: 14px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-details { + padding-right: 84px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--xl { + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-image, +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea { + max-width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 28px; + width: 28px; + right: 71px; + border-width: 4px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon { + line-height: 28px; + font-size: 21px; + position: relative; + top: 1px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-right: 120px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-weight: 300; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText, +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #7fba00; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #fcd116; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon { + position: relative; + right: 1px; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #ffffff; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + right: 0; + box-shadow: inset 0 0 0 2px #d93b3b; + border-radius: 50%; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after { + content: ''; + width: 100%; + height: 2px; + background-color: #d93b3b; + transform: rotate(-45deg); + position: absolute; + top: 5px; + right: 0; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after { + top: 9px; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after { + top: 13px; +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #37006e; + } +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #000000; + box-shadow: inset 0 0 0 1px #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #ffffff; + box-shadow: inset 0 0 0 1px #000000; + } +} + +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; +} + +.ms-Persona.ms-Persona--facePile:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-initials { + position: relative; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-details, +.ms-Persona.ms-Persona--facePile .ms-Persona-presence { + display: none; +} + +.ms-Persona.ms-Persona--token { + display: -ms-inline-flexbox; + display: inline-flex; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin: 4px; +} + +.ms-Persona.ms-Persona--token:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: 32px; + height: 32px; + padding: 0; + line-height: 30px; + transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + text-align: center; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover { + background-color: #eaeaea; +} + +.ms-Persona.ms-Persona--token .ms-Persona-imageArea { + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-left: 8px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + animation-name: fadeIn,slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; + color: #333333; + font-size: 14px; + font-weight: 400; + bottom: 0; + right: 0; + position: fixed; + left: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; + padding-top: 12px; + padding-bottom: 12px; + padding-right: 20px; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + position: relative; + list-style: none; + margin: 0; + padding: 0 10px; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-actions:before { + content: ''; + position: absolute; + top: 47px; + right: 0; + width: 100%; + border-top: 1px solid #c8c8c8; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + outline: transparent; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action:before, +.ms-PersonaCard-overflow:before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; + top: 0; + right: 0; + z-index: 100; +} + +.ms-PersonaCard-action.is-active, +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.ms-PersonaCard-overflow.is-active:after { + box-sizing: border-box; + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-left: 0; + border-bottom: 0; + bottom: -4px; + right: 13px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: left; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + left: 12px; + top: -95px; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-details { + display: none; + width: 100%; + margin: 0; + max-height: 300px; + min-height: 48px; + color: #666666; + padding: 9px 20px; + box-sizing: border-box; +} + +.ms-PersonaCard-details.is-active { + display: block; +} + +.ms-PersonaCard-details.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\E70D'; +} + +.ms-PersonaCard-details[data-detail-id=org] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 16px; + height: 30px; + line-height: 30px; + margin-top: 2px; + position: absolute; + left: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + content: '\E70E'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after { + display: none; +} + +@media (min-width:480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + max-width: 360px; + position: relative; + } + + .ms-ContextualHost .ms-PersonaCard { + box-shadow: none; + } +} + +.ms-Pivot { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + font-size: 0; + height: 40px; + list-style-type: none; + padding: 0; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-size: 14px; + font-weight: 400; + line-height: 40px; + margin-left: 8px; + padding: 0 8px; + text-align: center; + vertical-align: top; +} + +.ms-Pivot-link:hover { + cursor: pointer; +} + +.ms-Pivot-link:before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + right: 8px; + position: absolute; + left: 8px; + transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-Pivot-link:after { + color: transparent; + content: attr(title); + display: block; + font-weight: 700; + height: 1px; + overflow: hidden; + visibility: hidden; +} + +.ms-Pivot-link.is-selected { + font-weight: 600; + position: relative; +} + +.ms-Pivot-link.is-selected:before { + background-color: #0078d7; +} + +.ms-Pivot-link.is-disabled { + color: #a6a6a6; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-left: -2px; + padding: 0 10px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff; + background-color: #0078d7; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-weight: 600; + } +} + +.ms-ProgressIndicator { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-weight: 400; +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + background-color: #0078d7; + height: 2px; + position: absolute; + transition: width 0.3s ease; + width: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 36px; + color: #333333; + font-size: 14px; + font-weight: 400; + position: relative; + margin-bottom: 10px; + display: inline-block; + overflow: hidden; + background-color: #ffffff; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-SearchBox-clear { + display: block; +} + +.ms-SearchBox:hover { + background-color: #deecf9; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled { + background-color: #f4f4f4; + pointer-events: none; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon, +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + color: #a6a6a6; + background-color: transparent; + border-color: #f4f4f4; + cursor: default; +} + +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + left: 0; + z-index: 10; +} + +.ms-SearchBox-clear .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 36px; +} + +.ms-SearchBox-clear .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-icon { + position: relative; + top: 50%; + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + margin-right: 12px; + margin-left: 6px; + color: #0078d7; + vertical-align: top; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #69afe5; + outline: 1px solid transparent; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 36px; + padding: 6px 45px 7px 3px; + width: 208px; + background-color: transparent; + z-index: 5; + transition: padding-right 0.167s; +} + +.ms-SearchBox-field:focus { + padding: 6px 10px 7px 32px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + right: 0; + height: 36px; + line-height: 36px; + color: #666666; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + width: 208px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + transition: none; + border: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus { + background-color: transparent; + padding: 6px 45px 7px 3px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter { + display: none; + position: absolute; + top: 0; + z-index: 10; + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button { + height: 40px; + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter { + left: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:before { + position: absolute; + content: ' '; + left: 0; + bottom: 0; + right: 0; + margin: 0 8px; + border-bottom: 1px solid #eaeaea; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label { + color: #212121; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:focus { + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit, +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + width: 50px; + min-height: 40px; + z-index: 0; + background-color: #f4f4f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before { + visibility: hidden; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field { + display: block; + cursor: text; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text { + display: inline-block; +} + +@media only screen and (max-width:639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear { + display: inline-block; + left: 58px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated { + transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before { + visibility: visible; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear { + display: inline-block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active { + color: #0078d7; +} + +@media only screen and (min-width:1024px) { + .ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + border-left: 1px solid #eaeaea; + } +} + +@media only screen and (max-width:639px) { + .ms-SearchBox.ms-SearchBox--commandBar { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 44px; + line-height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon { + font-size: 20px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + font-size: 16px; + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active:before { + visibility: visible; +} + +@media only screen and (max-width:639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field { + width: 100%; + padding-left: 100px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon { + color: #a6a6a6; + } +} + +.ms-Spinner { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + right: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + font-size: 12px; + font-weight: 400; + color: #0078d7; + right: 28px; + top: 2px; +} + +.ms-Spinner-label, +.ms-Table { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; +} + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table-row, +.ms-Table tr { + display: table-row; + line-height: 30px; + font-weight: 300; + font-size: 12px; + color: #333333; +} + +.ms-Table-row.is-selected, +.ms-Table tr.is-selected { + background-color: #b3d6f2; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck, +.ms-Table tr.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:before, +.ms-Table tr.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:after, +.ms-Table tr.is-selected .ms-Table-rowCheck:after { + content: '\E73A'; + color: #ffffff; +} + +.ms-Table-cell, +.ms-Table td, +.ms-Table th { + display: table-cell; + padding: 0 10px; +} + +.ms-Table-head, +.ms-Table thead th { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table thead td, +.ms-Table thead th { + font-weight: 400; + text-align: right; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + content: '\E739'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + right: 4px; + top: 1px; +} + +.ms-Table--selectable .ms-Table-row:hover, +.ms-Table--selectable tr:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: block; + } +} + +.ms-TextField { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.ms-TextField .ms-Label { + font-size: 14px; + font-weight: 600; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled::-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-ms-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #333333; + height: 32px; + padding: 6px 12px 7px; + width: 100%; + min-width: 180px; + outline: 0; + text-overflow: ellipsis; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField-field:focus, + .ms-TextField-field:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField-field:focus, + .ms-TextField-field:hover { + border-color: #37006e; + } +} + +.ms-TextField-field[disabled] { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField-field::-webkit-input-placeholder { + color: #666666; +} + +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field::-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; + background-color: #ffffff; +} + +.ms-TextField.ms-TextField--placeholder .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: 5; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 14px; + color: #666666; + padding: 6px 12px 7px; + pointer-events: none; + z-index: 0; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled, +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 14px; + margin-left: 8px; + display: table-cell; + vertical-align: top; + padding-right: 12px; + padding-top: 9px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: right; + display: table-cell; + text-align: right; + padding-top: 8px; + padding-bottom: 3px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #666666; + font-size: 14px; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label, +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + -webkit-font-smoothing: antialiased; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-weight: 400; +} + +.ms-Label { + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Toggle { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + top: -2px; + padding: 0 50px 0 0; +} + +.ms-Toggle .ms-Toggle-field:before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + right: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, right; + transition-duration: 0.25s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field:before { + left: auto; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Toggle .ms-Toggle-field.is-selected:before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + left: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, right; + transition-duration: 0.25s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle .ms-Toggle-field.is-selected:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected:before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field.is-selected:before { + background-color: #ffffff; + right: 28px; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #000000; + } +} + +.ms-Toggle:focus + .ms-Toggle-field, +.ms-Toggle:hover + .ms-Toggle-field { + border-color: #666666; +} + +.ms-Toggle:focus + .ms-Toggle-field:before, +.ms-Toggle:hover + .ms-Toggle-field:before { + background-color: #333333; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field, +.ms-Toggle:hover:checked + .ms-Toggle-field { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field:before, +.ms-Toggle:hover:checked + .ms-Toggle-field:before { + background-color: #ffffff; +} + +.ms-Toggle:active:checked + .ms-Toggle-field { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Toggle .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + border-color: #333333; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle .ms-Toggle-field .ms-Label { + color: #000000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Toggle .ms-Toggle-field:hover .ms-Label { + color: #000000; +} + +.ms-Toggle .ms-Toggle-field:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff; + border-color: #c8c8c8; + pointer-events: none; + cursor: default; +} + +.ms-Toggle.is-disabled .ms-Toggle-field:before { + background-color: #c8c8c8; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 14px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 45px; + height: 20px; + box-sizing: border-box; + border: 2px solid #a6a6a6; + border-radius: 20px; + cursor: pointer; + transition-property: background, right, border-color; + transition-duration: 0.25s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); + outline: 0; +} + +.ms-Toggle-field:focus, +.ms-Toggle-field:hover { + border-color: #666666; +} + +.ms-Toggle-input { + display: none; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: left; +} diff --git a/dist/css/fabric.components.rtl.min.css b/dist/css/fabric.components.rtl.min.css new file mode 100644 index 00000000..15207fbd --- /dev/null +++ b/dist/css/fabric.components.rtl.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline-block;margin-left:-4px}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:13px 4px;line-height:1}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;right:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;right:6px;content:" ";width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:9px 3px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:2px 0}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--small{min-width:60px;min-height:24px;height:auto;padding-top:0;padding-bottom:4px}.ms-Button.ms-Button--small .ms-Button-label{font-weight:400;font-size:12px}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;padding:0;position:relative}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-left:4px;padding-top:5px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none;vertical-align:top}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:right;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:right;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;left:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-left:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 26px 0 0;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:"";display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:"\E73E";font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 26px 0 0;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:"";display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:"";width:0;height:0;border-radius:50%;position:absolute;top:8px;right:8px;bottom:0;left:0;transition-property:top,right,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;right:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0;list-style:none}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-right:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-left:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-left:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-left .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;right:0;left:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-left:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-left:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:left;text-align:left;width:auto;padding-left:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-left:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-left:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;right:3px;left:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:"";outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-right:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-right:4px}}.ms-CommandButton-icon{display:inline-block;margin-left:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;right:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-right:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;right:3px;left:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:"";outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-right:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-right:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:" ";width:1px;height:16px;top:12px;right:-8px;border-right:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-left:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;right:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-left:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:"";height:2px;position:absolute;right:0;left:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 25px 0 16px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;right:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;left:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 26px 0 16px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:"\E73E";font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;right:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-right:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:right;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;left:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-right:15px}.ms-DatePicker-year{margin-right:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;left:9px;right:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;left:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:left;margin-right:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;right:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-right:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 5px 30px 0}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:right;margin:0 0 10px 10px;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;left:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-left:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;right:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-right:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 0 10px 10px}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;left:10px;text-align:left;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-right:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;right:0;top:0;left:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-left:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-left:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-right:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:right;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;left:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:"";position:absolute;border-right:1px solid #a6a6a6;top:10px;bottom:10px;right:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:"";position:absolute;right:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:"";pointer-events:none;position:absolute;right:0;top:0;left:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-left:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-left:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-left:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-left:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;right:0;left:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);right:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:left}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-right:-24px;margin-left:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;left:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-left:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;left:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 10px 0 32px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;left:auto;bottom:auto;right:auto;max-width:100%}.ms-Dropdown-items:before{content:"";position:absolute;z-index:-1;top:0;right:0;left:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:right;padding:0;margin-left:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:"";line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-left:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-left:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-left:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;left:30px;top:39px}.ms-ListItem-image{float:right;height:70px;margin-right:-8px;margin-left:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;left:30px;text-align:left;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-right:3px solid #0078d7;padding-right:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-left:10px solid transparent;border-top:10px solid #0078d7;right:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;right:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-right:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;right:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\e73A";font-size:17px;color:#767676;position:absolute;top:23px;right:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:right;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-left:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;left:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-right:0;max-width:770px;overflow:hidden;text-align:right}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;padding-left:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:left;padding:0 0 10px 10px}.ms-MessageBanner-text{margin-right:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-right:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;left:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-left:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-left:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:right;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;right:0;left:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;left:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-left:0;padding-right:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:30px 0 30px 30px rgba(0,0,0,.2);right:0;left:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;left:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;left:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;right:0;position:fixed;left:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-right:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-right:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-right:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:right;margin:0 0 10px;padding:0 9px 0 0}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;left:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;right:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;right:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{right:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-right:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;right:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;left:0;right:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;right:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src=""]{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;right:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:right;padding-right:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{left:auto;top:10px;right:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-right:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:";"}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{right:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-right:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{right:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-right:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{right:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-right:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;right:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-right:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;right:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:"";width:100%;height:100%;position:absolute;top:0;right:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:"";width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;right:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-left:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;right:0;position:fixed;left:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-right:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:"";position:absolute;top:47px;right:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:"";position:absolute;width:100%;height:100%;background-color:transparent;top:0;right:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:"";width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-left:0;border-bottom:0;bottom:-4px;right:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:left;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;left:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:"\E70D"}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;left:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\E70E"}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-left:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:"";height:2px;right:8px;position:absolute;left:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-left:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;left:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-right:12px;margin-left:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 45px 7px 3px;width:208px;background-color:transparent;z-index:5;transition:padding-right .167s}.ms-SearchBox-field:focus{padding:6px 10px 7px 32px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;right:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 45px 7px 3px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{left:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:" ";left:0;bottom:0;right:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;left:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-left:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-left:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{right:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;right:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:"\E73A";color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:right;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\E739";color:#a6a6a6;font-size:12px;position:absolute;right:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:" *";color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-left:8px;display:table-cell;vertical-align:top;padding-right:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:right;display:table-cell;text-align:right;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:" *";color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 50px 0 0}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:"";right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,right;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{left:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:"";left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,right;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;right:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,right,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:left} \ No newline at end of file diff --git a/dist/css/fabric.min.css b/dist/css/fabric.min.css new file mode 100644 index 00000000..7cac0d40 --- /dev/null +++ b/dist/css/fabric.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric Core 5.0.1 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-borderBase{border:1px solid}.ms-u-clearfix{*zoom:1}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-u-clearfix:after{clear:both}.ms-u-normalize{box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-u-textAlignLeft{text-align:left}.ms-u-textAlignCenter{text-align:center}.ms-u-textAlignRight{text-align:right}.ms-u-screenReaderOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-u-textTruncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ms-u-noWrap{white-space:nowrap}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2488d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#69afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#b3d6f2}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-neutralPrimaryAlt,.ms-bgColor-neutralPrimaryAlt--hover:hover{background-color:#3c3c3c}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#666}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#767676}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a6a6a6}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c8c8}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#eaeaea}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f4f4f4}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#f8f8f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-yellow{background-color:#ffb900}.ms-bgColor-yellowLight{background-color:#fff100}.ms-bgColor-orange{background-color:#d83b01}.ms-bgColor-orangeLight{background-color:#ea4300}.ms-bgColor-orangeLighter{background-color:#ff8c00}.ms-bgColor-redDark{background-color:#a80000}.ms-bgColor-red{background-color:#e81123}.ms-bgColor-magentaDark{background-color:#5c005c}.ms-bgColor-magenta{background-color:#b4009e}.ms-bgColor-magentaLight{background-color:#e3008c}.ms-bgColor-purpleDark{background-color:#32145a}.ms-bgColor-purple{background-color:#5c2d91}.ms-bgColor-purpleLight{background-color:#b4a0ff}.ms-bgColor-blueDark{background-color:#002050}.ms-bgColor-blueMid{background-color:#00188f}.ms-bgColor-blue{background-color:#0078d7}.ms-bgColor-blueLight{background-color:#00bcf2}.ms-bgColor-tealDark{background-color:#004b50}.ms-bgColor-teal{background-color:#008272}.ms-bgColor-tealLight{background-color:#00b294}.ms-bgColor-greenDark{background-color:#004b1c}.ms-bgColor-green{background-color:#107c10}.ms-bgColor-greenLight{background-color:#bad80a}.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-severeWarning{background-color:#fed9cc}.ms-bgColor-warning{background-color:#fff4ce}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2488d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#69afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#b3d6f2}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-neutralPrimaryAlt,.ms-borderColor-neutralPrimaryAlt--hover:hover{border-color:#3c3c3c}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#666}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#767676}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a6a6a6}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c8c8}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#eaeaea}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f4f4f4}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#f8f8f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-yellow{border-color:#ffb900}.ms-borderColor-yellowLight{border-color:#fff100}.ms-borderColor-orange{border-color:#d83b01}.ms-borderColor-orangeLight{border-color:#ea4300}.ms-borderColor-orangeLighter{border-color:#ff8c00}.ms-borderColor-redDark{border-color:#a80000}.ms-borderColor-red{border-color:#e81123}.ms-borderColor-magentaDark{border-color:#5c005c}.ms-borderColor-magenta{border-color:#b4009e}.ms-borderColor-magentaLight{border-color:#e3008c}.ms-borderColor-purpleDark{border-color:#32145a}.ms-borderColor-purple{border-color:#5c2d91}.ms-borderColor-purpleLight{border-color:#b4a0ff}.ms-borderColor-blueDark{border-color:#002050}.ms-borderColor-blueMid{border-color:#00188f}.ms-borderColor-blue{border-color:#0078d7}.ms-borderColor-blueLight{border-color:#00bcf2}.ms-borderColor-tealDark{border-color:#004b50}.ms-borderColor-teal{border-color:#008272}.ms-borderColor-tealLight{border-color:#00b294}.ms-borderColor-greenDark{border-color:#004b1c}.ms-borderColor-green{border-color:#107c10}.ms-borderColor-greenLight{border-color:#bad80a}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l,.ms-font-xl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi,.ms-font-xs{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-mi{font-size:10px;font-weight:600}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-weight:100}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-weight:300}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-weight:400}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-weight:600}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2488d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#69afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#b3d6f2}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-neutralPrimaryAlt,.ms-fontColor-neutralPrimaryAlt--hover:hover{color:#3c3c3c}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#666}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#767676}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a6a6a6}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c8c8}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#eaeaea}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f4f4f4}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#f8f8f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d7}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-fontColor-info,.ms-fontColor-info--hover:hover{color:#767676}.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-warning,.ms-fontColor-warning--hover:hover{color:#767676}.ms-fontColor-severeWarning,.ms-fontColor-severeWarning--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Light'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2) format('woff2'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.ttf) format('truetype');font-weight:100;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2) format('woff2'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semibold'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2) format('woff2'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.ttf) format('truetype');font-weight:600;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semilight'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2) format('woff2'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.ttf) format('truetype');font-weight:200;font-style:normal}@font-face{font-family:FabricMDL2Icons;src:url(https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabricmdl2icons.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabricmdl2icons.ttf) format('truetype');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none}.ms-Icon,.ms-Icon--circle{-webkit-font-smoothing:antialiased;display:inline-block}.ms-Icon--circle{position:relative;font-size:1rem;width:1em;height:1em;margin:0 .5em 0 0;padding:0;text-align:left}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;left:0;transform:scale(2);transform-origin:50% 50%;z-index:0}.ms-Icon--xs{font-size:10px}.ms-Icon--s{font-size:12px}.ms-Icon--m{font-size:16px}.ms-Icon--l{font-size:20px}.ms-Icon--DecreaseIndentLegacy:before{content:'\E290'}.ms-Icon--IncreaseIndentLegacy:before{content:'\E291'}.ms-Icon--GlobalNavButton:before{content:'\E700'}.ms-Icon--InternetSharing:before{content:'\E704'}.ms-Icon--Brightness:before{content:'\E706'}.ms-Icon--MapPin:before{content:'\E707'}.ms-Icon--Airplane:before{content:'\E709'}.ms-Icon--Tablet:before{content:'\E70A'}.ms-Icon--QuickNote:before{content:'\E70B'}.ms-Icon--ChevronDown:before{content:'\E70D'}.ms-Icon--ChevronUp:before{content:'\E70E'}.ms-Icon--Edit:before{content:'\E70F'}.ms-Icon--Add:before{content:'\E710'}.ms-Icon--Cancel:before{content:'\E711'}.ms-Icon--More:before{content:'\E712'}.ms-Icon--Settings:before{content:'\E713'}.ms-Icon--Video:before{content:'\E714'}.ms-Icon--Mail:before{content:'\E715'}.ms-Icon--People:before{content:'\E716'}.ms-Icon--Phone:before{content:'\E717'}.ms-Icon--Pin:before{content:'\E718'}.ms-Icon--Shop:before{content:'\E719'}.ms-Icon--Link:before{content:'\E71B'}.ms-Icon--Filter:before{content:'\E71C'}.ms-Icon--Zoom:before{content:'\E71E'}.ms-Icon--ZoomOut:before{content:'\E71F'}.ms-Icon--Microphone:before{content:'\E720'}.ms-Icon--Search:before{content:'\E721'}.ms-Icon--Camera:before{content:'\E722'}.ms-Icon--Attach:before{content:'\E723'}.ms-Icon--Send:before{content:'\E724'}.ms-Icon--FavoriteList:before{content:'\E728'}.ms-Icon--PageSolid:before{content:'\E729'}.ms-Icon--Forward:before{content:'\E72A'}.ms-Icon--Back:before{content:'\E72B'}.ms-Icon--Refresh:before{content:'\E72C'}.ms-Icon--Share:before{content:'\E72D'}.ms-Icon--Lock:before{content:'\E72E'}.ms-Icon--EMI:before{content:'\E731'}.ms-Icon--MiniLink:before{content:'\E732'}.ms-Icon--Blocked:before{content:'\E733'}.ms-Icon--FavoriteStar:before{content:'\E734'}.ms-Icon--FavoriteStarFill:before{content:'\E735'}.ms-Icon--ReadingMode:before{content:'\E736'}.ms-Icon--Remove:before{content:'\E738'}.ms-Icon--Checkbox:before{content:'\E739'}.ms-Icon--CheckboxComposite:before{content:'\E73A'}.ms-Icon--CheckboxIndeterminate:before{content:'\E73C'}.ms-Icon--CheckMark:before{content:'\E73E'}.ms-Icon--BackToWindow:before{content:'\E73F'}.ms-Icon--FullScreen:before{content:'\E740'}.ms-Icon--Print:before{content:'\E749'}.ms-Icon--Up:before{content:'\E74A'}.ms-Icon--Down:before{content:'\E74B'}.ms-Icon--Delete:before{content:'\E74D'}.ms-Icon--Save:before{content:'\E74E'}.ms-Icon--Sad:before{content:'\E757'}.ms-Icon--SIPMove:before{content:'\E759'}.ms-Icon--EraseTool:before{content:'\E75C'}.ms-Icon--GripperTool:before{content:'\E75E'}.ms-Icon--Dialpad:before{content:'\E75F'}.ms-Icon--PageLeft:before{content:'\E760'}.ms-Icon--PageRight:before{content:'\E761'}.ms-Icon--MultiSelect:before{content:'\E762'}.ms-Icon--Play:before{content:'\E768'}.ms-Icon--Pause:before{content:'\E769'}.ms-Icon--ChevronLeft:before{content:'\E76B'}.ms-Icon--ChevronRight:before{content:'\E76C'}.ms-Icon--Emoji2:before{content:'\E76E'}.ms-Icon--System:before{content:'\E770'}.ms-Icon--Globe:before{content:'\E774'}.ms-Icon--ContactInfo:before{content:'\E779'}.ms-Icon--Unpin:before{content:'\E77A'}.ms-Icon--Contact:before{content:'\E77B'}.ms-Icon--Memo:before{content:'\E77C'}.ms-Icon--WindowsLogo:before{content:'\E782'}.ms-Icon--Error:before{content:'\E783'}.ms-Icon--Unlock:before{content:'\E785'}.ms-Icon--Calendar:before{content:'\E787'}.ms-Icon--Megaphone:before{content:'\E789'}.ms-Icon--AutoEnhanceOn:before{content:'\E78D'}.ms-Icon--AutoEnhanceOff:before{content:'\E78E'}.ms-Icon--Color:before{content:'\E790'}.ms-Icon--SaveAs:before{content:'\E792'}.ms-Icon--Light:before{content:'\E793'}.ms-Icon--Filters:before{content:'\E795'}.ms-Icon--Contrast:before{content:'\E7A1'}.ms-Icon--Redo:before{content:'\E7A6'}.ms-Icon--Undo:before{content:'\E7A7'}.ms-Icon--PhotoCollection:before{content:'\E7AA'}.ms-Icon--Album:before{content:'\E7AB'}.ms-Icon--Rotate:before{content:'\E7AD'}.ms-Icon--PanoIndicator:before{content:'\E7B0'}.ms-Icon--ThumbnailView:before{content:'\E7B6'}.ms-Icon--Package:before{content:'\E7B8'}.ms-Icon--Warning:before{content:'\E7BA'}.ms-Icon--Financial:before{content:'\E7BB'}.ms-Icon--ShoppingCart:before{content:'\E7BF'}.ms-Icon--Train:before{content:'\E7C0'}.ms-Icon--Flag:before{content:'\E7C1'}.ms-Icon--Move:before{content:'\E7C2'}.ms-Icon--Page:before{content:'\E7C3'}.ms-Icon--TouchPointer:before{content:'\E7C9'}.ms-Icon--Merge:before{content:'\E7D5'}.ms-Icon--TurnRight:before{content:'\E7DB'}.ms-Icon--Ferry:before{content:'\E7E3'}.ms-Icon--Tab:before{content:'\E7E9'}.ms-Icon--Admin:before{content:'\E7EF'}.ms-Icon--TVMonitor:before{content:'\E7F4'}.ms-Icon--Speakers:before{content:'\E7F5'}.ms-Icon--Nav2DMapView:before{content:'\E800'}.ms-Icon--Car:before{content:'\E804'}.ms-Icon--EatDrink:before{content:'\E807'}.ms-Icon--LocationCircle:before{content:'\E80E'}.ms-Icon--Home:before{content:'\E80F'}.ms-Icon--SwitcherStartEnd:before{content:'\E810'}.ms-Icon--IncidentTriangle:before{content:'\E814'}.ms-Icon--Touch:before{content:'\E815'}.ms-Icon--MapDirections:before{content:'\E816'}.ms-Icon--History:before{content:'\E81C'}.ms-Icon--Location:before{content:'\E81D'}.ms-Icon--Work:before{content:'\E821'}.ms-Icon--Recent:before{content:'\E823'}.ms-Icon--Hotel:before{content:'\E824'}.ms-Icon--LocationDot:before{content:'\E827'}.ms-Icon--News:before{content:'\E900'}.ms-Icon--Chat:before{content:'\E901'}.ms-Icon--Group:before{content:'\E902'}.ms-Icon--View:before{content:'\E890'}.ms-Icon--Clear:before{content:'\E894'}.ms-Icon--Sync:before{content:'\E895'}.ms-Icon--Download:before{content:'\E896'}.ms-Icon--Help:before{content:'\E897'}.ms-Icon--Upload:before{content:'\E898'}.ms-Icon--Emoji:before{content:'\E899'}.ms-Icon--MailForward:before{content:'\E89C'}.ms-Icon--ClosePane:before{content:'\E89F'}.ms-Icon--OpenPane:before{content:'\E8A0'}.ms-Icon--PreviewLink:before{content:'\E8A1'}.ms-Icon--ZoomIn:before{content:'\E8A3'}.ms-Icon--Bookmarks:before{content:'\E8A4'}.ms-Icon--Document:before{content:'\E8A5'}.ms-Icon--ProtectedDocument:before{content:'\E8A6'}.ms-Icon--OpenInNewWindow:before{content:'\E8A7'}.ms-Icon--MailFill:before{content:'\E8A8'}.ms-Icon--ViewAll:before{content:'\E8A9'}.ms-Icon--Switch:before{content:'\E8AB'}.ms-Icon--Rename:before{content:'\E8AC'}.ms-Icon--Folder:before{content:'\E8B7'}.ms-Icon--Picture:before{content:'\E8B9'}.ms-Icon--ShowResults:before{content:'\E8BC'}.ms-Icon--Message:before{content:'\E8BD'}.ms-Icon--CalendarDay:before{content:'\E8BF'}.ms-Icon--CalendarWeek:before{content:'\E8C0'}.ms-Icon--MailReplyAll:before{content:'\E8C2'}.ms-Icon--Read:before{content:'\E8C3'}.ms-Icon--PaymentCard:before{content:'\E8C7'}.ms-Icon--Copy:before{content:'\E8C8'}.ms-Icon--Important:before{content:'\E8C9'}.ms-Icon--MailReply:before{content:'\E8CA'}.ms-Icon--Sort:before{content:'\E8CB'}.ms-Icon--GotoToday:before{content:'\E8D1'}.ms-Icon--Font:before{content:'\E8D2'}.ms-Icon--FontColor:before{content:'\E8D3'}.ms-Icon--FolderFill:before{content:'\E8D5'}.ms-Icon--Permissions:before{content:'\E8D7'}.ms-Icon--DisableUpdates:before{content:'\E8D8'}.ms-Icon--Unfavorite:before{content:'\E8D9'}.ms-Icon--Italic:before{content:'\E8DB'}.ms-Icon--Underline:before{content:'\E8DC'}.ms-Icon--Bold:before{content:'\E8DD'}.ms-Icon--MoveToFolder:before{content:'\E8DE'}.ms-Icon--Dislike:before{content:'\E8E0'}.ms-Icon--Like:before{content:'\E8E1'}.ms-Icon--AlignRight:before{content:'\E8E2'}.ms-Icon--AlignCenter:before{content:'\E8E3'}.ms-Icon--AlignLeft:before{content:'\E8E4'}.ms-Icon--OpenFile:before{content:'\E8E5'}.ms-Icon--FontDecrease:before{content:'\E8E7'}.ms-Icon--FontIncrease:before{content:'\E8E8'}.ms-Icon--FontSize:before{content:'\E8E9'}.ms-Icon--CellPhone:before{content:'\E8EA'}.ms-Icon--Tag:before{content:'\E8EC'}.ms-Icon--Library:before{content:'\E8F1'}.ms-Icon--PostUpdate:before{content:'\E8F3'}.ms-Icon--NewFolder:before{content:'\E8F4'}.ms-Icon--CalendarReply:before{content:'\E8F5'}.ms-Icon--UnsyncFolder:before{content:'\E8F6'}.ms-Icon--SyncFolder:before{content:'\E8F7'}.ms-Icon--BlockContact:before{content:'\E8F8'}.ms-Icon--AddFriend:before{content:'\E8FA'}.ms-Icon--BulletedList:before{content:'\E8FD'}.ms-Icon--Preview:before{content:'\E8FF'}.ms-Icon--DockLeft:before{content:'\E90C'}.ms-Icon--DockRight:before{content:'\E90D'}.ms-Icon--Repair:before{content:'\E90F'}.ms-Icon--Accounts:before{content:'\E910'}.ms-Icon--RadioBullet:before{content:'\E915'}.ms-Icon--Stopwatch:before{content:'\E916'}.ms-Icon--Clock:before{content:'\E917'}.ms-Icon--WorldClock:before{content:'\E918'}.ms-Icon--AlarmClock:before{content:'\E919'}.ms-Icon--Hospital:before{content:'\E91D'}.ms-Icon--Timer:before{content:'\E91E'}.ms-Icon--FullCircleMask:before{content:'\E91F'}.ms-Icon--LocationFill:before{content:'\E920'}.ms-Icon--ChromeMinimize:before{content:'\E921'}.ms-Icon--Annotation:before{content:'\E924'}.ms-Icon--ChromeClose:before{content:'\E8BB'}.ms-Icon--Accept:before{content:'\E8FB'}.ms-Icon--Fingerprint:before{content:'\E928'}.ms-Icon--Handwriting:before{content:'\E929'}.ms-Icon--StackIndicator:before{content:'\E7FF'}.ms-Icon--Completed:before{content:'\E930'}.ms-Icon--Label:before{content:'\E932'}.ms-Icon--FlickDown:before{content:'\E935'}.ms-Icon--FlickUp:before{content:'\E936'}.ms-Icon--FlickLeft:before{content:'\E937'}.ms-Icon--FlickRight:before{content:'\E938'}.ms-Icon--MusicInCollection:before{content:'\E940'}.ms-Icon--OneDrive:before{content:'\E941'}.ms-Icon--CompassNW:before{content:'\E942'}.ms-Icon--Code:before{content:'\E943'}.ms-Icon--LightningBolt:before{content:'\E945'}.ms-Icon--Info:before{content:'\E946'}.ms-Icon--CalculatorAddition:before{content:'\E948'}.ms-Icon--CalculatorSubtract:before{content:'\E949'}.ms-Icon--PrintfaxPrinterFile:before{content:'\E956'}.ms-Icon--Health:before{content:'\E95E'}.ms-Icon--ChevronUpSmall:before{content:'\E96D'}.ms-Icon--ChevronDownSmall:before{content:'\E96E'}.ms-Icon--ChevronLeftSmall:before{content:'\E96F'}.ms-Icon--ChevronRightSmall:before{content:'\E970'}.ms-Icon--ChevronUpMed:before{content:'\E971'}.ms-Icon--ChevronDownMed:before{content:'\E972'}.ms-Icon--ChevronLeftMed:before{content:'\E973'}.ms-Icon--ChevronRightMed:before{content:'\E974'}.ms-Icon--Dictionary:before{content:'\E82D'}.ms-Icon--ChromeBack:before{content:'\E830'}.ms-Icon--PC1:before{content:'\E977'}.ms-Icon--PresenceChickletVideo:before{content:'\E979'}.ms-Icon--Reply:before{content:'\E97A'}.ms-Icon--DoubleChevronLeftMed:before{content:'\E991'}.ms-Icon--Volume0:before{content:'\E992'}.ms-Icon--Volume1:before{content:'\E993'}.ms-Icon--Volume2:before{content:'\E994'}.ms-Icon--Volume3:before{content:'\E995'}.ms-Icon--CaretHollow:before{content:'\E817'}.ms-Icon--CaretSolid:before{content:'\E818'}.ms-Icon--FolderOpen:before{content:'\E838'}.ms-Icon--Pinned:before{content:'\E840'}.ms-Icon--PinnedFill:before{content:'\E842'}.ms-Icon--Chart:before{content:'\E999'}.ms-Icon--BidiLtr:before{content:'\E9AA'}.ms-Icon--BidiRtl:before{content:'\E9AB'}.ms-Icon--RevToggleKey:before{content:'\E845'}.ms-Icon--RightDoubleQuote:before{content:'\E9B1'}.ms-Icon--Sunny:before{content:'\E9BD'}.ms-Icon--CloudWeather:before{content:'\E9BE'}.ms-Icon--Cloudy:before{content:'\E9BF'}.ms-Icon--PartlyCloudyDay:before{content:'\E9C0'}.ms-Icon--PartlyCloudyNight:before{content:'\E9C1'}.ms-Icon--ClearNight:before{content:'\E9C2'}.ms-Icon--RainShowersDay:before{content:'\E9C3'}.ms-Icon--Rain:before{content:'\E9C4'}.ms-Icon--Thunderstorms:before{content:'\E9C6'}.ms-Icon--RainSnow:before{content:'\E9C7'}.ms-Icon--BlowingSnow:before{content:'\E9C9'}.ms-Icon--Frigid:before{content:'\E9CA'}.ms-Icon--Fog:before{content:'\E9CB'}.ms-Icon--Squalls:before{content:'\E9CC'}.ms-Icon--Duststorm:before{content:'\E9CD'}.ms-Icon--Precipitation:before{content:'\E9CF'}.ms-Icon--Ringer:before{content:'\EA8F'}.ms-Icon--PDF:before{content:'\EA90'}.ms-Icon--SortLines:before{content:'\E9D0'}.ms-Icon--Ribbon:before{content:'\E9D1'}.ms-Icon--CheckList:before{content:'\E9D5'}.ms-Icon--Generate:before{content:'\E9DA'}.ms-Icon--Equalizer:before{content:'\E9E9'}.ms-Icon--BarChartHorizontal:before{content:'\E9EB'}.ms-Icon--Freezing:before{content:'\E9EF'}.ms-Icon--SnowShowerDay:before{content:'\E9FD'}.ms-Icon--HailDay:before{content:'\EA00'}.ms-Icon--WorkFlow:before{content:'\EA01'}.ms-Icon--StoreLogoMed:before{content:'\EA04'}.ms-Icon--RainShowersNight:before{content:'\EA0F'}.ms-Icon--SnowShowerNight:before{content:'\EA11'}.ms-Icon--HailNight:before{content:'\EA13'}.ms-Icon--Info2:before{content:'\EA1F'}.ms-Icon--StoreLogo:before{content:'\EA96'}.ms-Icon--MultiSelectMirrored:before{content:'\EA98'}.ms-Icon--Broom:before{content:'\EA99'}.ms-Icon--MusicInCollectionFill:before{content:'\EA36'}.ms-Icon--List:before{content:'\EA37'}.ms-Icon--Asterisk:before{content:'\EA38'}.ms-Icon--ErrorBadge:before{content:'\EA39'}.ms-Icon--CircleRing:before{content:'\EA3A'}.ms-Icon--CircleFill:before{content:'\EA3B'}.ms-Icon--BookmarksMirrored:before{content:'\EA41'}.ms-Icon--BulletedListMirrored:before{content:'\EA42'}.ms-Icon--CaretHollowMirrored:before{content:'\EA45'}.ms-Icon--CaretSolidMirrored:before{content:'\EA46'}.ms-Icon--ChromeBackMirrored:before{content:'\EA47'}.ms-Icon--ClosePaneMirrored:before{content:'\EA49'}.ms-Icon--DockLeftMirrored:before{content:'\EA4C'}.ms-Icon--DoubleChevronLeftMedMirrored:before{content:'\EA4D'}.ms-Icon--HelpMirrored:before{content:'\EA51'}.ms-Icon--ListMirrored:before{content:'\EA55'}.ms-Icon--MailForwardMirrored:before{content:'\EA56'}.ms-Icon--MailReplyMirrored:before{content:'\EA57'}.ms-Icon--MailReplyAllMirrored:before{content:'\EA58'}.ms-Icon--OpenPaneMirrored:before{content:'\EA5B'}.ms-Icon--SendMirrored:before{content:'\EA63'}.ms-Icon--ShowResultsMirrored:before{content:'\EA65'}.ms-Icon--ThumbnailViewMirrored:before{content:'\EA67'}.ms-Icon--Lightbulb:before{content:'\EA80'}.ms-Icon--StatusTriangle:before{content:'\EA82'}.ms-Icon--VolumeDisabled:before{content:'\EA85'}.ms-Icon--Puzzle:before{content:'\EA86'}.ms-Icon--EmojiNeutral:before{content:'\EA87'}.ms-Icon--EmojiDisappointed:before{content:'\EA88'}.ms-Icon--HomeSolid:before{content:'\EA8A'}.ms-Icon--Cocktails:before{content:'\EA9D'}.ms-Icon--Articles:before{content:'\EAC1'}.ms-Icon--Cycling:before{content:'\EAC7'}.ms-Icon--DietPlanNotebook:before{content:'\EAC8'}.ms-Icon--Pill:before{content:'\EACB'}.ms-Icon--Running:before{content:'\EADA'}.ms-Icon--Weights:before{content:'\EADB'}.ms-Icon--BarChart4:before{content:'\EAE7'}.ms-Icon--CirclePlus:before{content:'\EAEE'}.ms-Icon--Coffee:before{content:'\EAEF'}.ms-Icon--Cotton:before{content:'\EAF3'}.ms-Icon--Market:before{content:'\EAFC'}.ms-Icon--Money:before{content:'\EAFD'}.ms-Icon--PieDouble:before{content:'\EB04'}.ms-Icon--RemoveFilter:before{content:'\EB08'}.ms-Icon--StockDown:before{content:'\EB0F'}.ms-Icon--StockUp:before{content:'\EB11'}.ms-Icon--Cricket:before{content:'\EB1E'}.ms-Icon--Golf:before{content:'\EB1F'}.ms-Icon--Baseball:before{content:'\EB20'}.ms-Icon--Soccer:before{content:'\EB21'}.ms-Icon--MoreSports:before{content:'\EB22'}.ms-Icon--AutoRacing:before{content:'\EB24'}.ms-Icon--CollegeHoops:before{content:'\EB25'}.ms-Icon--CollegeFootball:before{content:'\EB26'}.ms-Icon--ProFootball:before{content:'\EB27'}.ms-Icon--ProHockey:before{content:'\EB28'}.ms-Icon--Rugby:before{content:'\EB2D'}.ms-Icon--Tennis:before{content:'\EB33'}.ms-Icon--Arrivals:before{content:'\EB34'}.ms-Icon--Design:before{content:'\EB3C'}.ms-Icon--Website:before{content:'\EB41'}.ms-Icon--Drop:before{content:'\EB42'}.ms-Icon--Snow:before{content:'\EB46'}.ms-Icon--BusSolid:before{content:'\EB47'}.ms-Icon--FerrySolid:before{content:'\EB48'}.ms-Icon--TrainSolid:before{content:'\EB4D'}.ms-Icon--Heart:before{content:'\EB51'}.ms-Icon--HeartFill:before{content:'\EB52'}.ms-Icon--Ticket:before{content:'\EB54'}.ms-Icon--AzureLogo:before{content:'\EB6A'}.ms-Icon--BingLogo:before{content:'\EB6B'}.ms-Icon--MSNLogo:before{content:'\EB6C'}.ms-Icon--OutlookLogo:before{content:'\EB6D'}.ms-Icon--OfficeLogo:before{content:'\EB6E'}.ms-Icon--SkypeLogo:before{content:'\EB6F'}.ms-Icon--Door:before{content:'\EB75'}.ms-Icon--EditMirrored:before{content:'\EB7E'}.ms-Icon--GiftCard:before{content:'\EB8E'}.ms-Icon--DoubleBookmark:before{content:'\EB8F'}.ms-Icon--StatusErrorFull:before{content:'\EB90'}.ms-Icon--Certificate:before{content:'\EB95'}.ms-Icon--Photo2:before{content:'\EB9F'}.ms-Icon--CloudDownload:before{content:'\EBD3'}.ms-Icon--WindDirection:before{content:'\EBE6'}.ms-Icon--Family:before{content:'\EBDA'}.ms-Icon--CSS:before{content:'\EBEF'}.ms-Icon--JS:before{content:'\EBF0'}.ms-Icon--ReminderGroup:before{content:'\EBF8'}.ms-Icon--Section:before{content:'\EC0C'}.ms-Icon--OneNoteLogo:before{content:'\EC0D'}.ms-Icon--ToggleFilled:before{content:'\EC11'}.ms-Icon--ToggleBorder:before{content:'\EC12'}.ms-Icon--SliderThumb:before{content:'\EC13'}.ms-Icon--ToggleThumb:before{content:'\EC14'}.ms-Icon--Documentation:before{content:'\EC17'}.ms-Icon--Badge:before{content:'\EC1B'}.ms-Icon--Giftbox:before{content:'\EC1F'}.ms-Icon--ExcelLogo:before{content:'\EC28'}.ms-Icon--WordLogo:before{content:'\EC29'}.ms-Icon--PowerPointLogo:before{content:'\EC2A'}.ms-Icon--Cafe:before{content:'\EC32'}.ms-Icon--SpeedHigh:before{content:'\EC4A'}.ms-Icon--MusicNote:before{content:'\EC4F'}.ms-Icon--EdgeLogo:before{content:'\EC60'}.ms-Icon--CompletedSolid:before{content:'\EC61'}.ms-Icon--AlbumRemove:before{content:'\EC62'}.ms-Icon--MessageFill:before{content:'\EC70'}.ms-Icon--TabletSelected:before{content:'\EC74'}.ms-Icon--MobileSelected:before{content:'\EC75'}.ms-Icon--LaptopSelected:before{content:'\EC76'}.ms-Icon--TVMonitorSelected:before{content:'\EC77'}.ms-Icon--DeveloperTools:before{content:'\EC7A'}.ms-Icon--InsertTextBox:before{content:'\EC7D'}.ms-Icon--LowerBrightness:before{content:'\EC8A'}.ms-Icon--CloudUpload:before{content:'\EC8E'}.ms-Icon--DateTime:before{content:'\EC92'}.ms-Icon--Event:before{content:'\ECA3'}.ms-Icon--Cake:before{content:'\ECA4'}.ms-Icon--Tiles:before{content:'\ECA5'}.ms-Icon--Org:before{content:'\ECA6'}.ms-Icon--PartyLeader:before{content:'\ECA7'}.ms-Icon--DRM:before{content:'\ECA8'}.ms-Icon--CloudAdd:before{content:'\ECA9'}.ms-Icon--AppIconDefault:before{content:'\ECAA'}.ms-Icon--Photo2Add:before{content:'\ECAB'}.ms-Icon--Photo2Remove:before{content:'\ECAC'}.ms-Icon--POI:before{content:'\ECAF'}.ms-Icon--FacebookLogo:before{content:'\ECB3'}.ms-Icon--AddTo:before{content:'\ECC8'}.ms-Icon--RadioBtnOn:before{content:'\ECCB'}.ms-Icon--Embed:before{content:'\ECCE'}.ms-Icon--VideoSolid:before{content:'\EA0C'}.ms-Icon--Teamwork:before{content:'\EA12'}.ms-Icon--PeopleAdd:before{content:'\EA15'}.ms-Icon--Glasses:before{content:'\EA16'}.ms-Icon--DateTime2:before{content:'\EA17'}.ms-Icon--Shield:before{content:'\EA18'}.ms-Icon--Header1:before{content:'\EA19'}.ms-Icon--PageAdd:before{content:'\EA1A'}.ms-Icon--NumberedList:before{content:'\EA1C'}.ms-Icon--PowerBILogo:before{content:'\EA1E'}.ms-Icon--Product:before{content:'\ECDC'}.ms-Icon--Blocked2:before{content:'\ECE4'}.ms-Icon--FangBody:before{content:'\ECEB'}.ms-Icon--Glimmer:before{content:'\ECF4'}.ms-Icon--ChatInviteFriend:before{content:'\ECFE'}.ms-Icon--SharepointLogo:before{content:'\ED18'}.ms-Icon--YammerLogo:before{content:'\ED19'}.ms-Icon--ReturnToSession:before{content:'\ED24'}.ms-Icon--OpenFolderHorizontal:before{content:'\ED25'}.ms-Icon--CalendarMirrored:before{content:'\ED28'}.ms-Icon--SwayLogo:before{content:'\ED29'}.ms-Icon--OutOfOffice:before{content:'\ED34'}.ms-Icon--Trophy:before{content:'\ED3F'}.ms-Icon--ReopenPages:before{content:'\ED50'}.ms-Icon--AADLogo:before{content:'\ED68'}.ms-Icon--AccessLogo:before{content:'\ED69'}.ms-Icon--AdminALogo:before{content:'\ED6A'}.ms-Icon--AdminCLogo:before{content:'\ED6B'}.ms-Icon--AdminDLogo:before{content:'\ED6C'}.ms-Icon--AdminELogo:before{content:'\ED6D'}.ms-Icon--AdminLLogo:before{content:'\ED6E'}.ms-Icon--AdminMLogo:before{content:'\ED6F'}.ms-Icon--AdminOLogo:before{content:'\ED70'}.ms-Icon--AdminPLogo:before{content:'\ED71'}.ms-Icon--AdminSLogo:before{content:'\ED72'}.ms-Icon--AdminYLogo:before{content:'\ED73'}.ms-Icon--AlchemyLogo:before{content:'\ED74'}.ms-Icon--BoxLogo:before{content:'\ED75'}.ms-Icon--DelveLogo:before{content:'\ED76'}.ms-Icon--DropboxLogo:before{content:'\ED77'}.ms-Icon--ExchangeLogo:before{content:'\ED78'}.ms-Icon--LyncLogo:before{content:'\ED79'}.ms-Icon--OfficeVideoLogo:before{content:'\ED7A'}.ms-Icon--ParatureLogo:before{content:'\ED7B'}.ms-Icon--SocialListeningLogo:before{content:'\ED7C'}.ms-Icon--VisioLogo:before{content:'\ED7D'}.ms-Icon--Balloons:before{content:'\ED7E'}.ms-Icon--Cat:before{content:'\ED7F'}.ms-Icon--MailAlert:before{content:'\ED80'}.ms-Icon--MailCheck:before{content:'\ED81'}.ms-Icon--MailLowImportance:before{content:'\ED82'}.ms-Icon--MailPause:before{content:'\ED83'}.ms-Icon--MailRepeat:before{content:'\ED84'}.ms-Icon--SecurityGroup:before{content:'\ED85'}.ms-Icon--Table:before{content:'\ED86'}.ms-Icon--VoicemailForward:before{content:'\ED87'}.ms-Icon--VoicemailReply:before{content:'\ED88'}.ms-Icon--Waffle:before{content:'\ED89'}.ms-Icon--RemoveEvent:before{content:'\ED8A'}.ms-Icon--EventInfo:before{content:'\ED8B'}.ms-Icon--ForwardEvent:before{content:'\ED8C'}.ms-Icon--WipePhone:before{content:'\ED8D'}.ms-Icon--AddOnlineMeeting:before{content:'\ED8E'}.ms-Icon--JoinOnlineMeeting:before{content:'\ED8F'}.ms-Icon--RemoveLink:before{content:'\ED90'}.ms-Icon--PeopleBlock:before{content:'\ED91'}.ms-Icon--PeopleRepeat:before{content:'\ED92'}.ms-Icon--PeopleAlert:before{content:'\ED93'}.ms-Icon--PeoplePause:before{content:'\ED94'}.ms-Icon--TransferCall:before{content:'\ED95'}.ms-Icon--AddPhone:before{content:'\ED96'}.ms-Icon--UnknownCall:before{content:'\ED97'}.ms-Icon--NoteReply:before{content:'\ED98'}.ms-Icon--NoteForward:before{content:'\ED99'}.ms-Icon--NotePinned:before{content:'\ED9A'}.ms-Icon--RemoveOccurrence:before{content:'\ED9B'}.ms-Icon--Timeline:before{content:'\ED9C'}.ms-Icon--EditNote:before{content:'\ED9D'}.ms-Icon--CircleHalfFull:before{content:'\ED9E'}.ms-Icon--Room:before{content:'\ED9F'}.ms-Icon--Unsubscribe:before{content:'\EDA0'}.ms-Icon--Subscribe:before{content:'\EDA1'}.ms-Icon--RecurringTask:before{content:'\EDB2'}.ms-Icon--TaskManager:before{content:'\EDB7'}.ms-Icon--TaskManagerMirrored:before{content:'\EDB8'}.ms-Icon--Combine:before{content:'\EDBB'}.ms-Icon--Split:before{content:'\EDBC'}.ms-Icon--DoubleChevronUp:before{content:'\EDBD'}.ms-Icon--DoubleChevronLeft:before{content:'\EDBE'}.ms-Icon--DoubleChevronRight:before{content:'\EDBF'}.ms-Icon--Ascending:before{content:'\EDC0'}.ms-Icon--Descending:before{content:'\EDC1'}.ms-Icon--TextBox:before{content:'\EDC2'}.ms-Icon--TextField:before{content:'\EDC3'}.ms-Icon--NumberField:before{content:'\EDC4'}.ms-Icon--Dropdown:before{content:'\EDC5'}.ms-Icon--BookingsLogo:before{content:'\EDC7'}.ms-Icon--ClassNotebookLogo:before{content:'\EDC8'}.ms-Icon--CollabsDBLogo:before{content:'\EDC9'}.ms-Icon--DelveAnalyticsLogo:before{content:'\EDCA'}.ms-Icon--DocsLogo:before{content:'\EDCB'}.ms-Icon--Dynamics365Logo:before,.ms-Icon--DynamicsCRMLogo:before{content:'\EDCC'}.ms-Icon--DynamicSMBLogo:before{content:'\EDCD'}.ms-Icon--OfficeAssistantLogo:before{content:'\EDCE'}.ms-Icon--OfficeStoreLogo:before{content:'\EDCF'}.ms-Icon--OneNoteEduLogo:before{content:'\EDD0'}.ms-Icon--Planner:before{content:'\EDD1'}.ms-Icon--PowerApps:before{content:'\EDD2'}.ms-Icon--Suitcase:before{content:'\EDD3'}.ms-Icon--ProjectLogo:before{content:'\EDD4'}.ms-Icon--CaretLeft8:before{content:'\EDD5'}.ms-Icon--CaretRight8:before{content:'\EDD6'}.ms-Icon--CaretUp8:before{content:'\EDD7'}.ms-Icon--CaretDown8:before{content:'\EDD8'}.ms-Icon--CaretLeftSolid8:before{content:'\EDD9'}.ms-Icon--CaretRightSolid8:before,.ms-Icon--CarotRightSolid8:before{content:'\EDDA'}.ms-Icon--CaretUpSolid8:before{content:'\EDDB'}.ms-Icon--CaretDownSolid8:before{content:'\EDDC'}.ms-Icon--ClearFormatting:before{content:'\EDDD'}.ms-Icon--Superscript:before{content:'\EDDE'}.ms-Icon--Subscript:before{content:'\EDDF'}.ms-Icon--Strikethrough:before{content:'\EDE0'}.ms-Icon--SingleBookmark:before{content:'\EDFF'}.ms-Icon--DoubleChevronDown:before{content:'\EE04'}.ms-Icon--ReplyAll:before{content:'\EE0A'}.ms-Icon--GoogleDriveLogo:before{content:'\EE0B'}.ms-Icon--Questionnaire:before{content:'\EE19'}.ms-Icon--ReplyMirrored:before{content:'\EE35'}.ms-Icon--ReplyAllMirrored:before{content:'\EE36'}.ms-Icon--AddGroup:before{content:'\EE3D'}.ms-Icon--QuestionnaireMirrored:before{content:'\EE4B'}.ms-Icon--TemporaryUser:before{content:'\EE58'}.ms-Icon--GroupedDescending:before{content:'\EE66'}.ms-Icon--GroupedAscending:before{content:'\EE67'}.ms-Icon--SortUp:before{content:'\EE68'}.ms-Icon--SortDown:before{content:'\EE69'}.ms-Icon--AwayStatus:before{content:'\EE6A'}.ms-Icon--SyncToPC:before{content:'\EE6E'}.ms-Icon--AustralianRules:before{content:'\EE70'}.ms-Icon--DateTimeMirrored:before{content:'\EE93'}.ms-Icon--DoubleChevronUp12:before{content:'\EE96'}.ms-Icon--DoubleChevronDown12:before{content:'\EE97'}.ms-Icon--DoubleChevronLeft12:before{content:'\EE98'}.ms-Icon--DoubleChevronRight12:before{content:'\EE99'}.ms-Icon--CalendarAgenda:before{content:'\EE9A'}.ms-Icon--AddEvent:before{content:'\EEB5'}.ms-Icon--AssetLibrary:before{content:'\EEB6'}.ms-Icon--DataConnectionLibrary:before{content:'\EEB7'}.ms-Icon--DocLibrary:before{content:'\EEB8'}.ms-Icon--FormLibrary:before{content:'\EEB9'}.ms-Icon--FormLibraryMirrored:before{content:'\EEBA'}.ms-Icon--ReportLibrary:before{content:'\EEBB'}.ms-Icon--ReportLibraryMirrored:before{content:'\EEBC'}.ms-Icon--ContactCard:before{content:'\EEBD'}.ms-Icon--CustomList:before{content:'\EEBE'}.ms-Icon--CustomListMirrored:before{content:'\EEBF'}.ms-Icon--IssueTracking:before{content:'\EEC0'}.ms-Icon--IssueTrackingMirrored:before{content:'\EEC1'}.ms-Icon--PictureLibrary:before{content:'\EEC2'}.ms-Icon--AppForOfficeLogo:before{content:'\EEC7'}.ms-Icon--OfflineOneDriveParachute:before{content:'\EEC8'}.ms-Icon--OfflineOneDriveParachuteDisabled:before{content:'\EEC9'}.ms-Icon--LargeGrid:before{content:'\EECB'}.ms-Icon--TriangleSolidUp12:before{content:'\EECC'}.ms-Icon--TriangleSolidDown12:before{content:'\EECD'}.ms-Icon--TriangleSolidLeft12:before{content:'\EECE'}.ms-Icon--TriangleSolidRight12:before{content:'\EECF'}.ms-Icon--TriangleUp12:before{content:'\EED0'}.ms-Icon--TriangleDown12:before{content:'\EED1'}.ms-Icon--TriangleLeft12:before{content:'\EED2'}.ms-Icon--TriangleRight12:before{content:'\EED3'}.ms-Icon--ArrowUpRight8:before{content:'\EED4'}.ms-Icon--ArrowDownRight8:before{content:'\EED5'}.ms-Icon--DocumentSet:before{content:'\EED6'}.ms-Icon--DelveAnalytics:before{content:'\EEEE'}.ms-Icon--ArrowUpRightMirrored8:before{content:'\EEEF'}.ms-Icon--ArrowDownRightMirrored8:before{content:'\EEF0'}.ms-Icon--OneDriveAdd:before{content:'\EF32'}.ms-Icon--Header2:before{content:'\EF36'}.ms-Icon--Header3:before{content:'\EF37'}.ms-Icon--Header4:before{content:'\EF38'}.ms-Icon--MarketDown:before{content:'\EF42'}.ms-Icon--CalendarWorkWeek:before{content:'\EF51'}.ms-Icon--SidePanel:before{content:'\EF52'}.ms-Icon--GlobeFavorite:before{content:'\EF53'}.ms-Icon--CaretTopLeftSolid8:before{content:'\EF54'}.ms-Icon--CaretTopRightSolid8:before{content:'\EF55'}.ms-Icon--ViewAll2:before{content:'\EF56'}.ms-Icon--DocumentReply:before{content:'\EF57'}.ms-Icon--PlayerSettings:before{content:'\EF58'}.ms-Icon--ReceiptForward:before{content:'\EF59'}.ms-Icon--ReceiptReply:before{content:'\EF5A'}.ms-Icon--ReceiptCheck:before{content:'\EF5B'}.ms-Icon--Fax:before{content:'\EF5C'}.ms-Icon--RecurringEvent:before{content:'\EF5D'}.ms-Icon--ReplyAlt:before{content:'\EF5E'}.ms-Icon--ReplyAllAlt:before{content:'\EF5F'}.ms-Icon--EditStyle:before{content:'\EF60'}.ms-Icon--EditMail:before{content:'\EF61'}.ms-Icon--Lifesaver:before{content:'\EF62'}.ms-Icon--LifesaverLock:before{content:'\EF63'}.ms-Icon--InboxCheck:before{content:'\EF64'}.ms-Icon--FolderSearch:before{content:'\EF65'}.ms-Icon--CollapseMenu:before{content:'\EF66'}.ms-Icon--ExpandMenu:before{content:'\EF67'}.ms-Icon--Boards:before{content:'\EF68'}.ms-Icon--SunAdd:before{content:'\EF69'}.ms-Icon--SunQuestionMark:before{content:'\EF6A'}.ms-Icon--LandscapeOrientation:before{content:'\EF6B'}.ms-Icon--DocumentSearch:before{content:'\EF6C'}.ms-Icon--PublicCalendar:before{content:'\EF6D'}.ms-Icon--PublicContactCard:before{content:'\EF6E'}.ms-Icon--PublicEmail:before{content:'\EF6F'}.ms-Icon--PublicFolder:before{content:'\EF70'}.ms-Icon--WordDocument:before{content:'\EF71'}.ms-Icon--PowerPointDocument:before{content:'\EF72'}.ms-Icon--ExcelDocument:before{content:'\EF73'}.ms-Icon--GroupedList:before{content:'\EF74'}.ms-Icon--ClassroomLogo:before{content:'\EF75'}.ms-Icon--Sections:before{content:'\EF76'}.ms-Icon--EditPhoto:before{content:'\EF77'}.ms-Icon--Starburst:before{content:'\EF78'}.ms-Icon--ShareiOS:before{content:'\EF79'}.ms-Icon--AirTickets:before{content:'\EF7A'}.ms-Icon--PencilReply:before{content:'\EF7B'}.ms-Icon--Tiles2:before{content:'\EF7C'}.ms-Icon--SkypeCircleCheck:before{content:'\EF7D'}.ms-Icon--SkypeCircleClock:before{content:'\EF7E'}.ms-Icon--SkypeCircleMinus:before{content:'\EF7F'}.ms-Icon--SkypeCheck:before{content:'\EF80'}.ms-Icon--SkypeClock:before{content:'\EF81'}.ms-Icon--SkypeMinus:before{content:'\EF82'}.ms-Icon--SkypeMessage:before{content:'\EF83'}.ms-Icon--ClosedCaption:before{content:'\EF84'}.ms-Icon--ATPLogo:before{content:'\EF85'}.ms-Icon--OfficeFormLogo:before{content:'\EF86'}.ms-Icon--RecycleBin:before{content:'\EF87'}.ms-Icon--EmptyRecycleBin:before{content:'\EF88'}.ms-Icon--Hide2:before{content:'\EF89'}.ms-Icon--iOSAppStoreLogo:before{content:'\EF8A'}.ms-Icon--AndroidLogo:before{content:'\EF8B'}.ms-Icon--Breadcrumb:before{content:'\EF8C'}.ms-Icon--ClearFilter:before{content:'\EF8F'}.ms-Icon--Flow:before{content:'\EF90'}.ms-Icon--PageCheckedOut:before{content:'\F02C'}.ms-Icon--SetAction:before{content:'\F071'}.ms-Icon--PowerAppsLogo:before{content:'\F091'}.ms-Icon--PowerApps2Logo:before{content:'\F092'}.ms-Icon--FabricAssetLibrary:before{content:'\F09C'}.ms-Icon--FabricDataConnectionLibrary:before{content:'\F09D'}.ms-Icon--FabricDocLibrary:before{content:'\F09E'}.ms-Icon--FabricFormLibrary:before{content:'\F09F'}.ms-Icon--FabricFormLibraryMirrored:before{content:'\F0A0'}.ms-Icon--FabricReportLibrary:before{content:'\F0A1'}.ms-Icon--FabricReportLibraryMirrored:before{content:'\F0A2'}.ms-Icon--FabricPublicFolder:before{content:'\F0A3'}.ms-Icon--FabricFolderSearch:before{content:'\F0A4'}.ms-Icon--FabricMovetoFolder:before{content:'\F0A5'}.ms-Icon--FabricUnsyncFolder:before{content:'\F0A6'}.ms-Icon--FabricSyncFolder:before{content:'\F0A7'}.ms-Icon--FabricOpenFolderHorizontal:before{content:'\F0A8'}.ms-Icon--FabricFolder:before{content:'\F0A9'}.ms-Icon--FabricFolderFill:before{content:'\F0AA'}.ms-Icon--FabricNewFolder:before{content:'\F0AB'}.ms-Icon--FabricPictureLibrary:before{content:'\F0AC'}.ms-Icon--AddFavorite:before{content:'\F0C8'}.ms-Icon--AddFavoriteFill:before{content:'\F0C9'}.ms-Icon--BufferTimeBefore:before{content:'\F0CF'}.ms-Icon--BufferTimeAfter:before{content:'\F0D0'}.ms-Icon--BufferTimeBoth:before{content:'\F0D1'}.ms-Icon--PageCheckedin:before{content:'\F104'}.ms-Icon--CaretBottomLeftSolid8:before{content:'\F121'}.ms-Icon--CaretBottomRightSolid8:before{content:'\F122'}.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_16x1.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_48x1.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_96x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_16x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_48x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_96x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_16x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_48x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_96x1.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_16x1.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_48x1.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_96x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_16x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_48x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_96x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_16x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_48x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_96x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_16x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_48x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_96x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_16x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_48x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_96x1.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_16x1.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_48x1.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_96x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_16x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_48x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_96x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_16x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_48x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_96x1.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_16x1.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_48x1.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_96x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_16x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_48x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_96x1.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_16x1.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_48x1.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_96x1.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_16x1.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_48x1.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_96x1.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_16x1.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_48x1.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_96x1.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_16x1.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_48x1.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_96x1.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_16x1.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_48x1.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_96x1.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_16x1.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_48x1.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_96x1.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_16x1.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_48x1.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_96x1.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_16x1.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_48x1.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_96x1.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_16x1.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_48x1.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_96x1.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_16x1.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_48x1.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_96x1.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_16x1.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_48x1.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_96x1.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_16x1.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_48x1.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_96x1.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_16x1.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_48x1.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_96x1.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_16x1.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_48x1.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_96x1.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_16x1.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_48x1.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_96x1.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_16x1.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_48x1.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_96x1.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_16x1.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_48x1.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_96x1.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_16x1.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_48x1.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_96x1.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_16x1.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_48x1.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_96x1.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_16x1.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_48x1.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_96x1.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_16x1.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_48x1.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_96x1.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_16x1.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_48x1.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_96x1.png)}.ms-BrandIcon--Icon16{background-size:100% 100%;width:16px;height:16px}.ms-BrandIcon--Icon48{background-size:100% 100%;width:48px;height:48px}.ms-BrandIcon--Icon96{background-size:100% 100%;width:96px;height:96px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi){.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_16x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_48x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_96x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_16x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_48x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_96x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_16x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_48x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_96x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_16x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_48x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_96x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_16x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_48x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_96x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_16x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_48x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_96x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_16x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_48x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_96x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_16x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_48x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_96x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_16x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_48x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_96x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_16x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_48x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_96x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_16x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_48x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_96x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_16x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_48x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_96x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_16x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_48x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_96x1_5.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_16x1_5.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_48x1_5.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_96x1_5.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_16x1_5.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_48x1_5.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_96x1_5.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_16x1_5.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_48x1_5.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_96x1_5.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_16x1_5.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_48x1_5.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_96x1_5.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_16x1_5.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_48x1_5.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_96x1_5.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_16x1_5.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_48x1_5.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_96x1_5.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_16x1_5.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_48x1_5.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_96x1_5.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_16x1_5.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_48x1_5.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_96x1_5.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_16x1_5.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_48x1_5.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_96x1_5.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_16x1_5.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_48x1_5.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_96x1_5.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_16x1_5.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_48x1_5.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_96x1_5.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_16x1_5.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_48x1_5.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_96x1_5.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_16x1_5.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_48x1_5.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_96x1_5.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_16x1_5.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_48x1_5.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_96x1_5.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_16x1_5.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_48x1_5.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_96x1_5.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_16x1_5.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_48x1_5.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_96x1_5.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_16x1_5.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_48x1_5.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_96x1_5.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_16x1_5.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_48x1_5.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_96x1_5.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_16x1_5.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_48x1_5.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_96x1_5.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_16x1_5.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_48x1_5.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_96x1_5.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_16x1_5.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_48x1_5.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_96x1_5.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_16x1_5.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_48x1_5.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_96x1_5.png)}}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi){.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_16x2.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_48x2.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_96x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_16x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_48x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_96x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_16x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_48x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_96x2.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_16x2.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_48x2.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_96x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_16x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_48x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_96x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_16x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_48x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_96x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_16x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_48x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_96x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_16x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_48x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_96x2.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_16x2.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_48x2.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_96x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_16x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_48x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_96x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_16x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_48x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_96x2.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_16x2.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_48x2.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_96x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_16x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_48x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_96x2.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_16x2.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_48x2.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_96x2.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_16x2.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_48x2.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_96x2.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_16x2.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_48x2.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_96x2.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_16x2.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_48x2.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_96x2.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_16x2.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_48x2.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_96x2.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_16x2.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_48x2.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_96x2.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_16x2.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_48x2.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_96x2.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_16x2.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_48x2.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_96x2.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_16x2.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_48x2.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_96x2.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_16x2.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_48x2.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_96x2.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_16x2.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_48x2.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_96x2.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_16x2.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_48x2.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_96x2.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_16x2.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_48x2.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_96x2.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_16x2.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_48x2.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_96x2.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_16x2.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_48x2.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_96x2.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_16x2.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_48x2.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_96x2.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_16x2.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_48x2.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_96x2.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_16x2.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_48x2.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_96x2.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_16x2.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_48x2.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_96x2.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_16x2.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_48x2.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_96x2.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_16x2.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_48x2.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_96x2.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_16x2.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_48x2.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_96x2.png)}}@media only screen and (-webkit-min-device-pixel-ratio:3),only screen and (min-resolution:288dpi){.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_16x3.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_48x3.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/access_96x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_16x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_48x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/excel_96x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_16x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_48x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/infopath_96x3.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_16x3.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_48x3.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/office_96x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_16x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_48x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onedrive_96x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_16x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_48x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/onenote_96x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_16x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_48x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/outlook_96x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_16x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_48x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/powerpoint_96x3.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_16x3.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_48x3.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/project_96x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_16x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_48x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/sharepoint_96x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_16x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_48x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/visio_96x3.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_16x3.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_48x3.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/product/png/word_96x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_16x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_48x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/accdb_96x3.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_16x3.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_48x3.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/csv_96x3.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_16x3.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_48x3.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/docx_96x3.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_16x3.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_48x3.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/dotx_96x3.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_16x3.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_48x3.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpp_96x3.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_16x3.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_48x3.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/mpt_96x3.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_16x3.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_48x3.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odp_96x3.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_16x3.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_48x3.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ods_96x3.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_16x3.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_48x3.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/odt_96x3.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_16x3.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_48x3.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/one_96x3.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_16x3.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_48x3.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onepkg_96x3.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_16x3.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_48x3.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/onetoc_96x3.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_16x3.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_48x3.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/potx_96x3.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_16x3.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_48x3.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/ppsx_96x3.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_16x3.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_48x3.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pptx_96x3.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_16x3.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_48x3.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/pub_96x3.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_16x3.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_48x3.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vsdx_96x3.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_16x3.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_48x3.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vssx_96x3.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_16x3.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_48x3.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/vstx_96x3.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_16x3.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_48x3.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xls_96x3.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_16x3.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_48x3.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xlsx_96x3.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_16x3.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_48x3.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xltx_96x3.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_16x3.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_48x3.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/brand-icons/document/png/xsn_96x3.png)}}.ms-u-slideRightIn10{animation-name:fadeIn,slideRightIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn10{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn20{animation-name:fadeIn,slideRightIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn20{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn40{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn40{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn10{animation-name:fadeIn,slideLeftIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn10{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn20{animation-name:fadeIn,slideLeftIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn20{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn40{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn40{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn400{animation-name:fadeIn,slideRightIn400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn400{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn400{animation-name:fadeIn,slideLeft400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeft400{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn20{animation-name:fadeIn,slideUpIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideUpIn20{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn10{animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpIn10{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn20{animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideDownIn20{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn10{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownIn10{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}.ms-u-slideRightOut40{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut40{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut40{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{animation-name:fadeOut,slideRightOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut400{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{animation-name:fadeOut,slideLeftOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut400{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{animation-name:fadeOut,slideUpOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{animation-name:fadeOut,slideDownOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{animation-name:fadeOut,slideDownOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{animation-name:fadeIn,scaleUp100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleUp100{0%{transform:scale3d(.98,.98,1)}to{transform:scaleX(1)}}.ms-u-scaleDownIn100{animation-name:fadeIn,scaleDown100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleDown100{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleX(1)}}.ms-u-scaleUpOut103{animation-name:fadeOut,scaleUp103;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleUp103{0%{transform:scaleX(1)}to{transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{animation-name:fadeOut,scaleDown98;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleDown98{0%{transform:scaleX(1)}to{transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both}.ms-u-fadeIn100{animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeIn{0%{opacity:0;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both}.ms-u-fadeOut100{animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeOut{0%{opacity:1;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{animation-name:rotate90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotate90{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}.ms-u-rotateN90deg{animation-name:rotateN90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotateN90{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}.ms-u-expandCollapse400{transition:height .367s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height .167s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{animation-delay:.167s}.ms-u-delay200{animation-delay:.267s}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{right:100%}.ms-u-smPull11{right:91.66666666666666%}.ms-u-smPull10{right:83.33333333333334%}.ms-u-smPull9{right:75%}.ms-u-smPull8{right:66.66666666666666%}.ms-u-smPull7{right:58.333333333333336%}.ms-u-smPull6{right:50%}.ms-u-smPull5{right:41.66666666666667%}.ms-u-smPull4{right:33.33333333333333%}.ms-u-smPull3{right:25%}.ms-u-smPull2{right:16.666666666666664%}.ms-u-smPull1{right:8.333333333333332%}.ms-u-smPull0{right:auto}.ms-u-smPush12{left:100%}.ms-u-smPush11{left:91.66666666666666%}.ms-u-smPush10{left:83.33333333333334%}.ms-u-smPush9{left:75%}.ms-u-smPush8{left:66.66666666666666%}.ms-u-smPush7{left:58.333333333333336%}.ms-u-smPush6{left:50%}.ms-u-smPush5{left:41.66666666666667%}.ms-u-smPush4{left:33.33333333333333%}.ms-u-smPush3{left:25%}.ms-u-smPush2{left:16.666666666666664%}.ms-u-smPush1{left:8.333333333333332%}.ms-u-smPush0{left:auto}.ms-u-smOffset11{margin-left:91.66666666666666%}.ms-u-smOffset10{margin-left:83.33333333333334%}.ms-u-smOffset9{margin-left:75%}.ms-u-smOffset8{margin-left:66.66666666666666%}.ms-u-smOffset7{margin-left:58.333333333333336%}.ms-u-smOffset6{margin-left:50%}.ms-u-smOffset5{margin-left:41.66666666666667%}.ms-u-smOffset4{margin-left:33.33333333333333%}.ms-u-smOffset3{margin-left:25%}.ms-u-smOffset2{margin-left:16.666666666666664%}.ms-u-smOffset1{margin-left:8.333333333333332%}.ms-u-smOffset0{margin-left:0}@media (min-width:480px){.ms-u-md12{width:100%}}@media (min-width:480px){.ms-u-md11{width:91.66666666666666%}}@media (min-width:480px){.ms-u-md10{width:83.33333333333334%}}@media (min-width:480px){.ms-u-md9{width:75%}}@media (min-width:480px){.ms-u-md8{width:66.66666666666666%}}@media (min-width:480px){.ms-u-md7{width:58.333333333333336%}}@media (min-width:480px){.ms-u-md6{width:50%}}@media (min-width:480px){.ms-u-md5{width:41.66666666666667%}}@media (min-width:480px){.ms-u-md4{width:33.33333333333333%}}@media (min-width:480px){.ms-u-md3{width:25%}}@media (min-width:480px){.ms-u-md2{width:16.666666666666664%}}@media (min-width:480px){.ms-u-md1{width:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull12{right:100%}}@media (min-width:480px){.ms-u-mdPull11{right:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPull10{right:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPull9{right:75%}}@media (min-width:480px){.ms-u-mdPull8{right:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPull7{right:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPull6{right:50%}}@media (min-width:480px){.ms-u-mdPull5{right:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPull4{right:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPull3{right:25%}}@media (min-width:480px){.ms-u-mdPull2{right:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPull1{right:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull0{right:auto}}@media (min-width:480px){.ms-u-mdPush12{left:100%}}@media (min-width:480px){.ms-u-mdPush11{left:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPush10{left:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPush9{left:75%}}@media (min-width:480px){.ms-u-mdPush8{left:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPush7{left:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPush6{left:50%}}@media (min-width:480px){.ms-u-mdPush5{left:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPush4{left:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPush3{left:25%}}@media (min-width:480px){.ms-u-mdPush2{left:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPush1{left:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPush0{left:auto}}@media (min-width:480px){.ms-u-mdOffset11{margin-left:91.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset10{margin-left:83.33333333333334%}}@media (min-width:480px){.ms-u-mdOffset9{margin-left:75%}}@media (min-width:480px){.ms-u-mdOffset8{margin-left:66.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset7{margin-left:58.333333333333336%}}@media (min-width:480px){.ms-u-mdOffset6{margin-left:50%}}@media (min-width:480px){.ms-u-mdOffset5{margin-left:41.66666666666667%}}@media (min-width:480px){.ms-u-mdOffset4{margin-left:33.33333333333333%}}@media (min-width:480px){.ms-u-mdOffset3{margin-left:25%}}@media (min-width:480px){.ms-u-mdOffset2{margin-left:16.666666666666664%}}@media (min-width:480px){.ms-u-mdOffset1{margin-left:8.333333333333332%}}@media (min-width:480px){.ms-u-mdOffset0{margin-left:0}}@media (min-width:640px){.ms-u-lg12{width:100%}}@media (min-width:640px){.ms-u-lg11{width:91.66666666666666%}}@media (min-width:640px){.ms-u-lg10{width:83.33333333333334%}}@media (min-width:640px){.ms-u-lg9{width:75%}}@media (min-width:640px){.ms-u-lg8{width:66.66666666666666%}}@media (min-width:640px){.ms-u-lg7{width:58.333333333333336%}}@media (min-width:640px){.ms-u-lg6{width:50%}}@media (min-width:640px){.ms-u-lg5{width:41.66666666666667%}}@media (min-width:640px){.ms-u-lg4{width:33.33333333333333%}}@media (min-width:640px){.ms-u-lg3{width:25%}}@media (min-width:640px){.ms-u-lg2{width:16.666666666666664%}}@media (min-width:640px){.ms-u-lg1{width:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull12{right:100%}}@media (min-width:640px){.ms-u-lgPull11{right:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPull10{right:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPull9{right:75%}}@media (min-width:640px){.ms-u-lgPull8{right:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPull7{right:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPull6{right:50%}}@media (min-width:640px){.ms-u-lgPull5{right:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPull4{right:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPull3{right:25%}}@media (min-width:640px){.ms-u-lgPull2{right:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPull1{right:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull0{right:auto}}@media (min-width:640px){.ms-u-lgPush12{left:100%}}@media (min-width:640px){.ms-u-lgPush11{left:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPush10{left:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPush9{left:75%}}@media (min-width:640px){.ms-u-lgPush8{left:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPush7{left:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPush6{left:50%}}@media (min-width:640px){.ms-u-lgPush5{left:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPush4{left:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPush3{left:25%}}@media (min-width:640px){.ms-u-lgPush2{left:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPush1{left:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPush0{left:auto}}@media (min-width:640px){.ms-u-lgOffset11{margin-left:91.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset10{margin-left:83.33333333333334%}}@media (min-width:640px){.ms-u-lgOffset9{margin-left:75%}}@media (min-width:640px){.ms-u-lgOffset8{margin-left:66.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset7{margin-left:58.333333333333336%}}@media (min-width:640px){.ms-u-lgOffset6{margin-left:50%}}@media (min-width:640px){.ms-u-lgOffset5{margin-left:41.66666666666667%}}@media (min-width:640px){.ms-u-lgOffset4{margin-left:33.33333333333333%}}@media (min-width:640px){.ms-u-lgOffset3{margin-left:25%}}@media (min-width:640px){.ms-u-lgOffset2{margin-left:16.666666666666664%}}@media (min-width:640px){.ms-u-lgOffset1{margin-left:8.333333333333332%}}@media (min-width:640px){.ms-u-lgOffset0{margin-left:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}}@media (min-width:1024px){.ms-u-xl11{width:91.66666666666666%}}@media (min-width:1024px){.ms-u-xl10{width:83.33333333333334%}}@media (min-width:1024px){.ms-u-xl9{width:75%}}@media (min-width:1024px){.ms-u-xl8{width:66.66666666666666%}}@media (min-width:1024px){.ms-u-xl7{width:58.333333333333336%}}@media (min-width:1024px){.ms-u-xl6{width:50%}}@media (min-width:1024px){.ms-u-xl5{width:41.66666666666667%}}@media (min-width:1024px){.ms-u-xl4{width:33.33333333333333%}}@media (min-width:1024px){.ms-u-xl3{width:25%}}@media (min-width:1024px){.ms-u-xl2{width:16.666666666666664%}}@media (min-width:1024px){.ms-u-xl1{width:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull12{right:100%}}@media (min-width:1024px){.ms-u-xlPull11{right:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull10{right:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPull9{right:75%}}@media (min-width:1024px){.ms-u-xlPull8{right:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull7{right:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPull6{right:50%}}@media (min-width:1024px){.ms-u-xlPull5{right:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPull4{right:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPull3{right:25%}}@media (min-width:1024px){.ms-u-xlPull2{right:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPull1{right:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull0{right:auto}}@media (min-width:1024px){.ms-u-xlPush12{left:100%}}@media (min-width:1024px){.ms-u-xlPush11{left:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush10{left:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPush9{left:75%}}@media (min-width:1024px){.ms-u-xlPush8{left:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush7{left:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPush6{left:50%}}@media (min-width:1024px){.ms-u-xlPush5{left:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPush4{left:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPush3{left:25%}}@media (min-width:1024px){.ms-u-xlPush2{left:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPush1{left:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPush0{left:auto}}@media (min-width:1024px){.ms-u-xlOffset11{margin-left:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset10{margin-left:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlOffset9{margin-left:75%}}@media (min-width:1024px){.ms-u-xlOffset8{margin-left:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset7{margin-left:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlOffset6{margin-left:50%}}@media (min-width:1024px){.ms-u-xlOffset5{margin-left:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlOffset4{margin-left:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlOffset3{margin-left:25%}}@media (min-width:1024px){.ms-u-xlOffset2{margin-left:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlOffset1{margin-left:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlOffset0{margin-left:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}}@media (min-width:1366px){.ms-u-xxl11{width:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxl10{width:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxl9{width:75%}}@media (min-width:1366px){.ms-u-xxl8{width:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxl7{width:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxl6{width:50%}}@media (min-width:1366px){.ms-u-xxl5{width:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxl4{width:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxl3{width:25%}}@media (min-width:1366px){.ms-u-xxl2{width:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxl1{width:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull12{right:100%}}@media (min-width:1366px){.ms-u-xxlPull11{right:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull10{right:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPull9{right:75%}}@media (min-width:1366px){.ms-u-xxlPull8{right:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull7{right:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPull6{right:50%}}@media (min-width:1366px){.ms-u-xxlPull5{right:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPull4{right:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPull3{right:25%}}@media (min-width:1366px){.ms-u-xxlPull2{right:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPull1{right:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull0{right:auto}}@media (min-width:1366px){.ms-u-xxlPush12{left:100%}}@media (min-width:1366px){.ms-u-xxlPush11{left:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush10{left:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPush9{left:75%}}@media (min-width:1366px){.ms-u-xxlPush8{left:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush7{left:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPush6{left:50%}}@media (min-width:1366px){.ms-u-xxlPush5{left:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPush4{left:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPush3{left:25%}}@media (min-width:1366px){.ms-u-xxlPush2{left:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPush1{left:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPush0{left:auto}}@media (min-width:1366px){.ms-u-xxlOffset11{margin-left:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset10{margin-left:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlOffset9{margin-left:75%}}@media (min-width:1366px){.ms-u-xxlOffset8{margin-left:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset7{margin-left:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlOffset6{margin-left:50%}}@media (min-width:1366px){.ms-u-xxlOffset5{margin-left:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlOffset4{margin-left:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlOffset3{margin-left:25%}}@media (min-width:1366px){.ms-u-xxlOffset2{margin-left:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlOffset1{margin-left:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlOffset0{margin-left:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}}@media (min-width:1920px){.ms-u-xxxl11{width:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl10{width:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxl9{width:75%}}@media (min-width:1920px){.ms-u-xxxl8{width:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl7{width:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxl6{width:50%}}@media (min-width:1920px){.ms-u-xxxl5{width:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxl4{width:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxl3{width:25%}}@media (min-width:1920px){.ms-u-xxxl2{width:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxl1{width:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull12{right:100%}}@media (min-width:1920px){.ms-u-xxxlPull11{right:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull10{right:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPull9{right:75%}}@media (min-width:1920px){.ms-u-xxxlPull8{right:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull7{right:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPull6{right:50%}}@media (min-width:1920px){.ms-u-xxxlPull5{right:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPull4{right:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPull3{right:25%}}@media (min-width:1920px){.ms-u-xxxlPull2{right:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPull1{right:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull0{right:auto}}@media (min-width:1920px){.ms-u-xxxlPush12{left:100%}}@media (min-width:1920px){.ms-u-xxxlPush11{left:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush10{left:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPush9{left:75%}}@media (min-width:1920px){.ms-u-xxxlPush8{left:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush7{left:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPush6{left:50%}}@media (min-width:1920px){.ms-u-xxxlPush5{left:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPush4{left:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPush3{left:25%}}@media (min-width:1920px){.ms-u-xxxlPush2{left:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPush1{left:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPush0{left:auto}}@media (min-width:1920px){.ms-u-xxxlOffset11{margin-left:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset10{margin-left:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlOffset9{margin-left:75%}}@media (min-width:1920px){.ms-u-xxxlOffset8{margin-left:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset7{margin-left:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlOffset6{margin-left:50%}}@media (min-width:1920px){.ms-u-xxxlOffset5{margin-left:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlOffset4{margin-left:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlOffset3{margin-left:25%}}@media (min-width:1920px){.ms-u-xxxlOffset2{margin-left:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlOffset1{margin-left:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlOffset0{margin-left:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-left:8px;padding-right:8px;box-sizing:border-box;float:left}.ms-Grid-col .ms-Grid{padding:0}.ms-Fabric{color:#333} \ No newline at end of file diff --git a/dist/css/fabric.rtl.min.css b/dist/css/fabric.rtl.min.css new file mode 100644 index 00000000..3e447ba4 --- /dev/null +++ b/dist/css/fabric.rtl.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric Core 5.0.1 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-borderBase{border:1px solid}.ms-u-clearfix{*zoom:1}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-u-clearfix:after{clear:both}.ms-u-normalize{box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-u-textAlignLeft{text-align:right}.ms-u-textAlignCenter{text-align:center}.ms-u-textAlignRight{text-align:left}.ms-u-screenReaderOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-u-textTruncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ms-u-noWrap{white-space:nowrap}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2488d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#69afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#b3d6f2}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-neutralPrimaryAlt,.ms-bgColor-neutralPrimaryAlt--hover:hover{background-color:#3c3c3c}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#666}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#767676}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a6a6a6}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c8c8}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#eaeaea}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f4f4f4}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#f8f8f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-yellow{background-color:#ffb900}.ms-bgColor-yellowLight{background-color:#fff100}.ms-bgColor-orange{background-color:#d83b01}.ms-bgColor-orangeLight{background-color:#ea4300}.ms-bgColor-orangeLighter{background-color:#ff8c00}.ms-bgColor-redDark{background-color:#a80000}.ms-bgColor-red{background-color:#e81123}.ms-bgColor-magentaDark{background-color:#5c005c}.ms-bgColor-magenta{background-color:#b4009e}.ms-bgColor-magentaLight{background-color:#e3008c}.ms-bgColor-purpleDark{background-color:#32145a}.ms-bgColor-purple{background-color:#5c2d91}.ms-bgColor-purpleLight{background-color:#b4a0ff}.ms-bgColor-blueDark{background-color:#002050}.ms-bgColor-blueMid{background-color:#00188f}.ms-bgColor-blue{background-color:#0078d7}.ms-bgColor-blueLight{background-color:#00bcf2}.ms-bgColor-tealDark{background-color:#004b50}.ms-bgColor-teal{background-color:#008272}.ms-bgColor-tealLight{background-color:#00b294}.ms-bgColor-greenDark{background-color:#004b1c}.ms-bgColor-green{background-color:#107c10}.ms-bgColor-greenLight{background-color:#bad80a}.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-severeWarning{background-color:#fed9cc}.ms-bgColor-warning{background-color:#fff4ce}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2488d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#69afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#b3d6f2}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-neutralPrimaryAlt,.ms-borderColor-neutralPrimaryAlt--hover:hover{border-color:#3c3c3c}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#666}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#767676}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a6a6a6}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c8c8}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#eaeaea}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f4f4f4}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#f8f8f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-yellow{border-color:#ffb900}.ms-borderColor-yellowLight{border-color:#fff100}.ms-borderColor-orange{border-color:#d83b01}.ms-borderColor-orangeLight{border-color:#ea4300}.ms-borderColor-orangeLighter{border-color:#ff8c00}.ms-borderColor-redDark{border-color:#a80000}.ms-borderColor-red{border-color:#e81123}.ms-borderColor-magentaDark{border-color:#5c005c}.ms-borderColor-magenta{border-color:#b4009e}.ms-borderColor-magentaLight{border-color:#e3008c}.ms-borderColor-purpleDark{border-color:#32145a}.ms-borderColor-purple{border-color:#5c2d91}.ms-borderColor-purpleLight{border-color:#b4a0ff}.ms-borderColor-blueDark{border-color:#002050}.ms-borderColor-blueMid{border-color:#00188f}.ms-borderColor-blue{border-color:#0078d7}.ms-borderColor-blueLight{border-color:#00bcf2}.ms-borderColor-tealDark{border-color:#004b50}.ms-borderColor-teal{border-color:#008272}.ms-borderColor-tealLight{border-color:#00b294}.ms-borderColor-greenDark{border-color:#004b1c}.ms-borderColor-green{border-color:#107c10}.ms-borderColor-greenLight{border-color:#bad80a}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Light'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2) format('woff2'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.ttf) format('truetype');font-weight:100;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2) format('woff2'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semibold'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2) format('woff2'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.ttf) format('truetype');font-weight:600;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semilight'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2) format('woff2'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.ttf) format('truetype');font-weight:200;font-style:normal}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l,.ms-font-xl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi,.ms-font-xs{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-mi{font-size:10px;font-weight:600}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-weight:100}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-weight:300}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-weight:400}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-weight:600}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2488d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#69afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#b3d6f2}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-neutralPrimaryAlt,.ms-fontColor-neutralPrimaryAlt--hover:hover{color:#3c3c3c}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#666}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#767676}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a6a6a6}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c8c8}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#eaeaea}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f4f4f4}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#f8f8f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d7}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-fontColor-info,.ms-fontColor-info--hover:hover{color:#767676}.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-warning,.ms-fontColor-warning--hover:hover{color:#767676}.ms-fontColor-severeWarning,.ms-fontColor-severeWarning--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}[lang=jpn] .ms-font-l,[lang=jpn] .ms-font-m,[lang=jpn] .ms-font-m-plus,[lang=jpn] .ms-font-mi,[lang=jpn] .ms-font-s,[lang=jpn] .ms-font-s-plus,[lang=jpn] .ms-font-su,[lang=jpn] .ms-font-xl,[lang=jpn] .ms-font-xs,[lang=jpn] .ms-font-xxl,[lang=jpn] .ms-fontWeight-light,[lang=jpn] .ms-fontWeight-light-hover:hover,[lang=jpn] .ms-fontWeight-regular,[lang=jpn] .ms-fontWeight-regular-hover:hover,[lang=jpn] .ms-fontWeight-semibold,[lang=jpn] .ms-fontWeight-semibold-hover:hover,[lang=jpn] .ms-fontWeight-semilight,[lang=jpn] .ms-fontWeight-semilight-hover:hover{font-family:Yu Gothic,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=kor] .ms-font-l,[lang=kor] .ms-font-m,[lang=kor] .ms-font-m-plus,[lang=kor] .ms-font-mi,[lang=kor] .ms-font-s,[lang=kor] .ms-font-s-plus,[lang=kor] .ms-font-su,[lang=kor] .ms-font-xl,[lang=kor] .ms-font-xs,[lang=kor] .ms-font-xxl,[lang=kor] .ms-fontWeight-light,[lang=kor] .ms-fontWeight-light-hover:hover,[lang=kor] .ms-fontWeight-regular,[lang=kor] .ms-fontWeight-regular-hover:hover,[lang=kor] .ms-fontWeight-semibold,[lang=kor] .ms-fontWeight-semibold-hover:hover,[lang=kor] .ms-fontWeight-semilight,[lang=kor] .ms-fontWeight-semilight-hover:hover{font-family:Malgun Gothic,Gulim,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=cmn] .ms-font-l,[lang=cmn] .ms-font-m,[lang=cmn] .ms-font-m-plus,[lang=cmn] .ms-font-mi,[lang=cmn] .ms-font-s,[lang=cmn] .ms-font-s-plus,[lang=cmn] .ms-font-su,[lang=cmn] .ms-font-xl,[lang=cmn] .ms-font-xs,[lang=cmn] .ms-font-xxl,[lang=cmn] .ms-fontWeight-light,[lang=cmn] .ms-fontWeight-light-hover:hover,[lang=cmn] .ms-fontWeight-regular,[lang=cmn] .ms-fontWeight-regular-hover:hover,[lang=cmn] .ms-fontWeight-semibold,[lang=cmn] .ms-fontWeight-semibold-hover:hover,[lang=cmn] .ms-fontWeight-semilight,[lang=cmn] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Yahei,Verdana,Simsun,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=yue] .ms-font-l,[lang=yue] .ms-font-m,[lang=yue] .ms-font-m-plus,[lang=yue] .ms-font-mi,[lang=yue] .ms-font-s,[lang=yue] .ms-font-s-plus,[lang=yue] .ms-font-su,[lang=yue] .ms-font-xl,[lang=yue] .ms-font-xs,[lang=yue] .ms-font-xxl,[lang=yue] .ms-fontWeight-light,[lang=yue] .ms-fontWeight-light-hover:hover,[lang=yue] .ms-fontWeight-regular,[lang=yue] .ms-fontWeight-regular-hover:hover,[lang=yue] .ms-fontWeight-semibold,[lang=yue] .ms-fontWeight-semibold-hover:hover,[lang=yue] .ms-fontWeight-semilight,[lang=yue] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Jhenghei,Pmingliu,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=hin] .ms-font-l,[lang=hin] .ms-font-m,[lang=hin] .ms-font-m-plus,[lang=hin] .ms-font-mi,[lang=hin] .ms-font-s,[lang=hin] .ms-font-s-plus,[lang=hin] .ms-font-su,[lang=hin] .ms-font-xl,[lang=hin] .ms-font-xs,[lang=hin] .ms-font-xxl,[lang=hin] .ms-fontWeight-light,[lang=hin] .ms-fontWeight-light-hover:hover,[lang=hin] .ms-fontWeight-regular,[lang=hin] .ms-fontWeight-regular-hover:hover,[lang=hin] .ms-fontWeight-semibold,[lang=hin] .ms-fontWeight-semibold-hover:hover,[lang=hin] .ms-fontWeight-semilight,[lang=hin] .ms-fontWeight-semilight-hover:hover{font-family:Nirmala UI,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=tha] .ms-font-l,[lang=tha] .ms-font-m,[lang=tha] .ms-font-m-plus,[lang=tha] .ms-font-mi,[lang=tha] .ms-font-s,[lang=tha] .ms-font-s-plus,[lang=tha] .ms-font-su,[lang=tha] .ms-font-xl,[lang=tha] .ms-font-xs,[lang=tha] .ms-font-xxl,[lang=tha] .ms-fontWeight-light,[lang=tha] .ms-fontWeight-light-hover:hover,[lang=tha] .ms-fontWeight-regular,[lang=tha] .ms-fontWeight-regular-hover:hover,[lang=tha] .ms-fontWeight-semibold,[lang=tha] .ms-fontWeight-semibold-hover:hover,[lang=tha] .ms-fontWeight-semilight,[lang=tha] .ms-fontWeight-semilight-hover:hover{font-family:Leelawadee UI,Kmer UI,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=ara] .ms-font-l,[lang=ara] .ms-font-m,[lang=ara] .ms-font-m-plus,[lang=ara] .ms-font-mi,[lang=ara] .ms-font-s,[lang=ara] .ms-font-s-plus,[lang=ara] .ms-font-su,[lang=ara] .ms-font-xl,[lang=ara] .ms-font-xs,[lang=ara] .ms-font-xxl,[lang=ara] .ms-fontWeight-light,[lang=ara] .ms-fontWeight-light-hover:hover,[lang=ara] .ms-fontWeight-regular,[lang=ara] .ms-fontWeight-regular-hover:hover,[lang=ara] .ms-fontWeight-semibold,[lang=ara] .ms-fontWeight-semibold-hover:hover,[lang=ara] .ms-fontWeight-semilight,[lang=ara] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Arabic,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=ces] .ms-font-l,[lang=ces] .ms-font-m,[lang=ces] .ms-font-m-plus,[lang=ces] .ms-font-mi,[lang=ces] .ms-font-s,[lang=ces] .ms-font-s-plus,[lang=ces] .ms-font-su,[lang=ces] .ms-font-xl,[lang=ces] .ms-font-xs,[lang=ces] .ms-font-xxl,[lang=ces] .ms-fontWeight-light,[lang=ces] .ms-fontWeight-light-hover:hover,[lang=ces] .ms-fontWeight-regular,[lang=ces] .ms-fontWeight-regular-hover:hover,[lang=ces] .ms-fontWeight-semibold,[lang=ces] .ms-fontWeight-semibold-hover:hover,[lang=ces] .ms-fontWeight-semilight,[lang=ces] .ms-fontWeight-semilight-hover:hover,[lang=est] .ms-font-l,[lang=est] .ms-font-m,[lang=est] .ms-font-m-plus,[lang=est] .ms-font-mi,[lang=est] .ms-font-s,[lang=est] .ms-font-s-plus,[lang=est] .ms-font-su,[lang=est] .ms-font-xl,[lang=est] .ms-font-xs,[lang=est] .ms-font-xxl,[lang=est] .ms-fontWeight-light,[lang=est] .ms-fontWeight-light-hover:hover,[lang=est] .ms-fontWeight-regular,[lang=est] .ms-fontWeight-regular-hover:hover,[lang=est] .ms-fontWeight-semibold,[lang=est] .ms-fontWeight-semibold-hover:hover,[lang=est] .ms-fontWeight-semilight,[lang=est] .ms-fontWeight-semilight-hover:hover,[lang=hrv] .ms-font-l,[lang=hrv] .ms-font-m,[lang=hrv] .ms-font-m-plus,[lang=hrv] .ms-font-mi,[lang=hrv] .ms-font-s,[lang=hrv] .ms-font-s-plus,[lang=hrv] .ms-font-su,[lang=hrv] .ms-font-xl,[lang=hrv] .ms-font-xs,[lang=hrv] .ms-font-xxl,[lang=hrv] .ms-fontWeight-light,[lang=hrv] .ms-fontWeight-light-hover:hover,[lang=hrv] .ms-fontWeight-regular,[lang=hrv] .ms-fontWeight-regular-hover:hover,[lang=hrv] .ms-fontWeight-semibold,[lang=hrv] .ms-fontWeight-semibold-hover:hover,[lang=hrv] .ms-fontWeight-semilight,[lang=hrv] .ms-fontWeight-semilight-hover:hover,[lang=hun] .ms-font-l,[lang=hun] .ms-font-m,[lang=hun] .ms-font-m-plus,[lang=hun] .ms-font-mi,[lang=hun] .ms-font-s,[lang=hun] .ms-font-s-plus,[lang=hun] .ms-font-su,[lang=hun] .ms-font-xl,[lang=hun] .ms-font-xs,[lang=hun] .ms-font-xxl,[lang=hun] .ms-fontWeight-light,[lang=hun] .ms-fontWeight-light-hover:hover,[lang=hun] .ms-fontWeight-regular,[lang=hun] .ms-fontWeight-regular-hover:hover,[lang=hun] .ms-fontWeight-semibold,[lang=hun] .ms-fontWeight-semibold-hover:hover,[lang=hun] .ms-fontWeight-semilight,[lang=hun] .ms-fontWeight-semilight-hover:hover,[lang=kaz] .ms-font-l,[lang=kaz] .ms-font-m,[lang=kaz] .ms-font-m-plus,[lang=kaz] .ms-font-mi,[lang=kaz] .ms-font-s,[lang=kaz] .ms-font-s-plus,[lang=kaz] .ms-font-su,[lang=kaz] .ms-font-xl,[lang=kaz] .ms-font-xs,[lang=kaz] .ms-font-xxl,[lang=kaz] .ms-fontWeight-light,[lang=kaz] .ms-fontWeight-light-hover:hover,[lang=kaz] .ms-fontWeight-regular,[lang=kaz] .ms-fontWeight-regular-hover:hover,[lang=kaz] .ms-fontWeight-semibold,[lang=kaz] .ms-fontWeight-semibold-hover:hover,[lang=kaz] .ms-fontWeight-semilight,[lang=kaz] .ms-fontWeight-semilight-hover:hover,[lang=lav] .ms-font-l,[lang=lav] .ms-font-m,[lang=lav] .ms-font-m-plus,[lang=lav] .ms-font-mi,[lang=lav] .ms-font-s,[lang=lav] .ms-font-s-plus,[lang=lav] .ms-font-su,[lang=lav] .ms-font-xl,[lang=lav] .ms-font-xs,[lang=lav] .ms-font-xxl,[lang=lav] .ms-fontWeight-light,[lang=lav] .ms-fontWeight-light-hover:hover,[lang=lav] .ms-fontWeight-regular,[lang=lav] .ms-fontWeight-regular-hover:hover,[lang=lav] .ms-fontWeight-semibold,[lang=lav] .ms-fontWeight-semibold-hover:hover,[lang=lav] .ms-fontWeight-semilight,[lang=lav] .ms-fontWeight-semilight-hover:hover,[lang=lit] .ms-font-l,[lang=lit] .ms-font-m,[lang=lit] .ms-font-m-plus,[lang=lit] .ms-font-mi,[lang=lit] .ms-font-s,[lang=lit] .ms-font-s-plus,[lang=lit] .ms-font-su,[lang=lit] .ms-font-xl,[lang=lit] .ms-font-xs,[lang=lit] .ms-font-xxl,[lang=lit] .ms-fontWeight-light,[lang=lit] .ms-fontWeight-light-hover:hover,[lang=lit] .ms-fontWeight-regular,[lang=lit] .ms-fontWeight-regular-hover:hover,[lang=lit] .ms-fontWeight-semibold,[lang=lit] .ms-fontWeight-semibold-hover:hover,[lang=lit] .ms-fontWeight-semilight,[lang=lit] .ms-fontWeight-semilight-hover:hover,[lang=pol] .ms-font-l,[lang=pol] .ms-font-m,[lang=pol] .ms-font-m-plus,[lang=pol] .ms-font-mi,[lang=pol] .ms-font-s,[lang=pol] .ms-font-s-plus,[lang=pol] .ms-font-su,[lang=pol] .ms-font-xl,[lang=pol] .ms-font-xs,[lang=pol] .ms-font-xxl,[lang=pol] .ms-fontWeight-light,[lang=pol] .ms-fontWeight-light-hover:hover,[lang=pol] .ms-fontWeight-regular,[lang=pol] .ms-fontWeight-regular-hover:hover,[lang=pol] .ms-fontWeight-semibold,[lang=pol] .ms-fontWeight-semibold-hover:hover,[lang=pol] .ms-fontWeight-semilight,[lang=pol] .ms-fontWeight-semilight-hover:hover,[lang=slk] .ms-font-l,[lang=slk] .ms-font-m,[lang=slk] .ms-font-m-plus,[lang=slk] .ms-font-mi,[lang=slk] .ms-font-s,[lang=slk] .ms-font-s-plus,[lang=slk] .ms-font-su,[lang=slk] .ms-font-xl,[lang=slk] .ms-font-xs,[lang=slk] .ms-font-xxl,[lang=slk] .ms-fontWeight-light,[lang=slk] .ms-fontWeight-light-hover:hover,[lang=slk] .ms-fontWeight-regular,[lang=slk] .ms-fontWeight-regular-hover:hover,[lang=slk] .ms-fontWeight-semibold,[lang=slk] .ms-fontWeight-semibold-hover:hover,[lang=slk] .ms-fontWeight-semilight,[lang=slk] .ms-fontWeight-semilight-hover:hover,[lang=tur] .ms-font-l,[lang=tur] .ms-font-m,[lang=tur] .ms-font-m-plus,[lang=tur] .ms-font-mi,[lang=tur] .ms-font-s,[lang=tur] .ms-font-s-plus,[lang=tur] .ms-font-su,[lang=tur] .ms-font-xl,[lang=tur] .ms-font-xs,[lang=tur] .ms-font-xxl,[lang=tur] .ms-fontWeight-light,[lang=tur] .ms-fontWeight-light-hover:hover,[lang=tur] .ms-fontWeight-regular,[lang=tur] .ms-fontWeight-regular-hover:hover,[lang=tur] .ms-fontWeight-semibold,[lang=tur] .ms-fontWeight-semibold-hover:hover,[lang=tur] .ms-fontWeight-semilight,[lang=tur] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI EastEuropean,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=rus] .ms-font-l,[lang=rus] .ms-font-m,[lang=rus] .ms-font-m-plus,[lang=rus] .ms-font-mi,[lang=rus] .ms-font-s,[lang=rus] .ms-font-s-plus,[lang=rus] .ms-font-su,[lang=rus] .ms-font-xl,[lang=rus] .ms-font-xs,[lang=rus] .ms-font-xxl,[lang=rus] .ms-fontWeight-light,[lang=rus] .ms-fontWeight-light-hover:hover,[lang=rus] .ms-fontWeight-regular,[lang=rus] .ms-fontWeight-regular-hover:hover,[lang=rus] .ms-fontWeight-semibold,[lang=rus] .ms-fontWeight-semibold-hover:hover,[lang=rus] .ms-fontWeight-semilight,[lang=rus] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Cyrillic,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=ell] .ms-font-l,[lang=ell] .ms-font-m,[lang=ell] .ms-font-m-plus,[lang=ell] .ms-font-mi,[lang=ell] .ms-font-s,[lang=ell] .ms-font-s-plus,[lang=ell] .ms-font-su,[lang=ell] .ms-font-xl,[lang=ell] .ms-font-xs,[lang=ell] .ms-font-xxl,[lang=ell] .ms-fontWeight-light,[lang=ell] .ms-fontWeight-light-hover:hover,[lang=ell] .ms-fontWeight-regular,[lang=ell] .ms-fontWeight-regular-hover:hover,[lang=ell] .ms-fontWeight-semibold,[lang=ell] .ms-fontWeight-semibold-hover:hover,[lang=ell] .ms-fontWeight-semilight,[lang=ell] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Greek,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=heb] .ms-font-l,[lang=heb] .ms-font-m,[lang=heb] .ms-font-m-plus,[lang=heb] .ms-font-mi,[lang=heb] .ms-font-s,[lang=heb] .ms-font-s-plus,[lang=heb] .ms-font-su,[lang=heb] .ms-font-xl,[lang=heb] .ms-font-xs,[lang=heb] .ms-font-xxl,[lang=heb] .ms-fontWeight-light,[lang=heb] .ms-fontWeight-light-hover:hover,[lang=heb] .ms-fontWeight-regular,[lang=heb] .ms-fontWeight-regular-hover:hover,[lang=heb] .ms-fontWeight-semibold,[lang=heb] .ms-fontWeight-semibold-hover:hover,[lang=heb] .ms-fontWeight-semilight,[lang=heb] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Hebrew,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=vie] .ms-font-l,[lang=vie] .ms-font-m,[lang=vie] .ms-font-m-plus,[lang=vie] .ms-font-mi,[lang=vie] .ms-font-s,[lang=vie] .ms-font-s-plus,[lang=vie] .ms-font-su,[lang=vie] .ms-font-xl,[lang=vie] .ms-font-xs,[lang=vie] .ms-font-xxl,[lang=vie] .ms-fontWeight-light,[lang=vie] .ms-fontWeight-light-hover:hover,[lang=vie] .ms-fontWeight-regular,[lang=vie] .ms-fontWeight-regular-hover:hover,[lang=vie] .ms-fontWeight-semibold,[lang=vie] .ms-fontWeight-semibold-hover:hover,[lang=vie] .ms-fontWeight-semilight,[lang=vie] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Vietnamese,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}@font-face{font-family:FabricMDL2Icons;src:url(https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabricmdl2icons.woff) format('woff'),url(https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabricmdl2icons.ttf) format('truetype');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none}.ms-Icon,.ms-Icon--circle{-webkit-font-smoothing:antialiased;display:inline-block}.ms-Icon--circle{position:relative;font-size:1rem;width:1em;height:1em;margin:0 0 0 .5em;padding:0;text-align:right}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;right:0;transform:scale(2);transform-origin:50% 50%;z-index:0}.ms-Icon--xs{font-size:10px}.ms-Icon--s{font-size:12px}.ms-Icon--m{font-size:16px}.ms-Icon--l{font-size:20px}.ms-Icon--DecreaseIndentLegacy:before{content:'\E290'}.ms-Icon--IncreaseIndentLegacy:before{content:'\E291'}.ms-Icon--GlobalNavButton:before{content:'\E700'}.ms-Icon--InternetSharing:before{content:'\E704'}.ms-Icon--Brightness:before{content:'\E706'}.ms-Icon--MapPin:before{content:'\E707'}.ms-Icon--Airplane:before{content:'\E709'}.ms-Icon--Tablet:before{content:'\E70A'}.ms-Icon--QuickNote:before{content:'\E70B'}.ms-Icon--ChevronDown:before{content:'\E70D'}.ms-Icon--ChevronUp:before{content:'\E70E'}.ms-Icon--Edit:before{content:'\E70F'}.ms-Icon--Add:before{content:'\E710'}.ms-Icon--Cancel:before{content:'\E711'}.ms-Icon--More:before{content:'\E712'}.ms-Icon--Settings:before{content:'\E713'}.ms-Icon--Video:before{content:'\E714'}.ms-Icon--Mail:before{content:'\E715'}.ms-Icon--People:before{content:'\E716'}.ms-Icon--Phone:before{content:'\E717'}.ms-Icon--Pin:before{content:'\E718'}.ms-Icon--Shop:before{content:'\E719'}.ms-Icon--Link:before{content:'\E71B'}.ms-Icon--Filter:before{content:'\E71C'}.ms-Icon--Zoom:before{content:'\E71E'}.ms-Icon--ZoomOut:before{content:'\E71F'}.ms-Icon--Microphone:before{content:'\E720'}.ms-Icon--Search:before{content:'\E721'}.ms-Icon--Camera:before{content:'\E722'}.ms-Icon--Attach:before{content:'\E723'}.ms-Icon--Send:before{content:'\E724'}.ms-Icon--FavoriteList:before{content:'\E728'}.ms-Icon--PageSolid:before{content:'\E729'}.ms-Icon--Forward:before{content:'\E72A'}.ms-Icon--Back:before{content:'\E72B'}.ms-Icon--Refresh:before{content:'\E72C'}.ms-Icon--Share:before{content:'\E72D'}.ms-Icon--Lock:before{content:'\E72E'}.ms-Icon--EMI:before{content:'\E731'}.ms-Icon--MiniLink:before{content:'\E732'}.ms-Icon--Blocked:before{content:'\E733'}.ms-Icon--FavoriteStar:before{content:'\E734'}.ms-Icon--FavoriteStarFill:before{content:'\E735'}.ms-Icon--ReadingMode:before{content:'\E736'}.ms-Icon--Remove:before{content:'\E738'}.ms-Icon--Checkbox:before{content:'\E739'}.ms-Icon--CheckboxComposite:before{content:'\E73A'}.ms-Icon--CheckboxIndeterminate:before{content:'\E73C'}.ms-Icon--CheckMark:before{content:'\E73E'}.ms-Icon--BackToWindow:before{content:'\E73F'}.ms-Icon--FullScreen:before{content:'\E740'}.ms-Icon--Print:before{content:'\E749'}.ms-Icon--Up:before{content:'\E74A'}.ms-Icon--Down:before{content:'\E74B'}.ms-Icon--Delete:before{content:'\E74D'}.ms-Icon--Save:before{content:'\E74E'}.ms-Icon--Sad:before{content:'\E757'}.ms-Icon--SIPMove:before{content:'\E759'}.ms-Icon--EraseTool:before{content:'\E75C'}.ms-Icon--GripperTool:before{content:'\E75E'}.ms-Icon--Dialpad:before{content:'\E75F'}.ms-Icon--PageLeft:before{content:'\E760'}.ms-Icon--PageRight:before{content:'\E761'}.ms-Icon--MultiSelect:before{content:'\E762'}.ms-Icon--Play:before{content:'\E768'}.ms-Icon--Pause:before{content:'\E769'}.ms-Icon--ChevronLeft:before{content:'\E76B'}.ms-Icon--ChevronRight:before{content:'\E76C'}.ms-Icon--Emoji2:before{content:'\E76E'}.ms-Icon--System:before{content:'\E770'}.ms-Icon--Globe:before{content:'\E774'}.ms-Icon--ContactInfo:before{content:'\E779'}.ms-Icon--Unpin:before{content:'\E77A'}.ms-Icon--Contact:before{content:'\E77B'}.ms-Icon--Memo:before{content:'\E77C'}.ms-Icon--WindowsLogo:before{content:'\E782'}.ms-Icon--Error:before{content:'\E783'}.ms-Icon--Unlock:before{content:'\E785'}.ms-Icon--Calendar:before{content:'\E787'}.ms-Icon--Megaphone:before{content:'\E789'}.ms-Icon--AutoEnhanceOn:before{content:'\E78D'}.ms-Icon--AutoEnhanceOff:before{content:'\E78E'}.ms-Icon--Color:before{content:'\E790'}.ms-Icon--SaveAs:before{content:'\E792'}.ms-Icon--Light:before{content:'\E793'}.ms-Icon--Filters:before{content:'\E795'}.ms-Icon--Contrast:before{content:'\E7A1'}.ms-Icon--Redo:before{content:'\E7A6'}.ms-Icon--Undo:before{content:'\E7A7'}.ms-Icon--PhotoCollection:before{content:'\E7AA'}.ms-Icon--Album:before{content:'\E7AB'}.ms-Icon--Rotate:before{content:'\E7AD'}.ms-Icon--PanoIndicator:before{content:'\E7B0'}.ms-Icon--ThumbnailView:before{content:'\E7B6'}.ms-Icon--Package:before{content:'\E7B8'}.ms-Icon--Warning:before{content:'\E7BA'}.ms-Icon--Financial:before{content:'\E7BB'}.ms-Icon--ShoppingCart:before{content:'\E7BF'}.ms-Icon--Train:before{content:'\E7C0'}.ms-Icon--Flag:before{content:'\E7C1'}.ms-Icon--Move:before{content:'\E7C2'}.ms-Icon--Page:before{content:'\E7C3'}.ms-Icon--TouchPointer:before{content:'\E7C9'}.ms-Icon--Merge:before{content:'\E7D5'}.ms-Icon--TurnRight:before{content:'\E7DB'}.ms-Icon--Ferry:before{content:'\E7E3'}.ms-Icon--Tab:before{content:'\E7E9'}.ms-Icon--Admin:before{content:'\E7EF'}.ms-Icon--TVMonitor:before{content:'\E7F4'}.ms-Icon--Speakers:before{content:'\E7F5'}.ms-Icon--Nav2DMapView:before{content:'\E800'}.ms-Icon--Car:before{content:'\E804'}.ms-Icon--EatDrink:before{content:'\E807'}.ms-Icon--LocationCircle:before{content:'\E80E'}.ms-Icon--Home:before{content:'\E80F'}.ms-Icon--SwitcherStartEnd:before{content:'\E810'}.ms-Icon--IncidentTriangle:before{content:'\E814'}.ms-Icon--Touch:before{content:'\E815'}.ms-Icon--MapDirections:before{content:'\E816'}.ms-Icon--History:before{content:'\E81C'}.ms-Icon--Location:before{content:'\E81D'}.ms-Icon--Work:before{content:'\E821'}.ms-Icon--Recent:before{content:'\E823'}.ms-Icon--Hotel:before{content:'\E824'}.ms-Icon--LocationDot:before{content:'\E827'}.ms-Icon--News:before{content:'\E900'}.ms-Icon--Chat:before{content:'\E901'}.ms-Icon--Group:before{content:'\E902'}.ms-Icon--View:before{content:'\E890'}.ms-Icon--Clear:before{content:'\E894'}.ms-Icon--Sync:before{content:'\E895'}.ms-Icon--Download:before{content:'\E896'}.ms-Icon--Help:before{content:'\E897'}.ms-Icon--Upload:before{content:'\E898'}.ms-Icon--Emoji:before{content:'\E899'}.ms-Icon--MailForward:before{content:'\E89C'}.ms-Icon--ClosePane:before{content:'\E89F'}.ms-Icon--OpenPane:before{content:'\E8A0'}.ms-Icon--PreviewLink:before{content:'\E8A1'}.ms-Icon--ZoomIn:before{content:'\E8A3'}.ms-Icon--Bookmarks:before{content:'\E8A4'}.ms-Icon--Document:before{content:'\E8A5'}.ms-Icon--ProtectedDocument:before{content:'\E8A6'}.ms-Icon--OpenInNewWindow:before{content:'\E8A7'}.ms-Icon--MailFill:before{content:'\E8A8'}.ms-Icon--ViewAll:before{content:'\E8A9'}.ms-Icon--Switch:before{content:'\E8AB'}.ms-Icon--Rename:before{content:'\E8AC'}.ms-Icon--Folder:before{content:'\E8B7'}.ms-Icon--Picture:before{content:'\E8B9'}.ms-Icon--ShowResults:before{content:'\E8BC'}.ms-Icon--Message:before{content:'\E8BD'}.ms-Icon--CalendarDay:before{content:'\E8BF'}.ms-Icon--CalendarWeek:before{content:'\E8C0'}.ms-Icon--MailReplyAll:before{content:'\E8C2'}.ms-Icon--Read:before{content:'\E8C3'}.ms-Icon--PaymentCard:before{content:'\E8C7'}.ms-Icon--Copy:before{content:'\E8C8'}.ms-Icon--Important:before{content:'\E8C9'}.ms-Icon--MailReply:before{content:'\E8CA'}.ms-Icon--Sort:before{content:'\E8CB'}.ms-Icon--GotoToday:before{content:'\E8D1'}.ms-Icon--Font:before{content:'\E8D2'}.ms-Icon--FontColor:before{content:'\E8D3'}.ms-Icon--FolderFill:before{content:'\E8D5'}.ms-Icon--Permissions:before{content:'\E8D7'}.ms-Icon--DisableUpdates:before{content:'\E8D8'}.ms-Icon--Unfavorite:before{content:'\E8D9'}.ms-Icon--Italic:before{content:'\E8DB'}.ms-Icon--Underline:before{content:'\E8DC'}.ms-Icon--Bold:before{content:'\E8DD'}.ms-Icon--MoveToFolder:before{content:'\E8DE'}.ms-Icon--Dislike:before{content:'\E8E0'}.ms-Icon--Like:before{content:'\E8E1'}.ms-Icon--AlignRight:before{content:'\E8E2'}.ms-Icon--AlignCenter:before{content:'\E8E3'}.ms-Icon--AlignLeft:before{content:'\E8E4'}.ms-Icon--OpenFile:before{content:'\E8E5'}.ms-Icon--FontDecrease:before{content:'\E8E7'}.ms-Icon--FontIncrease:before{content:'\E8E8'}.ms-Icon--FontSize:before{content:'\E8E9'}.ms-Icon--CellPhone:before{content:'\E8EA'}.ms-Icon--Tag:before{content:'\E8EC'}.ms-Icon--Library:before{content:'\E8F1'}.ms-Icon--PostUpdate:before{content:'\E8F3'}.ms-Icon--NewFolder:before{content:'\E8F4'}.ms-Icon--CalendarReply:before{content:'\E8F5'}.ms-Icon--UnsyncFolder:before{content:'\E8F6'}.ms-Icon--SyncFolder:before{content:'\E8F7'}.ms-Icon--BlockContact:before{content:'\E8F8'}.ms-Icon--AddFriend:before{content:'\E8FA'}.ms-Icon--BulletedList:before{content:'\E8FD'}.ms-Icon--Preview:before{content:'\E8FF'}.ms-Icon--DockLeft:before{content:'\E90C'}.ms-Icon--DockRight:before{content:'\E90D'}.ms-Icon--Repair:before{content:'\E90F'}.ms-Icon--Accounts:before{content:'\E910'}.ms-Icon--RadioBullet:before{content:'\E915'}.ms-Icon--Stopwatch:before{content:'\E916'}.ms-Icon--Clock:before{content:'\E917'}.ms-Icon--WorldClock:before{content:'\E918'}.ms-Icon--AlarmClock:before{content:'\E919'}.ms-Icon--Hospital:before{content:'\E91D'}.ms-Icon--Timer:before{content:'\E91E'}.ms-Icon--FullCircleMask:before{content:'\E91F'}.ms-Icon--LocationFill:before{content:'\E920'}.ms-Icon--ChromeMinimize:before{content:'\E921'}.ms-Icon--Annotation:before{content:'\E924'}.ms-Icon--ChromeClose:before{content:'\E8BB'}.ms-Icon--Accept:before{content:'\E8FB'}.ms-Icon--Fingerprint:before{content:'\E928'}.ms-Icon--Handwriting:before{content:'\E929'}.ms-Icon--StackIndicator:before{content:'\E7FF'}.ms-Icon--Completed:before{content:'\E930'}.ms-Icon--Label:before{content:'\E932'}.ms-Icon--FlickDown:before{content:'\E935'}.ms-Icon--FlickUp:before{content:'\E936'}.ms-Icon--FlickLeft:before{content:'\E937'}.ms-Icon--FlickRight:before{content:'\E938'}.ms-Icon--MusicInCollection:before{content:'\E940'}.ms-Icon--OneDrive:before{content:'\E941'}.ms-Icon--CompassNW:before{content:'\E942'}.ms-Icon--Code:before{content:'\E943'}.ms-Icon--LightningBolt:before{content:'\E945'}.ms-Icon--Info:before{content:'\E946'}.ms-Icon--CalculatorAddition:before{content:'\E948'}.ms-Icon--CalculatorSubtract:before{content:'\E949'}.ms-Icon--PrintfaxPrinterFile:before{content:'\E956'}.ms-Icon--Health:before{content:'\E95E'}.ms-Icon--ChevronUpSmall:before{content:'\E96D'}.ms-Icon--ChevronDownSmall:before{content:'\E96E'}.ms-Icon--ChevronLeftSmall:before{content:'\E96F'}.ms-Icon--ChevronRightSmall:before{content:'\E970'}.ms-Icon--ChevronUpMed:before{content:'\E971'}.ms-Icon--ChevronDownMed:before{content:'\E972'}.ms-Icon--ChevronLeftMed:before{content:'\E973'}.ms-Icon--ChevronRightMed:before{content:'\E974'}.ms-Icon--Dictionary:before{content:'\E82D'}.ms-Icon--ChromeBack:before{content:'\E830'}.ms-Icon--PC1:before{content:'\E977'}.ms-Icon--PresenceChickletVideo:before{content:'\E979'}.ms-Icon--Reply:before{content:'\E97A'}.ms-Icon--DoubleChevronLeftMed:before{content:'\E991'}.ms-Icon--Volume0:before{content:'\E992'}.ms-Icon--Volume1:before{content:'\E993'}.ms-Icon--Volume2:before{content:'\E994'}.ms-Icon--Volume3:before{content:'\E995'}.ms-Icon--CaretHollow:before{content:'\E817'}.ms-Icon--CaretSolid:before{content:'\E818'}.ms-Icon--FolderOpen:before{content:'\E838'}.ms-Icon--Pinned:before{content:'\E840'}.ms-Icon--PinnedFill:before{content:'\E842'}.ms-Icon--Chart:before{content:'\E999'}.ms-Icon--BidiLtr:before{content:'\E9AA'}.ms-Icon--BidiRtl:before{content:'\E9AB'}.ms-Icon--RevToggleKey:before{content:'\E845'}.ms-Icon--RightDoubleQuote:before{content:'\E9B1'}.ms-Icon--Sunny:before{content:'\E9BD'}.ms-Icon--CloudWeather:before{content:'\E9BE'}.ms-Icon--Cloudy:before{content:'\E9BF'}.ms-Icon--PartlyCloudyDay:before{content:'\E9C0'}.ms-Icon--PartlyCloudyNight:before{content:'\E9C1'}.ms-Icon--ClearNight:before{content:'\E9C2'}.ms-Icon--RainShowersDay:before{content:'\E9C3'}.ms-Icon--Rain:before{content:'\E9C4'}.ms-Icon--Thunderstorms:before{content:'\E9C6'}.ms-Icon--RainSnow:before{content:'\E9C7'}.ms-Icon--BlowingSnow:before{content:'\E9C9'}.ms-Icon--Frigid:before{content:'\E9CA'}.ms-Icon--Fog:before{content:'\E9CB'}.ms-Icon--Squalls:before{content:'\E9CC'}.ms-Icon--Duststorm:before{content:'\E9CD'}.ms-Icon--Precipitation:before{content:'\E9CF'}.ms-Icon--Ringer:before{content:'\EA8F'}.ms-Icon--PDF:before{content:'\EA90'}.ms-Icon--SortLines:before{content:'\E9D0'}.ms-Icon--Ribbon:before{content:'\E9D1'}.ms-Icon--CheckList:before{content:'\E9D5'}.ms-Icon--Generate:before{content:'\E9DA'}.ms-Icon--Equalizer:before{content:'\E9E9'}.ms-Icon--BarChartHorizontal:before{content:'\E9EB'}.ms-Icon--Freezing:before{content:'\E9EF'}.ms-Icon--SnowShowerDay:before{content:'\E9FD'}.ms-Icon--HailDay:before{content:'\EA00'}.ms-Icon--WorkFlow:before{content:'\EA01'}.ms-Icon--StoreLogoMed:before{content:'\EA04'}.ms-Icon--RainShowersNight:before{content:'\EA0F'}.ms-Icon--SnowShowerNight:before{content:'\EA11'}.ms-Icon--HailNight:before{content:'\EA13'}.ms-Icon--Info2:before{content:'\EA1F'}.ms-Icon--StoreLogo:before{content:'\EA96'}.ms-Icon--MultiSelectMirrored:before{content:'\EA98'}.ms-Icon--Broom:before{content:'\EA99'}.ms-Icon--MusicInCollectionFill:before{content:'\EA36'}.ms-Icon--List:before{content:'\EA37'}.ms-Icon--Asterisk:before{content:'\EA38'}.ms-Icon--ErrorBadge:before{content:'\EA39'}.ms-Icon--CircleRing:before{content:'\EA3A'}.ms-Icon--CircleFill:before{content:'\EA3B'}.ms-Icon--BookmarksMirrored:before{content:'\EA41'}.ms-Icon--BulletedListMirrored:before{content:'\EA42'}.ms-Icon--CaretHollowMirrored:before{content:'\EA45'}.ms-Icon--CaretSolidMirrored:before{content:'\EA46'}.ms-Icon--ChromeBackMirrored:before{content:'\EA47'}.ms-Icon--ClosePaneMirrored:before{content:'\EA49'}.ms-Icon--DockLeftMirrored:before{content:'\EA4C'}.ms-Icon--DoubleChevronLeftMedMirrored:before{content:'\EA4D'}.ms-Icon--HelpMirrored:before{content:'\EA51'}.ms-Icon--ListMirrored:before{content:'\EA55'}.ms-Icon--MailForwardMirrored:before{content:'\EA56'}.ms-Icon--MailReplyMirrored:before{content:'\EA57'}.ms-Icon--MailReplyAllMirrored:before{content:'\EA58'}.ms-Icon--OpenPaneMirrored:before{content:'\EA5B'}.ms-Icon--SendMirrored:before{content:'\EA63'}.ms-Icon--ShowResultsMirrored:before{content:'\EA65'}.ms-Icon--ThumbnailViewMirrored:before{content:'\EA67'}.ms-Icon--Lightbulb:before{content:'\EA80'}.ms-Icon--StatusTriangle:before{content:'\EA82'}.ms-Icon--VolumeDisabled:before{content:'\EA85'}.ms-Icon--Puzzle:before{content:'\EA86'}.ms-Icon--EmojiNeutral:before{content:'\EA87'}.ms-Icon--EmojiDisappointed:before{content:'\EA88'}.ms-Icon--HomeSolid:before{content:'\EA8A'}.ms-Icon--Cocktails:before{content:'\EA9D'}.ms-Icon--Articles:before{content:'\EAC1'}.ms-Icon--Cycling:before{content:'\EAC7'}.ms-Icon--DietPlanNotebook:before{content:'\EAC8'}.ms-Icon--Pill:before{content:'\EACB'}.ms-Icon--Running:before{content:'\EADA'}.ms-Icon--Weights:before{content:'\EADB'}.ms-Icon--BarChart4:before{content:'\EAE7'}.ms-Icon--CirclePlus:before{content:'\EAEE'}.ms-Icon--Coffee:before{content:'\EAEF'}.ms-Icon--Cotton:before{content:'\EAF3'}.ms-Icon--Market:before{content:'\EAFC'}.ms-Icon--Money:before{content:'\EAFD'}.ms-Icon--PieDouble:before{content:'\EB04'}.ms-Icon--RemoveFilter:before{content:'\EB08'}.ms-Icon--StockDown:before{content:'\EB0F'}.ms-Icon--StockUp:before{content:'\EB11'}.ms-Icon--Cricket:before{content:'\EB1E'}.ms-Icon--Golf:before{content:'\EB1F'}.ms-Icon--Baseball:before{content:'\EB20'}.ms-Icon--Soccer:before{content:'\EB21'}.ms-Icon--MoreSports:before{content:'\EB22'}.ms-Icon--AutoRacing:before{content:'\EB24'}.ms-Icon--CollegeHoops:before{content:'\EB25'}.ms-Icon--CollegeFootball:before{content:'\EB26'}.ms-Icon--ProFootball:before{content:'\EB27'}.ms-Icon--ProHockey:before{content:'\EB28'}.ms-Icon--Rugby:before{content:'\EB2D'}.ms-Icon--Tennis:before{content:'\EB33'}.ms-Icon--Arrivals:before{content:'\EB34'}.ms-Icon--Design:before{content:'\EB3C'}.ms-Icon--Website:before{content:'\EB41'}.ms-Icon--Drop:before{content:'\EB42'}.ms-Icon--Snow:before{content:'\EB46'}.ms-Icon--BusSolid:before{content:'\EB47'}.ms-Icon--FerrySolid:before{content:'\EB48'}.ms-Icon--TrainSolid:before{content:'\EB4D'}.ms-Icon--Heart:before{content:'\EB51'}.ms-Icon--HeartFill:before{content:'\EB52'}.ms-Icon--Ticket:before{content:'\EB54'}.ms-Icon--AzureLogo:before{content:'\EB6A'}.ms-Icon--BingLogo:before{content:'\EB6B'}.ms-Icon--MSNLogo:before{content:'\EB6C'}.ms-Icon--OutlookLogo:before{content:'\EB6D'}.ms-Icon--OfficeLogo:before{content:'\EB6E'}.ms-Icon--SkypeLogo:before{content:'\EB6F'}.ms-Icon--Door:before{content:'\EB75'}.ms-Icon--EditMirrored:before{content:'\EB7E'}.ms-Icon--GiftCard:before{content:'\EB8E'}.ms-Icon--DoubleBookmark:before{content:'\EB8F'}.ms-Icon--StatusErrorFull:before{content:'\EB90'}.ms-Icon--Certificate:before{content:'\EB95'}.ms-Icon--Photo2:before{content:'\EB9F'}.ms-Icon--CloudDownload:before{content:'\EBD3'}.ms-Icon--WindDirection:before{content:'\EBE6'}.ms-Icon--Family:before{content:'\EBDA'}.ms-Icon--CSS:before{content:'\EBEF'}.ms-Icon--JS:before{content:'\EBF0'}.ms-Icon--ReminderGroup:before{content:'\EBF8'}.ms-Icon--Section:before{content:'\EC0C'}.ms-Icon--OneNoteLogo:before{content:'\EC0D'}.ms-Icon--ToggleFilled:before{content:'\EC11'}.ms-Icon--ToggleBorder:before{content:'\EC12'}.ms-Icon--SliderThumb:before{content:'\EC13'}.ms-Icon--ToggleThumb:before{content:'\EC14'}.ms-Icon--Documentation:before{content:'\EC17'}.ms-Icon--Badge:before{content:'\EC1B'}.ms-Icon--Giftbox:before{content:'\EC1F'}.ms-Icon--ExcelLogo:before{content:'\EC28'}.ms-Icon--WordLogo:before{content:'\EC29'}.ms-Icon--PowerPointLogo:before{content:'\EC2A'}.ms-Icon--Cafe:before{content:'\EC32'}.ms-Icon--SpeedHigh:before{content:'\EC4A'}.ms-Icon--MusicNote:before{content:'\EC4F'}.ms-Icon--EdgeLogo:before{content:'\EC60'}.ms-Icon--CompletedSolid:before{content:'\EC61'}.ms-Icon--AlbumRemove:before{content:'\EC62'}.ms-Icon--MessageFill:before{content:'\EC70'}.ms-Icon--TabletSelected:before{content:'\EC74'}.ms-Icon--MobileSelected:before{content:'\EC75'}.ms-Icon--LaptopSelected:before{content:'\EC76'}.ms-Icon--TVMonitorSelected:before{content:'\EC77'}.ms-Icon--DeveloperTools:before{content:'\EC7A'}.ms-Icon--InsertTextBox:before{content:'\EC7D'}.ms-Icon--LowerBrightness:before{content:'\EC8A'}.ms-Icon--CloudUpload:before{content:'\EC8E'}.ms-Icon--DateTime:before{content:'\EC92'}.ms-Icon--Event:before{content:'\ECA3'}.ms-Icon--Cake:before{content:'\ECA4'}.ms-Icon--Tiles:before{content:'\ECA5'}.ms-Icon--Org:before{content:'\ECA6'}.ms-Icon--PartyLeader:before{content:'\ECA7'}.ms-Icon--DRM:before{content:'\ECA8'}.ms-Icon--CloudAdd:before{content:'\ECA9'}.ms-Icon--AppIconDefault:before{content:'\ECAA'}.ms-Icon--Photo2Add:before{content:'\ECAB'}.ms-Icon--Photo2Remove:before{content:'\ECAC'}.ms-Icon--POI:before{content:'\ECAF'}.ms-Icon--FacebookLogo:before{content:'\ECB3'}.ms-Icon--AddTo:before{content:'\ECC8'}.ms-Icon--RadioBtnOn:before{content:'\ECCB'}.ms-Icon--Embed:before{content:'\ECCE'}.ms-Icon--VideoSolid:before{content:'\EA0C'}.ms-Icon--Teamwork:before{content:'\EA12'}.ms-Icon--PeopleAdd:before{content:'\EA15'}.ms-Icon--Glasses:before{content:'\EA16'}.ms-Icon--DateTime2:before{content:'\EA17'}.ms-Icon--Shield:before{content:'\EA18'}.ms-Icon--Header1:before{content:'\EA19'}.ms-Icon--PageAdd:before{content:'\EA1A'}.ms-Icon--NumberedList:before{content:'\EA1C'}.ms-Icon--PowerBILogo:before{content:'\EA1E'}.ms-Icon--Product:before{content:'\ECDC'}.ms-Icon--Blocked2:before{content:'\ECE4'}.ms-Icon--FangBody:before{content:'\ECEB'}.ms-Icon--Glimmer:before{content:'\ECF4'}.ms-Icon--ChatInviteFriend:before{content:'\ECFE'}.ms-Icon--SharepointLogo:before{content:'\ED18'}.ms-Icon--YammerLogo:before{content:'\ED19'}.ms-Icon--ReturnToSession:before{content:'\ED24'}.ms-Icon--OpenFolderHorizontal:before{content:'\ED25'}.ms-Icon--CalendarMirrored:before{content:'\ED28'}.ms-Icon--SwayLogo:before{content:'\ED29'}.ms-Icon--OutOfOffice:before{content:'\ED34'}.ms-Icon--Trophy:before{content:'\ED3F'}.ms-Icon--ReopenPages:before{content:'\ED50'}.ms-Icon--AADLogo:before{content:'\ED68'}.ms-Icon--AccessLogo:before{content:'\ED69'}.ms-Icon--AdminALogo:before{content:'\ED6A'}.ms-Icon--AdminCLogo:before{content:'\ED6B'}.ms-Icon--AdminDLogo:before{content:'\ED6C'}.ms-Icon--AdminELogo:before{content:'\ED6D'}.ms-Icon--AdminLLogo:before{content:'\ED6E'}.ms-Icon--AdminMLogo:before{content:'\ED6F'}.ms-Icon--AdminOLogo:before{content:'\ED70'}.ms-Icon--AdminPLogo:before{content:'\ED71'}.ms-Icon--AdminSLogo:before{content:'\ED72'}.ms-Icon--AdminYLogo:before{content:'\ED73'}.ms-Icon--AlchemyLogo:before{content:'\ED74'}.ms-Icon--BoxLogo:before{content:'\ED75'}.ms-Icon--DelveLogo:before{content:'\ED76'}.ms-Icon--DropboxLogo:before{content:'\ED77'}.ms-Icon--ExchangeLogo:before{content:'\ED78'}.ms-Icon--LyncLogo:before{content:'\ED79'}.ms-Icon--OfficeVideoLogo:before{content:'\ED7A'}.ms-Icon--ParatureLogo:before{content:'\ED7B'}.ms-Icon--SocialListeningLogo:before{content:'\ED7C'}.ms-Icon--VisioLogo:before{content:'\ED7D'}.ms-Icon--Balloons:before{content:'\ED7E'}.ms-Icon--Cat:before{content:'\ED7F'}.ms-Icon--MailAlert:before{content:'\ED80'}.ms-Icon--MailCheck:before{content:'\ED81'}.ms-Icon--MailLowImportance:before{content:'\ED82'}.ms-Icon--MailPause:before{content:'\ED83'}.ms-Icon--MailRepeat:before{content:'\ED84'}.ms-Icon--SecurityGroup:before{content:'\ED85'}.ms-Icon--Table:before{content:'\ED86'}.ms-Icon--VoicemailForward:before{content:'\ED87'}.ms-Icon--VoicemailReply:before{content:'\ED88'}.ms-Icon--Waffle:before{content:'\ED89'}.ms-Icon--RemoveEvent:before{content:'\ED8A'}.ms-Icon--EventInfo:before{content:'\ED8B'}.ms-Icon--ForwardEvent:before{content:'\ED8C'}.ms-Icon--WipePhone:before{content:'\ED8D'}.ms-Icon--AddOnlineMeeting:before{content:'\ED8E'}.ms-Icon--JoinOnlineMeeting:before{content:'\ED8F'}.ms-Icon--RemoveLink:before{content:'\ED90'}.ms-Icon--PeopleBlock:before{content:'\ED91'}.ms-Icon--PeopleRepeat:before{content:'\ED92'}.ms-Icon--PeopleAlert:before{content:'\ED93'}.ms-Icon--PeoplePause:before{content:'\ED94'}.ms-Icon--TransferCall:before{content:'\ED95'}.ms-Icon--AddPhone:before{content:'\ED96'}.ms-Icon--UnknownCall:before{content:'\ED97'}.ms-Icon--NoteReply:before{content:'\ED98'}.ms-Icon--NoteForward:before{content:'\ED99'}.ms-Icon--NotePinned:before{content:'\ED9A'}.ms-Icon--RemoveOccurrence:before{content:'\ED9B'}.ms-Icon--Timeline:before{content:'\ED9C'}.ms-Icon--EditNote:before{content:'\ED9D'}.ms-Icon--CircleHalfFull:before{content:'\ED9E'}.ms-Icon--Room:before{content:'\ED9F'}.ms-Icon--Unsubscribe:before{content:'\EDA0'}.ms-Icon--Subscribe:before{content:'\EDA1'}.ms-Icon--RecurringTask:before{content:'\EDB2'}.ms-Icon--TaskManager:before{content:'\EDB7'}.ms-Icon--TaskManagerMirrored:before{content:'\EDB8'}.ms-Icon--Combine:before{content:'\EDBB'}.ms-Icon--Split:before{content:'\EDBC'}.ms-Icon--DoubleChevronUp:before{content:'\EDBD'}.ms-Icon--DoubleChevronLeft:before{content:'\EDBE'}.ms-Icon--DoubleChevronRight:before{content:'\EDBF'}.ms-Icon--Ascending:before{content:'\EDC0'}.ms-Icon--Descending:before{content:'\EDC1'}.ms-Icon--TextBox:before{content:'\EDC2'}.ms-Icon--TextField:before{content:'\EDC3'}.ms-Icon--NumberField:before{content:'\EDC4'}.ms-Icon--Dropdown:before{content:'\EDC5'}.ms-Icon--BookingsLogo:before{content:'\EDC7'}.ms-Icon--ClassNotebookLogo:before{content:'\EDC8'}.ms-Icon--CollabsDBLogo:before{content:'\EDC9'}.ms-Icon--DelveAnalyticsLogo:before{content:'\EDCA'}.ms-Icon--DocsLogo:before{content:'\EDCB'}.ms-Icon--Dynamics365Logo:before,.ms-Icon--DynamicsCRMLogo:before{content:'\EDCC'}.ms-Icon--DynamicSMBLogo:before{content:'\EDCD'}.ms-Icon--OfficeAssistantLogo:before{content:'\EDCE'}.ms-Icon--OfficeStoreLogo:before{content:'\EDCF'}.ms-Icon--OneNoteEduLogo:before{content:'\EDD0'}.ms-Icon--Planner:before{content:'\EDD1'}.ms-Icon--PowerApps:before{content:'\EDD2'}.ms-Icon--Suitcase:before{content:'\EDD3'}.ms-Icon--ProjectLogo:before{content:'\EDD4'}.ms-Icon--CaretLeft8:before{content:'\EDD5'}.ms-Icon--CaretRight8:before{content:'\EDD6'}.ms-Icon--CaretUp8:before{content:'\EDD7'}.ms-Icon--CaretDown8:before{content:'\EDD8'}.ms-Icon--CaretLeftSolid8:before{content:'\EDD9'}.ms-Icon--CaretRightSolid8:before,.ms-Icon--CarotRightSolid8:before{content:'\EDDA'}.ms-Icon--CaretUpSolid8:before{content:'\EDDB'}.ms-Icon--CaretDownSolid8:before{content:'\EDDC'}.ms-Icon--ClearFormatting:before{content:'\EDDD'}.ms-Icon--Superscript:before{content:'\EDDE'}.ms-Icon--Subscript:before{content:'\EDDF'}.ms-Icon--Strikethrough:before{content:'\EDE0'}.ms-Icon--SingleBookmark:before{content:'\EDFF'}.ms-Icon--DoubleChevronDown:before{content:'\EE04'}.ms-Icon--ReplyAll:before{content:'\EE0A'}.ms-Icon--GoogleDriveLogo:before{content:'\EE0B'}.ms-Icon--Questionnaire:before{content:'\EE19'}.ms-Icon--ReplyMirrored:before{content:'\EE35'}.ms-Icon--ReplyAllMirrored:before{content:'\EE36'}.ms-Icon--AddGroup:before{content:'\EE3D'}.ms-Icon--QuestionnaireMirrored:before{content:'\EE4B'}.ms-Icon--TemporaryUser:before{content:'\EE58'}.ms-Icon--GroupedDescending:before{content:'\EE66'}.ms-Icon--GroupedAscending:before{content:'\EE67'}.ms-Icon--SortUp:before{content:'\EE68'}.ms-Icon--SortDown:before{content:'\EE69'}.ms-Icon--AwayStatus:before{content:'\EE6A'}.ms-Icon--SyncToPC:before{content:'\EE6E'}.ms-Icon--AustralianRules:before{content:'\EE70'}.ms-Icon--DateTimeMirrored:before{content:'\EE93'}.ms-Icon--DoubleChevronUp12:before{content:'\EE96'}.ms-Icon--DoubleChevronDown12:before{content:'\EE97'}.ms-Icon--DoubleChevronLeft12:before{content:'\EE98'}.ms-Icon--DoubleChevronRight12:before{content:'\EE99'}.ms-Icon--CalendarAgenda:before{content:'\EE9A'}.ms-Icon--AddEvent:before{content:'\EEB5'}.ms-Icon--AssetLibrary:before{content:'\EEB6'}.ms-Icon--DataConnectionLibrary:before{content:'\EEB7'}.ms-Icon--DocLibrary:before{content:'\EEB8'}.ms-Icon--FormLibrary:before{content:'\EEB9'}.ms-Icon--FormLibraryMirrored:before{content:'\EEBA'}.ms-Icon--ReportLibrary:before{content:'\EEBB'}.ms-Icon--ReportLibraryMirrored:before{content:'\EEBC'}.ms-Icon--ContactCard:before{content:'\EEBD'}.ms-Icon--CustomList:before{content:'\EEBE'}.ms-Icon--CustomListMirrored:before{content:'\EEBF'}.ms-Icon--IssueTracking:before{content:'\EEC0'}.ms-Icon--IssueTrackingMirrored:before{content:'\EEC1'}.ms-Icon--PictureLibrary:before{content:'\EEC2'}.ms-Icon--AppForOfficeLogo:before{content:'\EEC7'}.ms-Icon--OfflineOneDriveParachute:before{content:'\EEC8'}.ms-Icon--OfflineOneDriveParachuteDisabled:before{content:'\EEC9'}.ms-Icon--LargeGrid:before{content:'\EECB'}.ms-Icon--TriangleSolidUp12:before{content:'\EECC'}.ms-Icon--TriangleSolidDown12:before{content:'\EECD'}.ms-Icon--TriangleSolidLeft12:before{content:'\EECE'}.ms-Icon--TriangleSolidRight12:before{content:'\EECF'}.ms-Icon--TriangleUp12:before{content:'\EED0'}.ms-Icon--TriangleDown12:before{content:'\EED1'}.ms-Icon--TriangleLeft12:before{content:'\EED2'}.ms-Icon--TriangleRight12:before{content:'\EED3'}.ms-Icon--ArrowUpRight8:before{content:'\EED4'}.ms-Icon--ArrowDownRight8:before{content:'\EED5'}.ms-Icon--DocumentSet:before{content:'\EED6'}.ms-Icon--DelveAnalytics:before{content:'\EEEE'}.ms-Icon--ArrowUpRightMirrored8:before{content:'\EEEF'}.ms-Icon--ArrowDownRightMirrored8:before{content:'\EEF0'}.ms-Icon--OneDriveAdd:before{content:'\EF32'}.ms-Icon--Header2:before{content:'\EF36'}.ms-Icon--Header3:before{content:'\EF37'}.ms-Icon--Header4:before{content:'\EF38'}.ms-Icon--MarketDown:before{content:'\EF42'}.ms-Icon--CalendarWorkWeek:before{content:'\EF51'}.ms-Icon--SidePanel:before{content:'\EF52'}.ms-Icon--GlobeFavorite:before{content:'\EF53'}.ms-Icon--CaretTopLeftSolid8:before{content:'\EF54'}.ms-Icon--CaretTopRightSolid8:before{content:'\EF55'}.ms-Icon--ViewAll2:before{content:'\EF56'}.ms-Icon--DocumentReply:before{content:'\EF57'}.ms-Icon--PlayerSettings:before{content:'\EF58'}.ms-Icon--ReceiptForward:before{content:'\EF59'}.ms-Icon--ReceiptReply:before{content:'\EF5A'}.ms-Icon--ReceiptCheck:before{content:'\EF5B'}.ms-Icon--Fax:before{content:'\EF5C'}.ms-Icon--RecurringEvent:before{content:'\EF5D'}.ms-Icon--ReplyAlt:before{content:'\EF5E'}.ms-Icon--ReplyAllAlt:before{content:'\EF5F'}.ms-Icon--EditStyle:before{content:'\EF60'}.ms-Icon--EditMail:before{content:'\EF61'}.ms-Icon--Lifesaver:before{content:'\EF62'}.ms-Icon--LifesaverLock:before{content:'\EF63'}.ms-Icon--InboxCheck:before{content:'\EF64'}.ms-Icon--FolderSearch:before{content:'\EF65'}.ms-Icon--CollapseMenu:before{content:'\EF66'}.ms-Icon--ExpandMenu:before{content:'\EF67'}.ms-Icon--Boards:before{content:'\EF68'}.ms-Icon--SunAdd:before{content:'\EF69'}.ms-Icon--SunQuestionMark:before{content:'\EF6A'}.ms-Icon--LandscapeOrientation:before{content:'\EF6B'}.ms-Icon--DocumentSearch:before{content:'\EF6C'}.ms-Icon--PublicCalendar:before{content:'\EF6D'}.ms-Icon--PublicContactCard:before{content:'\EF6E'}.ms-Icon--PublicEmail:before{content:'\EF6F'}.ms-Icon--PublicFolder:before{content:'\EF70'}.ms-Icon--WordDocument:before{content:'\EF71'}.ms-Icon--PowerPointDocument:before{content:'\EF72'}.ms-Icon--ExcelDocument:before{content:'\EF73'}.ms-Icon--GroupedList:before{content:'\EF74'}.ms-Icon--ClassroomLogo:before{content:'\EF75'}.ms-Icon--Sections:before{content:'\EF76'}.ms-Icon--EditPhoto:before{content:'\EF77'}.ms-Icon--Starburst:before{content:'\EF78'}.ms-Icon--ShareiOS:before{content:'\EF79'}.ms-Icon--AirTickets:before{content:'\EF7A'}.ms-Icon--PencilReply:before{content:'\EF7B'}.ms-Icon--Tiles2:before{content:'\EF7C'}.ms-Icon--SkypeCircleCheck:before{content:'\EF7D'}.ms-Icon--SkypeCircleClock:before{content:'\EF7E'}.ms-Icon--SkypeCircleMinus:before{content:'\EF7F'}.ms-Icon--SkypeCheck:before{content:'\EF80'}.ms-Icon--SkypeClock:before{content:'\EF81'}.ms-Icon--SkypeMinus:before{content:'\EF82'}.ms-Icon--SkypeMessage:before{content:'\EF83'}.ms-Icon--ClosedCaption:before{content:'\EF84'}.ms-Icon--ATPLogo:before{content:'\EF85'}.ms-Icon--OfficeFormLogo:before{content:'\EF86'}.ms-Icon--RecycleBin:before{content:'\EF87'}.ms-Icon--EmptyRecycleBin:before{content:'\EF88'}.ms-Icon--Hide2:before{content:'\EF89'}.ms-Icon--iOSAppStoreLogo:before{content:'\EF8A'}.ms-Icon--AndroidLogo:before{content:'\EF8B'}.ms-Icon--Breadcrumb:before{content:'\EF8C'}.ms-Icon--ClearFilter:before{content:'\EF8F'}.ms-Icon--Flow:before{content:'\EF90'}.ms-Icon--PageCheckedOut:before{content:'\F02C'}.ms-Icon--SetAction:before{content:'\F071'}.ms-Icon--PowerAppsLogo:before{content:'\F091'}.ms-Icon--PowerApps2Logo:before{content:'\F092'}.ms-Icon--FabricAssetLibrary:before{content:'\F09C'}.ms-Icon--FabricDataConnectionLibrary:before{content:'\F09D'}.ms-Icon--FabricDocLibrary:before{content:'\F09E'}.ms-Icon--FabricFormLibrary:before{content:'\F09F'}.ms-Icon--FabricFormLibraryMirrored:before{content:'\F0A0'}.ms-Icon--FabricReportLibrary:before{content:'\F0A1'}.ms-Icon--FabricReportLibraryMirrored:before{content:'\F0A2'}.ms-Icon--FabricPublicFolder:before{content:'\F0A3'}.ms-Icon--FabricFolderSearch:before{content:'\F0A4'}.ms-Icon--FabricMovetoFolder:before{content:'\F0A5'}.ms-Icon--FabricUnsyncFolder:before{content:'\F0A6'}.ms-Icon--FabricSyncFolder:before{content:'\F0A7'}.ms-Icon--FabricOpenFolderHorizontal:before{content:'\F0A8'}.ms-Icon--FabricFolder:before{content:'\F0A9'}.ms-Icon--FabricFolderFill:before{content:'\F0AA'}.ms-Icon--FabricNewFolder:before{content:'\F0AB'}.ms-Icon--FabricPictureLibrary:before{content:'\F0AC'}.ms-Icon--AddFavorite:before{content:'\F0C8'}.ms-Icon--AddFavoriteFill:before{content:'\F0C9'}.ms-Icon--BufferTimeBefore:before{content:'\F0CF'}.ms-Icon--BufferTimeAfter:before{content:'\F0D0'}.ms-Icon--BufferTimeBoth:before{content:'\F0D1'}.ms-Icon--PageCheckedin:before{content:'\F104'}.ms-Icon--CaretBottomLeftSolid8:before{content:'\F121'}.ms-Icon--CaretBottomRightSolid8:before{content:'\F122'}.ms-Icon--ArrowDownRightMirrored8:before{content:'\EED5'}.ms-Icon--ArrowDownRight8:before{content:'\EEF0'}.ms-Icon--ArrowUpRightMirrored8:before{content:'\EED4'}.ms-Icon--ArrowUpRight8:before{content:'\EEEF'}.ms-Icon--BidiLtr:before{content:'\E9AB'}.ms-Icon--BidiRtl:before{content:'\E9AA'}.ms-Icon--BookmarksMirrored:before{content:'\E8A4'}.ms-Icon--Bookmarks:before{content:'\EA41'}.ms-Icon--BulletedListMirrored:before{content:'\E8FD'}.ms-Icon--BulletedList:before{content:'\EA42'}.ms-Icon--CalendarMirrored:before{content:'\E787'}.ms-Icon--Calendar:before{content:'\ED28'}.ms-Icon--CaretBottomLeftSolid8:before{content:'\F122'}.ms-Icon--CaretBottomRightSolid8:before{content:'\F121'}.ms-Icon--CaretHollowMirrored:before{content:'\E817'}.ms-Icon--CaretHollow:before{content:'\EA45'}.ms-Icon--CaretLeft8:before{content:'\EDD6'}.ms-Icon--CaretRight8:before{content:'\EDD5'}.ms-Icon--CaretLeftSolid8:before{content:'\EDDA'}.ms-Icon--CaretRightSolid8:before{content:'\EDD9'}.ms-Icon--CaretSolidMirrored:before{content:'\E818'}.ms-Icon--CaretSolid:before{content:'\EA46'}.ms-Icon--CaretTopLeftSolid8:before{content:'\EF55'}.ms-Icon--CaretTopRightSolid8:before{content:'\EF54'}.ms-Icon--ChevronLeft:before{content:'\E76C'}.ms-Icon--ChevronRight:before{content:'\E76B'}.ms-Icon--ChevronLeftMed:before{content:'\E974'}.ms-Icon--ChevronRightMed:before{content:'\E973'}.ms-Icon--ChevronLeftSmall:before{content:'\E970'}.ms-Icon--ChevronRightSmall:before{content:'\E96F'}.ms-Icon--ChromeBackMirrored:before{content:'\E830'}.ms-Icon--ChromeBack:before{content:'\EA47'}.ms-Icon--ClosePaneMirrored:before{content:'\E89F'}.ms-Icon--ClosePane:before{content:'\EA49'}.ms-Icon--CustomListMirrored:before{content:'\EEBE'}.ms-Icon--CustomList:before{content:'\EEBF'}.ms-Icon--DateTimeMirrored:before{content:'\EC92'}.ms-Icon--DateTime:before{content:'\EE93'}.ms-Icon--DockLeftMirrored:before{content:'\E90C'}.ms-Icon--DockLeft:before{content:'\EA4C'}.ms-Icon--DoubleChevronLeft:before{content:'\EDBF'}.ms-Icon--DoubleChevronRight:before{content:'\EDBE'}.ms-Icon--DoubleChevronLeft12:before{content:'\EE99'}.ms-Icon--DoubleChevronRight12:before{content:'\EE98'}.ms-Icon--DoubleChevronLeftMedMirrored:before{content:'\E991'}.ms-Icon--DoubleChevronLeftMed:before{content:'\EA4D'}.ms-Icon--EditMirrored:before{content:'\E70F'}.ms-Icon--Edit:before{content:'\EB7E'}.ms-Icon--FabricFormLibraryMirrored:before{content:'\F09F'}.ms-Icon--FabricFormLibrary:before{content:'\F0A0'}.ms-Icon--FabricReportLibraryMirrored:before{content:'\F0A1'}.ms-Icon--FabricReportLibrary:before{content:'\F0A2'}.ms-Icon--FlickLeft:before{content:'\E938'}.ms-Icon--FlickRight:before{content:'\E937'}.ms-Icon--FormLibraryMirrored:before{content:'\EEB9'}.ms-Icon--FormLibrary:before{content:'\EEBA'}.ms-Icon--Forward:before{content:'\E72B'}.ms-Icon--Back:before{content:'\E72A'}.ms-Icon--HelpMirrored:before{content:'\E897'}.ms-Icon--Help:before{content:'\EA51'}.ms-Icon--IssueTrackingMirrored:before{content:'\EEC0'}.ms-Icon--IssueTracking:before{content:'\EEC1'}.ms-Icon--ListMirrored:before{content:'\EA37'}.ms-Icon--List:before{content:'\EA55'}.ms-Icon--MailReplyAllMirrored:before{content:'\E8C2'}.ms-Icon--MailReplyAll:before{content:'\EA58'}.ms-Icon--MailReplyMirrored:before{content:'\E8CA'}.ms-Icon--MailReply:before{content:'\EA57'}.ms-Icon--MultiSelectMirrored:before{content:'\E762'}.ms-Icon--MultiSelect:before{content:'\EA98'}.ms-Icon--OpenPaneMirrored:before{content:'\E8A0'}.ms-Icon--OpenPane:before{content:'\EA5B'}.ms-Icon--PageLeft:before{content:'\E761'}.ms-Icon--PageRight:before{content:'\E760'}.ms-Icon--QuestionnaireMirrored:before{content:'\EE19'}.ms-Icon--Questionnaire:before{content:'\EE4B'}.ms-Icon--Redo:before{content:'\E7A7'}.ms-Icon--Undo:before{content:'\E7A6'}.ms-Icon--ReplyAllMirrored:before{content:'\EE0A'}.ms-Icon--ReplyAll:before{content:'\EE36'}.ms-Icon--ReplyMirrored:before{content:'\E97A'}.ms-Icon--Reply:before{content:'\EE35'}.ms-Icon--ReportLibraryMirrored:before{content:'\EEBB'}.ms-Icon--ReportLibrary:before{content:'\EEBC'}.ms-Icon--SendMirrored:before{content:'\E724'}.ms-Icon--Send:before{content:'\EA63'}.ms-Icon--ShowResultsMirrored:before{content:'\E8BC'}.ms-Icon--ShowResults:before{content:'\EA65'}.ms-Icon--TaskManagerMirrored:before{content:'\EDB7'}.ms-Icon--TaskManager:before{content:'\EDB8'}.ms-Icon--ThumbnailViewMirrored:before{content:'\E7B6'}.ms-Icon--ThumbnailView:before{content:'\EA67'}.ms-Icon--TriangleLeft12:before{content:'\EED3'}.ms-Icon--TriangleRight12:before{content:'\EED2'}.ms-Icon--TriangleSolidLeft12:before{content:'\EECF'}.ms-Icon--TriangleSolidRight12:before{content:'\EECE'}.ms-u-slideRightIn10{animation-name:fadeIn,slideRightIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn10{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn20{animation-name:fadeIn,slideRightIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn20{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn40{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn40{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn10{animation-name:fadeIn,slideLeftIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn10{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn20{animation-name:fadeIn,slideLeftIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn20{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn40{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn40{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn400{animation-name:fadeIn,slideRightIn400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn400{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn400{animation-name:fadeIn,slideLeft400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeft400{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn20{animation-name:fadeIn,slideUpIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideUpIn20{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn10{animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpIn10{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn20{animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideDownIn20{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn10{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownIn10{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}.ms-u-slideRightOut40{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut40{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut40{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{animation-name:fadeOut,slideRightOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut400{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{animation-name:fadeOut,slideLeftOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut400{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{animation-name:fadeOut,slideUpOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{animation-name:fadeOut,slideDownOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{animation-name:fadeOut,slideDownOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{animation-name:fadeIn,scaleUp100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleUp100{0%{transform:scale3d(.98,.98,1)}to{transform:scaleX(1)}}.ms-u-scaleDownIn100{animation-name:fadeIn,scaleDown100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleDown100{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleX(1)}}.ms-u-scaleUpOut103{animation-name:fadeOut,scaleUp103;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleUp103{0%{transform:scaleX(1)}to{transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{animation-name:fadeOut,scaleDown98;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleDown98{0%{transform:scaleX(1)}to{transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both}.ms-u-fadeIn100{animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeIn{0%{opacity:0;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both}.ms-u-fadeOut100{animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeOut{0%{opacity:1;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{animation-name:rotate90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotate90{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}.ms-u-rotateN90deg{animation-name:rotateN90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotateN90{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}.ms-u-expandCollapse400{transition:height .367s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height .167s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{animation-delay:.167s}.ms-u-delay200{animation-delay:.267s}.ms-u-slideRightIn10{animation-name:fadeIn,slideLeft10;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn10,.ms-u-slideRightIn20{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideRightIn20{animation-name:fadeIn,slideLeft20;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn40{animation-name:fadeIn,slideLeft40;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn10,.ms-u-slideRightIn40{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn10{animation-name:fadeIn,slideRight10;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn20{animation-name:fadeIn,slideRight20;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn20,.ms-u-slideLeftIn40{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn40{animation-name:fadeIn,slideRight40;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn400{animation-name:fadeIn,slideLeft400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn400,.ms-u-slideRightIn400{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn400{animation-name:fadeIn,slideRight400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightOut40{animation-name:fadeOut,slideLeftOut40;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideLeftOut40,.ms-u-slideRightOut40{-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s}.ms-u-slideLeftOut40{animation-name:fadeOut,slideRightOut40;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideRightOut400{animation-name:fadeOut,slideLeftOut400;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideLeftOut400,.ms-u-slideRightOut400{-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s}.ms-u-slideLeftOut400{animation-name:fadeOut,slideRightOut400;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotate90deg{animation-name:rotateN90;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotate90deg,.ms-u-rotateN90deg{-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s}.ms-u-rotateN90deg{animation-name:rotate90;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{left:100%}.ms-u-smPull11{left:91.66666666666666%}.ms-u-smPull10{left:83.33333333333334%}.ms-u-smPull9{left:75%}.ms-u-smPull8{left:66.66666666666666%}.ms-u-smPull7{left:58.333333333333336%}.ms-u-smPull6{left:50%}.ms-u-smPull5{left:41.66666666666667%}.ms-u-smPull4{left:33.33333333333333%}.ms-u-smPull3{left:25%}.ms-u-smPull2{left:16.666666666666664%}.ms-u-smPull1{left:8.333333333333332%}.ms-u-smPull0{left:auto}.ms-u-smPush12{right:100%}.ms-u-smPush11{right:91.66666666666666%}.ms-u-smPush10{right:83.33333333333334%}.ms-u-smPush9{right:75%}.ms-u-smPush8{right:66.66666666666666%}.ms-u-smPush7{right:58.333333333333336%}.ms-u-smPush6{right:50%}.ms-u-smPush5{right:41.66666666666667%}.ms-u-smPush4{right:33.33333333333333%}.ms-u-smPush3{right:25%}.ms-u-smPush2{right:16.666666666666664%}.ms-u-smPush1{right:8.333333333333332%}.ms-u-smPush0{right:auto}.ms-u-smOffset11{margin-right:91.66666666666666%}.ms-u-smOffset10{margin-right:83.33333333333334%}.ms-u-smOffset9{margin-right:75%}.ms-u-smOffset8{margin-right:66.66666666666666%}.ms-u-smOffset7{margin-right:58.333333333333336%}.ms-u-smOffset6{margin-right:50%}.ms-u-smOffset5{margin-right:41.66666666666667%}.ms-u-smOffset4{margin-right:33.33333333333333%}.ms-u-smOffset3{margin-right:25%}.ms-u-smOffset2{margin-right:16.666666666666664%}.ms-u-smOffset1{margin-right:8.333333333333332%}.ms-u-smOffset0{margin-right:0}@media (min-width:480px){.ms-u-md12{width:100%}}@media (min-width:480px){.ms-u-md11{width:91.66666666666666%}}@media (min-width:480px){.ms-u-md10{width:83.33333333333334%}}@media (min-width:480px){.ms-u-md9{width:75%}}@media (min-width:480px){.ms-u-md8{width:66.66666666666666%}}@media (min-width:480px){.ms-u-md7{width:58.333333333333336%}}@media (min-width:480px){.ms-u-md6{width:50%}}@media (min-width:480px){.ms-u-md5{width:41.66666666666667%}}@media (min-width:480px){.ms-u-md4{width:33.33333333333333%}}@media (min-width:480px){.ms-u-md3{width:25%}}@media (min-width:480px){.ms-u-md2{width:16.666666666666664%}}@media (min-width:480px){.ms-u-md1{width:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull12{left:100%}}@media (min-width:480px){.ms-u-mdPull11{left:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPull10{left:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPull9{left:75%}}@media (min-width:480px){.ms-u-mdPull8{left:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPull7{left:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPull6{left:50%}}@media (min-width:480px){.ms-u-mdPull5{left:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPull4{left:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPull3{left:25%}}@media (min-width:480px){.ms-u-mdPull2{left:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPull1{left:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull0{left:auto}}@media (min-width:480px){.ms-u-mdPush12{right:100%}}@media (min-width:480px){.ms-u-mdPush11{right:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPush10{right:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPush9{right:75%}}@media (min-width:480px){.ms-u-mdPush8{right:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPush7{right:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPush6{right:50%}}@media (min-width:480px){.ms-u-mdPush5{right:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPush4{right:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPush3{right:25%}}@media (min-width:480px){.ms-u-mdPush2{right:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPush1{right:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPush0{right:auto}}@media (min-width:480px){.ms-u-mdOffset11{margin-right:91.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset10{margin-right:83.33333333333334%}}@media (min-width:480px){.ms-u-mdOffset9{margin-right:75%}}@media (min-width:480px){.ms-u-mdOffset8{margin-right:66.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset7{margin-right:58.333333333333336%}}@media (min-width:480px){.ms-u-mdOffset6{margin-right:50%}}@media (min-width:480px){.ms-u-mdOffset5{margin-right:41.66666666666667%}}@media (min-width:480px){.ms-u-mdOffset4{margin-right:33.33333333333333%}}@media (min-width:480px){.ms-u-mdOffset3{margin-right:25%}}@media (min-width:480px){.ms-u-mdOffset2{margin-right:16.666666666666664%}}@media (min-width:480px){.ms-u-mdOffset1{margin-right:8.333333333333332%}}@media (min-width:480px){.ms-u-mdOffset0{margin-right:0}}@media (min-width:640px){.ms-u-lg12{width:100%}}@media (min-width:640px){.ms-u-lg11{width:91.66666666666666%}}@media (min-width:640px){.ms-u-lg10{width:83.33333333333334%}}@media (min-width:640px){.ms-u-lg9{width:75%}}@media (min-width:640px){.ms-u-lg8{width:66.66666666666666%}}@media (min-width:640px){.ms-u-lg7{width:58.333333333333336%}}@media (min-width:640px){.ms-u-lg6{width:50%}}@media (min-width:640px){.ms-u-lg5{width:41.66666666666667%}}@media (min-width:640px){.ms-u-lg4{width:33.33333333333333%}}@media (min-width:640px){.ms-u-lg3{width:25%}}@media (min-width:640px){.ms-u-lg2{width:16.666666666666664%}}@media (min-width:640px){.ms-u-lg1{width:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull12{left:100%}}@media (min-width:640px){.ms-u-lgPull11{left:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPull10{left:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPull9{left:75%}}@media (min-width:640px){.ms-u-lgPull8{left:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPull7{left:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPull6{left:50%}}@media (min-width:640px){.ms-u-lgPull5{left:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPull4{left:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPull3{left:25%}}@media (min-width:640px){.ms-u-lgPull2{left:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPull1{left:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull0{left:auto}}@media (min-width:640px){.ms-u-lgPush12{right:100%}}@media (min-width:640px){.ms-u-lgPush11{right:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPush10{right:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPush9{right:75%}}@media (min-width:640px){.ms-u-lgPush8{right:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPush7{right:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPush6{right:50%}}@media (min-width:640px){.ms-u-lgPush5{right:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPush4{right:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPush3{right:25%}}@media (min-width:640px){.ms-u-lgPush2{right:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPush1{right:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPush0{right:auto}}@media (min-width:640px){.ms-u-lgOffset11{margin-right:91.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset10{margin-right:83.33333333333334%}}@media (min-width:640px){.ms-u-lgOffset9{margin-right:75%}}@media (min-width:640px){.ms-u-lgOffset8{margin-right:66.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset7{margin-right:58.333333333333336%}}@media (min-width:640px){.ms-u-lgOffset6{margin-right:50%}}@media (min-width:640px){.ms-u-lgOffset5{margin-right:41.66666666666667%}}@media (min-width:640px){.ms-u-lgOffset4{margin-right:33.33333333333333%}}@media (min-width:640px){.ms-u-lgOffset3{margin-right:25%}}@media (min-width:640px){.ms-u-lgOffset2{margin-right:16.666666666666664%}}@media (min-width:640px){.ms-u-lgOffset1{margin-right:8.333333333333332%}}@media (min-width:640px){.ms-u-lgOffset0{margin-right:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}}@media (min-width:1024px){.ms-u-xl11{width:91.66666666666666%}}@media (min-width:1024px){.ms-u-xl10{width:83.33333333333334%}}@media (min-width:1024px){.ms-u-xl9{width:75%}}@media (min-width:1024px){.ms-u-xl8{width:66.66666666666666%}}@media (min-width:1024px){.ms-u-xl7{width:58.333333333333336%}}@media (min-width:1024px){.ms-u-xl6{width:50%}}@media (min-width:1024px){.ms-u-xl5{width:41.66666666666667%}}@media (min-width:1024px){.ms-u-xl4{width:33.33333333333333%}}@media (min-width:1024px){.ms-u-xl3{width:25%}}@media (min-width:1024px){.ms-u-xl2{width:16.666666666666664%}}@media (min-width:1024px){.ms-u-xl1{width:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull12{left:100%}}@media (min-width:1024px){.ms-u-xlPull11{left:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull10{left:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPull9{left:75%}}@media (min-width:1024px){.ms-u-xlPull8{left:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull7{left:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPull6{left:50%}}@media (min-width:1024px){.ms-u-xlPull5{left:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPull4{left:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPull3{left:25%}}@media (min-width:1024px){.ms-u-xlPull2{left:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPull1{left:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull0{left:auto}}@media (min-width:1024px){.ms-u-xlPush12{right:100%}}@media (min-width:1024px){.ms-u-xlPush11{right:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush10{right:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPush9{right:75%}}@media (min-width:1024px){.ms-u-xlPush8{right:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush7{right:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPush6{right:50%}}@media (min-width:1024px){.ms-u-xlPush5{right:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPush4{right:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPush3{right:25%}}@media (min-width:1024px){.ms-u-xlPush2{right:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPush1{right:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPush0{right:auto}}@media (min-width:1024px){.ms-u-xlOffset11{margin-right:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset10{margin-right:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlOffset9{margin-right:75%}}@media (min-width:1024px){.ms-u-xlOffset8{margin-right:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset7{margin-right:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlOffset6{margin-right:50%}}@media (min-width:1024px){.ms-u-xlOffset5{margin-right:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlOffset4{margin-right:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlOffset3{margin-right:25%}}@media (min-width:1024px){.ms-u-xlOffset2{margin-right:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlOffset1{margin-right:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlOffset0{margin-right:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}}@media (min-width:1366px){.ms-u-xxl11{width:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxl10{width:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxl9{width:75%}}@media (min-width:1366px){.ms-u-xxl8{width:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxl7{width:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxl6{width:50%}}@media (min-width:1366px){.ms-u-xxl5{width:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxl4{width:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxl3{width:25%}}@media (min-width:1366px){.ms-u-xxl2{width:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxl1{width:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull12{left:100%}}@media (min-width:1366px){.ms-u-xxlPull11{left:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull10{left:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPull9{left:75%}}@media (min-width:1366px){.ms-u-xxlPull8{left:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull7{left:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPull6{left:50%}}@media (min-width:1366px){.ms-u-xxlPull5{left:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPull4{left:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPull3{left:25%}}@media (min-width:1366px){.ms-u-xxlPull2{left:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPull1{left:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull0{left:auto}}@media (min-width:1366px){.ms-u-xxlPush12{right:100%}}@media (min-width:1366px){.ms-u-xxlPush11{right:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush10{right:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPush9{right:75%}}@media (min-width:1366px){.ms-u-xxlPush8{right:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush7{right:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPush6{right:50%}}@media (min-width:1366px){.ms-u-xxlPush5{right:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPush4{right:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPush3{right:25%}}@media (min-width:1366px){.ms-u-xxlPush2{right:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPush1{right:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPush0{right:auto}}@media (min-width:1366px){.ms-u-xxlOffset11{margin-right:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset10{margin-right:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlOffset9{margin-right:75%}}@media (min-width:1366px){.ms-u-xxlOffset8{margin-right:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset7{margin-right:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlOffset6{margin-right:50%}}@media (min-width:1366px){.ms-u-xxlOffset5{margin-right:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlOffset4{margin-right:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlOffset3{margin-right:25%}}@media (min-width:1366px){.ms-u-xxlOffset2{margin-right:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlOffset1{margin-right:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlOffset0{margin-right:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}}@media (min-width:1920px){.ms-u-xxxl11{width:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl10{width:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxl9{width:75%}}@media (min-width:1920px){.ms-u-xxxl8{width:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl7{width:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxl6{width:50%}}@media (min-width:1920px){.ms-u-xxxl5{width:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxl4{width:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxl3{width:25%}}@media (min-width:1920px){.ms-u-xxxl2{width:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxl1{width:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull12{left:100%}}@media (min-width:1920px){.ms-u-xxxlPull11{left:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull10{left:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPull9{left:75%}}@media (min-width:1920px){.ms-u-xxxlPull8{left:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull7{left:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPull6{left:50%}}@media (min-width:1920px){.ms-u-xxxlPull5{left:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPull4{left:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPull3{left:25%}}@media (min-width:1920px){.ms-u-xxxlPull2{left:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPull1{left:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull0{left:auto}}@media (min-width:1920px){.ms-u-xxxlPush12{right:100%}}@media (min-width:1920px){.ms-u-xxxlPush11{right:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush10{right:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPush9{right:75%}}@media (min-width:1920px){.ms-u-xxxlPush8{right:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush7{right:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPush6{right:50%}}@media (min-width:1920px){.ms-u-xxxlPush5{right:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPush4{right:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPush3{right:25%}}@media (min-width:1920px){.ms-u-xxxlPush2{right:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPush1{right:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPush0{right:auto}}@media (min-width:1920px){.ms-u-xxxlOffset11{margin-right:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset10{margin-right:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlOffset9{margin-right:75%}}@media (min-width:1920px){.ms-u-xxxlOffset8{margin-right:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset7{margin-right:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlOffset6{margin-right:50%}}@media (min-width:1920px){.ms-u-xxxlOffset5{margin-right:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlOffset4{margin-right:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlOffset3{margin-right:25%}}@media (min-width:1920px){.ms-u-xxxlOffset2{margin-right:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlOffset1{margin-right:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlOffset0{margin-right:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-right:8px;padding-left:8px;box-sizing:border-box;float:right}.ms-Grid-col .ms-Grid{padding:0}.ms-Fabric{color:#333} \ No newline at end of file diff --git a/dist/documentation/Components/Breadcrumb/Breadcrumb.html b/dist/documentation/Components/Breadcrumb/Breadcrumb.html new file mode 100644 index 00000000..6b47ddb3 --- /dev/null +++ b/dist/documentation/Components/Breadcrumb/Breadcrumb.html @@ -0,0 +1,1088 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    Fabric JS
    +
    +
    +
    + +
    +
    +
    +
    +
    +

    Breadcrumb

    + +
    +
    +
    +
    +
    +

    Overview

    +
    +
    +
    +

    Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy.

    +

    Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

    +
    +
    +
    + Also available in + Fabric React +
    +
    +
    +
    +

    Using this Component

    +
      +
    1. +

      Confirm that you have references to Fabric's CSS and JavaScript on your page:

      +
      +
      + 
      +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
      +
      +
      +
      2. +
    2. +

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

      + 
      <div class="ms-Breadcrumb">
+  <div class="ms-Breadcrumb-overflow">
+    <div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More"></div>
+    <div class="ms-Breadcrumb-overflowMenu">
+      <ul class="ms-ContextualMenu is-open"></ul>
+    </div>
+    <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+  </div>
+  <ul class="ms-Breadcrumb-list">
+    <li class="ms-Breadcrumb-listItem">
+      <a class="ms-Breadcrumb-itemLink">Files</a> 
+      <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+    </li>
+    <li class="ms-Breadcrumb-listItem">
+      <a class="ms-Breadcrumb-itemLink">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">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">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">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">Folder 5</a> 
+      <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+    </li>
+    <li class="ms-Breadcrumb-listItem">
+      <a class="ms-Breadcrumb-itemLink">Folder 6</a> 
+      <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+    </li>
+    <li class="ms-Breadcrumb-listItem">
+      <a class="ms-Breadcrumb-itemLink">Folder 7</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 Fabric's JS, to instantiate all Breadcrumb components on the page:

      + 
      <script type="text/javascript">
+  var BreadcrumbHTML = document.querySelector('.ms-Breadcrumb');
+  var Breadcrumb = new fabric['Breadcrumb'](BreadcrumbHTML);
+</script>
      +
      4. +
    4. +

      Replace the sample HTML content with your content.

      +
      5. +
    +
    +
    +

    Variants

    +
    +
    + Default Breadcrumb +
    + +
    +
    +
    + 
    <div class="ms-Breadcrumb">
+  <div class="ms-Breadcrumb-overflow">
+    <div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More"></div>
+    <div class="ms-Breadcrumb-overflowMenu">
+      <ul class="ms-ContextualMenu is-open"></ul>
+    </div>
+    <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+  </div>
+  <ul class="ms-Breadcrumb-list">
+    <li class="ms-Breadcrumb-listItem">
+      <a class="ms-Breadcrumb-itemLink">Files</a> 
+      <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+    </li>
+    <li class="ms-Breadcrumb-listItem">
+      <a class="ms-Breadcrumb-itemLink">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">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">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">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">Folder 5</a> 
+      <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+    </li>
+    <li class="ms-Breadcrumb-listItem">
+      <a class="ms-Breadcrumb-itemLink">Folder 6</a> 
+      <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+    </li>
+    <li class="ms-Breadcrumb-listItem">
+      <a class="ms-Breadcrumb-itemLink">Folder 7</a> 
+      <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+    </li>
+  </ul>
+</div>
    + 
    <script type="text/javascript">
+  var BreadcrumbHTML = document.querySelector('.ms-Breadcrumb');
+  var Breadcrumb = new fabric['Breadcrumb'](BreadcrumbHTML);
+</script>
    +
    +
    + +
    +
    +
    +
    +
      +
      + +
      + +
      +
      +
      +
      +
      +

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

      Methods

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      NameParametersDescription
      removeOutlinesOnClick()

      None

      +      		 +
      + Removes focus outlines so they don't linger after click +
      +
      addItem(itemLabel, itemLink)

      itemLabel: {String} the item's text label

      +

      itemLink: {String} the item's href link

      +      		 +
      + Adds a breadcrumb item to a breadcrumb +
      +
      removeItemByLabel(itemLabel)

      itemLabel: {String} the item's text label

      +      		 +
      + Removes a breadcrumb item by item label in the breadcrumbs list +
      +
      removeItemByPosition(value)

      value: {number} the item's index

      +      		 +
      + Removes a breadcrumb item by position in the breadcrumb's list. Index starts at 0 +
      +
      init()

      None

      +      		 +
      + Initializes component +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Button/Button.html b/dist/documentation/Components/Button/Button.html new file mode 100644 index 00000000..e2986180 --- /dev/null +++ b/dist/documentation/Components/Button/Button.html @@ -0,0 +1,1058 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Button

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

      +

      When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.

      +

      While buttons can technically be used to navigate a user to another part of the experience, this is not recommended - unless that navigation is part of an action or their flow.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <button class="ms-Button">
+  <span class="ms-Button-label">Create Account</span> 
+</button>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var ButtonElements = document.querySelectorAll(".ms-Button");
+  for (var i = 0; i < ButtonElements.length; i++) {
+    new fabric['Button'](ButtonElements[i], function() {
+      // Insert Event Here
+    });
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Normal Button +
      + +
      +
      +
      + 
      <button class="ms-Button">
+  <span class="ms-Button-label">Create Account</span> 
+</button>
      + 
      <script type="text/javascript">
+  var ButtonElements = document.querySelectorAll(".ms-Button");
+  for (var i = 0; i < ButtonElements.length; i++) {
+    new fabric['Button'](ButtonElements[i], function() {
+      // Insert Event Here
+    });
+  }
+</script>
      +
      +
      + + +
      +
      +
      +
      + Primary Button +
      + +
      +
      +
      + 
      <button class="ms-Button ms-Button--primary">
+  <span class="ms-Button-label">Create Account</span> 
+</button>
      + 
      <script type="text/javascript">
+  var ButtonElements = document.querySelectorAll(".ms-Button");
+  for (var i = 0; i < ButtonElements.length; i++) {
+    new fabric['Button'](ButtonElements[i], function() {
+      // Insert Event Here
+    });
+  }
+</script>
      +
      +
      + + +
      +
      +
      +
      + Hero Button +
      + +
      +
      +
      + 
      <button class="ms-Button ms-Button--hero">
+  <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--Add"></i></span> 
+  <span class="ms-Button-label">Create Account</span> 
+</button>
      + 
      <script type="text/javascript">
+  var ButtonElements = document.querySelectorAll(".ms-Button");
+  for (var i = 0; i < ButtonElements.length; i++) {
+    new fabric['Button'](ButtonElements[i], function() {
+      // Insert Event Here
+    });
+  }
+</script>
      +
      +
      + + +
      +
      +
      +
      + Compound Button +
      + +
      +
      +
      + 
      <button class="ms-Button ms-Button--compound">
+  <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span> 
+  <span class="ms-Button-label">Create Account</span> 
+  <span class="ms-Button-description">Description of this action this button takes</span> 
+</button>
      + 
      <script type="text/javascript">
+  var ButtonElements = document.querySelectorAll(".ms-Button");
+  for (var i = 0; i < ButtonElements.length; i++) {
+    new fabric['Button'](ButtonElements[i], function() {
+      // Insert Event Here
+    });
+  }
+</script>
      +
      +
      + + +
      +
      +
      +
      + Small Button +
      + +
      +
      +
      + 
      <button class="ms-Button ms-Button--small">
+  <span class="ms-Button-label">Create</span> 
+</button>
      + 
      <script type="text/javascript">
+  var ButtonElements = document.querySelectorAll(".ms-Button");
+  for (var i = 0; i < ButtonElements.length; i++) {
+    new fabric['Button'](ButtonElements[i], function() {
+      // Insert Event Here
+    });
+  }
+</script>
      +
      +
      + + +
      +
      +
      +
      +

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

      Methods

      + + + + + + + + + + + + + + + +
      NameParametersDescription
      disposeEvents()

      None

      +      		 +
      + Removes event handlers on the button +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Callout/Callout.html b/dist/documentation/Components/Callout/Callout.html new file mode 100644 index 00000000..267eff78 --- /dev/null +++ b/dist/documentation/Components/Callout/Callout.html @@ -0,0 +1,1285 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Callout

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Callouts are a powerful way to simplify a user interface. They host tips and other information users need when they need it, with minimal effort on their part. Callouts can help you use screen space more effectively and reduce screen clutter. However, poorly designed Callouts can be annoying, distracting, unhelpful, overwhelming, or in the way.

      +

      Use a Callout for displaying additional contextual information about an item on the screen. Unlike Tooltips, Callouts also have a tail that identifies their source. A common use for Callout is the introduction of a new feature or capability of an app or site. Alternate usages include pairing the Callout with a button or clickable element for on-demand presentation of additional or supporting content.

      +

      Real-world examples of this implementation can be seen in administrative interfaces where a particularly difficult-to-understand concept is paired with the ms-Icon--info "i" icon. In this example, Callout - with its tip text - is opened when the user clicks on or hovers over the icon.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-CalloutExample">
+  <div class="ms-Callout is-hidden">
+    <div class="ms-Callout-main">
+      <div class="ms-Callout-header">
+        <p class="ms-Callout-title">All of your favorite people</p>
+      </div>
+      <div class="ms-Callout-inner">
+        <div class="ms-Callout-content">
+          <p class="ms-Callout-subText">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
+        </div>
+        <div class="ms-Callout-actions">
+          <a class="ms-Link">Learn more</a> 
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ms-CalloutExample-button">
+    <button class="ms-Button">
+      <span class="ms-Button-label">Open Callout</span> 
+    </button>
+  </div>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
+  for (var i = 0; i < CalloutExamples.length; i++) {
+    var Example = CalloutExamples[i];
+    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
+    var CalloutElement = Example.querySelector(".ms-Callout");
+    new fabric['Callout'](
+      CalloutElement,
+      ExampleButtonElement,
+      "right"
+    );
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default Callout +
      + +
      +
      +
      + 
      <div class="ms-CalloutExample">
+  <div class="ms-Callout is-hidden">
+    <div class="ms-Callout-main">
+      <div class="ms-Callout-header">
+        <p class="ms-Callout-title">All of your favorite people</p>
+      </div>
+      <div class="ms-Callout-inner">
+        <div class="ms-Callout-content">
+          <p class="ms-Callout-subText">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
+        </div>
+        <div class="ms-Callout-actions">
+          <a class="ms-Link">Learn more</a> 
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ms-CalloutExample-button">
+    <button class="ms-Button">
+      <span class="ms-Button-label">Open Callout</span> 
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
+  for (var i = 0; i < CalloutExamples.length; i++) {
+    var Example = CalloutExamples[i];
+    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
+    var CalloutElement = Example.querySelector(".ms-Callout");
+    new fabric['Callout'](
+      CalloutElement,
+      ExampleButtonElement,
+      "right"
+    );
+  }
+</script>
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      + Close Callout +
      + +
      +
      +
      + 
      <div class="ms-CalloutExample">
+  <div class="ms-Callout ms-Callout--arrowLeft  ms-Callout--close is-hidden">
+    <div class="ms-Callout-main">
+      <button class="ms-Callout-close">
+        <i class="ms-Icon ms-Icon--Clear"></i>
+      </button>
+      <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 class="ms-Link" title="Learn More">Learn More</a> 
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ms-CalloutExample-button">
+    <button class="ms-Button">
+      <span class="ms-Button-label">Open Callout</span> 
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
+  for (var i = 0; i < CalloutExamples.length; i++) {
+    var Example = CalloutExamples[i];
+    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
+    var CalloutElement = Example.querySelector(".ms-Callout");
+    new fabric['Callout'](
+      CalloutElement,
+      ExampleButtonElement,
+      "right"
+    );
+  }
+</script>
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      + Action Callout +
      + +
      +
      +
      + 
      <div class="ms-CalloutExample">
+  <div class="ms-Callout ms-Callout--actionText is-hidden">
+    <div class="ms-Callout-main">
+      <div class="ms-Callout-header">
+        <p class="ms-Callout-title">All of your favorite people</p>
+      </div>
+      <div class="ms-Callout-inner">
+        <div class="ms-Callout-content">
+          <p class="ms-Callout-subText">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">
+          <div class="ms-CommandButton ms-CommandButton--inline">
+            <button class="ms-CommandButton-button">
+              <span class="ms-CommandButton-icon ms-fontColor-green"><i class="ms-Icon ms-Icon--CheckMark"></i></span> 
+              <span class="ms-CommandButton-label">Command</span> 
+            </button>
+          </div>
+          <div class="ms-CommandButton ms-CommandButton--inline">
+            <button class="ms-CommandButton-button">
+              <span class="ms-CommandButton-icon ms-fontColor-red"><i class="ms-Icon ms-Icon--Clear"></i></span> 
+              <span class="ms-CommandButton-label">Command</span> 
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ms-CalloutExample-button">
+    <button class="ms-Button">
+      <span class="ms-Button-label">Open Callout Action Text</span> 
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
+  for (var i = 0; i < CalloutExamples.length; i++) {
+    var Example = CalloutExamples[i];
+    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
+    var CalloutElement = Example.querySelector(".ms-Callout");
+    new fabric['Callout'](
+      CalloutElement,
+      ExampleButtonElement,
+      "right"
+    );
+  }
+</script>
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      + OOBE (Out of the Box Experience) +
      + +
      +
      +
      + 
      <div class="ms-CalloutExample">
+  <div class="ms-Callout ms-Callout--arrowLeft  ms-Callout--OOBE is-hidden">
+    <div class="ms-Callout-main">
+      <div class="ms-Callout-header">
+        <p class="ms-Callout-title">All of your favorite people</p>
+      </div>
+      <div class="ms-Callout-inner">
+        <div class="ms-Callout-content">
+          <p class="ms-Callout-subText">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">
+          <button class="ms-Button ms-Button--primary">
+            <span class="ms-Button-label">More</span> 
+          </button>
+          <button class="ms-Button">
+            <span class="ms-Button-label">Got it</span> 
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ms-CalloutExample-button">
+    <button class="ms-Button">
+      <span class="ms-Button-label">Open Callout OOBE</span> 
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
+  for (var i = 0; i < CalloutExamples.length; i++) {
+    var Example = CalloutExamples[i];
+    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
+    var CalloutElement = Example.querySelector(".ms-Callout");
+    new fabric['Callout'](
+      CalloutElement,
+      ExampleButtonElement,
+      "right"
+    );
+  }
+</script>
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      + Peek Callout +
      + +
      +
      +
      + 
      <div class="ms-CalloutExample">
+  <div class="ms-Callout ms-Callout--arrowLeft  ms-Callout--peek is-hidden">
+    <div class="ms-Callout-main">
+      <div class="ms-Callout-header">
+        <p class="ms-Callout-title">Uploaded 2 items to <span class='ms-Link'>Alton's OneDrive</span> </p>
+      </div>
+      <div class="ms-Callout-inner">
+        <div class="ms-Callout-content">
+          <p class="ms-Callout-subText"></p>
+        </div>
+        <div class="ms-Callout-actions">
+          <button class="ms-Button">
+            <span class="ms-Button-label">Got it</span> 
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ms-CalloutExample-button">
+    <button class="ms-Button">
+      <span class="ms-Button-label">Open Callout Peek</span> 
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
+  for (var i = 0; i < CalloutExamples.length; i++) {
+    var Example = CalloutExamples[i];
+    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
+    var CalloutElement = Example.querySelector(".ms-Callout");
+    new fabric['Callout'](
+      CalloutElement,
+      ExampleButtonElement,
+      "right"
+    );
+  }
+</script>
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/CheckBox/CheckBox.html b/dist/documentation/Components/CheckBox/CheckBox.html new file mode 100644 index 00000000..9f3f3380 --- /dev/null +++ b/dist/documentation/Components/CheckBox/CheckBox.html @@ -0,0 +1,1065 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      CheckBox

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control.

      +

      A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has two selection states: unselected and selected.

      +

      Use a single Checkbox for a subordinate setting, such as with a "Remember me?" login scenario or with a terms of service agreement.

      +

      For a binary choice, the main difference between a Checkbox and a toggle switch is that the Checkbox is for status and the toggle switch is for action. You can delay committing a Checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Also, only Checkboxes allow for multi-selection.

      +

      Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-CheckBox">
+  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+    <span class="ms-Label">Checkbox</span> 
+  </label>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
+  for (var i = 0; i < CheckBoxElements.length; i++) {
+    new fabric['CheckBox'](CheckBoxElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default CheckBox +
      + +
      +
      +
      + 
      <div class="ms-CheckBox">
+  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+    <span class="ms-Label">Checkbox</span> 
+  </label>
+</div>
      + 
      <script type="text/javascript">
+  var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
+  for (var i = 0; i < CheckBoxElements.length; i++) {
+    new fabric['CheckBox'](CheckBoxElements[i]);
+  }
+</script>
      +
      +
      + +
      + + +
      +
      +
      +
      +
      + Disabled CheckBox +
      + +
      +
      +
      + 
      <div class="ms-CheckBox">
+  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+  <label role="checkbox" class="ms-CheckBox-field is-disabled" tabindex="0" aria-checked="false" name="checkboxb" aria-disabled="true">
+    <span class="ms-Label">Checkbox Disabled</span> 
+  </label>
+</div>
      + 
      <script type="text/javascript">
+  var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
+  for (var i = 0; i < CheckBoxElements.length; i++) {
+    new fabric['CheckBox'](CheckBoxElements[i]);
+  }
+</script>
      +
      +
      + +
      + + +
      +
      +
      +
      +
      + Selected CheckBox +
      + +
      +
      +
      + 
      <div class="ms-CheckBox">
+  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="true" name="checkboxc">
+    <span class="ms-Label">Checkbox selected</span> 
+  </label>
+</div>
      + 
      <script type="text/javascript">
+  var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
+  for (var i = 0; i < CheckBoxElements.length; i++) {
+    new fabric['CheckBox'](CheckBoxElements[i]);
+  }
+</script>
      +
      +
      + +
      + + +
      +
      +
      +
      +
      +

      States

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

      Methods

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      NameParametersDescription
      getValue()

      None

      +      		 +
      + Returns true or false whether the component is checked or not +
      +
      toggle()

      None

      +      		 +
      + Toggles the component +
      +
      check()

      None

      +      		 +
      + Sets component to checked +
      +
      unCheck()

      None

      +      		 +
      + Sets component to unchecked +
      +
      removeListeners()

      None

      +      		 +
      + Remove all event listeners from component +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/ChoiceFieldGroup/ChoiceFieldGroup.html b/dist/documentation/Components/ChoiceFieldGroup/ChoiceFieldGroup.html new file mode 100644 index 00000000..5f0f3583 --- /dev/null +++ b/dist/documentation/Components/ChoiceFieldGroup/ChoiceFieldGroup.html @@ -0,0 +1,998 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      ChoiceFieldGroup

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Used to indicate a single choice from multiple options.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
+  <div class="ms-ChoiceFieldGroup-title">
+    <label class="ms-Label is-required">Unselected</label>
+  </div>
+  <ul class="ms-ChoiceFieldGroup-list">
+    <li class="ms-RadioButton">
+      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
+        <span class="ms-Label">Option 1</span> 
+      </label>
+    </li>
+    <li class="ms-RadioButton">
+      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
+        <span class="ms-Label">Option 2</span> 
+      </label>
+    </li>
+    <li class="ms-RadioButton">
+      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+      <label role="radio" class="ms-RadioButton-field is-disabled" tabindex="0" aria-checked="false" name="choicefieldgroup" aria-disabled="true">
+        <span class="ms-Label">Option 3</span> 
+      </label>
+    </li>
+    <li class="ms-RadioButton">
+      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
+        <span class="ms-Label">Option 4</span> 
+      </label>
+    </li>
+  </ul>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
+  for (var i = 0; i < ChoiceFieldGroupElements.length; i++) {
+    new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default ChoiceFieldGroup +
      + +
      +
      +
      + 
      <div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
+  <div class="ms-ChoiceFieldGroup-title">
+    <label class="ms-Label is-required">Unselected</label>
+  </div>
+  <ul class="ms-ChoiceFieldGroup-list">
+    <li class="ms-RadioButton">
+      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
+        <span class="ms-Label">Option 1</span> 
+      </label>
+    </li>
+    <li class="ms-RadioButton">
+      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
+        <span class="ms-Label">Option 2</span> 
+      </label>
+    </li>
+    <li class="ms-RadioButton">
+      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+      <label role="radio" class="ms-RadioButton-field is-disabled" tabindex="0" aria-checked="false" name="choicefieldgroup" aria-disabled="true">
+        <span class="ms-Label">Option 3</span> 
+      </label>
+    </li>
+    <li class="ms-RadioButton">
+      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
+        <span class="ms-Label">Option 4</span> 
+      </label>
+    </li>
+  </ul>
+</div>
      + 
      <script type="text/javascript">
+  var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
+  for (var i = 0; i < ChoiceFieldGroupElements.length; i++) {
+    new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
        +
      • + + +
        • +
      • + + +
        • +
      • + + +
        • +
      • + + +
      +
      +
      +
      +
      +
      +

      Methods

      + + + + + + + + + + + + + + + +
      NameParametersDescription
      removeListeners()

      None

      +      		 +
      + Remove all event listeners from component +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/CommandBar/CommandBar.html b/dist/documentation/Components/CommandBar/CommandBar.html new file mode 100644 index 00000000..4ddd613a --- /dev/null +++ b/dist/documentation/Components/CommandBar/CommandBar.html @@ -0,0 +1,1813 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      CommandBar

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      CommandBar is a surface that houses commands that operate on the content of the window, panel, or parent region it resides above. They are one of the most visible and recognizable ways to surface commands, and can be an intuitive method for interacting with content on the page. However, if overloaded or poorly organized, they can be difficult to use and hide valuable commands from your user. CommandBars can also display a search box for finding content; hold simple commands as well as menus; and display the status of ongoing actions.

      +

      Commands should be sorted in order of importance, from left to right or right to left depending on the culture. Secondarily, organize commands in logical groupings for easier recall. CommandBars work best when they display no more than 5-7 commands. This helps users quickly find your most valuable features. If you need to show more commands, consider using the overflow menu. If you need to render status, or viewing controls, these go on the right side of the CommandBar (or left side if in a left to right experience). Do not display more than 2-3 items on the right side as it will make the overall CommandBar difficult to parse.

      +

      All command items should have an icon and a label. Commands can render as labels only as well. In smaller widths, commands can just use icon only, but only for the most recognizable and frequently used commands. All other commands should go into an overflow where text labels can be shown.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-CommandBar">
+  <div class="ms-CommandBar-sideCommands">
+    <div class="ms-CommandButton ms-CommandButton--noLabel">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label"></span> 
+      </button>
+    </div>
+  </div>
+  <div class="ms-CommandBar-mainArea">
+    <div class="ms-SearchBox ms-SearchBox--commandBar">
+      <input class="ms-SearchBox-field" type="text" value="">
+      <label class="ms-SearchBox-label">
+        <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+        <span class="ms-SearchBox-text">Search</span> 
+      </label>
+      <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
+        <button class="ms-CommandButton-button">
+          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Cancel"></i></span> 
+          <span class="ms-CommandButton-label"></span> 
+        </button>
+      </div>
+      <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
+        <button class="ms-CommandButton-button">
+          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
+          <span class="ms-CommandButton-label"></span> 
+        </button>
+      </div>
+      <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
+        <button class="ms-CommandButton-button">
+          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
+          <span class="ms-CommandButton-label"></span> 
+        </button>
+      </div>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">New</span> 
+        <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
+      </button>
+      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
+          <i class="ms-Icon ms-Icon--Folder"></i>
+        </li>
+        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
+          <i class="ms-Icon ms-Icon--Page"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
+          <i class="ms-Icon ms-Icon--Coffee"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
+          <i class="ms-Icon ms-Icon--Picture"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
+          <i class="ms-Icon ms-Icon--Money"></i>
+        </li>
+      </ul>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--More"></i></span> 
+        <span class="ms-CommandButton-label"></span> 
+      </button>
+      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
+          <i class="ms-Icon ms-Icon--Folder"></i>
+        </li>
+        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
+          <i class="ms-Icon ms-Icon--Page"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
+          <i class="ms-Icon ms-Icon--Coffee"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
+          <i class="ms-Icon ms-Icon--Picture"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
+          <i class="ms-Icon ms-Icon--Money"></i>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
+  for (var i = 0; i < CommandBarElements.length; i++) {
+    new fabric['CommandBar'](CommandBarElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default CommandBar +
      + +
      +
      +
      + 
      <div class="ms-CommandBar">
+  <div class="ms-CommandBar-sideCommands">
+    <div class="ms-CommandButton ms-CommandButton--noLabel">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label"></span> 
+      </button>
+    </div>
+  </div>
+  <div class="ms-CommandBar-mainArea">
+    <div class="ms-SearchBox ms-SearchBox--commandBar">
+      <input class="ms-SearchBox-field" type="text" value="">
+      <label class="ms-SearchBox-label">
+        <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+        <span class="ms-SearchBox-text">Search</span> 
+      </label>
+      <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
+        <button class="ms-CommandButton-button">
+          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Cancel"></i></span> 
+          <span class="ms-CommandButton-label"></span> 
+        </button>
+      </div>
+      <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
+        <button class="ms-CommandButton-button">
+          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
+          <span class="ms-CommandButton-label"></span> 
+        </button>
+      </div>
+      <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
+        <button class="ms-CommandButton-button">
+          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
+          <span class="ms-CommandButton-label"></span> 
+        </button>
+      </div>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">New</span> 
+        <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
+      </button>
+      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
+          <i class="ms-Icon ms-Icon--Folder"></i>
+        </li>
+        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
+          <i class="ms-Icon ms-Icon--Page"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
+          <i class="ms-Icon ms-Icon--Coffee"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
+          <i class="ms-Icon ms-Icon--Picture"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
+          <i class="ms-Icon ms-Icon--Money"></i>
+        </li>
+      </ul>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--More"></i></span> 
+        <span class="ms-CommandButton-label"></span> 
+      </button>
+      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
+          <i class="ms-Icon ms-Icon--Folder"></i>
+        </li>
+        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
+          <i class="ms-Icon ms-Icon--Page"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
+          <i class="ms-Icon ms-Icon--Coffee"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
+          <i class="ms-Icon ms-Icon--Picture"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
+          <i class="ms-Icon ms-Icon--Money"></i>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
+  for (var i = 0; i < CommandBarElements.length; i++) {
+    new fabric['CommandBar'](CommandBarElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      + +
      +
      +
      + + +
      + + + +
      + +
      + +
      + +
      +
      + +
      +
      + +
      + +
      + +
      + + + +
      + +
      + +
      + +
      + +
      + +
      + +
      + + +
      + + + +
      + +
      +
      +
      +
      +
      +
      + Dropdown CommandBar +
      + +
      +
      +
      + 
      <div class="ms-CommandBar">
+  <div class="ms-CommandBar-mainArea">
+    <div class="ms-CommandButton ms-CommandButton--actionButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--GlobalNavButton"></i></span> 
+        <span class="ms-CommandButton-label"></span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton ms-CommandButton--noLabel">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--Search"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Reply</span> 
+      </button>
+      <button class="ms-CommandButton-splitIcon">
+        <i class="ms-Icon ms-Icon--ChevronDown"></i>
+      </button>
+      <ul class="ms-ContextualMenu is-opened">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Reply</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Reply all</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link is-selected" tabindex="1">Forward</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Flag</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Delete</a> 
+        </li>
+      </ul>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+        <span class="ms-CommandButton-label">Command</span> 
+      </button>
+    </div>
+    <div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--More"></i></span> 
+        <span class="ms-CommandButton-label"></span> 
+      </button>
+      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
+          <i class="ms-Icon ms-Icon--folder"></i>
+        </li>
+        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
+          <i class="ms-Icon ms-Icon--document"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">A Dog</a> 
+          <i class="ms-Icon ms-Icon--dogAlt"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
+          <i class="ms-Icon ms-Icon--sun"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
+          <i class="ms-Icon ms-Icon--Money"></i>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
+  for (var i = 0; i < CommandBarElements.length; i++) {
+    new fabric['CommandBar'](CommandBarElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      + +
      + +
      + +
      + +
      + +
      + +
      + + + + +
      + +
      + +
      + +
      + +
      + + +
      + + + +
      + +
      +
      +
      +
      +
      +
      + Navbar CommandBar +
      + +
      +
      +
      + 
      <div class="ms-CommandBar ms-CommandBar--navBar">
+  <div class="ms-CommandBar-sideCommands">
+    <div class="ms-CommandButton ms-CommandButton--dropdown">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--Settings"></i></span> 
+        <span class="ms-CommandButton-label">Show photos from</span> 
+        <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
+      </button>
+      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
+          <i class="ms-Icon ms-Icon--Folder"></i>
+        </li>
+        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
+          <i class="ms-Icon ms-Icon--Document"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
+          <i class="ms-Icon ms-Icon--Coffee"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
+          <i class="ms-Icon ms-Icon--Picture"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
+          <i class="ms-Icon ms-Icon--Money"></i>
+        </li>
+      </ul>
+    </div>
+    <div class="ms-CommandButton ms-CommandButton--noLabel">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--Info"></i></span> 
+        <span class="ms-CommandButton-label"></span> 
+      </button>
+    </div>
+  </div>
+  <div class="ms-CommandBar-mainArea">
+    <div class="ms-SearchBox ms-SearchBox--commandBar">
+      <input class="ms-SearchBox-field" type="text" value="">
+      <label class="ms-SearchBox-label">
+        <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+        <span class="ms-SearchBox-text">Search photos</span> 
+      </label>
+      <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
+        <button class="ms-CommandButton-button">
+          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Cancel"></i></span> 
+          <span class="ms-CommandButton-label"></span> 
+        </button>
+      </div>
+      <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
+        <button class="ms-CommandButton-button">
+          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
+          <span class="ms-CommandButton-label"></span> 
+        </button>
+      </div>
+      <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
+        <button class="ms-CommandButton-button">
+          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
+          <span class="ms-CommandButton-label"></span> 
+        </button>
+      </div>
+    </div>
+    <div class="ms-CommandButton ms-CommandButton--pivot is-active">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-label">All Photos</span> 
+        <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
+      </button>
+      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
+          <i class="ms-Icon ms-Icon--Folder"></i>
+        </li>
+        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
+          <i class="ms-Icon ms-Icon--Document"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Coffee</a> 
+          <i class="ms-Icon ms-Icon--Coffee"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
+          <i class="ms-Icon ms-Icon--Picture"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
+          <i class="ms-Icon ms-Icon--Money"></i>
+        </li>
+      </ul>
+    </div>
+    <div class="ms-CommandButton ms-CommandButton--pivot">
+      <a class="ms-CommandButton-button"> <span class="ms-CommandButton-label">Albums</span>  </a> 
+    </div>
+    <div class="ms-CommandButton ms-CommandButton--pivot">
+      <a class="ms-CommandButton-button"> <span class="ms-CommandButton-label">Tags</span>  </a> 
+    </div>
+    <div class="ms-CommandButton ms-CommandButton--pivot">
+      <a class="ms-CommandButton-button"> <span class="ms-CommandButton-label">Places</span>  </a> 
+    </div>
+    <div class="ms-CommandButton ms-CommandButton--pivot">
+      <a class="ms-CommandButton-button"> <span class="ms-CommandButton-label">People</span>  </a> 
+    </div>
+    <div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel">
+      <button class="ms-CommandButton-button">
+        <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--More"></i></span> 
+        <span class="ms-CommandButton-label"></span> 
+      </button>
+      <ul class="ms-ContextualMenu is-opened">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
+          <i class="ms-Icon ms-Icon--Folder"></i>
+        </li>
+        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
+          <i class="ms-Icon ms-Icon--Document"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
+          <i class="ms-Icon ms-Icon--Coffee"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
+          <i class="ms-Icon ms-Icon--Picture"></i>
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
+          <i class="ms-Icon ms-Icon--Money"></i>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
+  for (var i = 0; i < CommandBarElements.length; i++) {
+    new fabric['CommandBar'](CommandBarElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      + + + +
      + +
      + +
      +
      +
      + + +
      + + + +
      + +
      + +
      + +
      +
      + +
      +
      + +
      + + + +
      + +
      + +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. +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/CommandButton/CommandButton.html b/dist/documentation/Components/CommandButton/CommandButton.html new file mode 100644 index 00000000..d1083532 --- /dev/null +++ b/dist/documentation/Components/CommandButton/CommandButton.html @@ -0,0 +1,1317 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      CommandButton

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Allows users to take action, such as submitting a form or dismissing a message. Primary use is in command bar or in Callout.

      +
      +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-CommandButton">
+  <button class="ms-CommandButton-button">
+    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+    <span class="ms-CommandButton-label">Command</span> 
+  </button>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default CommandButton +
      + +
      +
      +
      + 
      <div class="ms-CommandButton">
+  <button class="ms-CommandButton-button">
+    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+    <span class="ms-CommandButton-label">Command</span> 
+  </button>
+</div>
      + 
      <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
      +
      +
      + +
      + +
      +
      +
      +
      +
      + Action CommandButton +
      + +
      +
      +
      + 
      <div class="ms-CommandButton ms-CommandButton--actionButton">
+  <button class="ms-CommandButton-button">
+    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+    <span class="ms-CommandButton-label"></span> 
+  </button>
+</div>
      + 
      <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
      +
      +
      + +
      + +
      +
      +
      +
      +
      + Disabled CommandButton +
      + +
      +
      +
      + 
      <div class="ms-CommandButton is-disabled">
+  <button class="ms-CommandButton-button" tabIndex="-1">
+    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+    <span class="ms-CommandButton-label">Command</span> 
+  </button>
+</div>
      + 
      <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
      +
      +
      + +
      + +
      +
      +
      +
      +
      + Dropdown CommandButton +
      + +
      +
      +
      + 
      <div class="ms-CommandButton">
+  <button class="ms-CommandButton-button">
+    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+    <span class="ms-CommandButton-label">New</span> 
+    <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
+  </button>
+  <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
+      <i class="ms-Icon ms-Icon--Folder"></i>
+    </li>
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
+      <i class="ms-Icon ms-Icon--Document"></i>
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Smile</a> 
+      <i class="ms-Icon ms-Icon--Emoji2"></i>
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Globe</a> 
+      <i class="ms-Icon ms-Icon--Globe"></i>
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
+      <i class="ms-Icon ms-Icon--Money"></i>
+    </li>
+  </ul>
+</div>
      + 
      <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
      +
      +
      + +
      + + + +
      +
      +
      +
      +
      + Inline CommandButton +
      + +
      +
      +
      + 
      <div class="ms-CommandButton ms-CommandButton--inline">
+  <button class="ms-CommandButton-button">
+    <span class="ms-CommandButton-icon ms-fontColor-green"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+    <span class="ms-CommandButton-label">Command</span> 
+  </button>
+</div>
      + 
      <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
      +
      +
      + +
      + +
      +
      +
      +
      +
      + No Label Split CommandButton +
      + +
      +
      +
      + 
      <div class="ms-CommandButton ms-CommandButton--noLabel">
+  <button class="ms-CommandButton-button">
+    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+    <span class="ms-CommandButton-label"></span> 
+  </button>
+  <button class="ms-CommandButton-splitIcon">
+    <i class="ms-Icon ms-Icon--ChevronDown"></i>
+  </button>
+  <ul class="ms-ContextualMenu">
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Reply</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Reply all</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Forward</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Flag</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Delete</a> 
+    </li>
+  </ul>
+</div>
      + 
      <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
      +
      +
      + +
      + + + + +
      +
      +
      +
      +
      + Pivot CommandButton +
      + +
      +
      +
      + 
      <div class="ms-CommandButton ms-CommandButton--pivot is-active">
+  <button class="ms-CommandButton-button">
+    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+    <span class="ms-CommandButton-label">New</span> 
+    <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
+  </button>
+</div>
      + 
      <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
      +
      +
      + +
      + +
      +
      +
      +
      +
      + Split CommandButton +
      + +
      +
      +
      + 
      <div class="ms-CommandButton">
+  <button class="ms-CommandButton-button">
+    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
+    <span class="ms-CommandButton-label">Reply</span> 
+  </button>
+  <button class="ms-CommandButton-splitIcon">
+    <i class="ms-Icon ms-Icon--ChevronDown"></i>
+  </button>
+  <ul class="ms-ContextualMenu is-opened">
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Reply</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Reply all</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Forward</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Flag</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Delete</a> 
+    </li>
+  </ul>
+</div>
      + 
      <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
      +
      +
      + +
      + + + + +
      +
      +
      +
      +
      + Text Only CommandButton +
      + +
      +
      +
      + 
      <div class="ms-CommandButton ms-CommandButton--TextOnly">
+  <button class="ms-CommandButton-button">
+    <span class="ms-CommandButton-label">Command</span> 
+  </button>
+</div>
      + 
      <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for (var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
      +
      +
      + +
      + +
      +
      +
      +
      +
      +

      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. +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/ContextualMenu/ContextualMenu.html b/dist/documentation/Components/ContextualMenu/ContextualMenu.html new file mode 100644 index 00000000..ea99ab88 --- /dev/null +++ b/dist/documentation/Components/ContextualMenu/ContextualMenu.html @@ -0,0 +1,1318 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      ContextualMenu

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places.

      +

      There are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons.

      +

      Organize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-ContextualMenuExample">
+  <button class="ms-Button ms-Button--primary">
+    <span class="ms-Button-label">Open Example</span> 
+  </button>
+  <ul class="ms-ContextualMenu is-hidden">
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Animals</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Books</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Education</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Music</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Sports</a> 
+    </li>
+  </ul>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
+  for (var i = 0; i < ContextualMenuElements.length; i++) {
+    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
+    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
+    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default ContextualMenu +
      + +
      +
      +
      + 
      <div class="ms-ContextualMenuExample">
+  <button class="ms-Button ms-Button--primary">
+    <span class="ms-Button-label">Open Example</span> 
+  </button>
+  <ul class="ms-ContextualMenu is-hidden">
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Animals</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Books</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Education</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Music</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Sports</a> 
+    </li>
+  </ul>
+</div>
      + 
      <script type="text/javascript">
+  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
+  for (var i = 0; i < ContextualMenuElements.length; i++) {
+    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
+    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
+    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
+  }
+</script>
      +
      +
      +
      + + +
      +
      +
      +
      +
      + Multiselect ContextualMenu +
      + +
      +
      +
      + 
      <div class="ms-ContextualMenuExample">
+  <button class="ms-Button ms-Button--primary">
+    <span class="ms-Button-label">Open Example</span> 
+  </button>
+  <ul class="ms-ContextualMenu is-hidden ms-ContextualMenu--multiselect">
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--header">SORT BY</li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Date</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Sender</a> 
+    </li>
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--header">ORDER</li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Newest on top</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Oldest on top</a> 
+    </li>
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--header">CONVERSATIONS</li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">On</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Off</a> 
+    </li>
+  </ul>
+</div>
      + 
      <script type="text/javascript">
+  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
+  for (var i = 0; i < ContextualMenuElements.length; i++) {
+    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
+    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
+    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
+  }
+</script>
      +
      +
      +
      + + +
      +
      +
      +
      +
      + Submenu ContextualMenu +
      + +
      +
      +
      + 
      <div class="ms-ContextualMenuExample">
+  <button class="ms-Button ms-Button--primary">
+    <span class="ms-Button-label">Open Example</span> 
+  </button>
+  <ul class="ms-ContextualMenu is-hidden">
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Animals</a> 
+    </li>
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--hasMenu">
+      <a class="ms-ContextualMenu-link" tabindex="1">Books</a> 
+      <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--ChevronRight"></i>
+      <ul class="ms-ContextualMenu is-hidden">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Fiction</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Humor</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link is-selected" tabindex="1">Magazines</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Non-fiction</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Textbooks</a> 
+        </li>
+      </ul>
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Education</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Music</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Sports</a> 
+    </li>
+  </ul>
+</div>
      + 
      <script type="text/javascript">
+  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
+  for (var i = 0; i < ContextualMenuElements.length; i++) {
+    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
+    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
+    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
+  }
+</script>
      +
      +
      +
      + + +
      +
      +
      +
      +
      + Dividers ContextualMenu +
      + +
      +
      +
      + 
      <div class="ms-ContextualMenuExample">
+  <button class="ms-Button ms-Button--primary">
+    <span class="ms-Button-label">Open Example</span> 
+  </button>
+  <ul class="ms-ContextualMenu is-hidden">
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Delete</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Flag</a> 
+    </li>
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Important</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link" tabindex="1">Move</a> 
+    </li>
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--hasMenu">
+      <a class="ms-ContextualMenu-link" tabindex="1">Move</a> 
+      <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--ChevronRight"></i>
+      <ul class="ms-ContextualMenu is-hidden">
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Fiction</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Humor</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link is-selected" tabindex="1">Magazines</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Non-fiction</a> 
+        </li>
+        <li class="ms-ContextualMenu-item">
+          <a class="ms-ContextualMenu-link" tabindex="1">Textbooks</a> 
+        </li>
+      </ul>
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Create Rule...</a> 
+    </li>
+    <li class="ms-ContextualMenu-item">
+      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Verdana</a> 
+    </li>
+  </ul>
+</div>
      + 
      <script type="text/javascript">
+  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
+  for (var i = 0; i < ContextualMenuElements.length; i++) {
+    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
+    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
+    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
+  }
+</script>
      +
      +
      +
      + + +
      +
      +
      +
      +
      +

      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. +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/DatePicker/DatePicker.html b/dist/documentation/Components/DatePicker/DatePicker.html new file mode 100644 index 00000000..516181e3 --- /dev/null +++ b/dist/documentation/Components/DatePicker/DatePicker.html @@ -0,0 +1,1034 @@ + + + + + Office UI Fabric JS + + + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      DatePicker

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      The DatePicker component enables a user to pick a date value.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery and PickaDate.js library:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="jquery.min.js"></script>
+<script src="fabric.min.js"></script>
+<script src="PickaDate.js"></script>
+
        +
        +
        +
        2. +
      2. +

        Copy the HTML from one of the samples below 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 Fabric's JS, to instantiate all DatePicker components on the page:

        + 
        <script type="text/javascript">
+  var DatePickerElements = document.querySelectorAll(".ms-DatePicker");
+  for (var i = 0; i < DatePickerElements.length; i++) {
+    new fabric['DatePicker'](DatePickerElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default DatePicker +
      + +
      +
      +
      + 
      <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>
      + 
      <script type="text/javascript">
+  var DatePickerElements = document.querySelectorAll(".ms-DatePicker");
+  for (var i = 0; i < DatePickerElements.length; i++) {
+    new fabric['DatePicker'](DatePickerElements[i]);
+  }
+</script>
      +
      +
      + + + +
      +
      + + + +
      +
      + + +
      +
      + Go to today +
      +
      +
      + + +
      +
      +
      +
      + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
      +
      +
      +
      + + +
      +
      +
      + +
      +
      +
      +
      +

      Methods

      + + + + + + + + + + + + + + + + + + + + +
      NameParametersDescription
      picker.set('select', dateArr);

      dateArr: {Array} The new date in [YEAR, MONTH, DATE] format

      +      		 +
      + Selects a new date in the component. Must be used on component's picker property (DatePicker.picker). +
      +
      picker.set('highlight', dateArr);

      dateArr: {Array} The new date in [YEAR, MONTH, DATE] format

      +      		 +
      + Highlights a new date in the component. Must be used on component's picker property (DatePicker.picker). +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Dialog/Dialog.html b/dist/documentation/Components/Dialog/Dialog.html new file mode 100644 index 00000000..403865f7 --- /dev/null +++ b/dist/documentation/Components/Dialog/Dialog.html @@ -0,0 +1,1680 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Dialog

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. They are primarily used for lightweight creation or edit tasks, and simple management tasks.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="docs-DialogExample-default">
+  <div class="ms-Dialog">
+    <div class="ms-Dialog-title">All emails together</div>
+    <div class="ms-Dialog-content">
+      <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
+      <div class="ms-CheckBox">
+        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+          <span class="ms-Label">Option1</span> 
+        </label>
+      </div>
+      <div class="ms-CheckBox">
+        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+          <span class="ms-Label">Option2</span> 
+        </label>
+      </div>
+    </div>
+    <div class="ms-Dialog-actions">
+      <button class="ms-Button ms-Dialog-action ms-Button--primary">
+        <span class="ms-Button-label">Save</span> 
+      </button>
+      <button class="ms-Button ms-Dialog-action">
+        <span class="ms-Button-label">Cancel</span> 
+      </button>
+    </div>
+  </div>
+  <button class="ms-Button docs-DialogExample-button">Open Dialog</button>
+  <label class="docs-DialogExample-label"></label>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var DialogElements = document.querySelectorAll(".ms-Dialog");
+  var DialogComponents = [];
+  for (var i = 0; i < DialogElements.length; i++) {
+    (function() {
+      DialogComponents[i] = new fabric['Dialog'](DialogElements[i]);
+    }());
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default Dialog +
      + +
      +
      +
      + 
      <div class="docs-DialogExample-default">
+  <div class="ms-Dialog">
+    <div class="ms-Dialog-title">All emails together</div>
+    <div class="ms-Dialog-content">
+      <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
+      <div class="ms-CheckBox">
+        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+          <span class="ms-Label">Option1</span> 
+        </label>
+      </div>
+      <div class="ms-CheckBox">
+        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+          <span class="ms-Label">Option2</span> 
+        </label>
+      </div>
+    </div>
+    <div class="ms-Dialog-actions">
+      <button class="ms-Button ms-Dialog-action ms-Button--primary">
+        <span class="ms-Button-label">Save</span> 
+      </button>
+      <button class="ms-Button ms-Dialog-action">
+        <span class="ms-Button-label">Cancel</span> 
+      </button>
+    </div>
+  </div>
+  <button class="ms-Button docs-DialogExample-button">Open Dialog</button>
+  <label class="docs-DialogExample-label"></label>
+</div>
      + 
      <script type="text/javascript">
+  (function() {
+    var example = document.querySelector(".docs-DialogExample-default");
+    var button = example.querySelector(".docs-DialogExample-button");
+    var dialog = example.querySelector(".ms-Dialog");
+    var label = example.querySelector(".docs-DialogExample-label")
+    var checkBoxElements = example.querySelectorAll(".ms-CheckBox");
+    var actionButtonElements = example.querySelectorAll(".ms-Dialog-action");
+    var checkBoxComponents = [];
+    var actionButtonComponents = [];
+    // Wire up the dialog
+    var dialogComponent = new fabric['Dialog'](dialog);
+    // Wire up the checkBoxes
+    for (var i = 0; i < checkBoxElements.length; i++) {
+      checkBoxComponents[i] = new fabric['CheckBox'](checkBoxElements[i]);
+    }
+    // Wire up the buttons
+    for (var i = 0; i < actionButtonElements.length; i++) {
+      actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler);
+    }
+    // When clicking the button, open the dialog
+    button.onclick = function() {
+      openDialog(dialog);
+    };
+    function actionHandler(event) {
+      var labelText = "";
+      var counter = 0;
+      for (var i = 0; i < checkBoxComponents.length; i++) {
+        if (checkBoxComponents[i].getValue()) {
+          counter++;
+        }
+      }
+      labelText += counter + " option(s) selected. " + this.innerText.trim() + " clicked";
+      label.innerText = labelText;
+    }
+    function openDialog(dialog) {
+      // Open the dialog
+      dialogComponent.open();
+    }
+  }());
+</script>
      +
      +
      +
      + +
      +
      All emails together
      +
      +

      Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

      + +
      + + +
      + +
      + + +
      +
      +
      + + + + +
      +
      + +
      + + +
      +
      +
      +
      + Multiline Dialog +
      + +
      +
      +
      + 
      <div class="docs-DialogExample-multiline">
+  <div class="ms-Dialog ms-Dialog--multiline">
+    <div class="ms-Dialog-title">All emails together</div>
+    <div class="ms-Dialog-content">
+      <button class="ms-Button ms-Dialog-action ms-Button--compound">
+        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--Add"></i></span> 
+        <span class="ms-Button-label">Create Account</span> 
+        <span class="ms-Button-description">Description of this action this button takes</span> 
+      </button>
+      <button class="ms-Button ms-Dialog-action ms-Button--compound">
+        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--Add"></i></span> 
+        <span class="ms-Button-label">Sign in</span> 
+        <span class="ms-Button-description">Description of this action this button takes</span> 
+      </button>
+      <button class="ms-Button ms-Dialog-action ms-Button--compound">
+        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--Add"></i></span> 
+        <span class="ms-Button-label">Settings</span> 
+        <span class="ms-Button-description">Description of this action this button takes</span> 
+      </button>
+    </div>
+  </div>
+  <button class="ms-Button docs-DialogExample-button">Open Dialog</button>
+  <label class="docs-DialogExample-label"></label>
+</div>
      + 
      <script type="text/javascript">
+  (function() {
+    var example = document.querySelector(".docs-DialogExample-multiline");
+    var button = example.querySelector(".docs-DialogExample-button");
+    var dialog = example.querySelector(".ms-Dialog");
+    var label = example.querySelector(".docs-DialogExample-label")
+    var actionButtonElements = example.querySelectorAll(".ms-Dialog-action");
+    var actionButtonComponents = [];
+    // Wire up the dialog
+    var dialogComponent = new fabric['Dialog'](dialog);
+    // Wire up the buttons
+    for (var i = 0; i < actionButtonElements.length; i++) {
+      actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler);
+    }
+    // When clicking the button, open the dialog
+    button.onclick = function() {
+      openDialog(dialog);
+    };
+    function actionHandler(event) {
+      label.innerText = this.querySelector(".ms-Button-label").innerText.trim() + " clicked";
+    }
+    function openDialog(dialog) {
+      // Open the dialog
+      dialogComponent.open();
+    }
+  }());
+</script>
      +
      +
      +
      + +
      +
      All emails together
      +
      + + + + + + +
      +
      + +
      + + +
      +
      +
      +
      + Large Header Dialog +
      + +
      +
      +
      + 
      <div class="docs-DialogExample-lgHeader">
+  <div class="ms-Dialog ms-Dialog--lgHeader">
+    <div class="ms-Dialog-title">All emails together</div>
+    <div class="ms-Dialog-content">
+      <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
+    </div>
+    <div class="ms-Dialog-actions">
+      <button class="ms-Button ms-Dialog-action ms-Button--primary">
+        <span class="ms-Button-label">Save</span> 
+      </button>
+      <button class="ms-Button ms-Dialog-action">
+        <span class="ms-Button-label">Cancel</span> 
+      </button>
+    </div>
+  </div>
+  <button class="ms-Button docs-DialogExample-button">Open Dialog</button>
+  <label class="docs-DialogExample-label"></label>
+</div>
      + 
      <script type="text/javascript">
+  (function() {
+    var example = document.querySelector(".docs-DialogExample-lgHeader");
+    var button = example.querySelector(".docs-DialogExample-button");
+    var dialog = example.querySelector(".ms-Dialog");
+    var label = example.querySelector(".docs-DialogExample-label")
+    var actionButtonElements = example.querySelectorAll(".ms-Dialog-action");
+    var actionButtonComponents = [];
+    // Wire up the dialog
+    var dialogComponent = new fabric['Dialog'](dialog);
+    // Wire up the buttons
+    for (var i = 0; i < actionButtonElements.length; i++) {
+      actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler);
+    }
+    // When clicking the button, open the dialog
+    button.onclick = function() {
+      openDialog(dialog);
+    };
+    function actionHandler(event) {
+      label.innerText = this.innerText.trim() + " clicked";
+    }
+    function openDialog(dialog) {
+      // Open the dialog
+      dialogComponent.open();
+    }
+  }());
+</script>
      +
      +
      +
      + +
      +
      All emails together
      +
      +

      Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

      +
      +
      + + + + +
      +
      + +
      + +
      +
      +
      +
      + Blocking Dialog +
      + +
      +
      +
      + 
      <div class="docs-DialogExample-blocking">
+  <div class="ms-Dialog ms-Dialog--blocking">
+    <div class="ms-Dialog-title">Unsaved changes</div>
+    <div class="ms-Dialog-content">
+      <p class="ms-Dialog-subText">Are you sure you want to discard these changes?.</p>
+      <div class="ms-CheckBox">
+        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+          <span class="ms-Label">Option1</span> 
+        </label>
+      </div>
+      <div class="ms-CheckBox">
+        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+          <span class="ms-Label">Option2</span> 
+        </label>
+      </div>
+    </div>
+    <div class="ms-Dialog-actions">
+      <button class="ms-Button ms-Dialog-action ms-Button--primary">
+        <span class="ms-Button-label">Save</span> 
+      </button>
+      <button class="ms-Button ms-Dialog-action">
+        <span class="ms-Button-label">Delete</span> 
+      </button>
+    </div>
+  </div>
+  <button class="ms-Button docs-DialogExample-button">Open Dialog</button>
+  <label class="docs-DialogExample-label"></label>
+</div>
      + 
      <script type="text/javascript">
+  (function() {
+    var example = document.querySelector(".docs-DialogExample-blocking");
+    var button = example.querySelector(".docs-DialogExample-button");
+    var dialog = example.querySelector(".ms-Dialog");
+    var label = example.querySelector(".docs-DialogExample-label")
+    var checkBoxElements = example.querySelectorAll(".ms-CheckBox");
+    var actionButtonElements = example.querySelectorAll(".ms-Dialog-action");
+    var checkBoxComponents = [];
+    var actionButtonComponents = [];
+    // Wire up the dialog
+    var dialogComponent = new fabric['Dialog'](dialog);
+    // Wire up the checkBoxes
+    for (var i = 0; i < checkBoxElements.length; i++) {
+      checkBoxComponents[i] = new fabric['CheckBox'](checkBoxElements[i]);
+    }
+    // Wire up the buttons
+    for (var i = 0; i < actionButtonElements.length; i++) {
+      actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler);
+    }
+    // When clicking the button, open the dialog
+    button.onclick = function() {
+      dialogComponent.open();
+    };
+    function actionHandler(event) {
+      var labelText = "";
+      var counter = 0;
+      for (var i = 0; i < checkBoxComponents.length; i++) {
+        if (checkBoxComponents[i].getValue()) {
+          counter++;
+        }
+      }
+      labelText += counter + " option(s) selected. " + this.innerText.trim() + " clicked";
+      label.innerText = labelText;
+    }
+  }());
+</script>
      +
      +
      +
      + +
      +
      Unsaved changes
      +
      +

      Are you sure you want to discard these changes?.

      + +
      + + +
      + +
      + + +
      +
      +
      + + + + +
      +
      + +
      + + +
      +
      +
      +
      + Close Dialog +
      + +
      +
      +
      + 
      <div class="docs-DialogExample-close">
+  <div class="ms-Dialog ms-Dialog--close">
+    <button class="ms-Dialog-button ms-Dialog-buttonClose">
+      <i class="ms-Icon ms-Icon--Cancel"></i>
+    </button>
+    <div class="ms-Dialog-title">All emails together</div>
+    <div class="ms-Dialog-content">
+      <div class="ms-CheckBox">
+        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+          <span class="ms-Label">Option1</span> 
+        </label>
+      </div>
+      <div class="ms-CheckBox">
+        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
+          <span class="ms-Label">Option2</span> 
+        </label>
+      </div>
+    </div>
+    <div class="ms-Dialog-actions">
+      <button class="ms-Button ms-Dialog-action ms-Button--primary">
+        <span class="ms-Button-label">Save</span> 
+      </button>
+      <button class="ms-Button ms-Dialog-action">
+        <span class="ms-Button-label">Cancel</span> 
+      </button>
+    </div>
+  </div>
+  <button class="ms-Button docs-DialogExample-button">Open Dialog</button>
+  <label class="docs-DialogExample-label"></label>
+</div>
      + 
      <script type="text/javascript">
+  (function() {
+    var example = document.querySelector(".docs-DialogExample-close");
+    var button = example.querySelector(".docs-DialogExample-button");
+    var dialog = example.querySelector(".ms-Dialog");
+    var label = example.querySelector(".docs-DialogExample-label")
+    var checkBoxElements = example.querySelectorAll(".ms-CheckBox");
+    var actionButtonElements = example.querySelectorAll(".ms-Dialog-action");
+    var checkBoxComponents = [];
+    var actionButtonComponents = [];
+    // Wire up the dialog
+    var dialogComponent = new fabric['Dialog'](dialog);
+    // Wire up the checkBoxes
+    for (var i = 0; i < checkBoxElements.length; i++) {
+      checkBoxComponents[i] = new fabric['CheckBox'](checkBoxElements[i]);
+    }
+    // Wire up the buttons
+    for (var i = 0; i < actionButtonElements.length; i++) {
+      actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler);
+    }
+    // When clicking the button, open the dialog
+    button.onclick = function() {
+      openDialog(dialog);
+    };
+    function actionHandler(event) {
+      var labelText = "";
+      var counter = 0;
+      for (var i = 0; i < checkBoxComponents.length; i++) {
+        if (checkBoxComponents[i].getValue()) {
+          counter++;
+        }
+      }
+      labelText += counter + " option(s) selected. " + this.innerText.trim() + " clicked";
+      label.innerText = labelText;
+    }
+    function openDialog(dialog) {
+      // Open the dialog
+      dialogComponent.open();
+    }
+  }());
+</script>
      +
      +
      +
      + +
      + +
      All emails together
      +
      + +
      + + +
      + +
      + + +
      +
      +
      + + + + +
      +
      + +
      + + +
      +
      +
      +
      +

      Methods

      + + + + + + + + + + + + + + + + + + + + +
      NameParametersDescription
      open()

      None

      +      		 +
      + Opens the component +
      +
      close()

      None

      +      		 +
      + Closes the component +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Dropdown/Dropdown.html b/dist/documentation/Components/Dropdown/Dropdown.html new file mode 100644 index 00000000..c1e7dda4 --- /dev/null +++ b/dist/documentation/Components/Dropdown/Dropdown.html @@ -0,0 +1,971 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Dropdown

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-Dropdown" tabindex="0">
+  <label class="ms-Label">Dropdown label</label>
+  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
+  <select class="ms-Dropdown-select">
+    <option>Choose a sound&amp;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, below the references to Fabric's JS, to instantiate all Dropdown components on the page:

        + 
        <script type="text/javascript">
+  var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
+  for (var i = 0; i < DropdownHTMLElements.length; ++i) {
+    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default Dropdown +
      + +
      +
      +
      + 
      <div class="ms-Dropdown" tabindex="0">
+  <label class="ms-Label">Dropdown label</label>
+  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
+  <select class="ms-Dropdown-select">
+    <option>Choose a sound&amp;hellip;</option>
+    <option>Dog barking</option>
+    <option>Wind blowing</option>
+    <option>Duck quacking</option>
+    <option>Cow mooing</option>
+  </select>
+</div>
      + 
      <script type="text/javascript">
+  var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
+  for (var i = 0; i < DropdownHTMLElements.length; ++i) {
+    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
+  }
+</script>
      +
      +
      + + + +
      + + + +
      +
      +
      +
      +
      + Disabled Dropdown +
      + +
      +
      +
      + 
      <div class="ms-Dropdown is-disabled" tabindex="0">
+  <label class="ms-Label">Dropdown label</label>
+  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
+  <select class="ms-Dropdown-select">
+    <option>Choose a sound&amp;hellip;</option>
+    <option>Dog barking</option>
+    <option>Wind blowing</option>
+    <option>Duck quacking</option>
+    <option>Cow mooing</option>
+  </select>
+</div>
      + 
      <script type="text/javascript">
+  var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
+  for (var i = 0; i < DropdownHTMLElements.length; ++i) {
+    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
+  }
+</script>
      +
      +
      + + + +
      + + + +
      +
      +
      +
      +
      +

      States

      + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-disabled.ms-Dropdown +
      + Disables the dropdown. +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/FacePile/FacePile.html b/dist/documentation/Components/FacePile/FacePile.html new file mode 100644 index 00000000..9a1c9e4b --- /dev/null +++ b/dist/documentation/Components/FacePile/FacePile.html @@ -0,0 +1,2167 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      FacePile

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-FacePile">
+  <button class="ms-FacePile-addButton ms-FacePile-addButton--addPerson">
+    <i class="ms-FacePile-addPersonIcon ms-Icon ms-Icon--AddFriend"></i>
+  </button>
+  <div class="ms-Persona ms-Persona--facePile">
+    <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+      <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+    </div>
+    <div class="ms-Persona-presence">
+    </div>
+    <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Alton Lafferty</div>
+      <div class="ms-Persona-secondaryText">Accountant</div>
+    </div>
+    <div class="ms-PersonaCard">
+      <div class="ms-PersonaCard-persona">
+        <div class="ms-Persona ms-Persona--lg">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+            <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Alton Lafferty</div>
+            <div class="ms-Persona-secondaryText">Accountant</div>
+            <div class="ms-Persona-tertiaryText">In a meeting</div>
+            <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+          </div>
+        </div>
+      </div>
+      <ul class="ms-PersonaCard-actions">
+        <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
+          <i class="ms-Icon ms-Icon--Chat"></i>
+        </li>
+        <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
+          <i class="ms-Icon ms-Icon--Phone"></i>
+        </li>
+        <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
+          <i class="ms-Icon ms-Icon--Video"></i>
+        </li>
+        <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
+          <i class="ms-Icon ms-Icon--Mail"></i>
+        </li>
+        <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
+        <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
+          <i class="ms-Icon ms-Icon--Org"></i>
+        </li>
+      </ul>
+      <div class="ms-PersonaCard-actionDetailBox">
+        <div data-detail-id="mail" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
+            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
+          </div>
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
+            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
+          </div>
+        </div>
+        <div data-detail-id="chat" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
+            <a class="ms-Link" href="#">Start Lync call</a> 
+          </div>
+        </div>
+        <div data-detail-id="phone" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailExpander"></div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Details</span> 
+          </div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
+          </div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
+          </div>
+        </div>
+        <div data-detail-id="video" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
+            <a class="ms-Link" href="#">Start Skype call</a> 
+          </div>
+        </div>
+        <div data-detail-id="org" class="ms-PersonaCard-details">
+          <div class="ms-OrgChart">
+            <div class="ms-OrgChart-group">
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Russel Miller</div>
+                        <div class="ms-Persona-secondaryText">Sales</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                        <div class="ms-Persona-secondaryText">Public Relations</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div class="ms-OrgChart-group">
+              <div class="ms-OrgChart-groupTitle">Manager</div>
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Grant Steel</div>
+                        <div class="ms-Persona-secondaryText">Sales</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div class="ms-OrgChart-group">
+              <div class="ms-OrgChart-groupTitle">Staff</div>
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                        <div class="ms-Persona-secondaryText">Public Relations</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                        <div class="ms-Persona-secondaryText">Technical Support</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Marcel Groce</div>
+                        <div class="ms-Persona-secondaryText">Delivery</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                        <div class="ms-Persona-secondaryText">Marketing</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ms-Persona ms-Persona--facePile">
+    <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
+    </div>
+    <div class="ms-Persona-presence">
+    </div>
+    <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Marcus Lauer</div>
+      <div class="ms-Persona-secondaryText">Accountant</div>
+    </div>
+    <div class="ms-PersonaCard">
+      <div class="ms-PersonaCard-persona">
+        <div class="ms-Persona ms-Persona--lg">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Marcus Lauer</div>
+            <div class="ms-Persona-secondaryText">Accountant</div>
+            <div class="ms-Persona-tertiaryText">In a meeting</div>
+            <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+          </div>
+        </div>
+      </div>
+      <ul class="ms-PersonaCard-actions">
+        <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
+          <i class="ms-Icon ms-Icon--Chat"></i>
+        </li>
+        <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
+          <i class="ms-Icon ms-Icon--Phone"></i>
+        </li>
+        <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
+          <i class="ms-Icon ms-Icon--Video"></i>
+        </li>
+        <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
+          <i class="ms-Icon ms-Icon--Mail"></i>
+        </li>
+        <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
+        <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
+          <i class="ms-Icon ms-Icon--Org"></i>
+        </li>
+      </ul>
+      <div class="ms-PersonaCard-actionDetailBox">
+        <div data-detail-id="mail" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
+            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
+          </div>
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
+            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
+          </div>
+        </div>
+        <div data-detail-id="chat" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
+            <a class="ms-Link" href="#">Start Lync call</a> 
+          </div>
+        </div>
+        <div data-detail-id="phone" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailExpander"></div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Details</span> 
+          </div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
+          </div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
+          </div>
+        </div>
+        <div data-detail-id="video" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
+            <a class="ms-Link" href="#">Start Skype call</a> 
+          </div>
+        </div>
+        <div data-detail-id="org" class="ms-PersonaCard-details">
+          <div class="ms-OrgChart">
+            <div class="ms-OrgChart-group">
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Russel Miller</div>
+                        <div class="ms-Persona-secondaryText">Sales</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                        <div class="ms-Persona-secondaryText">Public Relations</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div class="ms-OrgChart-group">
+              <div class="ms-OrgChart-groupTitle">Manager</div>
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Grant Steel</div>
+                        <div class="ms-Persona-secondaryText">Sales</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div class="ms-OrgChart-group">
+              <div class="ms-OrgChart-groupTitle">Staff</div>
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                        <div class="ms-Persona-secondaryText">Public Relations</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                        <div class="ms-Persona-secondaryText">Technical Support</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Marcel Groce</div>
+                        <div class="ms-Persona-secondaryText">Delivery</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                        <div class="ms-Persona-secondaryText">Marketing</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button class="ms-FacePile-addButton ms-FacePile-addButton--overflow">
+    <span class="ms-FacePile-overflowText">+3</span> 
+  </button>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var FacePileElements = document.querySelectorAll(".ms-FacePile");
+  for (var i = 0; i < FacePileElements.length; i++) {
+    new fabric['FacePile'](FacePileElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default FacePile +
      + +
      +
      +
      + 
      <div class="ms-FacePile">
+  <button class="ms-FacePile-addButton ms-FacePile-addButton--addPerson">
+    <i class="ms-FacePile-addPersonIcon ms-Icon ms-Icon--AddFriend"></i>
+  </button>
+  <div class="ms-Persona ms-Persona--facePile">
+    <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+      <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+    </div>
+    <div class="ms-Persona-presence">
+    </div>
+    <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Alton Lafferty</div>
+      <div class="ms-Persona-secondaryText">Accountant</div>
+    </div>
+    <div class="ms-PersonaCard">
+      <div class="ms-PersonaCard-persona">
+        <div class="ms-Persona ms-Persona--lg">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+            <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Alton Lafferty</div>
+            <div class="ms-Persona-secondaryText">Accountant</div>
+            <div class="ms-Persona-tertiaryText">In a meeting</div>
+            <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+          </div>
+        </div>
+      </div>
+      <ul class="ms-PersonaCard-actions">
+        <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
+          <i class="ms-Icon ms-Icon--Chat"></i>
+        </li>
+        <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
+          <i class="ms-Icon ms-Icon--Phone"></i>
+        </li>
+        <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
+          <i class="ms-Icon ms-Icon--Video"></i>
+        </li>
+        <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
+          <i class="ms-Icon ms-Icon--Mail"></i>
+        </li>
+        <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
+        <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
+          <i class="ms-Icon ms-Icon--Org"></i>
+        </li>
+      </ul>
+      <div class="ms-PersonaCard-actionDetailBox">
+        <div data-detail-id="mail" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
+            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
+          </div>
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
+            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
+          </div>
+        </div>
+        <div data-detail-id="chat" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
+            <a class="ms-Link" href="#">Start Lync call</a> 
+          </div>
+        </div>
+        <div data-detail-id="phone" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailExpander"></div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Details</span> 
+          </div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
+          </div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
+          </div>
+        </div>
+        <div data-detail-id="video" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
+            <a class="ms-Link" href="#">Start Skype call</a> 
+          </div>
+        </div>
+        <div data-detail-id="org" class="ms-PersonaCard-details">
+          <div class="ms-OrgChart">
+            <div class="ms-OrgChart-group">
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Russel Miller</div>
+                        <div class="ms-Persona-secondaryText">Sales</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                        <div class="ms-Persona-secondaryText">Public Relations</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div class="ms-OrgChart-group">
+              <div class="ms-OrgChart-groupTitle">Manager</div>
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Grant Steel</div>
+                        <div class="ms-Persona-secondaryText">Sales</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div class="ms-OrgChart-group">
+              <div class="ms-OrgChart-groupTitle">Staff</div>
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                        <div class="ms-Persona-secondaryText">Public Relations</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                        <div class="ms-Persona-secondaryText">Technical Support</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Marcel Groce</div>
+                        <div class="ms-Persona-secondaryText">Delivery</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                        <div class="ms-Persona-secondaryText">Marketing</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ms-Persona ms-Persona--facePile">
+    <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
+    </div>
+    <div class="ms-Persona-presence">
+    </div>
+    <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Marcus Lauer</div>
+      <div class="ms-Persona-secondaryText">Accountant</div>
+    </div>
+    <div class="ms-PersonaCard">
+      <div class="ms-PersonaCard-persona">
+        <div class="ms-Persona ms-Persona--lg">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Marcus Lauer</div>
+            <div class="ms-Persona-secondaryText">Accountant</div>
+            <div class="ms-Persona-tertiaryText">In a meeting</div>
+            <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+          </div>
+        </div>
+      </div>
+      <ul class="ms-PersonaCard-actions">
+        <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
+          <i class="ms-Icon ms-Icon--Chat"></i>
+        </li>
+        <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
+          <i class="ms-Icon ms-Icon--Phone"></i>
+        </li>
+        <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
+          <i class="ms-Icon ms-Icon--Video"></i>
+        </li>
+        <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
+          <i class="ms-Icon ms-Icon--Mail"></i>
+        </li>
+        <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
+        <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
+          <i class="ms-Icon ms-Icon--Org"></i>
+        </li>
+      </ul>
+      <div class="ms-PersonaCard-actionDetailBox">
+        <div data-detail-id="mail" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
+            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
+          </div>
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
+            <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
+          </div>
+        </div>
+        <div data-detail-id="chat" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
+            <a class="ms-Link" href="#">Start Lync call</a> 
+          </div>
+        </div>
+        <div data-detail-id="phone" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailExpander"></div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Details</span> 
+          </div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
+          </div>
+          <div class="ms-PersonaCard-detailLine">
+            <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
+          </div>
+        </div>
+        <div data-detail-id="video" class="ms-PersonaCard-details">
+          <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
+            <a class="ms-Link" href="#">Start Skype call</a> 
+          </div>
+        </div>
+        <div data-detail-id="org" class="ms-PersonaCard-details">
+          <div class="ms-OrgChart">
+            <div class="ms-OrgChart-group">
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Russel Miller</div>
+                        <div class="ms-Persona-secondaryText">Sales</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                        <div class="ms-Persona-secondaryText">Public Relations</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div class="ms-OrgChart-group">
+              <div class="ms-OrgChart-groupTitle">Manager</div>
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Grant Steel</div>
+                        <div class="ms-Persona-secondaryText">Sales</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div class="ms-OrgChart-group">
+              <div class="ms-OrgChart-groupTitle">Staff</div>
+              <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                        <div class="ms-Persona-secondaryText">Public Relations</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                        <div class="ms-Persona-secondaryText">Technical Support</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Marcel Groce</div>
+                        <div class="ms-Persona-secondaryText">Delivery</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    <div class="ms-Persona">
+                      <div class="ms-Persona-imageArea">
+                        <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                      </div>
+                      <div class="ms-Persona-presence">
+                      </div>
+                      <div class="ms-Persona-details">
+                        <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                        <div class="ms-Persona-secondaryText">Marketing</div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button class="ms-FacePile-addButton ms-FacePile-addButton--overflow">
+    <span class="ms-FacePile-overflowText">+3</span> 
+  </button>
+</div>
      + 
      <script type="text/javascript">
+  var FacePileElements = document.querySelectorAll(".ms-FacePile");
+  for (var i = 0; i < FacePileElements.length; i++) {
+    new fabric['FacePile'](FacePileElements[i]);
+  }
+</script>
      +
      +
      + + +
      + + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      + +
      +
      + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
        +
        • +
        • +
        • +
        • +
      • View profile
        • +
        • +
      +
      +
      +
      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
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      +
      +
      ML
      +
      +
      +
      +
      +
      Marcus Lauer
      +
      Accountant
      +
      + +
      +
      + +
      +
      +
      ML
      +
      +
      +
      +
      +
      Marcus Lauer
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
        +
        • +
        • +
        • +
        • +
      • View profile
        • +
        • +
      +
      +
      +
      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
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +

      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. +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Label/Label.html b/dist/documentation/Components/Label/Label.html new file mode 100644 index 00000000..ba33667f --- /dev/null +++ b/dist/documentation/Components/Label/Label.html @@ -0,0 +1,915 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Label

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <label class="ms-Label">Name</label>
        +
        3. +
      3. +

        Replace the sample HTML content with your content.

        +
        4. +
      +
      +
      +

      Variants

      +
      +
      + Default Label +
      + +
      +
      +
      + 
      <label class="ms-Label">Name</label>
      +
      +
      + + +
      +
      +
      +
      + Disabled Label +
      + +
      +
      +
      + 
      <label class="ms-Label is-disabled">Name</label>
      +
      +
      + + +
      +
      +
      +
      + Required Label +
      + +
      +
      +
      + 
      <label class="ms-Label is-required">Name</label>
      +
      +
      + + +
      +
      +
      +
      +

      States

      + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-required.ms-Label +
      + Marks the form element as required. +
      +
      .is-disabled.ms-Label +
      + Marks the form element as disabled. +
      +
      +
      +
      +
      +
      + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Link/Link.html b/dist/documentation/Components/Link/Link.html new file mode 100644 index 00000000..bfe5c7f5 --- /dev/null +++ b/dist/documentation/Components/Link/Link.html @@ -0,0 +1,847 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Link

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.

      +

      A Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <a class="ms-Link" href="#" title="More info about Example Link">Example Link</a>
        +
        3. +
      3. +

        Replace the sample HTML content with your content.

        +
        4. +
      +
      +
      +

      Variants

      +
      +
      + Default Link +
      + +
      +
      +
      + 
      <a class="ms-Link" href="#" title="More info about Example Link">Example Link</a>
      +
      +
      + +Example Link +
      +
      +
      +
      +
      +
      + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/List/List.html b/dist/documentation/Components/List/List.html new file mode 100644 index 00000000..30781a5f --- /dev/null +++ b/dist/documentation/Components/List/List.html @@ -0,0 +1,1117 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      List

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Presents a number of related items, either as a vertical list or in a grid.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <ul class="ms-List">
+  <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+    <span class="ms-ListItem-metaText">2:42p</span> 
+    <div class="ms-ListItem-selectionTarget"></div>
+    <div class="ms-ListItem-actions">
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Mail"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Delete"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Flag"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Pinned"></i>
+      </div>
+    </div>
+  </li>
+  <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+    <span class="ms-ListItem-metaText">2:42p</span> 
+    <div class="ms-ListItem-selectionTarget"></div>
+    <div class="ms-ListItem-actions">
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Mail"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Delete"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Flag"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Pinned"></i>
+      </div>
+    </div>
+  </li>
+  <li class="ms-ListItem is-selectable" tabindex="0">
+    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+    <span class="ms-ListItem-metaText">2:42p</span> 
+    <div class="ms-ListItem-selectionTarget"></div>
+    <div class="ms-ListItem-actions">
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Mail"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Delete"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Flag"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Pinned"></i>
+      </div>
+    </div>
+  </li>
+  <li class="ms-ListItem is-selectable" tabindex="0">
+    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+    <span class="ms-ListItem-metaText">2:42p</span> 
+    <div class="ms-ListItem-selectionTarget"></div>
+    <div class="ms-ListItem-actions">
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Mail"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Delete"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Flag"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Pinned"></i>
+      </div>
+    </div>
+  </li>
+</ul>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var ListElements = document.querySelectorAll(".ms-List");
+  for (var i = 0; i < ListElements.length; i++) {
+    new fabric['List'](ListElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default List +
      + +
      +
      +
      + 
      <ul class="ms-List">
+  <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+    <span class="ms-ListItem-metaText">2:42p</span> 
+    <div class="ms-ListItem-selectionTarget"></div>
+    <div class="ms-ListItem-actions">
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Mail"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Delete"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Flag"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Pinned"></i>
+      </div>
+    </div>
+  </li>
+  <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+    <span class="ms-ListItem-metaText">2:42p</span> 
+    <div class="ms-ListItem-selectionTarget"></div>
+    <div class="ms-ListItem-actions">
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Mail"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Delete"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Flag"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Pinned"></i>
+      </div>
+    </div>
+  </li>
+  <li class="ms-ListItem is-selectable" tabindex="0">
+    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+    <span class="ms-ListItem-metaText">2:42p</span> 
+    <div class="ms-ListItem-selectionTarget"></div>
+    <div class="ms-ListItem-actions">
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Mail"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Delete"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Flag"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Pinned"></i>
+      </div>
+    </div>
+  </li>
+  <li class="ms-ListItem is-selectable" tabindex="0">
+    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+    <span class="ms-ListItem-metaText">2:42p</span> 
+    <div class="ms-ListItem-selectionTarget"></div>
+    <div class="ms-ListItem-actions">
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Mail"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Delete"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Flag"></i>
+      </div>
+      <div class="ms-ListItem-action">
+        <i class="ms-Icon ms-Icon--Pinned"></i>
+      </div>
+    </div>
+  </li>
+</ul>
      + 
      <script type="text/javascript">
+  var ListElements = document.querySelectorAll(".ms-List");
+  for (var i = 0; i < ListElements.length; i++) {
+    new fabric['List'](ListElements[i]);
+  }
+</script>
      +
      +
      + + +
        + + +
      • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
        +
        + +
        +
        +
        +
        +
        +
        • + + + +
      • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
        +
        + +
        +
        +
        +
        +
        +
        • + + + +
      • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
        +
        + +
        +
        +
        +
        +
        +
        • + + + +
      • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
        +
        + +
        +
        +
        +
        +
        +
        • + +
      + +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/ListItem/ListItem.html b/dist/documentation/Components/ListItem/ListItem.html new file mode 100644 index 00000000..2ced0b0c --- /dev/null +++ b/dist/documentation/Components/ListItem/ListItem.html @@ -0,0 +1,1295 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      ListItem

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      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.

      +
      +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <li class="ms-ListItem" tabindex="0">
+  <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+  <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+  <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+  <span class="ms-ListItem-metaText">2:42p</span> 
+  <div class="ms-ListItem-selectionTarget"></div>
+  <div class="ms-ListItem-actions">
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Delete"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Flag"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Pinned"></i>
+    </div>
+  </div>
+</li>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var ListItemElements = document.querySelectorAll(".ms-ListItem");
+  for (var i = 0; i < ListItemElements.length; i++) {
+    new fabric['ListItem'](ListItemElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default List +
      + +
      +
      +
      + 
      <li class="ms-ListItem" tabindex="0">
+  <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+  <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+  <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+  <span class="ms-ListItem-metaText">2:42p</span> 
+  <div class="ms-ListItem-selectionTarget"></div>
+  <div class="ms-ListItem-actions">
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Delete"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Flag"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Pinned"></i>
+    </div>
+  </div>
+</li>
      + 
      <script type="text/javascript">
+  var ListItemElements = document.querySelectorAll(".ms-ListItem");
+  for (var i = 0; i < ListItemElements.length; i++) {
+    new fabric['ListItem'](ListItemElements[i]);
+  }
+</script>
      +
      +
      + + +
    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + + +
      +
      +
      +
      + Image ListItem +
      + +
      +
      +
      + 
      <li class="ms-ListItem ms-ListItem--image" tabindex="0">
+  <div class="ms-ListItem-image"></div>
+  <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+  <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+  <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+  <span class="ms-ListItem-metaText">2:42p</span> 
+  <div class="ms-ListItem-selectionTarget"></div>
+  <div class="ms-ListItem-actions">
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Delete"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Flag"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Pinned"></i>
+    </div>
+  </div>
+</li>
      + 
      <script type="text/javascript">
+  var ListItemElements = document.querySelectorAll(".ms-ListItem");
+  for (var i = 0; i < ListItemElements.length; i++) {
+    new fabric['ListItem'](ListItemElements[i]);
+  }
+</script>
      +
      +
      + + +
    • +
      + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + + +
      +
      +
      +
      + Document ListItem +
      + +
      +
      +
      + 
      <li class="ms-ListItem ms-ListItem--document" tabindex="0">
+  <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+  <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+  <span class="ms-ListItem-metaText">2:42p</span> 
+  <div class="ms-ListItem-itemIcon ms-ListItem-itemIcon--ppt"></div>
+  <div class="ms-ListItem-selectionTarget"></div>
+  <div class="ms-ListItem-actions">
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Delete"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Flag"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Pinned"></i>
+    </div>
+  </div>
+</li>
      + 
      <script type="text/javascript">
+  var ListItemElements = document.querySelectorAll(".ms-ListItem");
+  for (var i = 0; i < ListItemElements.length; i++) {
+    new fabric['ListItem'](ListItemElements[i]);
+  }
+</script>
      +
      +
      + + +
    • + + Alton Lafferty + Meeting notes + + 2:42p +
      +
      +
      + +
      +
      +
      +
      +
      +
      • + + +
      +
      +
      +
      + Selectable ListItem +
      + +
      +
      +
      + 
      <li class="ms-ListItem is-selectable" tabindex="0">
+  <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+  <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+  <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+  <span class="ms-ListItem-metaText">2:42p</span> 
+  <div class="ms-ListItem-selectionTarget"></div>
+  <div class="ms-ListItem-actions">
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Delete"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Flag"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Pinned"></i>
+    </div>
+  </div>
+</li>
      + 
      <script type="text/javascript">
+  var ListItemElements = document.querySelectorAll(".ms-ListItem");
+  for (var i = 0; i < ListItemElements.length; i++) {
+    new fabric['ListItem'](ListItemElements[i]);
+  }
+</script>
      +
      +
      + + +
    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + + +
      +
      +
      +
      + Selected ListItem +
      + +
      +
      +
      + 
      <li class="ms-ListItem is-selected is-selectable" tabindex="0">
+  <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+  <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+  <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+  <span class="ms-ListItem-metaText">2:42p</span> 
+  <div class="ms-ListItem-selectionTarget"></div>
+  <div class="ms-ListItem-actions">
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Delete"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Flag"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Pinned"></i>
+    </div>
+  </div>
+</li>
      + 
      <script type="text/javascript">
+  var ListItemElements = document.querySelectorAll(".ms-ListItem");
+  for (var i = 0; i < ListItemElements.length; i++) {
+    new fabric['ListItem'](ListItemElements[i]);
+  }
+</script>
      +
      +
      + + +
    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + + +
      +
      +
      +
      + Unseen ListItem +
      + +
      +
      +
      + 
      <li class="ms-ListItem is-unseen is-selectable" tabindex="0">
+  <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+  <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+  <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+  <span class="ms-ListItem-metaText">2:42p</span> 
+  <div class="ms-ListItem-selectionTarget"></div>
+  <div class="ms-ListItem-actions">
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Delete"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Flag"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Pinned"></i>
+    </div>
+  </div>
+</li>
      + 
      <script type="text/javascript">
+  var ListItemElements = document.querySelectorAll(".ms-ListItem");
+  for (var i = 0; i < ListItemElements.length; i++) {
+    new fabric['ListItem'](ListItemElements[i]);
+  }
+</script>
      +
      +
      + + +
    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + + +
      +
      +
      +
      + Unread ListItem +
      + +
      +
      +
      + 
      <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+  <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
+  <span class="ms-ListItem-secondaryText">Meeting notes</span> 
+  <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
+  <span class="ms-ListItem-metaText">2:42p</span> 
+  <div class="ms-ListItem-selectionTarget"></div>
+  <div class="ms-ListItem-actions">
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Delete"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Flag"></i>
+    </div>
+    <div class="ms-ListItem-action">
+      <i class="ms-Icon ms-Icon--Pinned"></i>
+    </div>
+  </div>
+</li>
      + 
      <script type="text/javascript">
+  var ListItemElements = document.querySelectorAll(".ms-ListItem");
+  for (var i = 0; i < ListItemElements.length; i++) {
+    new fabric['ListItem'](ListItemElements[i]);
+  }
+</script>
      +
      +
      + + +
    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + + +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/MessageBanner/MessageBanner.html b/dist/documentation/Components/MessageBanner/MessageBanner.html new file mode 100644 index 00000000..971acba9 --- /dev/null +++ b/dist/documentation/Components/MessageBanner/MessageBanner.html @@ -0,0 +1,960 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      MessageBanner

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Presents a message to the user, with an optional call to action. The message is typically an error, update, or alert.

      +
      +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-MessageBanner">
+  <div class="ms-MessageBanner-content">
+    <div class="ms-MessageBanner-text">
+      <div class="ms-MessageBanner-clipper">
+        You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
+      </div>
+    </div>
+    <button class="ms-MessageBanner-expand">
+      <i class="ms-Icon ms-Icon--ChevronDown"></i>
+    </button>
+    <div class="ms-MessageBanner-action">
+      <button class="ms-Button ms-Button--primary">
+        <span class="ms-Button-label">Get More Storage</span> 
+      </button>
+    </div>
+  </div>
+  <button class="ms-MessageBanner-close">
+    <i class="ms-Icon ms-Icon--Clear"></i>
+  </button>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var MessageBanner = new fabric['MessageBanner'](MessageBannerExample.querySelector('.ms-MessageBanner'));
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default MessageBanner +
      + +
      +
      +
      + 
      <div class="ms-MessageBanner">
+  <div class="ms-MessageBanner-content">
+    <div class="ms-MessageBanner-text">
+      <div class="ms-MessageBanner-clipper">
+        You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
+      </div>
+    </div>
+    <button class="ms-MessageBanner-expand">
+      <i class="ms-Icon ms-Icon--ChevronDown"></i>
+    </button>
+    <div class="ms-MessageBanner-action">
+      <button class="ms-Button ms-Button--primary">
+        <span class="ms-Button-label">Get More Storage</span> 
+      </button>
+    </div>
+  </div>
+  <button class="ms-MessageBanner-close">
+    <i class="ms-Icon ms-Icon--Clear"></i>
+  </button>
+</div>
      + 
      <script type="text/javascript">
+  var MessageBanner = new fabric['MessageBanner'](MessageBannerExample.querySelector('.ms-MessageBanner'));
+</script>
      +
      +
      + + +
      +
      +
      +
      + You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage. +
      +
      + +
      + + +
      +
      + +
      + +
      +
      +
      +
      +

      Methods

      + + + + + + + + + + + + + + + + + + + + + + + + + +
      NameParametersDescription
      init()

      None

      +      		 +
      + Initializes component +
      +
      show()

      None

      +      		 +
      + Shows MessageBanner if hidden +
      +
      showBanner()

      None

      +      		 +
      + Shows MessageBanner if hidden, (deprecated) now use show() +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/MessageBar/MessageBar.html b/dist/documentation/Components/MessageBar/MessageBar.html new file mode 100644 index 00000000..c74d2d56 --- /dev/null +++ b/dist/documentation/Components/MessageBar/MessageBar.html @@ -0,0 +1,1085 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      MessageBar

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-MessageBar">
+  <div class="ms-MessageBar-content">
+    <div class="ms-MessageBar-icon">
+      <i class="ms-Icon ms-Icon--Info"></i>
+    </div>
+    <div class="ms-MessageBar-text">
+      Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+      <br />
+      <a href="#" class="ms-Link">Hyperlink string</a> 
+    </div>
+  </div>
+</div>
        +
        3. +
      3. +

        Replace the sample HTML content with your content.

        +
        4. +
      +
      +
      +

      Variants

      +
      +
      + Default MessageBar +
      + +
      +
      +
      + 
      <div class="ms-MessageBar">
+  <div class="ms-MessageBar-content">
+    <div class="ms-MessageBar-icon">
+      <i class="ms-Icon ms-Icon--Info"></i>
+    </div>
+    <div class="ms-MessageBar-text">
+      Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+      <br />
+      <a href="#" class="ms-Link">Hyperlink string</a> 
+    </div>
+  </div>
+</div>
      +
      +
      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +
      +
      +
      +
      + Success MessageBar +
      + +
      +
      +
      + 
      <div class="ms-MessageBar ms-MessageBar--success">
+  <div class="ms-MessageBar-content">
+    <div class="ms-MessageBar-icon">
+      <i class="ms-Icon ms-Icon--Completed"></i>
+    </div>
+    <div class="ms-MessageBar-text">
+      Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+      <br />
+      <a href="#" class="ms-Link">Hyperlink string</a> 
+    </div>
+  </div>
+</div>
      +
      +
      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +
      +
      +
      +
      + Error MessageBar +
      + +
      +
      +
      + 
      <div class="ms-MessageBar ms-MessageBar--error">
+  <div class="ms-MessageBar-content">
+    <div class="ms-MessageBar-icon">
+      <i class="ms-Icon ms-Icon--ErrorBadge"></i>
+    </div>
+    <div class="ms-MessageBar-text">
+      Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+      <br />
+      <a href="#" class="ms-Link">Hyperlink string</a> 
+    </div>
+  </div>
+</div>
      +
      +
      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +
      +
      +
      +
      + Blocked MessageBar +
      + +
      +
      +
      + 
      <div class="ms-MessageBar ms-MessageBar--blocked">
+  <div class="ms-MessageBar-content">
+    <div class="ms-MessageBar-icon">
+      <i class="ms-Icon ms-Icon--Blocked"></i>
+    </div>
+    <div class="ms-MessageBar-text">
+      Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+      <br />
+      <a href="#" class="ms-Link">Hyperlink string</a> 
+    </div>
+  </div>
+</div>
      +
      +
      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +
      +
      +
      +
      + Warning MessageBar +
      + +
      +
      +
      + 
      <div class="ms-MessageBar ms-MessageBar--warning">
+  <div class="ms-MessageBar-content">
+    <div class="ms-MessageBar-icon">
+      <i class="ms-Icon ms-Icon--Info"></i>
+    </div>
+    <div class="ms-MessageBar-text">
+      Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+      <br />
+      <a href="#" class="ms-Link">Hyperlink string</a> 
+    </div>
+  </div>
+</div>
      +
      +
      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +
      +
      +
      +
      + Severe Warning MessageBar +
      + +
      +
      +
      + 
      <div class="ms-MessageBar ms-MessageBar--severeWarning">
+  <div class="ms-MessageBar-content">
+    <div class="ms-MessageBar-icon">
+      <i class="ms-Icon ms-Icon--Warning"></i>
+    </div>
+    <div class="ms-MessageBar-text">
+      Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+      <br />
+      <a href="#" class="ms-Link">Hyperlink string</a> 
+    </div>
+  </div>
+</div>
      +
      +
      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +
      +
      +
      +
      +
      +
      + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/OrgChart/OrgChart.html b/dist/documentation/Components/OrgChart/OrgChart.html new file mode 100644 index 00000000..f00cb0cf --- /dev/null +++ b/dist/documentation/Components/OrgChart/OrgChart.html @@ -0,0 +1,1085 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      OrgChart

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

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

      +
      +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-OrgChart">
+  <div class="ms-OrgChart-group">
+    <ul class="ms-OrgChart-list">
+      <li class="ms-OrgChart-listItem">
+        <button class="ms-OrgChart-listItemBtn" tabindex="1">
+          <div class="ms-Persona">
+            <div class="ms-Persona-imageArea">
+              <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+              <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+            </div>
+            <div class="ms-Persona-presence">
+            </div>
+            <div class="ms-Persona-details">
+              <div class="ms-Persona-primaryText">Russel Miller</div>
+              <div class="ms-Persona-secondaryText">Sales</div>
+            </div>
+          </div>
+        </button>
+      </li>
+      <li class="ms-OrgChart-listItem">
+        <button class="ms-OrgChart-listItemBtn" tabindex="1">
+          <div class="ms-Persona">
+            <div class="ms-Persona-imageArea">
+              <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+              <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+            </div>
+            <div class="ms-Persona-presence">
+            </div>
+            <div class="ms-Persona-details">
+              <div class="ms-Persona-primaryText">Douglas Fielder</div>
+              <div class="ms-Persona-secondaryText">Public Relations</div>
+            </div>
+          </div>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <div class="ms-OrgChart-group">
+    <div class="ms-OrgChart-groupTitle">Manager</div>
+    <ul class="ms-OrgChart-list">
+      <li class="ms-OrgChart-listItem">
+        <button class="ms-OrgChart-listItemBtn" tabindex="1">
+          <div class="ms-Persona">
+            <div class="ms-Persona-imageArea">
+              <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+              <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+            </div>
+            <div class="ms-Persona-presence">
+            </div>
+            <div class="ms-Persona-details">
+              <div class="ms-Persona-primaryText">Grant Steel</div>
+              <div class="ms-Persona-secondaryText">Sales</div>
+            </div>
+          </div>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <div class="ms-OrgChart-group">
+    <div class="ms-OrgChart-groupTitle">Staff</div>
+    <ul class="ms-OrgChart-list">
+      <li class="ms-OrgChart-listItem">
+        <button class="ms-OrgChart-listItemBtn" tabindex="1">
+          <div class="ms-Persona">
+            <div class="ms-Persona-imageArea">
+              <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+              <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+            </div>
+            <div class="ms-Persona-presence">
+            </div>
+            <div class="ms-Persona-details">
+              <div class="ms-Persona-primaryText">Harvey Wallin</div>
+              <div class="ms-Persona-secondaryText">Public Relations</div>
+            </div>
+          </div>
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
        +
        3. +
      3. +

        Replace the sample HTML content with your content.

        +
        4. +
      +
      +
      +

      Variants

      +
      +
      + Default OrgChart +
      + +
      +
      +
      + 
      <div class="ms-OrgChart">
+  <div class="ms-OrgChart-group">
+    <ul class="ms-OrgChart-list">
+      <li class="ms-OrgChart-listItem">
+        <button class="ms-OrgChart-listItemBtn" tabindex="1">
+          <div class="ms-Persona">
+            <div class="ms-Persona-imageArea">
+              <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+              <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+            </div>
+            <div class="ms-Persona-presence">
+            </div>
+            <div class="ms-Persona-details">
+              <div class="ms-Persona-primaryText">Russel Miller</div>
+              <div class="ms-Persona-secondaryText">Sales</div>
+            </div>
+          </div>
+        </button>
+      </li>
+      <li class="ms-OrgChart-listItem">
+        <button class="ms-OrgChart-listItemBtn" tabindex="1">
+          <div class="ms-Persona">
+            <div class="ms-Persona-imageArea">
+              <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+              <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+            </div>
+            <div class="ms-Persona-presence">
+            </div>
+            <div class="ms-Persona-details">
+              <div class="ms-Persona-primaryText">Douglas Fielder</div>
+              <div class="ms-Persona-secondaryText">Public Relations</div>
+            </div>
+          </div>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <div class="ms-OrgChart-group">
+    <div class="ms-OrgChart-groupTitle">Manager</div>
+    <ul class="ms-OrgChart-list">
+      <li class="ms-OrgChart-listItem">
+        <button class="ms-OrgChart-listItemBtn" tabindex="1">
+          <div class="ms-Persona">
+            <div class="ms-Persona-imageArea">
+              <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+              <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+            </div>
+            <div class="ms-Persona-presence">
+            </div>
+            <div class="ms-Persona-details">
+              <div class="ms-Persona-primaryText">Grant Steel</div>
+              <div class="ms-Persona-secondaryText">Sales</div>
+            </div>
+          </div>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <div class="ms-OrgChart-group">
+    <div class="ms-OrgChart-groupTitle">Staff</div>
+    <ul class="ms-OrgChart-list">
+      <li class="ms-OrgChart-listItem">
+        <button class="ms-OrgChart-listItemBtn" tabindex="1">
+          <div class="ms-Persona">
+            <div class="ms-Persona-imageArea">
+              <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+              <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+            </div>
+            <div class="ms-Persona-presence">
+            </div>
+            <div class="ms-Persona-details">
+              <div class="ms-Persona-primaryText">Harvey Wallin</div>
+              <div class="ms-Persona-secondaryText">Public Relations</div>
+            </div>
+          </div>
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
      +
      +
      + + +
      +
      + +
        +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      Manager
      +
        +
      • + +
        • +
      +
      +
      +
      Staff
      +
        +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      +
      +
      + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Overlay/Overlay.html b/dist/documentation/Components/Overlay/Overlay.html new file mode 100644 index 00000000..98cbfd89 --- /dev/null +++ b/dist/documentation/Components/Overlay/Overlay.html @@ -0,0 +1,978 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Overlay

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-OverlayExample">
+  <div class="ms-Overlay"></div>
+  <button class="ms-Button docs-OverlayExample-button">Show the overlay</button>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var OverlayExamples = document.querySelectorAll(".ms-OverlayExample");
+  for (var i = 0; i < OverlayExamples.length; i++) {
+    (function() {
+      var OverlayExampleButton = OverlayExamples[i].querySelector(".ms-Button");
+      var OverlayComponent = OverlayExamples[i].querySelector(".ms-Overlay");
+      var Overlay = new fabric['Overlay'](OverlayComponent);
+      OverlayExampleButton.onclick = function() {
+        Overlay.show();
+      };
+    }());
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default Overlay +
      + +
      +
      +
      + 
      <div class="ms-OverlayExample">
+  <div class="ms-Overlay"></div>
+  <button class="ms-Button docs-OverlayExample-button">Show the overlay</button>
+</div>
      + 
      <script type="text/javascript">
+  var OverlayExamples = document.querySelectorAll(".ms-OverlayExample");
+  for (var i = 0; i < OverlayExamples.length; i++) {
+    (function() {
+      var OverlayExampleButton = OverlayExamples[i].querySelector(".ms-Button");
+      var OverlayComponent = OverlayExamples[i].querySelector(".ms-Overlay");
+      var Overlay = new fabric['Overlay'](OverlayComponent);
+      OverlayExampleButton.onclick = function() {
+        Overlay.show();
+      };
+    }());
+  }
+</script>
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      + Dark Overlay +
      + +
      +
      +
      + 
      <div class="ms-OverlayExample">
+  <div class="ms-Overlay ms-Overlay--dark"></div>
+  <button class="ms-Button docs-OverlayExample-button">Show the overlay</button>
+</div>
      + 
      <script type="text/javascript">
+  var OverlayExamples = document.querySelectorAll(".ms-OverlayExample");
+  for (var i = 0; i < OverlayExamples.length; i++) {
+    (function() {
+      var OverlayExampleButton = OverlayExamples[i].querySelector(".ms-Button");
+      var OverlayComponent = OverlayExamples[i].querySelector(".ms-Overlay");
+      var Overlay = new fabric['Overlay'](OverlayComponent);
+      OverlayExampleButton.onclick = function() {
+        Overlay.show();
+      };
+    }());
+  }
+</script>
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +

      Methods

      + + + + + + + + + + + + + + + + + + + + + + + + + +
      NameParametersDescription
      remove()

      None

      +      		 +
      + Removes the component from page +
      +
      show()

      None

      +      		 +
      + Shows the component +
      +
      hide()

      None

      +      		 +
      + Hides the component +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Panel/Panel.html b/dist/documentation/Components/Panel/Panel.html new file mode 100644 index 00000000..a95f2b28 --- /dev/null +++ b/dist/documentation/Components/Panel/Panel.html @@ -0,0 +1,1341 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Panel

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Panels are modal UI overlays that provide contextual app information. They often request some kind of creation or management action from the user. Panels are paired with the Overlay component, also known as a Light Dismiss. The Overlay blocks interactions with the app view until dismissed either through clicking or tapping on the Overlay or by selecting a close or completion action within the Panel.

      +

      Examples of experiences that use Panels

      +
        +
      • Member or group list creation or management
        • +
      • Document list creation or management
        • +
      • Permissions creation or management
        • +
      • Settings creation or management
        • +
      • Multi-field forms
        • +
      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-PanelExample">
+  <button class="ms-Button">
+    <span class="ms-Button-label">Open Panel</span> 
+  </button>
+  <div class="ms-Panel">
+    <button class="ms-Panel-closeButton ms-PanelAction-close">
+      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+    </button>
+    <div class="ms-Panel-contentInner">
+      <p class="ms-Panel-headerText">Panel</p>
+      <div class="ms-Panel-content">
+        <span class="ms-font-m">Content goes here</span> 
+      </div>
+    </div>
+  </div>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
+  for (var i = 0; i < PanelExamples.length; i++) {
+    (function() {
+      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
+      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
+      PanelExampleButton.addEventListener("click", function(i) {
+        new fabric['Panel'](PanelExamplePanel);
+      });
+    }());
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default Panel +
      + +
      +
      +
      + 
      <div class="ms-PanelExample">
+  <button class="ms-Button">
+    <span class="ms-Button-label">Open Panel</span> 
+  </button>
+  <div class="ms-Panel">
+    <button class="ms-Panel-closeButton ms-PanelAction-close">
+      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+    </button>
+    <div class="ms-Panel-contentInner">
+      <p class="ms-Panel-headerText">Panel</p>
+      <div class="ms-Panel-content">
+        <span class="ms-font-m">Content goes here</span> 
+      </div>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
+  for (var i = 0; i < PanelExamples.length; i++) {
+    (function() {
+      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
+      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
+      PanelExampleButton.addEventListener("click", function(i) {
+        new fabric['Panel'](PanelExamplePanel);
+      });
+    }());
+  }
+</script>
      +
      +
      +
      + + +
      + +
      +

      Panel

      +
      + Content goes here +
      +
      +
      +
      +
      +
      +
      + Medium Panel +
      + +
      +
      +
      + 
      <div class="ms-PanelExample">
+  <button class="ms-Button">
+    <span class="ms-Button-label">Open Panel</span> 
+  </button>
+  <div class="ms-Panel ms-Panel--md">
+    <button class="ms-Panel-closeButton ms-PanelAction-close">
+      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+    </button>
+    <div class="ms-Panel-contentInner">
+      <p class="ms-Panel-headerText">Medium Panel</p>
+      <div class="ms-Panel-content">
+        <span class="ms-font-m">Content goes here</span> 
+      </div>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
+  for (var i = 0; i < PanelExamples.length; i++) {
+    (function() {
+      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
+      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
+      PanelExampleButton.addEventListener("click", function(i) {
+        new fabric['Panel'](PanelExamplePanel);
+      });
+    }());
+  }
+</script>
      +
      +
      +
      + + +
      + +
      +

      Medium Panel

      +
      + Content goes here +
      +
      +
      +
      +
      +
      +
      + Large Panel +
      + +
      +
      +
      + 
      <div class="ms-PanelExample">
+  <button class="ms-Button">
+    <span class="ms-Button-label">Open Panel</span> 
+  </button>
+  <div class="ms-Panel ms-Panel--lg">
+    <button class="ms-Panel-closeButton ms-PanelAction-close">
+      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+    </button>
+    <div class="ms-Panel-contentInner">
+      <p class="ms-Panel-headerText">Large panel</p>
+      <div class="ms-Panel-content">
+        <span class="ms-font-m">Content goes here</span> 
+      </div>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
+  for (var i = 0; i < PanelExamples.length; i++) {
+    (function() {
+      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
+      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
+      PanelExampleButton.addEventListener("click", function(i) {
+        new fabric['Panel'](PanelExamplePanel);
+      });
+    }());
+  }
+</script>
      +
      +
      +
      + + +
      + +
      +

      Large panel

      +
      + Content goes here +
      +
      +
      +
      +
      +
      +
      + Large Fixed Panel +
      + +
      +
      +
      + 
      <div class="ms-PanelExample">
+  <button class="ms-Button">
+    <span class="ms-Button-label">Open Panel</span> 
+  </button>
+  <div class="ms-Panel ms-Panel--lg ms-Panel--fixed">
+    <button class="ms-Panel-closeButton ms-PanelAction-close">
+      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+    </button>
+    <div class="ms-Panel-contentInner">
+      <p class="ms-Panel-headerText">Large panel</p>
+      <div class="ms-Panel-content">
+        <span class="ms-font-m">Content goes here</span> 
+      </div>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
+  for (var i = 0; i < PanelExamples.length; i++) {
+    (function() {
+      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
+      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
+      PanelExampleButton.addEventListener("click", function(i) {
+        new fabric['Panel'](PanelExamplePanel);
+      });
+    }());
+  }
+</script>
      +
      +
      +
      + + +
      + +
      +

      Large panel

      +
      + Content goes here +
      +
      +
      +
      +
      +
      +
      + Extra Large Panel +
      + +
      +
      +
      + 
      <div class="ms-PanelExample">
+  <button class="ms-Button">
+    <span class="ms-Button-label">Open Panel</span> 
+  </button>
+  <div class="ms-Panel ms-Panel--xl">
+    <button class="ms-Panel-closeButton ms-PanelAction-close">
+      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+    </button>
+    <div class="ms-Panel-contentInner">
+      <p class="ms-Panel-headerText">Extra large panel</p>
+      <div class="ms-Panel-content">
+        <span class="ms-font-m">Content goes here</span> 
+      </div>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
+  for (var i = 0; i < PanelExamples.length; i++) {
+    (function() {
+      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
+      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
+      PanelExampleButton.addEventListener("click", function(i) {
+        new fabric['Panel'](PanelExamplePanel);
+      });
+    }());
+  }
+</script>
      +
      +
      +
      + + +
      + +
      +

      Extra large panel

      +
      + Content goes here +
      +
      +
      +
      +
      +
      +
      + Extra Extra Large Panel +
      + +
      +
      +
      + 
      <div class="ms-PanelExample">
+  <button class="ms-Button">
+    <span class="ms-Button-label">Open Panel</span> 
+  </button>
+  <div class="ms-Panel ms-Panel--xxl">
+    <button class="ms-Panel-closeButton ms-PanelAction-close">
+      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+    </button>
+    <div class="ms-Panel-contentInner">
+      <p class="ms-Panel-headerText">Extra extra large panel</p>
+      <div class="ms-Panel-content">
+        <span class="ms-font-m">Content goes here</span> 
+      </div>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
+  for (var i = 0; i < PanelExamples.length; i++) {
+    (function() {
+      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
+      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
+      PanelExampleButton.addEventListener("click", function(i) {
+        new fabric['Panel'](PanelExamplePanel);
+      });
+    }());
+  }
+</script>
      +
      +
      +
      + + +
      + +
      +

      Extra extra large panel

      +
      + Content goes here +
      +
      +
      +
      +
      +
      +
      + Left Panel +
      + +
      +
      +
      + 
      <div class="ms-PanelExample">
+  <button class="ms-Button">
+    <span class="ms-Button-label">Open Panel</span> 
+  </button>
+  <div class="ms-Panel ms-Panel--left">
+    <button class="ms-Panel-closeButton ms-PanelAction-close">
+      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+    </button>
+    <div class="ms-Panel-contentInner">
+      <p class="ms-Panel-headerText">Left Panel</p>
+      <div class="ms-Panel-content">
+        <span class="ms-font-m">Content goes here</span> 
+      </div>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
+  for (var i = 0; i < PanelExamples.length; i++) {
+    (function() {
+      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
+      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
+      PanelExampleButton.addEventListener("click", function(i) {
+        new fabric['Panel'](PanelExamplePanel);
+      });
+    }());
+  }
+</script>
      +
      +
      +
      + + +
      + +
      +

      Left Panel

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

      States

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

      Methods

      + + + + + + + + + + + + + + + +
      NameParametersDescription
      dismiss(callback)

      callback: {Function} Optional callback function

      +      		 +
      + Dismisses the component and executes callback function +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ 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 0000000000000000000000000000000000000000..147416f7713c45d5434a9d5b8c5570958e3e9b18 GIT binary patch literal 1601 zcmaJ?c~BE)91VyNV{MfNFFe+zQ$bBO8weqRh#}!fB@se|w5T;C3ki_jb+aKM9)JZw zv|4RPr)5+u+A0clC=go_VbCg`7@d~d60pM|)rvY)L#@~i0``y6o!R}4dGGzMH?!Ll z6tUA7a~U)mZJI1js-#xH{nEXuugPW`q?S2kw3RR#)u3E76=3ohYNAJEDFIg<)Wm<%0f*6V+vBlq$LbE zX~0mxt*A-E%%ljUGJREo5g(UDO`~n18U|T4I0Umf?vloUa{2#5jmB}biBux5^Zid@ zlPVWSASGhL%!HO2TzY^z6fTqyh=#-n6^3PxbumGYk(f!3;ebQ}1g02J9cD2Fjlkt{ zp$s*V8dQtOq#}?KU>giNVF)iIR3Z%ti&dG$J^KY8`3iW zcJ>;%KR3v8$atT|*r!O2v+UWqEfqH(g_`_IT#bh?yF*)ENK^YU)=MJtHU6pturC8cQ7fUKmV|%ro1ZOG3ZEHbn5!u{Mh87ql5HR`!36gvyL{h z*#oW=VT@Br|J6!*!;>zi zKK+7Ea^V)}Vo~+#lIq6tx%m9B3q58JsN-d)?ejle-ne(5XLx>AiKAaUdvRh{?W4{; z1#+o6vdB|qemA-wyi(a*XKwYhBz^Nq6f}QIB*V6EZA5Y33xcouD=cNH@9?}Y_RXVz z?c^@4?OlA^8D5siWEZdnIUC@BhuikfIo#IgT{|?LzsIlZKo4`xmD!5WCvP5A`KRyf z`>9F3!?SkR%1zzLhvMV0t1C%`w4;;utWXQRQ+2!j%*UwGx39VqpyojZMgsd literal 0 HcmV?d00001 diff --git a/dist/documentation/Components/PeoplePicker/PeoplePicker.html b/dist/documentation/Components/PeoplePicker/PeoplePicker.html new file mode 100644 index 00000000..4c9af335 --- /dev/null +++ b/dist/documentation/Components/PeoplePicker/PeoplePicker.html @@ -0,0 +1,1565 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      PeoplePicker

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

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

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-PeoplePicker">
+  <div class="ms-PeoplePicker-searchBox">
+    <div class="ms-TextField ms-TextField--textFieldUnderlined">
+      <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option">
+    </div>
+  </div>
+  <div class="ms-PeoplePicker-results">
+    <div class="ms-PeoplePicker-resultGroup">
+      <div class="ms-PeoplePicker-resultGroupTitle">
+        Contacts
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Russel Miller</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Douglas Fielder</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Grant Steel</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Harvey Wallin</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+    </div>
+    <button class="ms-PeoplePicker-searchMore">
+      <div class="ms-PeoplePicker-searchMoreIcon">
+        <i class="ms-Icon ms-Icon--Search"></i>
+      </div>
+      <div class="ms-PeoplePicker-searchMoreText">
+        Search my groups
+      </div>
+    </button>
+  </div>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var PeoplePickerElements = document.querySelectorAll(".ms-PeoplePicker");
+  for (var i = 0; i < PeoplePickerElements.length; i++) {
+    new fabric['PeoplePicker'](PeoplePickerElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default PeoplePicker +
      + +
      +
      +
      + 
      <div class="ms-PeoplePicker">
+  <div class="ms-PeoplePicker-searchBox">
+    <div class="ms-TextField ms-TextField--textFieldUnderlined">
+      <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option">
+    </div>
+  </div>
+  <div class="ms-PeoplePicker-results">
+    <div class="ms-PeoplePicker-resultGroup">
+      <div class="ms-PeoplePicker-resultGroupTitle">
+        Contacts
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Russel Miller</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Douglas Fielder</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Grant Steel</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Harvey Wallin</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+    </div>
+    <button class="ms-PeoplePicker-searchMore">
+      <div class="ms-PeoplePicker-searchMoreIcon">
+        <i class="ms-Icon ms-Icon--Search"></i>
+      </div>
+      <div class="ms-PeoplePicker-searchMoreText">
+        Search my groups
+      </div>
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PeoplePickerElements = document.querySelectorAll(".ms-PeoplePicker");
+  for (var i = 0; i < PeoplePickerElements.length; i++) {
+    new fabric['PeoplePicker'](PeoplePickerElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      + + +
      +
      +
      +
      + Contacts +
      +
      + +
      +
      +
      RM
      +
      +
      +
      +
      +
      Russel Miller
      +
      Sales
      +
      +
      +
      +
      + +
      +
      +
      DF
      +
      +
      +
      +
      +
      Douglas Fielder
      +
      Public Relations
      +
      +
      +
      +
      + +
      +
      +
      GS
      +
      +
      +
      +
      +
      Grant Steel
      +
      Sales
      +
      +
      +
      +
      + +
      +
      +
      HW
      +
      +
      +
      +
      +
      Harvey Wallin
      +
      Public Relations
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      + Compact PeoplePicker +
      + +
      +
      +
      + 
      <div class="ms-PeoplePicker ms-PeoplePicker--compact">
+  <div class="ms-PeoplePicker-searchBox">
+    <div class="ms-TextField ms-TextField--textFieldUnderlined">
+      <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option">
+    </div>
+  </div>
+  <div class="ms-PeoplePicker-results ms-PeoplePicker-results--compact">
+    <div class="ms-PeoplePicker-resultGroup">
+      <div class="ms-PeoplePicker-resultGroupTitle">
+        Contacts
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--xs">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Russel Miller</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--xs">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Douglas Fielder</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--xs">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Grant Steel</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--xs">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Harvey Wallin</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+    </div>
+    <button class="ms-PeoplePicker-searchMore">
+      <div class="ms-PeoplePicker-searchMoreIcon">
+        <i class="ms-Icon ms-Icon--Search"></i>
+      </div>
+      <div class="ms-PeoplePicker-searchMoreText">
+        Search my groups
+      </div>
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PeoplePickerElements = document.querySelectorAll(".ms-PeoplePicker");
+  for (var i = 0; i < PeoplePickerElements.length; i++) {
+    new fabric['PeoplePicker'](PeoplePickerElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      + + +
      +
      +
      +
      + Contacts +
      +
      + +
      +
      +
      RM
      +
      +
      +
      +
      +
      Russel Miller
      +
      Sales
      +
      +
      +
      +
      + +
      +
      +
      DF
      +
      +
      +
      +
      +
      Douglas Fielder
      +
      Public Relations
      +
      +
      +
      +
      + +
      +
      +
      GS
      +
      +
      +
      +
      +
      Grant Steel
      +
      Sales
      +
      +
      +
      +
      + +
      +
      +
      HW
      +
      +
      +
      +
      +
      Harvey Wallin
      +
      Public Relations
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      + FacePile PeoplePicker +
      + +
      +
      +
      + 
      <div class="ms-PeoplePicker ms-PeoplePicker--facePile">
+  <div class="ms-PeoplePicker-searchBox">
+    <div class="ms-TextField ms-TextField--textFieldUnderlined">
+      <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option">
+    </div>
+  </div>
+  <div class="ms-PeoplePicker-results ms-PeoplePicker-results--facePile">
+    <div class="ms-PeoplePicker-resultGroup">
+      <div class="ms-PeoplePicker-resultGroupTitle">
+        Contacts
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Russel Miller</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Douglas Fielder</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Grant Steel</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+      <div class="ms-PeoplePicker-result" tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Harvey Wallin</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </div>
+    </div>
+    <button class="ms-PeoplePicker-searchMore">
+      <div class="ms-PeoplePicker-searchMoreIcon">
+        <i class="ms-Icon ms-Icon--Search"></i>
+      </div>
+      <div class="ms-PeoplePicker-searchMoreText">
+        Search my groups
+      </div>
+    </button>
+  </div>
+  <div class="ms-PeoplePicker-selected is-active">
+    <div class="ms-PeoplePicker-selectedHeader">
+      <span class="ms-PeoplePicker-selectedCount">2</span>  member<span class="ms-PeoplePicker-selectedCountPlural">s</span> 
+    </div>
+    <ul class="ms-PeoplePicker-selectedPeople">
+      <li class="ms-PeoplePicker-selectedPerson " tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Russel Miller</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </li>
+      <li class="ms-PeoplePicker-selectedPerson " tabindex="1">
+        <div class="ms-Persona ms-Persona--sm">
+          <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
+          </div>
+          <div class="ms-Persona-presence">
+          </div>
+          <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Douglas Fielder</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+          </div>
+        </div>
+        <button class="ms-PeoplePicker-resultAction">
+          <i class="ms-Icon ms-Icon--Clear"></i>
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PeoplePickerElements = document.querySelectorAll(".ms-PeoplePicker");
+  for (var i = 0; i < PeoplePickerElements.length; i++) {
+    new fabric['PeoplePicker'](PeoplePickerElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      + + +
      +
      +
      +
      + Contacts +
      +
      + +
      +
      +
      RM
      +
      +
      +
      +
      +
      Russel Miller
      +
      Sales
      +
      +
      +
      +
      + +
      +
      +
      DF
      +
      +
      +
      +
      +
      Douglas Fielder
      +
      Public Relations
      +
      +
      +
      +
      + +
      +
      +
      GS
      +
      +
      +
      +
      +
      Grant Steel
      +
      Sales
      +
      +
      +
      +
      + +
      +
      +
      HW
      +
      +
      +
      +
      +
      Harvey Wallin
      +
      Public Relations
      +
      +
      +
      +
      + +
      +
      +
      + 2 members +
      +
        +
      • + +
        +
        +
        RM
        +
        +
        +
        +
        +
        Russel Miller
        +
        Sales
        +
        +
        +
        • +
      • + +
        +
        +
        DF
        +
        +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        +
        • +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Persona/Persona.html b/dist/documentation/Components/Persona/Persona.html new file mode 100644 index 00000000..0defd313 --- /dev/null +++ b/dist/documentation/Components/Persona/Persona.html @@ -0,0 +1,1877 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Persona

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      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.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-Persona ms-Persona--tiny">
+  <div class="ms-Persona-imageArea">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+  </div>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Tiny Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--tiny">
+  <div class="ms-Persona-imageArea">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      +
      +
      + +
      +
      +
      Alton Lafferty
      +
      +
      +
      +
      +
      +
      + Extra Small Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--xs">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      +
      +
      +
      +
      +
      + Small Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--sm">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      +
      +
      +
      + Default Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      +
      +
      +
      + Large Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--lg">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+    <div class="ms-Persona-tertiaryText">In a meeting</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      +
      +
      +
      +
      +
      + Extra Large Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--xl">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+    <div class="ms-Persona-tertiaryText">In a meeting</div>
+    <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
      +
      +
      +
      + Initials Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona">
+  <div class="ms-Persona-imageArea">
+    <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      +
      AL
      +
      +
      + +
      +
      +
      Alton Lafferty
      +
      +
      +
      +
      +
      +
      + Available Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--available">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      +
      +
      +
      + Away Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--away">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeClock"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      +
      +
      +
      + Blocked Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--blocked">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      +
      +
      +
      + Busy Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--busy">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      +
      +
      +
      + DND Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--dnd">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeMinus"></i>
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      +
      +
      +
      + Offline Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--offline">
+  <div class="ms-Persona-imageArea">
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+    <div class="ms-Persona-secondaryText">Accountant</div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      +
      +
      +
      + FacePile Persona +
      + +
      +
      +
      + 
      <div class="ms-Persona ms-Persona--facePile">
+  <div class="ms-Persona-imageArea">
+    <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+  </div>
+  <div class="ms-PersonaCard">
+    <div class="ms-PersonaCard-persona">
+      <div class="ms-Persona ms-Persona--lg">
+        <div class="ms-Persona-imageArea">
+          <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+          <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+        </div>
+        <div class="ms-Persona-presence">
+        </div>
+        <div class="ms-Persona-details">
+          <div class="ms-Persona-primaryText">Alton Lafferty</div>
+          <div class="ms-Persona-secondaryText">Accountant</div>
+          <div class="ms-Persona-tertiaryText">In a meeting</div>
+          <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+        </div>
+      </div>
+    </div>
+    <ul class="ms-PersonaCard-actions">
+      <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
+        <i class="ms-Icon ms-Icon--Chat"></i>
+      </li>
+      <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
+        <i class="ms-Icon ms-Icon--Phone"></i>
+      </li>
+      <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
+        <i class="ms-Icon ms-Icon--Video"></i>
+      </li>
+      <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
+        <i class="ms-Icon ms-Icon--Mail"></i>
+      </li>
+      <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
+      <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
+        <i class="ms-Icon ms-Icon--Org"></i>
+      </li>
+    </ul>
+    <div class="ms-PersonaCard-actionDetailBox">
+      <div data-detail-id="mail" class="ms-PersonaCard-details">
+        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
+          <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
+        </div>
+        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
+          <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
+        </div>
+      </div>
+      <div data-detail-id="chat" class="ms-PersonaCard-details">
+        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
+          <a class="ms-Link" href="#">Start Lync call</a> 
+        </div>
+      </div>
+      <div data-detail-id="phone" class="ms-PersonaCard-details">
+        <div class="ms-PersonaCard-detailExpander"></div>
+        <div class="ms-PersonaCard-detailLine">
+          <span class="ms-PersonaCard-detailLabel">Details</span> 
+        </div>
+        <div class="ms-PersonaCard-detailLine">
+          <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
+        </div>
+        <div class="ms-PersonaCard-detailLine">
+          <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
+        </div>
+      </div>
+      <div data-detail-id="video" class="ms-PersonaCard-details">
+        <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
+          <a class="ms-Link" href="#">Start Skype call</a> 
+        </div>
+      </div>
+      <div data-detail-id="org" class="ms-PersonaCard-details">
+        <div class="ms-OrgChart">
+          <div class="ms-OrgChart-group">
+            <ul class="ms-OrgChart-list">
+              <li class="ms-OrgChart-listItem">
+                <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                  <div class="ms-Persona">
+                    <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                    </div>
+                    <div class="ms-Persona-presence">
+                    </div>
+                    <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Russel Miller</div>
+                      <div class="ms-Persona-secondaryText">Sales</div>
+                    </div>
+                  </div>
+                </button>
+              </li>
+              <li class="ms-OrgChart-listItem">
+                <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                  <div class="ms-Persona">
+                    <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                    </div>
+                    <div class="ms-Persona-presence">
+                    </div>
+                    <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                      <div class="ms-Persona-secondaryText">Public Relations</div>
+                    </div>
+                  </div>
+                </button>
+              </li>
+            </ul>
+          </div>
+          <div class="ms-OrgChart-group">
+            <div class="ms-OrgChart-groupTitle">Manager</div>
+            <ul class="ms-OrgChart-list">
+              <li class="ms-OrgChart-listItem">
+                <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                  <div class="ms-Persona">
+                    <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                    </div>
+                    <div class="ms-Persona-presence">
+                    </div>
+                    <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Grant Steel</div>
+                      <div class="ms-Persona-secondaryText">Sales</div>
+                    </div>
+                  </div>
+                </button>
+              </li>
+            </ul>
+          </div>
+          <div class="ms-OrgChart-group">
+            <div class="ms-OrgChart-groupTitle">Staff</div>
+            <ul class="ms-OrgChart-list">
+              <li class="ms-OrgChart-listItem">
+                <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                  <div class="ms-Persona">
+                    <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                    </div>
+                    <div class="ms-Persona-presence">
+                    </div>
+                    <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                      <div class="ms-Persona-secondaryText">Public Relations</div>
+                    </div>
+                  </div>
+                </button>
+              </li>
+              <li class="ms-OrgChart-listItem">
+                <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                  <div class="ms-Persona">
+                    <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                    </div>
+                    <div class="ms-Persona-presence">
+                    </div>
+                    <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                      <div class="ms-Persona-secondaryText">Technical Support</div>
+                    </div>
+                  </div>
+                </button>
+              </li>
+              <li class="ms-OrgChart-listItem">
+                <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                  <div class="ms-Persona">
+                    <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                    </div>
+                    <div class="ms-Persona-presence">
+                    </div>
+                    <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Marcel Groce</div>
+                      <div class="ms-Persona-secondaryText">Delivery</div>
+                    </div>
+                  </div>
+                </button>
+              </li>
+              <li class="ms-OrgChart-listItem">
+                <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                  <div class="ms-Persona">
+                    <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                    </div>
+                    <div class="ms-Persona-presence">
+                    </div>
+                    <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                      <div class="ms-Persona-secondaryText">Marketing</div>
+                    </div>
+                  </div>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaElements = document.querySelectorAll(".ms-Persona");
+  for (var i = 0; i < PersonaElements.length; i++) {
+    new fabric['Persona'](PersonaElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      + +
      +
      + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
        +
        • +
        • +
        • +
        • +
      • View profile
        • +
        • +
      +
      +
      +
      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
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/PersonaCard/PersonaCard.html b/dist/documentation/Components/PersonaCard/PersonaCard.html new file mode 100644 index 00000000..0a2eff2d --- /dev/null +++ b/dist/documentation/Components/PersonaCard/PersonaCard.html @@ -0,0 +1,1474 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      PersonaCard

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      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.

      +
      +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-PersonaCard">
+  <div class="ms-PersonaCard-persona">
+    <div class="ms-Persona ms-Persona--lg">
+      <div class="ms-Persona-imageArea">
+        <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+      </div>
+      <div class="ms-Persona-presence">
+        <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+      </div>
+      <div class="ms-Persona-details">
+        <div class="ms-Persona-primaryText">Alton Lafferty</div>
+        <div class="ms-Persona-secondaryText">Accountant</div>
+        <div class="ms-Persona-tertiaryText">In a meeting</div>
+        <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+      </div>
+    </div>
+  </div>
+  <ul class="ms-PersonaCard-actions">
+    <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
+      <i class="ms-Icon ms-Icon--Chat"></i>
+    </li>
+    <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
+      <i class="ms-Icon ms-Icon--Phone"></i>
+    </li>
+    <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
+      <i class="ms-Icon ms-Icon--Video"></i>
+    </li>
+    <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </li>
+    <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
+    <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
+      <i class="ms-Icon ms-Icon--Org"></i>
+    </li>
+  </ul>
+  <div class="ms-PersonaCard-actionDetailBox">
+    <div data-detail-id="mail" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
+        <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
+      </div>
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
+        <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
+      </div>
+    </div>
+    <div data-detail-id="chat" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
+        <a class="ms-Link" href="#">Start Lync call</a> 
+      </div>
+    </div>
+    <div data-detail-id="phone" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailExpander"></div>
+      <div class="ms-PersonaCard-detailLine">
+        <span class="ms-PersonaCard-detailLabel">Details</span> 
+      </div>
+      <div class="ms-PersonaCard-detailLine">
+        <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
+      </div>
+      <div class="ms-PersonaCard-detailLine">
+        <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
+      </div>
+    </div>
+    <div data-detail-id="video" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
+        <a class="ms-Link" href="#">Start Skype call</a> 
+      </div>
+    </div>
+    <div data-detail-id="org" class="ms-PersonaCard-details">
+      <div class="ms-OrgChart">
+        <div class="ms-OrgChart-group">
+          <ul class="ms-OrgChart-list">
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Russel Miller</div>
+                    <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                    <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div class="ms-OrgChart-group">
+          <div class="ms-OrgChart-groupTitle">Manager</div>
+          <ul class="ms-OrgChart-list">
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Grant Steel</div>
+                    <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div class="ms-OrgChart-group">
+          <div class="ms-OrgChart-groupTitle">Staff</div>
+          <ul class="ms-OrgChart-list">
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                    <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                    <div class="ms-Persona-secondaryText">Technical Support</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Marcel Groce</div>
+                    <div class="ms-Persona-secondaryText">Delivery</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                    <div class="ms-Persona-secondaryText">Marketing</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var PersonaCardElement = document.querySelectorAll(".ms-PersonaCard");
+  for (var i = 0; i < PersonaCardElement.length; i++) {
+    new fabric.PersonaCard(PersonaCardElement[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default PersonaCard +
      + +
      +
      +
      + 
      <div class="ms-PersonaCard">
+  <div class="ms-PersonaCard-persona">
+    <div class="ms-Persona ms-Persona--lg">
+      <div class="ms-Persona-imageArea">
+        <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+        <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+      </div>
+      <div class="ms-Persona-presence">
+        <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+      </div>
+      <div class="ms-Persona-details">
+        <div class="ms-Persona-primaryText">Alton Lafferty</div>
+        <div class="ms-Persona-secondaryText">Accountant</div>
+        <div class="ms-Persona-tertiaryText">In a meeting</div>
+        <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+      </div>
+    </div>
+  </div>
+  <ul class="ms-PersonaCard-actions">
+    <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1">
+      <i class="ms-Icon ms-Icon--Chat"></i>
+    </li>
+    <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2">
+      <i class="ms-Icon ms-Icon--Phone"></i>
+    </li>
+    <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3">
+      <i class="ms-Icon ms-Icon--Video"></i>
+    </li>
+    <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4">
+      <i class="ms-Icon ms-Icon--Mail"></i>
+    </li>
+    <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve">View profile</li>
+    <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5">
+      <i class="ms-Icon ms-Icon--Org"></i>
+    </li>
+  </ul>
+  <div class="ms-PersonaCard-actionDetailBox">
+    <div data-detail-id="mail" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 
+        <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a> 
+      </div>
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 
+        <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a> 
+      </div>
+    </div>
+    <div data-detail-id="chat" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> 
+        <a class="ms-Link" href="#">Start Lync call</a> 
+      </div>
+    </div>
+    <div data-detail-id="phone" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailExpander"></div>
+      <div class="ms-PersonaCard-detailLine">
+        <span class="ms-PersonaCard-detailLabel">Details</span> 
+      </div>
+      <div class="ms-PersonaCard-detailLine">
+        <span class="ms-PersonaCard-detailLabel">Personal:</span>  555.206.2443
+      </div>
+      <div class="ms-PersonaCard-detailLine">
+        <span class="ms-PersonaCard-detailLabel">Work:</span>  555.929.8240
+      </div>
+    </div>
+    <div data-detail-id="video" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> 
+        <a class="ms-Link" href="#">Start Skype call</a> 
+      </div>
+    </div>
+    <div data-detail-id="org" class="ms-PersonaCard-details">
+      <div class="ms-OrgChart">
+        <div class="ms-OrgChart-group">
+          <ul class="ms-OrgChart-list">
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Russel Miller</div>
+                    <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                    <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div class="ms-OrgChart-group">
+          <div class="ms-OrgChart-groupTitle">Manager</div>
+          <ul class="ms-OrgChart-list">
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Grant Steel</div>
+                    <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div class="ms-OrgChart-group">
+          <div class="ms-OrgChart-groupTitle">Staff</div>
+          <ul class="ms-OrgChart-list">
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                    <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                    <div class="ms-Persona-secondaryText">Technical Support</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Marcel Groce</div>
+                    <div class="ms-Persona-secondaryText">Delivery</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+            <li class="ms-OrgChart-listItem">
+              <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                <div class="ms-Persona">
+                  <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                    <img class="ms-Persona-image" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                    <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+                  </div>
+                  <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                    <div class="ms-Persona-secondaryText">Marketing</div>
+                  </div>
+                </div>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PersonaCardElement = document.querySelectorAll(".ms-PersonaCard");
+  for (var i = 0; i < PersonaCardElement.length; i++) {
+    new fabric.PersonaCard(PersonaCardElement[i]);
+  }
+</script>
      +
      +
      + +
      +
      + +
      +
      +
      AL
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
        +
        • +
        • +
        • +
        • +
      • View profile
        • +
        • +
      +
      +
      +
      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
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Pivot/Pivot.html b/dist/documentation/Components/Pivot/Pivot.html new file mode 100644 index 00000000..4d28041d --- /dev/null +++ b/dist/documentation/Components/Pivot/Pivot.html @@ -0,0 +1,1165 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Pivot

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.

      +
        +
      • Tapping on a pivot item header navigates to that header's section content.
        • +
      • Swiping left or right on a pivot item header navigates to the adjacent section.
        • +
      • Swiping left or right on section content navigates to the adjacent section.
        • +
      • Pivots are stationary when all pivot headers fit within the allowed space.
        • +
      • Pivots carousel when all pivot headers don't fit within the allowed space.
        • +
      +

      Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-Pivot">
+  <ul class="ms-Pivot-links">
+    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
+      My files
+    </li>
+    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
+      Recent
+    </li>
+    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
+      Shared with me
+    </li>
+    <li class="ms-Pivot-link" tabindex="1">
+      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
+    </li>
+  </ul>
+  <div class="ms-Pivot-content" data-content="files">
+    This is the my files tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="recent">
+    This is the recent tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="shared">
+    This is the shared with me tab.
+  </div>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var PivotElements = document.querySelectorAll(".ms-Pivot");
+  for (var i = 0; i < PivotElements.length; i++) {
+    new fabric['Pivot'](PivotElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default Pivot +
      + +
      +
      +
      + 
      <div class="ms-Pivot">
+  <ul class="ms-Pivot-links">
+    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
+      My files
+    </li>
+    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
+      Recent
+    </li>
+    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
+      Shared with me
+    </li>
+    <li class="ms-Pivot-link" tabindex="1">
+      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
+    </li>
+  </ul>
+  <div class="ms-Pivot-content" data-content="files">
+    This is the my files tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="recent">
+    This is the recent tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="shared">
+    This is the shared with me tab.
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PivotElements = document.querySelectorAll(".ms-Pivot");
+  for (var i = 0; i < PivotElements.length; i++) {
+    new fabric['Pivot'](PivotElements[i]);
+  }
+</script>
      +
      +
      + +
      +
        +
      • + My files +
        • +
      • + Recent +
        • +
      • + Shared with me +
        • +
      • + +
        • +
      +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      +
      +
      +
      +
      + Large Pivot +
      + +
      +
      +
      + 
      <div class="ms-Pivot ms-Pivot--large">
+  <ul class="ms-Pivot-links">
+    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
+      My files
+    </li>
+    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
+      Recent
+    </li>
+    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
+      Shared with me
+    </li>
+    <li class="ms-Pivot-link" tabindex="1">
+      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
+    </li>
+  </ul>
+  <div class="ms-Pivot-content" data-content="files">
+    This is the my files tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="recent">
+    This is the recent tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="shared">
+    This is the shared with me tab.
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PivotElements = document.querySelectorAll(".ms-Pivot");
+  for (var i = 0; i < PivotElements.length; i++) {
+    new fabric['Pivot'](PivotElements[i]);
+  }
+</script>
      +
      +
      + +
      +
        +
      • + My files +
        • +
      • + Recent +
        • +
      • + Shared with me +
        • +
      • + +
        • +
      +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      +
      +
      +
      +
      + Tabs Pivot +
      + +
      +
      +
      + 
      <div class="ms-Pivot ms-Pivot--tabs">
+  <ul class="ms-Pivot-links">
+    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
+      My files
+    </li>
+    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
+      Recent
+    </li>
+    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
+      Shared with me
+    </li>
+    <li class="ms-Pivot-link" tabindex="1">
+      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
+    </li>
+  </ul>
+  <div class="ms-Pivot-content" data-content="files">
+    This is the my files tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="recent">
+    This is the recent tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="shared">
+    This is the shared with me tab.
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PivotElements = document.querySelectorAll(".ms-Pivot");
+  for (var i = 0; i < PivotElements.length; i++) {
+    new fabric['Pivot'](PivotElements[i]);
+  }
+</script>
      +
      +
      + +
      +
        +
      • + My files +
        • +
      • + Recent +
        • +
      • + Shared with me +
        • +
      • + +
        • +
      +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      +
      +
      +
      +
      + Large Tabs Pivot +
      + +
      +
      +
      + 
      <div class="ms-Pivot ms-Pivot--large ms-Pivot--tabs">
+  <ul class="ms-Pivot-links">
+    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
+      My files
+    </li>
+    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
+      Recent
+    </li>
+    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
+      Shared with me
+    </li>
+    <li class="ms-Pivot-link" tabindex="1">
+      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
+    </li>
+  </ul>
+  <div class="ms-Pivot-content" data-content="files">
+    This is the my files tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="recent">
+    This is the recent tab.
+  </div>
+  <div class="ms-Pivot-content" data-content="shared">
+    This is the shared with me tab.
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var PivotElements = document.querySelectorAll(".ms-Pivot");
+  for (var i = 0; i < PivotElements.length; i++) {
+    new fabric['Pivot'](PivotElements[i]);
+  }
+</script>
      +
      +
      + +
      +
        +
      • + My files +
        • +
      • + Recent +
        • +
      • + Shared with me +
        • +
      • + +
        • +
      +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/ProgressIndicator/ProgressIndicator.html b/dist/documentation/Components/ProgressIndicator/ProgressIndicator.html new file mode 100644 index 00000000..276737a3 --- /dev/null +++ b/dist/documentation/Components/ProgressIndicator/ProgressIndicator.html @@ -0,0 +1,979 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      ProgressIndicator

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Progress Indicators are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, use a Spinner instead. Progress Indicators can appear in a new panel, a flyout, under the UI initiating the operation, or even replacing the initiating UI, as long as the UI can return if the operation is canceled or is stopped.

      +

      Progress Indicators feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears below. The description should tell someone exactly what the operation is doing. Examples of formatting include:

      +

      [Object] is being [operation name], or
      [Object] is being [operation name] to [destination name] or
      [Object] is being [operation name] from [source name] to [destination name]

      +

      Status text is generally in units elapsed and total units. If the operation can be canceled, an “X” glyph is used and should be placed in the upper right, aligned with the baseline of the operation name. When an error occurs, replace the status text with the error description using ms-fontColor-redDark.

      +

      Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they arerarely accurate enough to be trustworthy. Also combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the operation description to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-ProgressIndicator">
+  <div class="ms-ProgressIndicator-itemName">Example.jpg</div>
+  <div class="ms-ProgressIndicator-itemProgress">
+    <div class="ms-ProgressIndicator-progressTrack"></div>
+    <div class="ms-ProgressIndicator-progressBar"></div>
+  </div>
+  <div class="ms-ProgressIndicator-itemDescription">Example.jpg</div>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var ProgressIndicatorElements = document.querySelectorAll(".ms-ProgressIndicator");
+  for (var i = 0; i < ProgressIndicatorElements.length; i++) {
+    let ProgressIndicator = new fabric['ProgressIndicator'](ProgressIndicatorElements[i]);
+    setTimeout(function() {
+      ProgressIndicator.setProgressPercent(1);
+    }, 2000);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default ProgressIndicator +
      + +
      +
      +
      + 
      <div class="ms-ProgressIndicator">
+  <div class="ms-ProgressIndicator-itemName">Example.jpg</div>
+  <div class="ms-ProgressIndicator-itemProgress">
+    <div class="ms-ProgressIndicator-progressTrack"></div>
+    <div class="ms-ProgressIndicator-progressBar"></div>
+  </div>
+  <div class="ms-ProgressIndicator-itemDescription">Example.jpg</div>
+</div>
      + 
      <script type="text/javascript">
+  var ProgressIndicatorElements = document.querySelectorAll(".ms-ProgressIndicator");
+  for (var i = 0; i < ProgressIndicatorElements.length; i++) {
+    let ProgressIndicator = new fabric['ProgressIndicator'](ProgressIndicatorElements[i]);
+    setTimeout(function() {
+      ProgressIndicator.setProgressPercent(1);
+    }, 2000);
+  }
+</script>
      +
      +
      + +
      +
      Example.jpg
      +
      +
      +
      +
      +
      Example.jpg
      +
      +
      +
      +
      +
      +

      Methods

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      NameParametersDescription
      setProgressPercent(percent)

      percent: {Number} Floating point number from 0 to 1

      +      		 +
      + Starts or restarts the animation sequence. +
      +
      setProgress(progress)

      progress: {Number} Sets the progress, must be between 0 and total

      +      		 +
      + Sets the progress for a determinate operation. Use this in combination with setTotal. +
      +
      setTotal(total)

      total: {Number} Total size of component progress

      +      		 +
      + Sets the total file size, etc. for a determinate operation. Use this in combination with setProgress. +
      +
      setName(name)

      name: {String} Name of title or label

      +      		 +
      + Sets the text for the title or label. +
      +
      setDescription(description)

      description: {String} Text for description

      +      		 +
      + Sets the text for the description. +
      +
      cacheDOM()

      None

      +      		 +
      + Caches elements and values of the component. +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/SearchBox/SearchBox.html b/dist/documentation/Components/SearchBox/SearchBox.html new file mode 100644 index 00000000..4f26b27e --- /dev/null +++ b/dist/documentation/Components/SearchBox/SearchBox.html @@ -0,0 +1,1081 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      SearchBox

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      SearchBoxes provide an input field for searching through content, allowing users to locate specific items within the website or app.

      +

      Zero input state

      +

      When the user has clicked into the SearchBox, but has not entered any text, there is an opportunity to display "hint text" within the input field, explaining what a user can do next. This could prompt a user to search for specific type content, or explain the scope of the search. Examples include "type to search", "try searching for <x>", "search for a place" or "type to search in <x location>".

      +

      Autocomplete suggestions

      +

      As the user enters a query string, they are provided with a dropdown of autocomplete suggestions or disambiguation options. This will help them expedite the input process and formulate an effective query. Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for autocomplete content. In general, autocomplete suggestions have the user's input highlighted in some way (generally bolded) to indicate why it's being displayed. As the user enters more keystrokes, the suggestions update continuously/in real time. To see autocomplete suggestions, the user does not need to hit enter (execute a full search), as it is a lightweight way to get quick suggestions or results. If there are mixed result types within the autocomplete suggestions, provide visual indicators or grouping to help organize the information, making it easier to parse.

      +

      +

      As a general guideline, results should be displayed in context with the query that was typed, with immediate access to edit the query or enter a new one. One method to enable efficient access to both edit the previous query and enter a new query is to highlight the previous query when the field is reactivated. This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string.

      +

      Search scopes

      +

      Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can help to ensure that the user expectation will be met by the capabilities of the search you are performing, which will reduce the possibility of frustration. The search entry point should be juxtaposed with the content being searched.

      +

      Some common search scopes include:

      +
        +
      • + Global: Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more. +
        • +
      • + Web: Search a web index. Results include pages, entities, and answers. +
        • +
      • + My stuff: Search across device(s), cloud, social graphs, and more. Results are varied, but are constrained by the connection to user account(s). +
        • +
      +

      SearchBox with no parent container

      +

      Use a SearchBox without a parent container when it is not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-SearchBox">
+  <input class="ms-SearchBox-field" type="text" value="">
+  <label class="ms-SearchBox-label">
+    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+    <span class="ms-SearchBox-text">Search</span> 
+  </label>
+  <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
+    <button class="ms-CommandButton-button">
+      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Clear"></i></span> 
+      <span class="ms-CommandButton-label"></span> 
+    </button>
+  </div>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var SearchBoxElements = document.querySelectorAll(".ms-SearchBox");
+  for (var i = 0; i < SearchBoxElements.length; i++) {
+    new fabric['SearchBox'](SearchBoxElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default SearchBox +
      + +
      +
      +
      + 
      <div class="ms-SearchBox">
+  <input class="ms-SearchBox-field" type="text" value="">
+  <label class="ms-SearchBox-label">
+    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+    <span class="ms-SearchBox-text">Search</span> 
+  </label>
+  <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
+    <button class="ms-CommandButton-button">
+      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Clear"></i></span> 
+      <span class="ms-CommandButton-label"></span> 
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var SearchBoxElements = document.querySelectorAll(".ms-SearchBox");
+  for (var i = 0; i < SearchBoxElements.length; i++) {
+    new fabric['SearchBox'](SearchBoxElements[i]);
+  }
+</script>
      +
      +
      + + +
      + + + +
      + +
      + +
      +
      +
      +
      +
      + Collapsed SearchBox +
      + +
      +
      +
      + 
      <div class="ms-SearchBox ms-SearchBox--commandBar is-collapsed">
+  <input class="ms-SearchBox-field" type="text" value="">
+  <label class="ms-SearchBox-label">
+    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+    <span class="ms-SearchBox-text">Search</span> 
+  </label>
+  <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
+    <button class="ms-CommandButton-button">
+      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Clear"></i></span> 
+      <span class="ms-CommandButton-label"></span> 
+    </button>
+  </div>
+  <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
+    <button class="ms-CommandButton-button">
+      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
+      <span class="ms-CommandButton-label"></span> 
+    </button>
+  </div>
+  <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
+    <button class="ms-CommandButton-button">
+      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
+      <span class="ms-CommandButton-label"></span> 
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var SearchBoxElements = document.querySelectorAll(".ms-SearchBox");
+  for (var i = 0; i < SearchBoxElements.length; i++) {
+    new fabric['SearchBox'](SearchBoxElements[i]);
+  }
+</script>
      +
      +
      + + + +
      +
      +
      +
      + CommandBar SearchBox +
      + +
      +
      +
      + 
      <div class="ms-SearchBox ms-SearchBox--commandBar">
+  <input class="ms-SearchBox-field" type="text" value="">
+  <label class="ms-SearchBox-label">
+    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+    <span class="ms-SearchBox-text">Search</span> 
+  </label>
+  <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
+    <button class="ms-CommandButton-button">
+      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Clear"></i></span> 
+      <span class="ms-CommandButton-label"></span> 
+    </button>
+  </div>
+  <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
+    <button class="ms-CommandButton-button">
+      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
+      <span class="ms-CommandButton-label"></span> 
+    </button>
+  </div>
+  <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
+    <button class="ms-CommandButton-button">
+      <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
+      <span class="ms-CommandButton-label"></span> 
+    </button>
+  </div>
+</div>
      + 
      <script type="text/javascript">
+  var SearchBoxElements = document.querySelectorAll(".ms-SearchBox");
+  for (var i = 0; i < SearchBoxElements.length; i++) {
+    new fabric['SearchBox'](SearchBoxElements[i]);
+  }
+</script>
      +
      +
      + + +
      + + + +
      + +
      + +
      + +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Spinner/Spinner.html b/dist/documentation/Components/Spinner/Spinner.html new file mode 100644 index 00000000..e1983fd9 --- /dev/null +++ b/dist/documentation/Components/Spinner/Spinner.html @@ -0,0 +1,996 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Spinner

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a ProgressIndicator. They can be various sizes, located inline with content or centered. They generally appear after an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-Spinner">
+</div>
        +
        3. +
      3. +

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

        + 
        <script>
+  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
+  for (var i = 0; i < SpinnerElements.length; i++) {
+    new fabric['Spinner'](SpinnerElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default Spinner +
      + +
      +
      +
      + 
      <div class="ms-Spinner">
+</div>
      + 
      <script>
+  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
+  for (var i = 0; i < SpinnerElements.length; i++) {
+    new fabric['Spinner'](SpinnerElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      +
      +
      +
      +
      + Large Spinner +
      + +
      +
      +
      + 
      <div class="ms-Spinner ms-Spinner--large">
+</div>
      + 
      <script>
+  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
+  for (var i = 0; i < SpinnerElements.length; i++) {
+    new fabric['Spinner'](SpinnerElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      +
      +
      +
      +
      + Spinner with Label +
      + +
      +
      +
      + 
      <div class="ms-Spinner">
+  <div class="ms-Spinner-label">
+    Loading...
+  </div>
+</div>
      + 
      <script>
+  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
+  for (var i = 0; i < SpinnerElements.length; i++) {
+    new fabric['Spinner'](SpinnerElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + Loading... +
      +
      +
      +
      +
      +
      + Large Spinner with Label +
      + +
      +
      +
      + 
      <div class="ms-Spinner ms-Spinner--large">
+  <div class="ms-Spinner-label">
+    Loading...
+  </div>
+</div>
      + 
      <script>
+  var SpinnerElements = document.querySelectorAll(".ms-Spinner");
+  for (var i = 0; i < SpinnerElements.length; i++) {
+    new fabric['Spinner'](SpinnerElements[i]);
+  }
+</script>
      +
      +
      + +
      +
      + Loading... +
      +
      +
      +
      +
      +
      +

      Methods

      + + + + + + + + + + + + + + + + + + + + +
      NameParametersDescription
      start()

      None

      +      		 +
      + Starts or restarts the animation sequence +
      +
      stop()

      None

      +      		 +
      + Stops the animation sequence +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Table/Table.html b/dist/documentation/Components/Table/Table.html new file mode 100644 index 00000000..9f116887 --- /dev/null +++ b/dist/documentation/Components/Table/Table.html @@ -0,0 +1,1306 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Table

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Presents tabular data with multiple rows and columns. The table's width is flexible, but it does not have any advanced responsive behaviors.

      +
      +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <table class="ms-Table">
+  <thead>
+    <tr>
+      <th>Location</th>
+      <th>Modified</th>
+      <th>Type</th>
+      <th>File Name</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+  </tbody>
+</table>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var TableElements = document.querySelectorAll(".ms-Table");
+  for (var i = 0; i < TableElements.length; i++) {
+    new fabric['Table'](TableElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default Table +
      + +
      +
      +
      + 
      <table class="ms-Table">
+  <thead>
+    <tr>
+      <th>Location</th>
+      <th>Modified</th>
+      <th>Type</th>
+      <th>File Name</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+  </tbody>
+</table>
      + 
      <script type="text/javascript">
+  var TableElements = document.querySelectorAll(".ms-Table");
+  for (var i = 0; i < TableElements.length; i++) {
+    new fabric['Table'](TableElements[i]);
+  }
+</script>
      +
      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      + +
      +
      +
      +
      + Fixed Table +
      + +
      +
      +
      + 
      <table class="ms-Table ms-Table--fixed">
+  <thead>
+    <tr>
+      <th>Location</th>
+      <th>Modified</th>
+      <th>Type</th>
+      <th>File Name</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+  </tbody>
+</table>
      + 
      <script type="text/javascript">
+  var TableElements = document.querySelectorAll(".ms-Table");
+  for (var i = 0; i < TableElements.length; i++) {
+    new fabric['Table'](TableElements[i]);
+  }
+</script>
      +
      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      + +
      +
      +
      +
      + Selectable Table +
      + +
      +
      +
      + 
      <table class="ms-Table ms-Table--selectable">
+  <thead>
+    <tr>
+      <th class="ms-Table-rowCheck"></th>
+      <th>Location</th>
+      <th>Modified</th>
+      <th>Type</th>
+      <th>File Name</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="ms-Table-rowCheck"></td>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td class="ms-Table-rowCheck"></td>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td class="ms-Table-rowCheck"></td>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td class="ms-Table-rowCheck"></td>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td class="ms-Table-rowCheck"></td>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td class="ms-Table-rowCheck"></td>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+    <tr>
+      <td class="ms-Table-rowCheck"></td>
+      <td>Location</td>
+      <td>Modified</td>
+      <td>Type</td>
+      <td>File Name</td>
+    </tr>
+  </tbody>
+</table>
      + 
      <script type="text/javascript">
+  var TableElements = document.querySelectorAll(".ms-Table");
+  for (var i = 0; i < TableElements.length; i++) {
+    new fabric['Table'](TableElements[i]);
+  }
+</script>
      +
      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      + +
      +
      +
      +
      +
      +
      + + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/TextField/TextField.html b/dist/documentation/Components/TextField/TextField.html new file mode 100644 index 00000000..507e1db6 --- /dev/null +++ b/dist/documentation/Components/TextField/TextField.html @@ -0,0 +1,1021 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      TextField

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-TextField">
+  <label class="ms-Label">Name</label>
+  <input class="ms-TextField-field" type="text" value="" placeholder="">
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var TextFieldElements = document.querySelectorAll(".ms-TextField");
+  for (var i = 0; i < TextFieldElements.length; i++) {
+    new fabric['TextField'](TextFieldElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default TextField +
      + +
      +
      +
      + 
      <div class="ms-TextField">
+  <label class="ms-Label">Name</label>
+  <input class="ms-TextField-field" type="text" value="" placeholder="">
+</div>
      + 
      <script type="text/javascript">
+  var TextFieldElements = document.querySelectorAll(".ms-TextField");
+  for (var i = 0; i < TextFieldElements.length; i++) {
+    new fabric['TextField'](TextFieldElements[i]);
+  }
+</script>
      +
      +
      + +
      + + +
      +
      +
      +
      +
      + Multiline TextField +
      + +
      +
      +
      + 
      <div class="ms-TextField ms-TextField--multiline">
+  <label class="ms-Label">Name</label>
+  <textarea class="ms-TextField-field"></textarea>
+</div>
      + 
      <script type="text/javascript">
+  var TextFieldElements = document.querySelectorAll(".ms-TextField");
+  for (var i = 0; i < TextFieldElements.length; i++) {
+    new fabric['TextField'](TextFieldElements[i]);
+  }
+</script>
      +
      +
      + +
      + + +
      +
      +
      +
      +
      + Placeholder TextField +
      + +
      +
      +
      + 
      <div class="ms-TextField ms-TextField--placeholder">
+  <label class="ms-Label">Given name</label>
+  <input class="ms-TextField-field" type="text" value="" placeholder="">
+</div>
      + 
      <script type="text/javascript">
+  var TextFieldElements = document.querySelectorAll(".ms-TextField");
+  for (var i = 0; i < TextFieldElements.length; i++) {
+    new fabric['TextField'](TextFieldElements[i]);
+  }
+</script>
      +
      +
      + +
      + + +
      +
      +
      +
      +
      + Underlined TextField +
      + +
      +
      +
      + 
      <div class="ms-TextField ms-TextField--underlined">
+  <label class="ms-Label">Name</label>
+  <input class="ms-TextField-field" type="text" value="" placeholder="">
+</div>
      + 
      <script type="text/javascript">
+  var TextFieldElements = document.querySelectorAll(".ms-TextField");
+  for (var i = 0; i < TextFieldElements.length; i++) {
+    new fabric['TextField'](TextFieldElements[i]);
+  }
+</script>
      +
      +
      + +
      + + +
      +
      +
      +
      +
      + Disabled TextField +
      + +
      +
      +
      + 
      <div class="ms-TextField is-disabled">
+  <label class="ms-Label">Name</label>
+  <input class="ms-TextField-field" type="text" value="" placeholder="" disabled>
+</div>
      + 
      <script type="text/javascript">
+  var TextFieldElements = document.querySelectorAll(".ms-TextField");
+  for (var i = 0; i < TextFieldElements.length; i++) {
+    new fabric['TextField'](TextFieldElements[i]);
+  }
+</script>
      +
      +
      + +
      + + +
      +
      +
      +
      +
      +

      States

      + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-disabled.ms-TextField +
      + Disables user input on TextField +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Components/Toggle/Toggle.html b/dist/documentation/Components/Toggle/Toggle.html new file mode 100644 index 00000000..23ad66b6 --- /dev/null +++ b/dist/documentation/Components/Toggle/Toggle.html @@ -0,0 +1,971 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Toggle

      + +
      +
      +
      +
      +
      +

      Overview

      +
      +
      +
      +

      Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use.

      +
      +
      +
      + Also available in + Fabric React +
      +
      +
      +
      +

      Using this Component

      +
        +
      1. +

        Confirm that you have references to Fabric's CSS and JavaScript on your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="fabric.min.css" />
+<link rel="stylesheet" href="fabric.components.min.css" />
+<script src="fabric.min.js"></script>
+
        +
        +
        +
        2. +
      2. +

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

        + 
        <div class="ms-Toggle">
+  <span class="ms-Toggle-description">Let apps use my location</span> 
+  <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
+  <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0">
+    <span class="ms-Label ms-Label--off">Off</span> 
+    <span class="ms-Label ms-Label--on">On</span> 
+  </label>
+</div>
        +
        3. +
      3. +

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

        + 
        <script type="text/javascript">
+  var ToggleElements = document.querySelectorAll(".ms-Toggle");
+  for (var i = 0; i < ToggleElements.length; i++) {
+    new fabric['Toggle'](ToggleElements[i]);
+  }
+</script>
        +
        4. +
      4. +

        Replace the sample HTML content with your content.

        +
        5. +
      +
      +
      +

      Variants

      +
      +
      + Default Toggle +
      + +
      +
      +
      + 
      <div class="ms-Toggle">
+  <span class="ms-Toggle-description">Let apps use my location</span> 
+  <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
+  <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0">
+    <span class="ms-Label ms-Label--off">Off</span> 
+    <span class="ms-Label ms-Label--on">On</span> 
+  </label>
+</div>
      + 
      <script type="text/javascript">
+  var ToggleElements = document.querySelectorAll(".ms-Toggle");
+  for (var i = 0; i < ToggleElements.length; i++) {
+    new fabric['Toggle'](ToggleElements[i]);
+  }
+</script>
      +
      +
      + + +
      + Let apps use my location + + +
      + +
      +
      +
      +
      + Disabled Toggle +
      + +
      +
      +
      + 
      <div class="ms-Toggle is-disabled">
+  <span class="ms-Toggle-description">Let apps use my location</span> 
+  <input type="checkbox" id="demo-toggle-2" class="ms-Toggle-input" />
+  <label for="demo-toggle-2" class="ms-Toggle-field">
+    <span class="ms-Label ms-Label--off">Off</span> 
+    <span class="ms-Label ms-Label--on">On</span> 
+  </label>
+</div>
      + 
      <script type="text/javascript">
+  var ToggleElements = document.querySelectorAll(".ms-Toggle");
+  for (var i = 0; i < ToggleElements.length; i++) {
+    new fabric['Toggle'](ToggleElements[i]);
+  }
+</script>
      +
      +
      + + +
      + Let apps use my location + + +
      + +
      +
      +
      +
      + Text Left Toggle +
      + +
      +
      +
      + 
      <div class="ms-Toggle ms-Toggle--textLeft">
+  <span class="ms-Toggle-description">Let apps use my location</span> 
+  <input type="checkbox" id="demo-toggle-1" class="ms-Toggle-input" />
+  <label for="demo-toggle-1" class="ms-Toggle-field" tabindex="0">
+    <span class="ms-Label ms-Label--off">Off</span> 
+    <span class="ms-Label ms-Label--on">On</span> 
+  </label>
+</div>
      + 
      <script type="text/javascript">
+  var ToggleElements = document.querySelectorAll(".ms-Toggle");
+  for (var i = 0; i < ToggleElements.length; i++) {
+    new fabric['Toggle'](ToggleElements[i]);
+  }
+</script>
      +
      +
      + + +
      + Let apps use my location + + +
      + +
      +
      +
      +
      +
      +
      + + + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/GetStarted/GetStarted.html b/dist/documentation/GetStarted/GetStarted.html new file mode 100644 index 00000000..ae503251 --- /dev/null +++ b/dist/documentation/GetStarted/GetStarted.html @@ -0,0 +1,840 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +
      +
      +

      Get started

      +
      +
      +
      +

      Get started with Fabric JS

      +

      + Use the CDN, Bower, NPM, or Nuget to get the components and core styling. +

      +
        +
      1. +

        The easiest way to get Fabric is by referencing the CDN. Include the following in the <head> of your page:

        +
        +
        + 
        +			<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.5.0/css/fabric.min.css" />
+<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.5.0/css/fabric.components.min.css" />
+<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.5.0/js/fabric.min.js"></script>
+
        +
        +
        +

        To reference the latest version, just change the version number in the URL to your desired version. All versions of Fabric are on the CDN, and the latest version is 1.5.0.

        +
        2. +
      2. +

        Copy the HTML from one of the samples into your page. For example with the button

        +
        +
        + 
        +			<button class="ms-Button">
+  <span class="ms-Button-label">Create Account</span>
+</button>
+
        +
        +
        +
        3. +
      3. +

        Add the appropriate <script> tag to your page below the references to Fabric's JavaScript to instantiate, for example, all the Button components on the page: +

        + + + +
        +
        + 
        +			<script type="text/javascript">
+var ButtonElements = document.querySelectorAll(".ms-Button.AlertExamples");
+for(var i = 0; i < ButtonElements.length; i++) {
+  new fabric["Button"](ButtonElements[i], function() {
+    alert("You clicked a New User button");
+  });
+}
+</script>
+
        +
        +
        +

        Or, for example add the appropriate <script> tag to your page to instantiate a single Button component on the page

        + +
        +
        + 
        +			<script type="text/javascript">
+var ButtonComponent = document.querySelector(".ms-Button.AlertExample");
+new fabric["Button"](ButtonComponent, function() {
+  alert("You clicked the Create Account button");
+});
+</script>
+
        +
        +
        +
        4. +
      4. +

        You can also reference styles from Fabric Core, such as the type styles:

        +
        +
        + 
        +			<span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
+
        +
        +
        +

        For more information on assets and styles available in Fabric Core, check out the Styles documentation.

        +
        5. +
      +

      Other ways to get Fabric JS

      +

      + To build Fabric JS locally, you can follow the steps outlined in the building documentation. To get Fabric via a package manager such as NuGet, npm, or Bower, you can follow the package manager documentation. +

      +

      Need a component Fabric JS doesn’t have?

      +

      Check the Fabric JS Trello board and vote up the request so we can track it. If you don’t see an existing card, please file an issue in the repository and we’ll add the card for you.

      +
      +
      + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/Samples/Form/css/Form.css b/dist/documentation/Samples/Form/css/Form.css new file mode 100644 index 00000000..277de58d --- /dev/null +++ b/dist/documentation/Samples/Form/css/Form.css @@ -0,0 +1,6327 @@ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Breadcrumb { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline-block; + margin-right: -4px; +} + +.ms-Breadcrumb-chevron { + font-size: 12px; + color: #666666; + vertical-align: top; + margin: 13px 4px; + line-height: 1; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: #0078d7; + padding: 8px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu::before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: #ffffff; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: 0; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + font-weight: 100; + font-size: 21px; + color: #333333; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 9px 3px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 2px 0; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 14px; + font-weight: 400; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button.is-hidden { + display: none; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Button:hover { + color: #1aebff; + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Button:hover { + color: #37006e; + border-color: #37006e; + } +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button-label { + color: #333333; + font-weight: 600; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--small { + min-width: 60px; + min-height: 24px; + height: auto; + padding-top: 0; + padding-bottom: 4px; +} + +.ms-Button.ms-Button--small .ms-Button-label { + font-weight: 400; + font-size: 12px; +} + +.ms-Button.ms-Button--hero { + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border: 0; + padding: 0; + position: relative; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + margin-right: 4px; + padding-top: 5px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + font-size: 12px; + height: 18px; + line-height: 18px; + width: 18px; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-size: 21px; + font-weight: 100; + position: relative; + text-decoration: none; + vertical-align: top; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + border: 1px solid #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + border: 1px solid #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + border: 1px solid #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + display: block; + height: auto; + max-width: 280px; + min-height: 72px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-weight: 600; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-weight: 400; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Callout { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + width: 288px; +} + +.ms-Callout.is-hidden { + display: none; +} + +.ms-Callout-header { + z-index: 105; + padding-top: 24px; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-title { + margin: 0; + font-weight: 300; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-weight: 300; + color: #333333; + font-size: 12px; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-link { + font-size: 14px; +} + +.ms-Callout-inner { + height: 100%; + padding-top: 0; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button { + color: #0078d7; +} + +.ms-Callout-actions .ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-weight: 100; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + padding-top: 12px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-inner { + padding-bottom: 12px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +.ms-CheckBox { + box-sizing: border-box; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-CheckBox .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +.ms-CheckBox-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +.ms-CheckBox-field::after { + content: '\E73E'; + font-family: 'FabricMDL2Icons'; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: 13px; + top: 0; + color: #ffffff; + line-height: 20px; + width: 20px; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field::after { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field::after { + color: #ffffff; + } +} + +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-CheckBox-field:hover::before, +.ms-CheckBox-field:focus::before { + border-color: #767676; +} + +.ms-CheckBox-field:hover .ms-Label, +.ms-CheckBox-field:focus .ms-Label { + color: #000000; +} + +.ms-CheckBox-field.is-disabled { + cursor: default; +} + +.ms-CheckBox-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-CheckBox-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-CheckBox-field.in-focus::before { + border-color: #767676; +} + +.ms-CheckBox-field.in-focus.is-disabled::before { + border-color: #c8c8c8; +} + +.ms-CheckBox-field.in-focus.is-checked::before { + border-color: #106ebe; +} + +.ms-CheckBox-field.is-checked::before { + border: 10px solid #0078d7; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-CheckBox-field.is-checked::after { + display: block; +} + +.ms-CheckBox-field.is-checked:hover::before, +.ms-CheckBox-field.is-checked:focus::before { + border-color: #106ebe; +} + +.ms-RadioButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + color: #333333; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-RadioButton .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-RadioButton-input { + position: absolute; + opacity: 0; +} + +.ms-RadioButton-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + border-radius: 50%; +} + +.ms-RadioButton-field::after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: 8px; + left: 8px; + bottom: 0; + right: 0; + transition-property: top, left, width, height; + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field::after { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field::after { + color: #600000; + } +} + +.ms-RadioButton-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-RadioButton-field:hover::before, +.ms-RadioButton-field:focus::before { + border-color: #767676; +} + +.ms-RadioButton-field:hover .ms-Label, +.ms-RadioButton-field:focus .ms-Label { + color: #000000; +} + +.ms-RadioButton-field.is-disabled { + cursor: default; +} + +.ms-RadioButton-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-RadioButton-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-RadioButton-field.is-disabled:hover::before, +.ms-RadioButton-field.is-disabled:focus::before { + border-color: #c8c8c8; +} + +.ms-RadioButton-field.in-focus::before { + border-color: #767676; +} + +.ms-RadioButton-field.is-checked::before { + border: 2px solid #0078d7; + background-color: transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked::after { + background-color: #0078d7; + top: 5px; + left: 5px; + width: 10px; + height: 10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::after { + background-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked:hover::before, +.ms-RadioButton-field.is-checked:focus::before { + border-color: #0078d7; +} + +.ms-RadioButton-field.is-checked.in-focus::before { + border-color: #0078d7; +} + +.ms-ChoiceFieldGroup { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin-bottom: 4px; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; + list-style: none; +} + +.ms-CommandBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #f4f4f4; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar .ms-CommandButton--actionButton { + border-right: 1px solid #eaeaea; +} + +.ms-CommandBar .ms-Button { + height: 100%; +} + +.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon { + padding-right: 0; +} + +.ms-CommandBar .ms-Button.is-hidden { + display: none; +} + +.ms-CommandBar .ms-SearchBox, +.ms-CommandBar .ms-SearchBox-field, +.ms-CommandBar .ms-SearchBox-label { + height: 100%; +} + +.ms-CommandBar .ms-SearchBox { + display: inline-block; + vertical-align: top; + transition: margin-right 0.267s; +} + +.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 220px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: 10; + } +} + +.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button { + font-size: 18px; + padding: 0 11px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar .ms-SearchBox { + margin-right: 24px; + } +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar { + height: 44px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar.search-expanded .ms-SearchBox { + margin-right: 8px; + } + + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + transition: none; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 4px; + height: 100%; +} + +.ms-CommandBar-sideCommands .ms-Button:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 20px; + } +} + +.ms-CommandButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: inline-block; + position: relative; + vertical-align: top; +} + +.ms-CommandButton.is-hidden { + display: none; +} + +.ms-CommandButton:disabled .ms-CommandButton-button, +.ms-CommandButton.is-disabled .ms-CommandButton-button { + cursor: default; +} + +.ms-CommandButton:disabled .ms-CommandButton-button:hover, +.ms-CommandButton.is-disabled .ms-CommandButton-button:hover { + background-color: #eff6fc; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label { + color: #a6a6a6; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-CommandButton .ms-ContextualMenu { + display: none; +} + +.ms-CommandButton-button, +.ms-CommandButton-splitIcon { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + cursor: pointer; + display: inline-block; + height: 40px; + line-height: 40px; + outline: 1px solid transparent; + padding: 0 8px; + position: relative; + vertical-align: top; + background: transparent; +} + +.ms-CommandButton-button:hover, +.ms-CommandButton-splitIcon:hover { + background-color: #eaeaea; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.ms-CommandButton-button:active, +.ms-CommandButton-splitIcon:active { + background-color: #eaeaea; +} + +.ms-CommandButton-button:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-button:focus, +.ms-CommandButton-splitIcon:focus { + outline: 0; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-button, + .ms-CommandButton-splitIcon { + height: 44px; + } + + .ms-CommandButton-button .ms-CommandButton-icon, + .ms-CommandButton-splitIcon .ms-CommandButton-icon { + font-size: 20px; + } + + .ms-CommandButton-button .ms-CommandButton-label, + .ms-CommandButton-splitIcon .ms-CommandButton-label { + line-height: 44px; + } +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton + .ms-CommandButton { + margin-left: 4px; + } +} + +.ms-CommandButton-icon { + display: inline-block; + margin-right: 8px; + position: relative; + font-size: 16px; + min-width: 16px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.ms-CommandButton-label { + font-size: 14px; + font-weight: 400; + color: #333333; + line-height: 40px; + height: 100%; + display: inline-block; + vertical-align: top; +} + +.ms-CommandButton-label:hover { + color: #212121; +} + +.ms-CommandButton-dropdownIcon, +.ms-CommandButton-splitIcon { + display: inline-block; + position: relative; + color: #333333; + font-size: 12px; + font-weight: 300; + min-width: 12px; + height: 100%; + vertical-align: top; + margin-left: 8px; +} + +.ms-CommandButton-dropdownIcon .ms-Icon, +.ms-CommandButton-splitIcon .ms-Icon { + line-height: normal; + padding-top: 16px; +} + +.ms-CommandButton-dropdownIcon:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-dropdownIcon, + .ms-CommandButton-splitIcon { + display: none; + } +} + +.ms-CommandButton-splitIcon { + margin-left: -2px; + width: 27px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + margin-left: -1px; + position: relative; + padding-top: 16px; +} + +.ms-CommandButton-splitIcon .ms-Icon::after { + position: absolute; + content: ' '; + width: 1px; + height: 16px; + top: 12px; + left: -8px; + border-left: 1px solid #c8c8c8; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + margin-right: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button { + padding: 0 12px; +} + +.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + background: none; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button { + width: 50px; + height: 40px; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + padding-right: 0; +} + +.ms-CommandButton.ms-CommandButton--pivot.is-active::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--pivot:hover::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, +.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + display: inline-block; +} + +@media only screen and (max-width: 479px) { + .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, + .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + font-size: 16px; + } +} + +.ms-ContextualMenu { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + max-width: 220px; + list-style-type: none; + position: relative; + background-color: #ffffff; +} + +.ms-ContextualMenu.is-hidden { + display: none; +} + +.ms-ContextualMenu-item { + position: relative; +} + +.ms-ContextualMenu-link { + box-sizing: border-box; + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 36px; + overflow: hidden; + line-height: 34px; + padding: 0 16px 0 25px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #f4f4f4; + color: #212121; +} + +.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon { + color: #212121; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; + border: 1px solid #666666; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #dadada; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon { + color: #000000; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #d0d0d0; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +.ms-ContextualMenu-link.is-disabled .ms-Icon { + color: #a6a6a6; + pointer-events: none; + cursor: default; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 36px; + line-height: 36px; + padding: 0 18px; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #333333; + font-size: 8px; + font-weight: 600; + width: 24px; + height: 36px; + line-height: 36px; + position: absolute; + text-align: center; + top: 0; + right: 0; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 16px 0 26px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; + font-weight: 600; + color: #333333; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + color: #333333; + content: '\E73E'; + font-size: 10px; + font-weight: 800; + height: 36px; + line-height: 36px; + position: absolute; + left: 7px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus { + color: #212121; + background-color: #f4f4f4; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover::after, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus::after { + color: #212121; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active { + color: #000000; + background-color: #d0d0d0; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active::after { + color: #000000; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link { + padding-left: 40px; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + width: 40px; + text-align: center; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons { + width: 220px; +} + +.ms-DatePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-weight: 100; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-weight: 400; + font-size: 15px; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #b3d6f2; +} + +.ms-DatePicker-day--disabled::before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-weight: 400; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0; + position: absolute; + top: 0; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: 300; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: 400; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-weight: 300; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-weight: 300; + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-weight: 600; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-DetailsList { + position: relative; +} + +.ms-DetailsList.is-horizontalConstrained { + overflow-x: auto; + overflow-y: inherit; +} + +.ms-DetailsList-cell { + word-break: break-word; +} + +.ms-DetailsHeader { + display: inline-block; + min-width: 100%; + height: 36px; + line-height: 36px; + white-space: nowrap; + padding-bottom: 1px; + border-bottom: 1px solid #eaeaea; + margin-bottom: 1px; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-DetailsHeader.is-singleSelect { + padding-left: 40px; +} + +.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover { + background: transparent; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 99; + cursor: col-resize; +} + +.ms-DetailsHeader-cell.is-check .ms-Check-circle { + visibility: hidden; +} + +.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, +.ms-DetailsHeader.is-allSelected .ms-Check-circle { + visibility: visible; +} + +.ms-DetailsHeader-cellWrapper { + display: inline-block; + position: relative; +} + +.ms-DetailsHeader-cellSizeWrapper { + display: inline-block; + vertical-align: top; + margin-right: 16px; +} + +.ms-DetailsHeader-cellSizeWrapper:last-child { + margin-right: 0; +} + +.ms-DetailsHeader-filterChevron.ms-Icon { + color: #a6a6a6; + padding-left: 4px; + vertical-align: middle; +} + +.ms-DetailsHeader-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + color: #a6a6a6; + border: 0; + background: none; + line-height: inherit; + margin: 0; + font-size: inherit; + font-family: inherit; + text-align: left; + height: 36px; + vertical-align: top; +} + +.ms-DetailsHeader-cell.is-check { + position: relative; + padding: 8px 10px; + margin: 0; +} + +.ms-DetailsHeader-cell:focus { + outline: transparent; +} + +.ms-DetailsHeader-cell.is-sortable { + color: #000000; + cursor: default; +} + +.ms-DetailsHeader-cell.is-sortable:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter { + position: absolute; + right: 0; + width: 20px; + top: 0; + bottom: 0; + padding: 0; + text-align: center; + color: #000000; +} + +.ms-DetailsHeader-cell.is-filter:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter::before { + content: ''; + position: absolute; + border-left: 1px solid #a6a6a6; + top: 10px; + bottom: 10px; + left: 0; +} + +.ms-DetailsHeader-cell.is-sizer { + position: absolute; + width: 16px; + cursor: col-resize; + bottom: 0; + top: 0; + height: inherit; + z-index: 99; +} + +.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow { + display: inline; +} + +.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-DetailsHeader-cell.is-resizing.is-sizer::after, +.ms-DetailsHeader-cell.is-sizer:hover::after { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 1px; + background: #eaeaea; + border: 1px solid #ffffff; +} + +.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before, +.ms-DetailsHeader-cell:focus::before { + content: ''; + pointer-events: none; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsHeader-sortArrow.ms-Icon { + font-size: 12px; + margin-right: 4px; + display: none; + color: #a6a6a6; +} + +.ms-DetailsRow { + position: relative; + display: inline-block; + min-width: 100%; + min-height: 36px; + vertical-align: top; + white-space: nowrap; + padding: 10px 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; +} + +.ms-DetailsRow:focus { + outline: transparent; +} + +.ms-DetailsRow.ms-DetailsRow.is-selected { + background: #deecf9; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover, +.ms-DetailsRow:hover { + background: #eff6fc; +} + +.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover, +.ms-DetailsRow.is-selected:hover { + background: #b3d6f2; +} + +.ms-DetailsRow-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + vertical-align: top; + white-space: normal; + word-break: break-word; + margin-right: 16px; +} + +.ms-DetailsRow-cell.is-clipped { + overflow: hidden; +} + +.ms-DetailsRow-cell:last-child { + margin-right: 0; +} + +.ms-DetailsRow-cellIcon { + display: inline-block; + margin-right: 6px; + position: relative; + bottom: -2px; +} + +.ms-DetailsRow-check { + display: inline-block; + cursor: default; + padding: 10px; + margin: -10px 0; + box-sizing: border-box; + vertical-align: top; + background: none; + border: 0; + visibility: hidden; +} + +.ms-DetailsRow-check:focus { + outline: transparent; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow.is-selected .ms-DetailsRow-check { + visibility: visible; +} + +.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox, +.ms-DetailsRow:focus .ms-DetailsRow-focusBox { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsRow-cellMeasurer { + position: absolute; + visibility: hidden; + white-space: nowrap; + top: -1000000000; +} + +.ms-Check { + display: inline-block; + cursor: default; + line-height: 0; + vertical-align: top; +} + +.ms-Check.is-checked .ms-Check-circle { + fill: #0078d7; + stroke: #ffffff; + stroke-width: 1px; +} + +.ms-Check.is-checked .ms-Check-check { + stroke: #ffffff; +} + +.ms-Check-circle { + fill: #ffffff; + stroke: #c8c8c8; +} + +.ms-Check-check { + stroke: #c8c8c8; +} + +.ms-Dialog { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: fixed; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} + +.ms-Dialog.is-open { + display: block; +} + +.ms-Dialog-title { + font-size: 21px; + font-weight: 100; + margin-bottom: 24px; +} + +.ms-Dialog-content { + position: relative; +} + +.ms-Dialog-subText { + color: #333333; + font-size: 12px; + font-weight: 300; + line-height: 1.5; +} + +.ms-Dialog-actions { + margin-top: 24px; + text-align: right; +} + +.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + background-color: #0078d7; + color: #ffffff; + font-size: 28px; + font-weight: 100; + padding: 28px 24px; + margin-top: -28px; + margin-left: -24px; + margin-right: -24px; +} + +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + right: 12px; + top: 12px; + z-index: 10; +} + +.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel { + color: #666666; + font-size: 16px; +} + +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: absolute; +} + +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; +} + +.ms-Panel .ms-Dropdown-items .ms-Dropdown-item { + padding: 7px 16px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Panel .ms-Dropdown-items::before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #212121; + font-size: 12px; + position: absolute; + right: 13px; + bottom: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + padding: 5px 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-title.ms-Dropdown-truncator { + height: auto; + display: block; + position: absolute; + visibility: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + z-index: 400; + overflow-y: scroll; + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; +} + +.ms-Dropdown-items::before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 36px; + padding: 7px 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #b3d6f2; + color: #000000; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #b3d6f2; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-FacePile { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 32px; + width: auto; +} + +.ms-FacePile .ms-FacePile-personaCardHost { + display: none; +} + +.ms-FacePile-addButton { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-FacePile-addButton .ms-Persona-presence, +.ms-FacePile-addButton .ms-Persona-details { + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover, +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus { + background-color: #005a9e; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active { + background-color: #004578; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active { + display: block; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover { + color: #212121; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled { + color: #c8c8c8; +} + +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: 14px; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-weight: 100; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Link { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-List { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + list-style-type: none; +} + +.ms-ListItem { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + color: #333333; + font-size: 14px; + font-weight: 400; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem::before, +.ms-ListItem::after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem::after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-weight: 300; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-weight: 400; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-weight: 300; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-weight: 300; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; + background-color: #333333; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-weight: 600; +} + +.ms-ListItem.is-unseen::after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + position: absolute; + top: 14px; + left: 7px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected::before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected::before, +.ms-ListItem.is-selected:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\e73A'; + font-size: 17px; + color: #767676; + position: absolute; + top: 23px; + left: 7px; + border: 0; +} + +.ms-ListItem.is-selected:hover { + background-color: #b3d6f2; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-weight: 400; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 12px; + font-weight: 400; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + display: inline-block; + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-ContextualHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + background-color: #ffffff; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-ContextualHost.is-positioned { + position: absolute; + margin: 0; +} + +.ms-ContextualHost.is-open { + display: inline-block; +} + +.ms-ContextualHost-beak { + box-shadow: 0 0 15px -5px #3c3c3c; + position: absolute; + width: 28px; + height: 28px; + background: #ffffff; + border: 1px solid #eaeaea; + box-sizing: border-box; + top: -6px; + display: none; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 0; + outline: 1px solid transparent; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak, +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + top: 40px; + display: none; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + left: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + right: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak { + display: block; + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + display: block; + bottom: -10px; +} + +.ms-ContextualHost-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + min-height: 10px; +} + +.ms-ContextualHost-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 10; +} + +.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title { + margin-right: 20px; +} + +.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak { + background-color: #0078d7; +} + +@media (min-width: 480px) { + .ms-ContextualHost { + margin: 16px; + } + + .ms-ContextualHost.is-positioned { + margin: 0; + } + + .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak, + .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + display: block; + } +} + +.ms-MessageBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.ms-MessageBar .ms-Link { + font-size: 12px; +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-right: 8px; + font-size: 16px; + color: #767676; +} + +.ms-MessageBar-text { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 12px; + font-weight: 400; +} + +.ms-MessageBar.ms-MessageBar--warning { + background-color: #fff4ce; +} + +.ms-MessageBar.ms-MessageBar--severeWarning { + background-color: #fed9cc; +} + +.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon { + color: #d83b01; +} + +.ms-MessageBar.ms-MessageBar--error { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--blocked { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-OrgChart { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; +} + +.ms-Overlay { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: rgba(255, 255, 255, 0.4); + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 0; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-u-overflowHidden { + overflow: hidden; +} + +.ms-Panel { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #ffffff; + width: 100%; + max-width: 340px; + box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2); + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: 10; + display: none; + height: 100%; +} + +.ms-Panel.animate-in { + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel.animate-out { + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel .ms-CommandBar { + padding-right: 0; + padding-left: 8px; +} + +.ms-Panel.ms-Panel--md { + max-width: 340px; +} + +.ms-Panel.ms-Panel--lg { + max-width: 644px; +} + +.ms-Panel.ms-Panel--xl { + max-width: 940px; +} + +.ms-Panel.ms-Panel--xxl { + max-width: 1192px; +} + +.ms-Panel--left { + box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2); + left: 0; + right: auto; +} + +.ms-Panel--left.animate-in { + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel--left.animate-out { + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 6px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 16px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-closeButton .ms-Icon--Cancel { + margin-top: 2px; +} + +@media (max-width: 639px) { + .ms-Panel-closeButton { + font-size: 20px; + line-height: 20px; + height: 44px; + right: 4px; + } +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; + height: 100%; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-weight: 100; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +.ms-PanelHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 10; +} + +.ms-PanelHost .ms-Overlay { + cursor: pointer; +} + +.ms-PeoplePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 1px solid #c8c8c8; + cursor: text; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker-searchBox.is-active, +.ms-PeoplePicker-searchBox:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #37006e; + } +} + +.ms-PeoplePicker-searchBox::-webkit-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox::-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-ms-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: 100%; + -ms-flex: 1; + flex: 1; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.ms-PeoplePicker-persona { + cursor: pointer; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + background-color: #ffffff; + border: 1px solid #c8c8c8; + margin-bottom: -1px; + padding-top: 9px; + width: 100%; + padding-left: 0; + box-sizing: border-box; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-weight: 300; + font-size: 12px; + padding-top: 8px; + padding-bottom: 8px; + text-transform: uppercase; + padding-left: 16px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-left: 16px; + cursor: pointer; + outline: 0; +} + +.ms-PeoplePicker-result:hover, +.ms-PeoplePicker-result:focus { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result:focus { + box-shadow: 0 0 0 1px #0078d7 inset; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #b3d6f2; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #69afe5; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active { + background-color: #69afe5; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 100%; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 40px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #a6a6a6; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + background: none; + border: 0; + cursor: pointer; + height: 40px; + position: relative; + width: 100%; +} + +.ms-PeoplePicker-searchMore:hover { + background-color: #f4f4f4; +} + +.ms-PeoplePicker-searchMoreIcon { + font-size: 21px; + height: 40px; + left: 16px; + line-height: 40px; + position: absolute; + text-align: center; + top: 0; + width: 40px; +} + +.ms-PeoplePicker-searchMoreText { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + height: 40px; + left: 64px; + line-height: 40px; + position: absolute; + top: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction { + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder, + .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials, + .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence, + .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details, + .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn { + height: 40px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction { + height: 40px; + } +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-weight: 400; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 1; + position: relative; + width: 100%; + height: 48px; + display: table; + table-layout: fixed; + border-collapse: separate; +} + +.ms-Persona .ms-ContextualHost { + display: none; +} + +.ms-Persona-imageArea { + position: absolute; + overflow: hidden; + text-align: center; + max-width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; + width: 100%; + top: 0; + left: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; + z-index: 5; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-weight: 100; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--blueLight { + background-color: #00bcf2; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #0078d7; +} + +.ms-Persona-initials.ms-Persona-initials--blueDark { + background-color: #002050; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #008272; +} + +.ms-Persona-initials.ms-Persona-initials--greenLight { + background-color: #bad80a; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #107c10; +} + +.ms-Persona-initials.ms-Persona-initials--greenDark { + background-color: #004b1c; +} + +.ms-Persona-initials.ms-Persona-initials--magentaLight { + background-color: #e3008c; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #b4009e; +} + +.ms-Persona-initials.ms-Persona-initials--purpleLight { + background-color: #b4a0ff; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #5c2d91; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #000000; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #d83b01; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #e81123; +} + +.ms-Persona-initials.ms-Persona-initials--redDark { + background-color: #a80000; +} + +.ms-Persona-image { + position: absolute; + top: 0; + left: 0; + height: 48px; + z-index: 10; + width: 100%; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #7fba00; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-presence { + border-color: #000000; + box-shadow: 0 0 0 1px #1aebff inset; + color: #000000; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-presence { + border-color: #ffffff; + box-shadow: 0 0 0 1px #37006e inset; + color: #ffffff; + background-color: #000000; + } +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 8px; + line-height: 12px; + vertical-align: top; +} + +.ms-Persona-details { + padding: 0 12px; + vertical-align: middle; + overflow: hidden; + text-align: left; + padding-left: 60px; + display: table-cell; + width: 100%; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-weight: 400; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-weight: 400; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + display: none; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText::after { + content: ';'; +} + +.ms-Persona.ms-Persona--xs, +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token { + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image, +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea, +.ms-Persona.ms-Persona--facePile .ms-Persona-image, +.ms-Persona.ms-Persona--token .ms-Persona-imageArea, +.ms-Persona.ms-Persona--token .ms-Persona-image { + max-width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder, +.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder, +.ms-Persona.ms-Persona--token .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials, +.ms-Persona.ms-Persona--facePile .ms-Persona-initials, +.ms-Persona.ms-Persona--token .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence, +.ms-Persona.ms-Persona--facePile .ms-Persona-presence, +.ms-Persona.ms-Persona--token .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details, +.ms-Persona.ms-Persona--facePile .ms-Persona-details, +.ms-Persona.ms-Persona--token .ms-Persona-details { + padding-left: 40px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText, +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--token .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--sm { + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + max-width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 48px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--lg { + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + max-width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; + height: 20px; + width: 20px; + border-width: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon { + line-height: 20px; + font-size: 14px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-details { + padding-left: 84px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--xl { + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + max-width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 28px; + width: 28px; + left: 71px; + border-width: 4px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon { + line-height: 28px; + font-size: 21px; + position: relative; + top: 1px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 120px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-weight: 300; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #7fba00; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #fcd116; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon { + position: relative; + left: 1px; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #ffffff; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 0 0 2px #d93b3b inset; + border-radius: 50%; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::after { + content: ''; + width: 100%; + height: 2px; + background-color: #d93b3b; + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + position: absolute; + top: 5px; + left: 0; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence::after { + top: 9px; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence::after { + top: 13px; +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #37006e; + } +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #000000; + box-shadow: 0 0 0 1px #ffffff inset; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #ffffff; + box-shadow: 0 0 0 1px #000000 inset; + } +} + +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; +} + +.ms-Persona.ms-Persona--facePile:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-initials { + position: relative; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-details { + display: none; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-presence { + display: none; +} + +.ms-Persona.ms-Persona--token { + display: -ms-inline-flexbox; + display: inline-flex; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin: 4px; +} + +.ms-Persona.ms-Persona--token:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: 32px; + height: 32px; + padding: 0; + line-height: 30px; + transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + text-align: center; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover { + background-color: #eaeaea; +} + +.ms-Persona.ms-Persona--token .ms-Persona-imageArea { + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-right: 8px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + color: #333333; + font-size: 14px; + font-weight: 400; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 20px; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + position: relative; + list-style: none; + margin: 0; + padding: 0 10px; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-actions::before { + content: ''; + position: absolute; + top: 47px; + left: 0; + width: 100%; + border-top: 1px solid #c8c8c8; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + outline: transparent; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action::before, +.ms-PersonaCard-overflow::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; + top: 0; + left: 0; + z-index: 100; +} + +.ms-PersonaCard-action.is-active, +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active::after, +.ms-PersonaCard-overflow.is-active::after { + box-sizing: border-box; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 13px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: -95px; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-details { + display: none; + width: 100%; + margin: 0; + max-height: 300px; + min-height: 48px; + color: #666666; + padding: 9px 20px; + box-sizing: border-box; +} + +.ms-PersonaCard-details.is-active { + display: block; +} + +.ms-PersonaCard-details.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander::after { + content: '\E70D'; +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 16px; + height: 30px; + line-height: 30px; + margin-top: 2px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E70E'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart::after { + display: none; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } + + .ms-ContextualHost .ms-PersonaCard { + box-shadow: none; + } +} + +.ms-Pivot { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + font-size: 0; + height: 40px; + list-style-type: none; + padding: 0; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-size: 14px; + font-weight: 400; + line-height: 40px; + margin-right: 8px; + padding: 0 8px; + text-align: center; + vertical-align: top; +} + +.ms-Pivot-link:hover { + cursor: pointer; +} + +.ms-Pivot-link::before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + left: 8px; + position: absolute; + right: 8px; + transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-Pivot-link::after { + color: transparent; + content: attr(title); + display: block; + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; +} + +.ms-Pivot-link.is-selected { + font-weight: 600; + position: relative; +} + +.ms-Pivot-link.is-selected::before { + background-color: #0078d7; +} + +.ms-Pivot-link.is-disabled { + color: #a6a6a6; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow::after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff; + background-color: #0078d7; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-weight: 600; + } +} + +.ms-ProgressIndicator { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-weight: 400; +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + background-color: #0078d7; + height: 2px; + position: absolute; + transition: width 0.3s ease; + width: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 36px; + color: #333333; + font-size: 14px; + font-weight: 400; + position: relative; + margin-bottom: 10px; + display: inline-block; + overflow: hidden; + background-color: #ffffff; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-SearchBox-clear { + display: block; +} + +.ms-SearchBox:hover { + background-color: #deecf9; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled { + background-color: #f4f4f4; + pointer-events: none; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + color: #a6a6a6; + background-color: transparent; + border-color: #f4f4f4; + cursor: default; +} + +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + right: 0; + z-index: 10; +} + +.ms-SearchBox-clear .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 36px; +} + +.ms-SearchBox-clear .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-icon { + position: relative; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + margin-left: 12px; + margin-right: 6px; + color: #0078d7; + vertical-align: top; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #69afe5; + outline: transparent 1px solid; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 36px; + padding: 6px 3px 7px 45px; + width: 208px; + background-color: transparent; + z-index: 5; + transition: padding-left 0.167s; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + height: 36px; + line-height: 36px; + color: #666666; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + width: 208px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + transition: none; + border: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus { + background-color: transparent; + padding: 6px 3px 7px 45px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit { + display: none; + position: absolute; + top: 0; + z-index: 10; + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button { + height: 40px; + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar::before { + position: absolute; + content: ' '; + right: 0; + bottom: 0; + left: 0; + margin: 0 8px; + border-bottom: 1px solid #eaeaea; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label { + color: #212121; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:focus { + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit, +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + width: 50px; + min-height: 40px; + z-index: 0; + background-color: #f4f4f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed::before { + visibility: hidden; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field { + display: block; + cursor: text; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text { + display: inline-block; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear { + display: inline-block; + right: 58px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated { + transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active::before { + visibility: visible; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear { + display: inline-block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active { + color: #0078d7; +} + +@media only screen and (min-width: 1024px) { + .ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + border-right: 1px solid #eaeaea; + } +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 44px; + line-height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + font-size: 20px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + font-size: 16px; + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active::before { + visibility: visible; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field { + width: 100%; + padding-right: 100px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon { + color: #a6a6a6; + } +} + +.ms-Spinner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + font-size: 12px; + font-weight: 400; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-weight: 300; + font-size: 12px; + color: #333333; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #b3d6f2; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::before, +.ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::after, +.ms-Table-row.is-selected .ms-Table-rowCheck::after { + content: '\E73A'; + color: #ffffff; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E739'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 1px; +} + +.ms-Table--selectable tr:hover, +.ms-Table--selectable .ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: block; + } +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-TextField { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.ms-TextField .ms-Label { + font-size: 14px; + font-weight: 600; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled::-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-ms-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #333333; + height: 32px; + padding: 6px 12px 7px; + width: 100%; + min-width: 180px; + outline: 0; + text-overflow: ellipsis; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field[disabled] { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField-field::-webkit-input-placeholder { + color: #666666; +} + +.ms-TextField-field::-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; + background-color: #ffffff; +} + +.ms-TextField.ms-TextField--placeholder .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: 5; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 14px; + color: #666666; + padding: 6px 12px 7px; + pointer-events: none; + z-index: 0; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 14px; + margin-right: 8px; + display: table-cell; + vertical-align: top; + padding-left: 12px; + padding-top: 9px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 3px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #666666; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Toggle { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + top: -2px; + padding: 0 0 0 50px; +} + +.ms-Toggle .ms-Toggle-field::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + left: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field::before { + right: auto; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + right: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + background-color: #ffffff; + left: 28px; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #000000; + } +} + +.ms-Toggle:focus + .ms-Toggle-field, +.ms-Toggle:hover + .ms-Toggle-field { + border-color: #666666; +} + +.ms-Toggle:focus + .ms-Toggle-field::before, +.ms-Toggle:hover + .ms-Toggle-field::before { + background-color: #333333; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field, +.ms-Toggle:hover:checked + .ms-Toggle-field { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field::before, +.ms-Toggle:hover:checked + .ms-Toggle-field::before { + background-color: #ffffff; +} + +.ms-Toggle:active:checked + .ms-Toggle-field { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Toggle .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + border-color: #333333; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle .ms-Toggle-field .ms-Label { + color: #000000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Toggle .ms-Toggle-field:hover .ms-Label { + color: #000000; +} + +.ms-Toggle .ms-Toggle-field:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff; + border-color: #c8c8c8; + pointer-events: none; + cursor: default; +} + +.ms-Toggle.is-disabled .ms-Toggle-field::before { + background-color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 14px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 45px; + height: 20px; + box-sizing: border-box; + border: 2px solid #a6a6a6; + border-radius: 20px; + cursor: pointer; + transition-property: background, left, border-color; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + outline: 0; +} + +.ms-Toggle-field:hover, +.ms-Toggle-field:focus { + border-color: #666666; +} + +.ms-Toggle-input { + display: none; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} + +html, +body { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + font-size: inherit; + padding: 0; + margin: 0; +} + +a { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; + font-size: inherit; + text-decoration: none; +} + +a:hover, +a:focus { + color: #004578; +} + +a:active { + color: #0078d7; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + font-weight: normal; +} + +h1 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 28px; + font-weight: 100; + color: inherit; + letter-spacing: -1px; +} + +h2 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 21px; + font-weight: 100; + color: inherit; +} + +h3 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 17px; + font-weight: 300; + color: inherit; +} + +h4 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: inherit; +} + +h5 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 12px; + font-weight: 400; + color: inherit; +} + +h6 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 11px; + font-weight: 400; + color: inherit; +} + +.u-contentCenter { + max-width: 400px; + padding: 0 20px 0; + margin: 0 auto; + box-sizing: border-box; +} + +.Container { + margin: 0; + padding: 0; +} + +.Header { + border-bottom-style: solid; + border-bottom-width: 20px; +} + +.Header-text { + padding: 40px 0 35px; +} + +.Content { + padding: 20px 0; +} + +.Intro { + margin-bottom: 16px; +} + +.SubmitButton { + margin-top: 20px; +} diff --git a/dist/documentation/Samples/Form/css/Form.min.css b/dist/documentation/Samples/Form/css/Form.min.css new file mode 100644 index 00000000..bee1bbae --- /dev/null +++ b/dist/documentation/Samples/Form/css/Form.min.css @@ -0,0 +1 @@ +.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline-block;margin-right:-4px}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:13px 4px;line-height:1}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:" ";width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:9px 3px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:2px 0}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--small{min-width:60px;min-height:24px;height:auto;padding-top:0;padding-bottom:4px}.ms-Button.ms-Button--small .ms-Button-label{font-weight:400;font-size:12px}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;padding:0;position:relative}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-right:4px;padding-top:5px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none;vertical-align:top}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:"";display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:"\E73E";font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:"";display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:"";width:0;height:0;border-radius:50%;position:absolute;top:8px;left:8px;bottom:0;right:0;transition-property:top,left,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;left:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0;list-style:none}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-right:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-right:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-right:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:"";outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-left:4px}}.ms-CommandButton-icon{display:inline-block;margin-right:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-left:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:"";outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-left:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-left:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:" ";width:1px;height:16px;top:12px;left:-8px;border-left:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-right:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:"";height:2px;position:absolute;left:0;right:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 16px 0 25px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;right:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 16px 0 26px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:"\E73E";font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;left:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-left:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-left:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;left:0;top:0;right:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-right:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-right:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-left:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:left;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;right:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:"";position:absolute;border-left:1px solid #a6a6a6;top:10px;bottom:10px;left:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:"";pointer-events:none;position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-right:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-right:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-right:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-right:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);left:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:right}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-left:-24px;margin-right:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;right:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;right:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown-items:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:"";line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;left:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\e73A";font-size:17px;color:#767676;position:absolute;top:23px;left:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-right:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-right:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;left:0;right:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;right:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-right:0;padding-left:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:-30px 0 30px 30px rgba(0,0,0,.2);left:0;right:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;right:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-left:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-left:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-left:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;left:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;left:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;left:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;left:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src=""]{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:left;padding-left:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:";"}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-left:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;left:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;left:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:"";width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;left:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-right:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-left:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:"";position:absolute;top:47px;left:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:"";position:absolute;width:100%;height:100%;background-color:transparent;top:0;left:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:"";width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:"\E70D"}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\E70E"}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-right:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:"";height:2px;left:8px;position:absolute;right:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;right:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-left:12px;margin-right:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 3px 7px 45px;width:208px;background-color:transparent;z-index:5;transition:padding-left .167s}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;left:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 3px 7px 45px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{right:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:" ";right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;right:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-right:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-right:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:"\E73A";color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\E739";color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:" *";color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-right:8px;display:table-cell;vertical-align:top;padding-left:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:" *";color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 0 0 50px}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:"";left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{right:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:"";right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;left:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,left,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}body,html{padding:0;margin:0}a,body,html{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;font-size:inherit}a{color:#0078d7;cursor:pointer;outline:none;text-decoration:none}a:focus,a:hover{color:#004578}a:active{color:#0078d7}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:400}h1{font-size:28px;letter-spacing:-1px}h1,h2{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100;color:inherit}h2{font-size:21px}h3{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300;color:inherit}h4{font-size:14px}h4,h5{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400;color:inherit}h5{font-size:12px}h6{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:11px;font-weight:400;color:inherit}.u-contentCenter{max-width:400px;padding:0 20px;margin:0 auto;box-sizing:border-box}.Container{margin:0;padding:0}.Header{border-bottom-style:solid;border-bottom-width:20px}.Header-text{padding:40px 0 35px}.Content{padding:20px 0}.Intro{margin-bottom:16px}.SubmitButton{margin-top:20px} \ No newline at end of file diff --git a/dist/documentation/Samples/Form/index.html b/dist/documentation/Samples/Form/index.html new file mode 100644 index 00000000..23f564e0 --- /dev/null +++ b/dist/documentation/Samples/Form/index.html @@ -0,0 +1,250 @@ + + + + + + + + Example Form + + + + + + + + + + + + + +
      +
      +
      +
      +

      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 00000000..10ab3e2d --- /dev/null +++ b/dist/documentation/Samples/Form/sass/Form.scss @@ -0,0 +1,94 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// Import Fabric and Fabric Components to use its variables and mixins +@import '../../../../node_modules/office-ui-fabric-core/src/sass/_Fabric.Common.scss'; +@import '../../../sass/Fabric.Components.scss'; + +html, +body { + @include ms-font-m; + font-size: inherit; + padding: 0; + margin: 0; +} + +a { + @include ms-Link; + font-size: inherit; + text-decoration: none; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + font-weight: normal; +} + +h1 { + @include ms-font-xxl; + color: inherit; + letter-spacing: -1px; +} + +h2 { + @include ms-font-xl; + color: inherit; +} + +h3 { + @include ms-font-l; + color: inherit; +} + +h4 { + @include ms-font-m; + color: inherit; +} + +h5 { + @include ms-font-s; + color: inherit; +} + +h6 { + @include ms-font-xs; + color: inherit; +} + +.u-contentCenter { + max-width: 400px; + padding: 0 20px 0; + margin: 0 auto; + box-sizing: border-box; +} + +.Container { + margin: 0; + padding: 0; +} + +.Header { + border-bottom-style: solid; + border-bottom-width: 20px; +} + +.Header-text { + padding: 40px 0 35px; +} + +.Content { + padding: 20px 0; +} + +.Intro { + margin-bottom: 16px; +} + +.SubmitButton { + margin-top: 20px; +} diff --git a/dist/documentation/Samples/Languages/index.html b/dist/documentation/Samples/Languages/index.html new file mode 100644 index 00000000..f25cbf31 --- /dev/null +++ b/dist/documentation/Samples/Languages/index.html @@ -0,0 +1,283 @@ + + + + + + + + + Fabric's Language Override Test Page + + + + + + + + + +
      +

      Language Overrides Sample

      +
      +
      +
      +
      + +

      Chinese Simplified, Chinese Traditional, Korean, and Japanese use local desktop fonts instead of web fonts due to + file size, so we only provide font stacks for these character sets.

      + + +
      +
      + +
      +
      +
      Chinese Simplified
      +
      +

      使用 Office 365 管理中心从任意位置管理用户帐户、存储和设置。 此外，OneDrive for Business 提供混合选项，通过云利用你的本地解决方案。

      + +

      作为业界的云安全先锋，我们密切关注你的文件。 我们使用当前最先进的加密方法来确保你的文件在传输过程中和存储时都经过加密。 我们还确保我们的服务满足严格的合规性标准。

      + +

      我们严守安全、合规性和隐私的相关指导原则。 经过检验，我们符合 ISO 27001、数据处理协议、欧盟示范条款、HIPAA、FISMA、FERPA、SSAE 16 等全球合规性标准。

      +
      +
      + +
      +
      Chinese Traditional
      +
      +

      使用 Office 365 系統管理中心，可以隨時隨地管理使用者帳戶、儲存空間及設定。此外，商務用 OneDrive 提供混合式選項，能夠搭配雲端充分運用您的內部部署解決方案。 安全 +

      + +

      作為雲端安全性的業界領導者，保護您的檔案就是我們的責任。 我們會確保您的檔案透過加密傳輸，並使用最先進的加密方式儲存。 我們會確保服務符合最嚴格的規範標準。 受信任 +

      + +

      我們依循安全性、法規遵循及隱私權的指導原則。 我們通過國際規範標準認證，包含 ISO 27001、Data Processing Agreements、EU Model Clauses、HIPAA、FISMA、FERPA、SSAE + 16 等等。

      +
      +
      + +
      +
      Greek
      +
      +

      Χρησιμοποιήστε το κέντρο διαχείρισης Office 365 για τη διαχείριση των λογαριασμών χρηστών, του χώρου αποθήκευσης + και των ρυθμίσεων από οποιοδήποτε σημείο. Επίσης, το OneDrive για επιχειρήσεις παρέχει επιλογές υβριδικής ανάπτυξης, + για να χρησιμοποιήσετε τις λύσεις εσωτερικής εγκατάστασής σας με το cloud. Ασφαλές +

      + +

      Ως ηγέτιδα δύναμη στον κλάδο όσον αφορά την ασφάλεια στο cloud, ενδιαφερόμαστε ιδιαίτερα για την προστασία των + αρχείων σας. Εξασφαλίζουμε ότι τα αρχεία σας κρυπτογραφούνται κατά τη μεταφορά και την αποθήκευση, με χρήση των + πιο εξελιγμένων μεθόδων κρυπτογράφησης που υπάρχουν. Εξασφαλίζουμε επίσης ότι η υπηρεσία μας πληροί πολύ αυστηρά + πρότυπα συμμόρφωσης. Αξιόπιστο +

      + +

      Βασιζόμαστε στις κατευθυντήριες αρχές της ασφάλειας, της συμμόρφωσης και της προστασίας των προσωπικών δεδομένων. + Διαθέτουμε πιστοποιήσεις ότι πληρούμε παγκόσμια πρότυπα συμμόρφωσης όπως ISO 27001, Συμβάσεις επεξεργασίας δεδομένων, + πρότυπες ρήτρες της ΕΕ, HIPAA, FISMA, FERPA, SSAE 16 και άλλα.

      +
      +
      + +
      +
      Vietnamese
      +
      +

      Sử dụng trung tâm quản trị Office 365 để quản lý tài khoản người dùng, dung lượng lưu trữ và thiết đặt từ mọi nơi. + Đồng thời, OneDrive for Business còn cung cấp các tùy chọn kết hợp giúp sử dụng các giải pháp tại chỗ của bạn + với đám mây.

      + +

      Dẫn đầu trong lĩnh vực bảo mật đám mây, chúng tôi quan tâm sâu sắc đến tệp của bạn. Chúng tôi đảm bảo rằng tệp + của bạn được mã hóa trong khi truyền và lưu bằng cách sử dụng các phương pháp mã hóa tiên tiến nhất hiện có. + Chúng tôi cũng đảm bảo rằng dịch vụ của chúng tôi đáp ứng các tiêu chuẩn tuân thủ nghiêm ngặt.

      + +

      Chúng tôi dựa trên các nguyên tắc hướng dẫn về bảo mật, tuân thủ và quyền riêng tư. Chúng tôi được xác nhận đáp + ứng các tiêu chuẩn tuân thủ toàn cầu như ISO 27001, Thỏa thuận Xử lý Dữ liệu, Điều khoản Mô hình EU, HIPAA, FISMA, + FERPA, SSAE 16 và các tiêu chuẩn khác.

      +
      +
      + +
      +
      Thai
      +
      +

      เรียบง่าย

      + +

      ใช้ศูนย์การจัดการ Office 365 เพื่อจัดการกับบัญชีผู้ใช้ ที่เก็บข้อมูล และการตั้งค่าจากที่ใดก็ได้ นอกจากนี้ OneDrive + for Business มีข้อเสนอตัวเลือกแบบไฮบริดเพื่อใช้ประโยชน์จากโซลูชันภายในองค์กรร่วมกับระบบคลาวด์

      + +

      ปลอดภัย

      + +

      ในฐานะผู้นำด้านความปลอดภัยใน Cloud ของอุตสาหกรรมนี้ เราใส่ใจในไฟล์ของคุณเป็นอย่างยิ่ง เราทำให้คุณแน่ใจได้ว่าไฟล์ของคุณมีการเข้ารหัสลับในการส่งและพักไว้โดยใช้วิธีการเข้ารหัสลับในระดับขั้นสูงที่สุดที่มีอยู่ + นอกจากนี้ เรายังทำให้คุณแน่ใจได้ว่าบริการของเราตรงตามมาตรฐานการปฏิบัติตามกฎระเบียบที่เข้มงวด

      + +

      เชื่อถือได้

      + +

      เราสร้างจากข้อแนะนำหลักการของความปลอดภัย การปฏิบัติตามกฎระเบียบ และความเป็นส่วนตัว เราได้รับการรับรองว่าได้มาตรฐานการปฏิบัติตามกฎระเบียบสากล อาทิเช่น ISO 27001, Data Processing Agreements, EU Model Clauses, HIPAA, FISMA, FERPA, SSAE 16 และอื่นๆ

      +
      +
      + +
      +
      Korean
      +
      +

      단순성

      + +

      Office 365 관리 센터를 사용하여 어디에서나 사용자 계정, 저장소 및 설정을 관리할 수 있습니다. 또한 비즈니스용 OneDrive를 사용하면 클라우드와 온-프레미스 솔루션을 함께 활용할 수 있는 + 하이브리드 옵션이 제공됩니다.

      + +

      안전성

      + +

      클라우드 보안의 업계 선도자로서, 주의 깊게 파일을 관리합니다. 파일은 암호화 상태로 전송되며, 전송 후에는 최고 수준의 암호화 방식을 통해 보관됩니다. 또한 까다로운 규정 준수 기준을 충족시키고 있습니다.

      + +

      신뢰성

      + +

      보안, 규정 준수, 개인 정보 보호의 가이드 라인을 원칙으로 하여 설계되었습니다. ISO 27001, 데이터 처리 계약, EU 모범 조항, HIPAA, FISMA, FERPA, SSAE 16 등의 세계적인규정 준수 기준 충족을 인증받았습니다.

      +
      +
      + +
      +
      Russian
      +
      +

      Простота

      + +

      С помощью Центра администрирования Office 365 вы можете управлять учетными записями пользователей, ресурсами хранения + и настройками из любого места. Кроме того, в OneDrive для бизнеса имеются возможности для создания гибридной + среды и, соответственно, использования локальных решений в облаке.

      + +

      Надежность

      + +

      Занимая лидирующие в отрасли позиции по обеспечению безопасности в облачной среде, мы заботимся о сохранности ваших + файлов. Мы обеспечиваем их шифрование во время пересылки и при хранении, используя самые передовые методы криптографической + защиты. Также мы гарантируем, что наши услуги удовлетворяют жестким стандартам нормативного соответствия.

      + +

      Безопасность

      + +

      Основополагающие принципы нашей работы — это обеспечение безопасности, неразглашения и нормативного соответствия. + Мы прошли проверку нормативного соответствия по глобальным стандартам, в частности ISO 27001, соглашениям об + обработке данных, типовым нормам ЕС, HIPAA, FISMA, FERPA, SSAE 16 и другим.

      +
      +
      + +
      +
      Slovak (rendering the East European variant of Segoe)
      +
      +

      Prehľadné riešenie

      + +

      Pomocou Centra spravovania služieb Office 365 môžete z ľubovoľného miesta spravovať používateľské kontá, ukladací + priestor a nastavenia. OneDrive for Business poskytuje tiež hybridné možnosti na súčasné použitie lokálnych riešení + aj cloudu.

      + +

      Bezpečnosť

      + +

      Sme lídrom v oblasti zabezpečenia cloudu a na vašich súboroch nám skutočne záleží. Prenášané súbory aj súbory v + ukladacom priestore vždy šifrujeme pomocou najpokročilejších dostupných šifrovacích metód. Zároveň neustále dbáme + o to, aby naša služba spĺňala prísne štandardy v oblasti dodržiavania súladu s normami.

      + +

      Dôveryhodnosť

      + +

      Naše riešenie staviame na základných princípoch, ktorými sú zabezpečenie, súlad s normami a ochrana osobných údajov. + Spĺňame globálne normy, ako sú napríklad ISO 27001, Zmluvy o spracovaní údajov, Vzorové doložky EÚ, zákony HIPAA, + FISMA, FERPA, SSAE 16 a ďalšie.

      +
      +
      + + +
      +
      Japanese
      +
      +

      シンプル

      + +

      Office 365 の管理センターを使用すると、場所を問わずにユーザー アカウント、ストレージ、設定を管理できます。また OneDrive for Business には、オンプレミス ソリューションとクラウドを連携させるためのハイブリッド + オプションも用意されています。 +

      + +

      セキュア

      + +

      クラウド セキュリティの業界リーダーとして、ファイルに十分に注意を払います。転送中および保存中のファイルは、利用可能な最先端の暗号化方式により暗号化されていることを保証します。また、サービスが厳しいコンプライアンス基準を満たしていることも保証します。

      + +

      信頼性

      + +

      セキュリティ、コンプライアンス、プライバシーの指針に基づいて構築されています。ISO 27001、データ処理契約、EU モデル契約条項、HIPAA、FISMA、FERPA、SSAE 16 などのようなグローバルなコンプライアンス基準を満たすことが確認されています。

      +
      +
      + +
      +
      Arabic
      +
      +

      + بسيط +

      +

      + استخدم مركز إدارة Office 365 لإدارة حسابات المستخدمين ومساحات التخزين والإعدادات من أي مكان. يوفر لك OneDrive for Business + أيضاً خيارات مختلطة لاستخدام الحلول المحلية مع السحابة. +

      +

      + كشركة رائدة في مجال أمان السحابة، فإننا نهتم كل الاهتمام بملفاتك. فنحن نضمن تشفير ملفاتك عند نقلها باستخدام طرق التشفير المتاحة + الأكثر تقدماً. كما نضمن لك أن تلبي خدماتنا الامتثال للمعايير الصارمة. +

      +

      + موثنحن نستند بشكل أساسي إلى المبادئ التوجيهية للأمان والامتثال والخصوصية. وقد تم التحقق من تلبيتنا لمعايير الامتثال العالمية + مثل ISO 27001 واتفاقيات معالجة البيانات وشروط نموذج الاتحاد الأوروبي وHIPAA وFISMA وFERPA وSSAE 16 وغيرها. +

      +
      +
      + +
      +
      Hebrew
      +
      +

      + פשוט +

      +

      + השתמש במרכז הניהול של Office 365 כדי לנהל חשבונות משתמשים, אחסון והגדרות מכל מקום. כמו כן, OneDrive for Business מציע אפשרויות + היברידיות לשימוש בפתרונות המקומיים שלך עם הענן. +

      +

      + כחברה מובילה בתחום האבטחה בענן, הקבצים שלך חשובים לנו ביותר. אנו מוודאים שהקבצים שלך מוצפנים בתנועה ובמנוחה באמצעות שיטות + ההצפנה הזמינות המתקדמות ביותר. אנו גם מוודאים שהשירות שלנו עומד בתקני התאימות המחמירים ביותר. +

      +

      + אנו מתבססים על העקרונות המנחים של אבטחה, תאימות ופרטיות. כפי שהוכח, אנו עומדים בתקני תאימות גלובליים כגון ISO 27001, הסכמי + עיבוד נתונים, סעיפי מודל האיחוד האירופי, HIPAA,‏ FISMA,‏ FERPA,‏ SSAE 16 ואחרים. +

      +
      +
      + +
      +
      + + + diff --git a/dist/documentation/Samples/VideoPortal/channel.html b/dist/documentation/Samples/VideoPortal/channel.html new file mode 100644 index 00000000..27490299 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/channel.html @@ -0,0 +1,256 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + +
      +
      + +
      + + +
      +
      +
      +
      + + + 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 00000000..8e59505c --- /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 00000000..9a9fdd06 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/css/VideoPortal.css @@ -0,0 +1,6661 @@ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Breadcrumb { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline-block; + margin-right: -4px; +} + +.ms-Breadcrumb-chevron { + font-size: 12px; + color: #666666; + vertical-align: top; + margin: 13px 4px; + line-height: 1; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: #0078d7; + padding: 8px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu::before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: #ffffff; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: 0; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + font-weight: 100; + font-size: 21px; + color: #333333; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 9px 3px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 2px 0; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 14px; + font-weight: 400; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button.is-hidden { + display: none; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Button:hover { + color: #1aebff; + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Button:hover { + color: #37006e; + border-color: #37006e; + } +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button-label { + color: #333333; + font-weight: 600; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--small { + min-width: 60px; + min-height: 24px; + height: auto; + padding-top: 0; + padding-bottom: 4px; +} + +.ms-Button.ms-Button--small .ms-Button-label { + font-weight: 400; + font-size: 12px; +} + +.ms-Button.ms-Button--hero { + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border: 0; + padding: 0; + position: relative; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + margin-right: 4px; + padding-top: 5px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + font-size: 12px; + height: 18px; + line-height: 18px; + width: 18px; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-size: 21px; + font-weight: 100; + position: relative; + text-decoration: none; + vertical-align: top; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + border: 1px solid #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + border: 1px solid #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + border: 1px solid #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + display: block; + height: auto; + max-width: 280px; + min-height: 72px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-weight: 600; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-weight: 400; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Callout { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + width: 288px; +} + +.ms-Callout.is-hidden { + display: none; +} + +.ms-Callout-header { + z-index: 105; + padding-top: 24px; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-title { + margin: 0; + font-weight: 300; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-weight: 300; + color: #333333; + font-size: 12px; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-link { + font-size: 14px; +} + +.ms-Callout-inner { + height: 100%; + padding-top: 0; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button { + color: #0078d7; +} + +.ms-Callout-actions .ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-weight: 100; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + padding-top: 12px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-inner { + padding-bottom: 12px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +.ms-CheckBox { + box-sizing: border-box; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-CheckBox .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +.ms-CheckBox-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +.ms-CheckBox-field::after { + content: '\E73E'; + font-family: 'FabricMDL2Icons'; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: 13px; + top: 0; + color: #ffffff; + line-height: 20px; + width: 20px; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field::after { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field::after { + color: #ffffff; + } +} + +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-CheckBox-field:hover::before, +.ms-CheckBox-field:focus::before { + border-color: #767676; +} + +.ms-CheckBox-field:hover .ms-Label, +.ms-CheckBox-field:focus .ms-Label { + color: #000000; +} + +.ms-CheckBox-field.is-disabled { + cursor: default; +} + +.ms-CheckBox-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-CheckBox-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-CheckBox-field.in-focus::before { + border-color: #767676; +} + +.ms-CheckBox-field.in-focus.is-disabled::before { + border-color: #c8c8c8; +} + +.ms-CheckBox-field.in-focus.is-checked::before { + border-color: #106ebe; +} + +.ms-CheckBox-field.is-checked::before { + border: 10px solid #0078d7; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-CheckBox-field.is-checked::after { + display: block; +} + +.ms-CheckBox-field.is-checked:hover::before, +.ms-CheckBox-field.is-checked:focus::before { + border-color: #106ebe; +} + +.ms-RadioButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + color: #333333; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-RadioButton .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-RadioButton-input { + position: absolute; + opacity: 0; +} + +.ms-RadioButton-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + border-radius: 50%; +} + +.ms-RadioButton-field::after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: 8px; + left: 8px; + bottom: 0; + right: 0; + transition-property: top, left, width, height; + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field::after { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field::after { + color: #600000; + } +} + +.ms-RadioButton-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-RadioButton-field:hover::before, +.ms-RadioButton-field:focus::before { + border-color: #767676; +} + +.ms-RadioButton-field:hover .ms-Label, +.ms-RadioButton-field:focus .ms-Label { + color: #000000; +} + +.ms-RadioButton-field.is-disabled { + cursor: default; +} + +.ms-RadioButton-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-RadioButton-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-RadioButton-field.is-disabled:hover::before, +.ms-RadioButton-field.is-disabled:focus::before { + border-color: #c8c8c8; +} + +.ms-RadioButton-field.in-focus::before { + border-color: #767676; +} + +.ms-RadioButton-field.is-checked::before { + border: 2px solid #0078d7; + background-color: transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked::after { + background-color: #0078d7; + top: 5px; + left: 5px; + width: 10px; + height: 10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::after { + background-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked:hover::before, +.ms-RadioButton-field.is-checked:focus::before { + border-color: #0078d7; +} + +.ms-RadioButton-field.is-checked.in-focus::before { + border-color: #0078d7; +} + +.ms-ChoiceFieldGroup { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin-bottom: 4px; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; + list-style: none; +} + +.ms-CommandBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #f4f4f4; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar .ms-CommandButton--actionButton { + border-right: 1px solid #eaeaea; +} + +.ms-CommandBar .ms-Button { + height: 100%; +} + +.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon { + padding-right: 0; +} + +.ms-CommandBar .ms-Button.is-hidden { + display: none; +} + +.ms-CommandBar .ms-SearchBox, +.ms-CommandBar .ms-SearchBox-field, +.ms-CommandBar .ms-SearchBox-label { + height: 100%; +} + +.ms-CommandBar .ms-SearchBox { + display: inline-block; + vertical-align: top; + transition: margin-right 0.267s; +} + +.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 220px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: 10; + } +} + +.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button { + font-size: 18px; + padding: 0 11px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar .ms-SearchBox { + margin-right: 24px; + } +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar { + height: 44px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar.search-expanded .ms-SearchBox { + margin-right: 8px; + } + + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + transition: none; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 4px; + height: 100%; +} + +.ms-CommandBar-sideCommands .ms-Button:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 20px; + } +} + +.ms-CommandButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: inline-block; + position: relative; + vertical-align: top; +} + +.ms-CommandButton.is-hidden { + display: none; +} + +.ms-CommandButton:disabled .ms-CommandButton-button, +.ms-CommandButton.is-disabled .ms-CommandButton-button { + cursor: default; +} + +.ms-CommandButton:disabled .ms-CommandButton-button:hover, +.ms-CommandButton.is-disabled .ms-CommandButton-button:hover { + background-color: #eff6fc; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label { + color: #a6a6a6; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-CommandButton .ms-ContextualMenu { + display: none; +} + +.ms-CommandButton-button, +.ms-CommandButton-splitIcon { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + cursor: pointer; + display: inline-block; + height: 40px; + line-height: 40px; + outline: 1px solid transparent; + padding: 0 8px; + position: relative; + vertical-align: top; + background: transparent; +} + +.ms-CommandButton-button:hover, +.ms-CommandButton-splitIcon:hover { + background-color: #eaeaea; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.ms-CommandButton-button:active, +.ms-CommandButton-splitIcon:active { + background-color: #eaeaea; +} + +.ms-CommandButton-button:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-button:focus, +.ms-CommandButton-splitIcon:focus { + outline: 0; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-button, + .ms-CommandButton-splitIcon { + height: 44px; + } + + .ms-CommandButton-button .ms-CommandButton-icon, + .ms-CommandButton-splitIcon .ms-CommandButton-icon { + font-size: 20px; + } + + .ms-CommandButton-button .ms-CommandButton-label, + .ms-CommandButton-splitIcon .ms-CommandButton-label { + line-height: 44px; + } +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton + .ms-CommandButton { + margin-left: 4px; + } +} + +.ms-CommandButton-icon { + display: inline-block; + margin-right: 8px; + position: relative; + font-size: 16px; + min-width: 16px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.ms-CommandButton-label { + font-size: 14px; + font-weight: 400; + color: #333333; + line-height: 40px; + height: 100%; + display: inline-block; + vertical-align: top; +} + +.ms-CommandButton-label:hover { + color: #212121; +} + +.ms-CommandButton-dropdownIcon, +.ms-CommandButton-splitIcon { + display: inline-block; + position: relative; + color: #333333; + font-size: 12px; + font-weight: 300; + min-width: 12px; + height: 100%; + vertical-align: top; + margin-left: 8px; +} + +.ms-CommandButton-dropdownIcon .ms-Icon, +.ms-CommandButton-splitIcon .ms-Icon { + line-height: normal; + padding-top: 16px; +} + +.ms-CommandButton-dropdownIcon:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-dropdownIcon, + .ms-CommandButton-splitIcon { + display: none; + } +} + +.ms-CommandButton-splitIcon { + margin-left: -2px; + width: 27px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + margin-left: -1px; + position: relative; + padding-top: 16px; +} + +.ms-CommandButton-splitIcon .ms-Icon::after { + position: absolute; + content: ' '; + width: 1px; + height: 16px; + top: 12px; + left: -8px; + border-left: 1px solid #c8c8c8; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + margin-right: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button { + padding: 0 12px; +} + +.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + background: none; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button { + width: 50px; + height: 40px; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + padding-right: 0; +} + +.ms-CommandButton.ms-CommandButton--pivot.is-active::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--pivot:hover::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, +.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + display: inline-block; +} + +@media only screen and (max-width: 479px) { + .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, + .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + font-size: 16px; + } +} + +.ms-ContextualMenu { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + max-width: 220px; + list-style-type: none; + position: relative; + background-color: #ffffff; +} + +.ms-ContextualMenu.is-hidden { + display: none; +} + +.ms-ContextualMenu-item { + position: relative; +} + +.ms-ContextualMenu-link { + box-sizing: border-box; + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 36px; + overflow: hidden; + line-height: 34px; + padding: 0 16px 0 25px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #f4f4f4; + color: #212121; +} + +.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon { + color: #212121; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; + border: 1px solid #666666; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #dadada; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon { + color: #000000; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #d0d0d0; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +.ms-ContextualMenu-link.is-disabled .ms-Icon { + color: #a6a6a6; + pointer-events: none; + cursor: default; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 36px; + line-height: 36px; + padding: 0 18px; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #333333; + font-size: 8px; + font-weight: 600; + width: 24px; + height: 36px; + line-height: 36px; + position: absolute; + text-align: center; + top: 0; + right: 0; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 16px 0 26px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; + font-weight: 600; + color: #333333; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + color: #333333; + content: '\E73E'; + font-size: 10px; + font-weight: 800; + height: 36px; + line-height: 36px; + position: absolute; + left: 7px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus { + color: #212121; + background-color: #f4f4f4; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover::after, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus::after { + color: #212121; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active { + color: #000000; + background-color: #d0d0d0; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active::after { + color: #000000; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link { + padding-left: 40px; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + width: 40px; + text-align: center; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons { + width: 220px; +} + +.ms-DatePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-weight: 100; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-weight: 400; + font-size: 15px; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #b3d6f2; +} + +.ms-DatePicker-day--disabled::before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-weight: 400; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0; + position: absolute; + top: 0; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: 300; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: 400; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-weight: 300; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-weight: 300; + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-weight: 600; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-DetailsList { + position: relative; +} + +.ms-DetailsList.is-horizontalConstrained { + overflow-x: auto; + overflow-y: inherit; +} + +.ms-DetailsList-cell { + word-break: break-word; +} + +.ms-DetailsHeader { + display: inline-block; + min-width: 100%; + height: 36px; + line-height: 36px; + white-space: nowrap; + padding-bottom: 1px; + border-bottom: 1px solid #eaeaea; + margin-bottom: 1px; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-DetailsHeader.is-singleSelect { + padding-left: 40px; +} + +.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover { + background: transparent; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 99; + cursor: col-resize; +} + +.ms-DetailsHeader-cell.is-check .ms-Check-circle { + visibility: hidden; +} + +.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, +.ms-DetailsHeader.is-allSelected .ms-Check-circle { + visibility: visible; +} + +.ms-DetailsHeader-cellWrapper { + display: inline-block; + position: relative; +} + +.ms-DetailsHeader-cellSizeWrapper { + display: inline-block; + vertical-align: top; + margin-right: 16px; +} + +.ms-DetailsHeader-cellSizeWrapper:last-child { + margin-right: 0; +} + +.ms-DetailsHeader-filterChevron.ms-Icon { + color: #a6a6a6; + padding-left: 4px; + vertical-align: middle; +} + +.ms-DetailsHeader-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + color: #a6a6a6; + border: 0; + background: none; + line-height: inherit; + margin: 0; + font-size: inherit; + font-family: inherit; + text-align: left; + height: 36px; + vertical-align: top; +} + +.ms-DetailsHeader-cell.is-check { + position: relative; + padding: 8px 10px; + margin: 0; +} + +.ms-DetailsHeader-cell:focus { + outline: transparent; +} + +.ms-DetailsHeader-cell.is-sortable { + color: #000000; + cursor: default; +} + +.ms-DetailsHeader-cell.is-sortable:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter { + position: absolute; + right: 0; + width: 20px; + top: 0; + bottom: 0; + padding: 0; + text-align: center; + color: #000000; +} + +.ms-DetailsHeader-cell.is-filter:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter::before { + content: ''; + position: absolute; + border-left: 1px solid #a6a6a6; + top: 10px; + bottom: 10px; + left: 0; +} + +.ms-DetailsHeader-cell.is-sizer { + position: absolute; + width: 16px; + cursor: col-resize; + bottom: 0; + top: 0; + height: inherit; + z-index: 99; +} + +.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow { + display: inline; +} + +.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-DetailsHeader-cell.is-resizing.is-sizer::after, +.ms-DetailsHeader-cell.is-sizer:hover::after { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 1px; + background: #eaeaea; + border: 1px solid #ffffff; +} + +.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before, +.ms-DetailsHeader-cell:focus::before { + content: ''; + pointer-events: none; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsHeader-sortArrow.ms-Icon { + font-size: 12px; + margin-right: 4px; + display: none; + color: #a6a6a6; +} + +.ms-DetailsRow { + position: relative; + display: inline-block; + min-width: 100%; + min-height: 36px; + vertical-align: top; + white-space: nowrap; + padding: 10px 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; +} + +.ms-DetailsRow:focus { + outline: transparent; +} + +.ms-DetailsRow.ms-DetailsRow.is-selected { + background: #deecf9; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover, +.ms-DetailsRow:hover { + background: #eff6fc; +} + +.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover, +.ms-DetailsRow.is-selected:hover { + background: #b3d6f2; +} + +.ms-DetailsRow-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + vertical-align: top; + white-space: normal; + word-break: break-word; + margin-right: 16px; +} + +.ms-DetailsRow-cell.is-clipped { + overflow: hidden; +} + +.ms-DetailsRow-cell:last-child { + margin-right: 0; +} + +.ms-DetailsRow-cellIcon { + display: inline-block; + margin-right: 6px; + position: relative; + bottom: -2px; +} + +.ms-DetailsRow-check { + display: inline-block; + cursor: default; + padding: 10px; + margin: -10px 0; + box-sizing: border-box; + vertical-align: top; + background: none; + border: 0; + visibility: hidden; +} + +.ms-DetailsRow-check:focus { + outline: transparent; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow.is-selected .ms-DetailsRow-check { + visibility: visible; +} + +.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox, +.ms-DetailsRow:focus .ms-DetailsRow-focusBox { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsRow-cellMeasurer { + position: absolute; + visibility: hidden; + white-space: nowrap; + top: -1000000000; +} + +.ms-Check { + display: inline-block; + cursor: default; + line-height: 0; + vertical-align: top; +} + +.ms-Check.is-checked .ms-Check-circle { + fill: #0078d7; + stroke: #ffffff; + stroke-width: 1px; +} + +.ms-Check.is-checked .ms-Check-check { + stroke: #ffffff; +} + +.ms-Check-circle { + fill: #ffffff; + stroke: #c8c8c8; +} + +.ms-Check-check { + stroke: #c8c8c8; +} + +.ms-Dialog { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: fixed; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} + +.ms-Dialog.is-open { + display: block; +} + +.ms-Dialog-title { + font-size: 21px; + font-weight: 100; + margin-bottom: 24px; +} + +.ms-Dialog-content { + position: relative; +} + +.ms-Dialog-subText { + color: #333333; + font-size: 12px; + font-weight: 300; + line-height: 1.5; +} + +.ms-Dialog-actions { + margin-top: 24px; + text-align: right; +} + +.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + background-color: #0078d7; + color: #ffffff; + font-size: 28px; + font-weight: 100; + padding: 28px 24px; + margin-top: -28px; + margin-left: -24px; + margin-right: -24px; +} + +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + right: 12px; + top: 12px; + z-index: 10; +} + +.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel { + color: #666666; + font-size: 16px; +} + +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: absolute; +} + +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; +} + +.ms-Panel .ms-Dropdown-items .ms-Dropdown-item { + padding: 7px 16px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Panel .ms-Dropdown-items::before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #212121; + font-size: 12px; + position: absolute; + right: 13px; + bottom: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + padding: 5px 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-title.ms-Dropdown-truncator { + height: auto; + display: block; + position: absolute; + visibility: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + z-index: 400; + overflow-y: scroll; + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; +} + +.ms-Dropdown-items::before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 36px; + padding: 7px 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #b3d6f2; + color: #000000; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #b3d6f2; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-FacePile { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 32px; + width: auto; +} + +.ms-FacePile .ms-FacePile-personaCardHost { + display: none; +} + +.ms-FacePile-addButton { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-FacePile-addButton .ms-Persona-presence, +.ms-FacePile-addButton .ms-Persona-details { + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover, +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus { + background-color: #005a9e; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active { + background-color: #004578; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active { + display: block; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover { + color: #212121; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled { + color: #c8c8c8; +} + +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: 14px; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-weight: 100; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Link { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-List { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + list-style-type: none; +} + +.ms-ListItem { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + color: #333333; + font-size: 14px; + font-weight: 400; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem::before, +.ms-ListItem::after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem::after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-weight: 300; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-weight: 400; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-weight: 300; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-weight: 300; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; + background-color: #333333; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-weight: 600; +} + +.ms-ListItem.is-unseen::after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + position: absolute; + top: 14px; + left: 7px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected::before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected::before, +.ms-ListItem.is-selected:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\e73A'; + font-size: 17px; + color: #767676; + position: absolute; + top: 23px; + left: 7px; + border: 0; +} + +.ms-ListItem.is-selected:hover { + background-color: #b3d6f2; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-weight: 400; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 12px; + font-weight: 400; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + display: inline-block; + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-ContextualHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + background-color: #ffffff; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-ContextualHost.is-positioned { + position: absolute; + margin: 0; +} + +.ms-ContextualHost.is-open { + display: inline-block; +} + +.ms-ContextualHost-beak { + box-shadow: 0 0 15px -5px #3c3c3c; + position: absolute; + width: 28px; + height: 28px; + background: #ffffff; + border: 1px solid #eaeaea; + box-sizing: border-box; + top: -6px; + display: none; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 0; + outline: 1px solid transparent; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak, +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + top: 40px; + display: none; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + left: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + right: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak { + display: block; + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + display: block; + bottom: -10px; +} + +.ms-ContextualHost-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + min-height: 10px; +} + +.ms-ContextualHost-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 10; +} + +.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title { + margin-right: 20px; +} + +.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak { + background-color: #0078d7; +} + +@media (min-width: 480px) { + .ms-ContextualHost { + margin: 16px; + } + + .ms-ContextualHost.is-positioned { + margin: 0; + } + + .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak, + .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + display: block; + } +} + +.ms-MessageBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.ms-MessageBar .ms-Link { + font-size: 12px; +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-right: 8px; + font-size: 16px; + color: #767676; +} + +.ms-MessageBar-text { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 12px; + font-weight: 400; +} + +.ms-MessageBar.ms-MessageBar--warning { + background-color: #fff4ce; +} + +.ms-MessageBar.ms-MessageBar--severeWarning { + background-color: #fed9cc; +} + +.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon { + color: #d83b01; +} + +.ms-MessageBar.ms-MessageBar--error { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--blocked { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-OrgChart { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; +} + +.ms-Overlay { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: rgba(255, 255, 255, 0.4); + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 0; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-u-overflowHidden { + overflow: hidden; +} + +.ms-Panel { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #ffffff; + width: 100%; + max-width: 340px; + box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2); + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: 10; + display: none; + height: 100%; +} + +.ms-Panel.animate-in { + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel.animate-out { + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel .ms-CommandBar { + padding-right: 0; + padding-left: 8px; +} + +.ms-Panel.ms-Panel--md { + max-width: 340px; +} + +.ms-Panel.ms-Panel--lg { + max-width: 644px; +} + +.ms-Panel.ms-Panel--xl { + max-width: 940px; +} + +.ms-Panel.ms-Panel--xxl { + max-width: 1192px; +} + +.ms-Panel--left { + box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2); + left: 0; + right: auto; +} + +.ms-Panel--left.animate-in { + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel--left.animate-out { + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 6px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 16px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-closeButton .ms-Icon--Cancel { + margin-top: 2px; +} + +@media (max-width: 639px) { + .ms-Panel-closeButton { + font-size: 20px; + line-height: 20px; + height: 44px; + right: 4px; + } +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; + height: 100%; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-weight: 100; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +.ms-PanelHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 10; +} + +.ms-PanelHost .ms-Overlay { + cursor: pointer; +} + +.ms-PeoplePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 1px solid #c8c8c8; + cursor: text; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker-searchBox.is-active, +.ms-PeoplePicker-searchBox:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #37006e; + } +} + +.ms-PeoplePicker-searchBox::-webkit-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox::-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-ms-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: 100%; + -ms-flex: 1; + flex: 1; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.ms-PeoplePicker-persona { + cursor: pointer; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + background-color: #ffffff; + border: 1px solid #c8c8c8; + margin-bottom: -1px; + padding-top: 9px; + width: 100%; + padding-left: 0; + box-sizing: border-box; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-weight: 300; + font-size: 12px; + padding-top: 8px; + padding-bottom: 8px; + text-transform: uppercase; + padding-left: 16px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-left: 16px; + cursor: pointer; + outline: 0; +} + +.ms-PeoplePicker-result:hover, +.ms-PeoplePicker-result:focus { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result:focus { + box-shadow: 0 0 0 1px #0078d7 inset; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #b3d6f2; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #69afe5; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active { + background-color: #69afe5; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 100%; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 40px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #a6a6a6; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + background: none; + border: 0; + cursor: pointer; + height: 40px; + position: relative; + width: 100%; +} + +.ms-PeoplePicker-searchMore:hover { + background-color: #f4f4f4; +} + +.ms-PeoplePicker-searchMoreIcon { + font-size: 21px; + height: 40px; + left: 16px; + line-height: 40px; + position: absolute; + text-align: center; + top: 0; + width: 40px; +} + +.ms-PeoplePicker-searchMoreText { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + height: 40px; + left: 64px; + line-height: 40px; + position: absolute; + top: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction { + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder, + .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials, + .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence, + .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details, + .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn { + height: 40px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction { + height: 40px; + } +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-weight: 400; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 1; + position: relative; + width: 100%; + height: 48px; + display: table; + table-layout: fixed; + border-collapse: separate; +} + +.ms-Persona .ms-ContextualHost { + display: none; +} + +.ms-Persona-imageArea { + position: absolute; + overflow: hidden; + text-align: center; + max-width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; + width: 100%; + top: 0; + left: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; + z-index: 5; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-weight: 100; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--blueLight { + background-color: #00bcf2; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #0078d7; +} + +.ms-Persona-initials.ms-Persona-initials--blueDark { + background-color: #002050; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #008272; +} + +.ms-Persona-initials.ms-Persona-initials--greenLight { + background-color: #bad80a; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #107c10; +} + +.ms-Persona-initials.ms-Persona-initials--greenDark { + background-color: #004b1c; +} + +.ms-Persona-initials.ms-Persona-initials--magentaLight { + background-color: #e3008c; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #b4009e; +} + +.ms-Persona-initials.ms-Persona-initials--purpleLight { + background-color: #b4a0ff; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #5c2d91; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #000000; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #d83b01; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #e81123; +} + +.ms-Persona-initials.ms-Persona-initials--redDark { + background-color: #a80000; +} + +.ms-Persona-image { + position: absolute; + top: 0; + left: 0; + height: 48px; + z-index: 10; + width: 100%; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #7fba00; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-presence { + border-color: #000000; + box-shadow: 0 0 0 1px #1aebff inset; + color: #000000; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-presence { + border-color: #ffffff; + box-shadow: 0 0 0 1px #37006e inset; + color: #ffffff; + background-color: #000000; + } +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 8px; + line-height: 12px; + vertical-align: top; +} + +.ms-Persona-details { + padding: 0 12px; + vertical-align: middle; + overflow: hidden; + text-align: left; + padding-left: 60px; + display: table-cell; + width: 100%; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-weight: 400; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-weight: 400; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + display: none; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText::after { + content: ';'; +} + +.ms-Persona.ms-Persona--xs, +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token { + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image, +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea, +.ms-Persona.ms-Persona--facePile .ms-Persona-image, +.ms-Persona.ms-Persona--token .ms-Persona-imageArea, +.ms-Persona.ms-Persona--token .ms-Persona-image { + max-width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder, +.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder, +.ms-Persona.ms-Persona--token .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials, +.ms-Persona.ms-Persona--facePile .ms-Persona-initials, +.ms-Persona.ms-Persona--token .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence, +.ms-Persona.ms-Persona--facePile .ms-Persona-presence, +.ms-Persona.ms-Persona--token .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details, +.ms-Persona.ms-Persona--facePile .ms-Persona-details, +.ms-Persona.ms-Persona--token .ms-Persona-details { + padding-left: 40px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText, +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--token .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--sm { + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + max-width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 48px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--lg { + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + max-width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; + height: 20px; + width: 20px; + border-width: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon { + line-height: 20px; + font-size: 14px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-details { + padding-left: 84px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--xl { + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + max-width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 28px; + width: 28px; + left: 71px; + border-width: 4px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon { + line-height: 28px; + font-size: 21px; + position: relative; + top: 1px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 120px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-weight: 300; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #7fba00; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #fcd116; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon { + position: relative; + left: 1px; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #ffffff; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 0 0 2px #d93b3b inset; + border-radius: 50%; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::after { + content: ''; + width: 100%; + height: 2px; + background-color: #d93b3b; + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + position: absolute; + top: 5px; + left: 0; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence::after { + top: 9px; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence::after { + top: 13px; +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #37006e; + } +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #000000; + box-shadow: 0 0 0 1px #ffffff inset; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #ffffff; + box-shadow: 0 0 0 1px #000000 inset; + } +} + +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; +} + +.ms-Persona.ms-Persona--facePile:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-initials { + position: relative; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-details { + display: none; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-presence { + display: none; +} + +.ms-Persona.ms-Persona--token { + display: -ms-inline-flexbox; + display: inline-flex; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin: 4px; +} + +.ms-Persona.ms-Persona--token:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: 32px; + height: 32px; + padding: 0; + line-height: 30px; + transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + text-align: center; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover { + background-color: #eaeaea; +} + +.ms-Persona.ms-Persona--token .ms-Persona-imageArea { + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-right: 8px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + color: #333333; + font-size: 14px; + font-weight: 400; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 20px; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + position: relative; + list-style: none; + margin: 0; + padding: 0 10px; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-actions::before { + content: ''; + position: absolute; + top: 47px; + left: 0; + width: 100%; + border-top: 1px solid #c8c8c8; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + outline: transparent; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action::before, +.ms-PersonaCard-overflow::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; + top: 0; + left: 0; + z-index: 100; +} + +.ms-PersonaCard-action.is-active, +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active::after, +.ms-PersonaCard-overflow.is-active::after { + box-sizing: border-box; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 13px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: -95px; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-details { + display: none; + width: 100%; + margin: 0; + max-height: 300px; + min-height: 48px; + color: #666666; + padding: 9px 20px; + box-sizing: border-box; +} + +.ms-PersonaCard-details.is-active { + display: block; +} + +.ms-PersonaCard-details.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander::after { + content: '\E70D'; +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 16px; + height: 30px; + line-height: 30px; + margin-top: 2px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E70E'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart::after { + display: none; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } + + .ms-ContextualHost .ms-PersonaCard { + box-shadow: none; + } +} + +.ms-Pivot { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + font-size: 0; + height: 40px; + list-style-type: none; + padding: 0; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-size: 14px; + font-weight: 400; + line-height: 40px; + margin-right: 8px; + padding: 0 8px; + text-align: center; + vertical-align: top; +} + +.ms-Pivot-link:hover { + cursor: pointer; +} + +.ms-Pivot-link::before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + left: 8px; + position: absolute; + right: 8px; + transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-Pivot-link::after { + color: transparent; + content: attr(title); + display: block; + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; +} + +.ms-Pivot-link.is-selected { + font-weight: 600; + position: relative; +} + +.ms-Pivot-link.is-selected::before { + background-color: #0078d7; +} + +.ms-Pivot-link.is-disabled { + color: #a6a6a6; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow::after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff; + background-color: #0078d7; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-weight: 600; + } +} + +.ms-ProgressIndicator { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-weight: 400; +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + background-color: #0078d7; + height: 2px; + position: absolute; + transition: width 0.3s ease; + width: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 36px; + color: #333333; + font-size: 14px; + font-weight: 400; + position: relative; + margin-bottom: 10px; + display: inline-block; + overflow: hidden; + background-color: #ffffff; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-SearchBox-clear { + display: block; +} + +.ms-SearchBox:hover { + background-color: #deecf9; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled { + background-color: #f4f4f4; + pointer-events: none; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + color: #a6a6a6; + background-color: transparent; + border-color: #f4f4f4; + cursor: default; +} + +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + right: 0; + z-index: 10; +} + +.ms-SearchBox-clear .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 36px; +} + +.ms-SearchBox-clear .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-icon { + position: relative; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + margin-left: 12px; + margin-right: 6px; + color: #0078d7; + vertical-align: top; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #69afe5; + outline: transparent 1px solid; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 36px; + padding: 6px 3px 7px 45px; + width: 208px; + background-color: transparent; + z-index: 5; + transition: padding-left 0.167s; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + height: 36px; + line-height: 36px; + color: #666666; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + width: 208px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + transition: none; + border: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus { + background-color: transparent; + padding: 6px 3px 7px 45px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit { + display: none; + position: absolute; + top: 0; + z-index: 10; + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button { + height: 40px; + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar::before { + position: absolute; + content: ' '; + right: 0; + bottom: 0; + left: 0; + margin: 0 8px; + border-bottom: 1px solid #eaeaea; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label { + color: #212121; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:focus { + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit, +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + width: 50px; + min-height: 40px; + z-index: 0; + background-color: #f4f4f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed::before { + visibility: hidden; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field { + display: block; + cursor: text; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text { + display: inline-block; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear { + display: inline-block; + right: 58px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated { + transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active::before { + visibility: visible; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear { + display: inline-block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active { + color: #0078d7; +} + +@media only screen and (min-width: 1024px) { + .ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + border-right: 1px solid #eaeaea; + } +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 44px; + line-height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + font-size: 20px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + font-size: 16px; + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active::before { + visibility: visible; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field { + width: 100%; + padding-right: 100px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon { + color: #a6a6a6; + } +} + +.ms-Spinner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + font-size: 12px; + font-weight: 400; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-weight: 300; + font-size: 12px; + color: #333333; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #b3d6f2; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::before, +.ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::after, +.ms-Table-row.is-selected .ms-Table-rowCheck::after { + content: '\E73A'; + color: #ffffff; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E739'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 1px; +} + +.ms-Table--selectable tr:hover, +.ms-Table--selectable .ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: block; + } +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-TextField { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.ms-TextField .ms-Label { + font-size: 14px; + font-weight: 600; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled::-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-ms-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #333333; + height: 32px; + padding: 6px 12px 7px; + width: 100%; + min-width: 180px; + outline: 0; + text-overflow: ellipsis; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field[disabled] { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField-field::-webkit-input-placeholder { + color: #666666; +} + +.ms-TextField-field::-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; + background-color: #ffffff; +} + +.ms-TextField.ms-TextField--placeholder .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: 5; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 14px; + color: #666666; + padding: 6px 12px 7px; + pointer-events: none; + z-index: 0; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 14px; + margin-right: 8px; + display: table-cell; + vertical-align: top; + padding-left: 12px; + padding-top: 9px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 3px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #666666; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Toggle { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + top: -2px; + padding: 0 0 0 50px; +} + +.ms-Toggle .ms-Toggle-field::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + left: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field::before { + right: auto; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + right: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + background-color: #ffffff; + left: 28px; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #000000; + } +} + +.ms-Toggle:focus + .ms-Toggle-field, +.ms-Toggle:hover + .ms-Toggle-field { + border-color: #666666; +} + +.ms-Toggle:focus + .ms-Toggle-field::before, +.ms-Toggle:hover + .ms-Toggle-field::before { + background-color: #333333; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field, +.ms-Toggle:hover:checked + .ms-Toggle-field { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field::before, +.ms-Toggle:hover:checked + .ms-Toggle-field::before { + background-color: #ffffff; +} + +.ms-Toggle:active:checked + .ms-Toggle-field { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Toggle .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + border-color: #333333; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle .ms-Toggle-field .ms-Label { + color: #000000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Toggle .ms-Toggle-field:hover .ms-Label { + color: #000000; +} + +.ms-Toggle .ms-Toggle-field:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff; + border-color: #c8c8c8; + pointer-events: none; + cursor: default; +} + +.ms-Toggle.is-disabled .ms-Toggle-field::before { + background-color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 14px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 45px; + height: 20px; + box-sizing: border-box; + border: 2px solid #a6a6a6; + border-radius: 20px; + cursor: pointer; + transition-property: background, left, border-color; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + outline: 0; +} + +.ms-Toggle-field:hover, +.ms-Toggle-field:focus { + border-color: #666666; +} + +.ms-Toggle-input { + display: none; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} + +.u-contentCenter { + position: relative; + margin: 0 auto; + max-width: 100%; + transition: 0.167s all cubic-bezier(0.1, 0.9, 0.2, 1); +} + +@media (min-width: 640px) { + .u-contentCenter { + max-width: 960px; + } +} + +@media (min-width: 1366px) { + .HomePage .u-contentCenter, + .ChannelPage .u-contentCenter { + max-width: 1200px; + } +} + +* { + box-sizing: border-box; +} + +html, +body { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + padding: 0; + margin: 0; +} + +a { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; + font-size: inherit; + text-decoration: none; +} + +a:hover, +a:focus { + color: #004578; +} + +a:active { + color: #0078d7; +} + +.VideoPortal-content { + position: relative; +} + +.VideoPortal-navBar { + display: block; + top: 0; + width: 100%; + z-index: 101; + height: 40px; +} + +.VideoPortal-page { + overflow: visible; + position: relative; + padding-bottom: 50px; +} + +.ms-CommandBar--navBar { + background-color: #f4f4f4; +} + +.VideoList-item.ms-Grid-col { + margin-bottom: 16px; + float: none; + display: inline-block; + vertical-align: top; + padding-left: 8px; + padding-right: 12px; +} + +.VideoList-thumbLink { + display: block; + position: relative; + width: 100%; + padding-bottom: 56.25%; +} + +.VideoList-thumbImg { + max-width: 100%; + min-width: 100%; + position: absolute; +} + +.VideoList-thumbCaption { + position: absolute; + right: 5px; + bottom: 5px; + padding: 3px; + color: #ffffff; + font-size: 12px; + background-color: rgba(0, 0, 0, 0.4); +} + +.VideoList-text { + padding-top: 5px; + margin: 0; +} + +.VideoList-title, +.VideoList-channel, +.VideoList-viewCount { + display: block; +} + +.VideoList-title { + display: block; + top: 0; + left: 10px; + bottom: 50%; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.VideoList-channel { + bottom: 1.2em; +} + +.VideoList-viewCount { + bottom: 0; +} + +@media (min-width: 480px) { + .VideoList-item { + margin-right: -4px; + } +} + +.SpotLight-container { + background-color: #212121; +} + +.SpotLightList { + white-space: nowrap; + overflow-x: scroll; + overflow-y: hidden; + position: relative; +} + +.SpotLight-title { + text-indent: 16px; +} + +.SpotLight-item { + position: relative; + display: inline-block; + float: none; + margin: 0; +} + +.SpotLight-thumb { + padding: 10px; +} + +.SpotLight-thumbImg { + max-width: 100%; + min-width: 100%; +} + +.SpotLight-text { + position: absolute; + right: 10px; + bottom: 13px; + left: 10px; + overflow: hidden; + color: #ffffff; + background: rgba(0, 0, 0, 0.4); + padding: 5px; +} + +.SpotLight-videoTitle, +.SpotLight-videoLength { + color: #ffffff; + display: block; +} + +@media (min-width: 640px) { + .SpotLightList { + overflow: hidden; + } + + .SpotLight-container { + padding: 10px 0; + } +} + +@media (min-width: 1024px) { + .SpotLight-title { + text-indent: 8px; + } +} + +.HomePage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelList-title { + padding-left: 10px; + border-width: 4px; + border-left-style: solid; +} + +.ChannelList-titleText { + margin-right: 7px; +} + +.PlayerPage-theater { + background-color: #212121; +} + +.VideoPlayer-player { + max-width: 100%; + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; +} + +.VideoPlayer-player iframe, +.VideoPlayer-player video, +.VideoPlayer-player .VideoPlayer-iframe { + background-color: #666666; + position: absolute; + top: 0; + left: 0; + width: 1px; + min-width: 100%; + *width: 100%; + height: 100%; + min-height: 100%; + cursor: pointer; +} + +.VideoPlayer-player iframe::after, +.VideoPlayer-player video::after, +.VideoPlayer-player .VideoPlayer-iframe::after { + position: absolute; + content: ''; + display: block; + width: 0; + height: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-left: 90px solid rgba(0, 0, 0, 0.4); + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + transition: 0.167s border-color cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.VideoPlayer-player iframe:hover::after, +.VideoPlayer-player video:hover::after, +.VideoPlayer-player .VideoPlayer-iframe:hover::after { + border-left-color: rgba(0, 0, 0, 0.75); +} + +.PlayerPage-content { + padding: 0 10px; +} + +.PlayerPage-info { + margin-bottom: 20px; + padding-right: 32px; +} + +.PlayerPage-header { + margin-bottom: 20px; +} + +.PlayerPage-titleArea { + margin-top: 17px; + margin-bottom: 8px; +} + +.PlayerPage-title { + margin-bottom: 5px; + margin-top: 0; + display: inline-block; +} + +.PlayerPage-titleSeparator { + display: inline-block; + margin: 0 10px; + position: relative; + bottom: 2px; +} + +.PlayerPage-channelLink { + font-size: 17px; + padding-left: 10px; + border-width: 4px; + border-left-style: solid; +} + +.PlayerPage-channelLink:hover { + color: #000000; +} + +.PlayerPage-channelText { + position: relative; + bottom: 2px; +} + +.PlayerPage-metaData { + margin-bottom: 10px; +} + +.PlayerPage-descriptionArea { + margin-bottom: 10px; +} + +.PlayerPage-description { + display: inline; + word-wrap: break-word; +} + +.PlayerPage-descriptionField { + position: relative; + margin-top: 17px; +} + +.PlayerPage-viewCountText { + margin-right: 5px; +} + +.SampleVideo-content { + background-color: #333333; + height: 120px; +} + +@media (min-width: 320px) { + .PlayerPage-content { + padding: 0 10px 0 16px; + } + + .PlayerPage-grid { + padding: 0; + } +} + +@media (min-width: 480px) { + .PlayerPage-relatedList .VideoList-title { + font-size: 15px; + margin-bottom: 5px; + } + + .PlayerPage-relatedList .VideoList-channel, + .PlayerPage-relatedList .VideoList-viewCount { + font-size: 14px; + } +} + +@media (min-width: 640px) { + .PlayerPage-header { + margin-bottom: 25px; + } + + .PlayerPage-titleArea { + margin-top: 35px; + } + + .PlayerPage-description { + font-size: 14px; + } + + .PlayerPage-title { + font-size: 28px; + } + + .PlayerPage-metaData { + font-size: 17px; + } + + .PlayerPage-channelLink { + font-size: 21px; + } +} + +@media (min-width: 1024px) { + .PlayerPage-content { + padding: 0; + } + + .PlayerPage-relatedTitle { + margin-top: 42px; + } + + .PlayerPage-relatedList .VideoList-text { + padding-top: 0; + } + + .PlayerPage-relatedList .VideoList-title { + margin-bottom: 5px; + line-height: 1.2em; + max-height: 3.6em; + overflow: hidden; + white-space: normal; + } +} + +.ChannelPage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelPage-pivots { + margin-bottom: 20px; +} + +.ChannelPage-pivots .ms-Pivot-link { + font-size: 21px; +} + +.ChannelsPage { + padding: 10px; +} + +.ChannelGroup-title { + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +.ChannelGroup-channel { + padding: 10px 0 10px 10px; + border-width: 4px; + border-left-style: solid; + margin-bottom: 10px; + display: block; +} + +.ChannelGroup-channel:hover { + color: #000000; +} + +@media (min-width: 480px) { + .ChannelsPage { + padding: 20px; + } +} diff --git a/dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css b/dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css new file mode 100644 index 00000000..2bfa50d7 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css @@ -0,0 +1 @@ +.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline-block;margin-right:-4px}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:13px 4px;line-height:1}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:" ";width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:9px 3px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:2px 0}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--small{min-width:60px;min-height:24px;height:auto;padding-top:0;padding-bottom:4px}.ms-Button.ms-Button--small .ms-Button-label{font-weight:400;font-size:12px}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;padding:0;position:relative}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-right:4px;padding-top:5px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none;vertical-align:top}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:"";display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:"\E73E";font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:"";display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:"";width:0;height:0;border-radius:50%;position:absolute;top:8px;left:8px;bottom:0;right:0;transition-property:top,left,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;left:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0;list-style:none}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-right:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-right:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-right:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:"";outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-left:4px}}.ms-CommandButton-icon{display:inline-block;margin-right:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-left:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:"";outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-left:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-left:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:" ";width:1px;height:16px;top:12px;left:-8px;border-left:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-right:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:"";height:2px;position:absolute;left:0;right:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 16px 0 25px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;right:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 16px 0 26px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:"\E73E";font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;left:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-left:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-left:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;left:0;top:0;right:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-right:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-right:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-left:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:left;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;right:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:"";position:absolute;border-left:1px solid #a6a6a6;top:10px;bottom:10px;left:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:"";pointer-events:none;position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-right:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-right:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-right:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-right:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);left:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:right}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-left:-24px;margin-right:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;right:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;right:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown-items:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:"";line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;left:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\e73A";font-size:17px;color:#767676;position:absolute;top:23px;left:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-right:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-right:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;left:0;right:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;right:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-right:0;padding-left:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:-30px 0 30px 30px rgba(0,0,0,.2);left:0;right:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;right:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-left:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-left:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-left:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;left:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;left:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;left:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;left:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src=""]{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:left;padding-left:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:";"}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-left:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;left:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;left:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:"";width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;left:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-right:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-left:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:"";position:absolute;top:47px;left:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:"";position:absolute;width:100%;height:100%;background-color:transparent;top:0;left:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:"";width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:"\E70D"}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\E70E"}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-right:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:"";height:2px;left:8px;position:absolute;right:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;right:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-left:12px;margin-right:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 3px 7px 45px;width:208px;background-color:transparent;z-index:5;transition:padding-left .167s}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;left:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 3px 7px 45px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{right:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:" ";right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;right:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-right:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-right:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:"\E73A";color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:"\E739";color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:" *";color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:" *";color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-right:8px;display:table-cell;vertical-align:top;padding-left:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:" *";color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 0 0 50px}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:"";left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{right:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:"";right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;left:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,left,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}.u-contentCenter{position:relative;margin:0 auto;max-width:100%;transition:all .167s cubic-bezier(.1,.9,.2,1)}@media (min-width:640px){.u-contentCenter{max-width:960px}}@media (min-width:1366px){.ChannelPage .u-contentCenter,.HomePage .u-contentCenter{max-width:1200px}}*{box-sizing:border-box}body,html{padding:0;margin:0}a,body,html{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400}a{color:#0078d7;cursor:pointer;outline:none;font-size:inherit;text-decoration:none}a:focus,a:hover{color:#004578}a:active{color:#0078d7}.VideoPortal-content{position:relative}.VideoPortal-navBar{display:block;top:0;width:100%;z-index:101;height:40px}.VideoPortal-page{overflow:visible;position:relative;padding-bottom:50px}.ms-CommandBar--navBar{background-color:#f4f4f4}.VideoList-item.ms-Grid-col{margin-bottom:16px;float:none;display:inline-block;vertical-align:top;padding-left:8px;padding-right:12px}.VideoList-thumbLink{display:block;position:relative;width:100%;padding-bottom:56.25%}.VideoList-thumbImg{max-width:100%;min-width:100%;position:absolute}.VideoList-thumbCaption{position:absolute;right:5px;bottom:5px;padding:3px;color:#fff;font-size:12px;background-color:rgba(0,0,0,.4)}.VideoList-text{padding-top:5px;margin:0}.VideoList-channel,.VideoList-title,.VideoList-viewCount{display:block}.VideoList-title{display:block;top:0;left:10px;bottom:50%;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.VideoList-channel{bottom:1.2em}.VideoList-viewCount{bottom:0}@media (min-width:480px){.VideoList-item{margin-right:-4px}}.SpotLight-container{background-color:#212121}.SpotLightList{white-space:nowrap;overflow-x:scroll;overflow-y:hidden;position:relative}.SpotLight-title{text-indent:16px}.SpotLight-item{position:relative;display:inline-block;float:none;margin:0}.SpotLight-thumb{padding:10px}.SpotLight-thumbImg{max-width:100%;min-width:100%}.SpotLight-text{position:absolute;right:10px;bottom:13px;left:10px;overflow:hidden;color:#fff;background:rgba(0,0,0,.4);padding:5px}.SpotLight-videoLength,.SpotLight-videoTitle{color:#fff;display:block}@media (min-width:640px){.SpotLightList{overflow:hidden}.SpotLight-container{padding:10px 0}}@media (min-width:1024px){.SpotLight-title{text-indent:8px}}.HomePage-content{padding:10px;padding-top:20px}.ChannelList-title{padding-left:10px;border-width:4px;border-left-style:solid}.ChannelList-titleText{margin-right:7px}.PlayerPage-theater{background-color:#212121}.VideoPlayer-player{max-width:100%;position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.VideoPlayer-player .VideoPlayer-iframe,.VideoPlayer-player iframe,.VideoPlayer-player video{background-color:#666;position:absolute;top:0;left:0;width:1px;min-width:100%;*width:100%;height:100%;min-height:100%;cursor:pointer}.VideoPlayer-player .VideoPlayer-iframe:after,.VideoPlayer-player iframe:after,.VideoPlayer-player video:after{position:absolute;content:"";display:block;width:0;height:0;border-top:60px solid transparent;border-bottom:60px solid transparent;border-left:90px solid rgba(0,0,0,.4);top:50%;left:50%;transform:translate(-50%,-50%);transition:border-color .167s cubic-bezier(.1,.25,.75,.9)}.VideoPlayer-player .VideoPlayer-iframe:hover:after,.VideoPlayer-player iframe:hover:after,.VideoPlayer-player video:hover:after{border-left-color:rgba(0,0,0,.75)}.PlayerPage-content{padding:0 10px}.PlayerPage-info{padding-right:32px}.PlayerPage-header,.PlayerPage-info{margin-bottom:20px}.PlayerPage-titleArea{margin-top:17px;margin-bottom:8px}.PlayerPage-title{margin-bottom:5px;margin-top:0;display:inline-block}.PlayerPage-titleSeparator{display:inline-block;margin:0 10px;position:relative;bottom:2px}.PlayerPage-channelLink{font-size:17px;padding-left:10px;border-width:4px;border-left-style:solid}.PlayerPage-channelLink:hover{color:#000}.PlayerPage-channelText{position:relative;bottom:2px}.PlayerPage-descriptionArea,.PlayerPage-metaData{margin-bottom:10px}.PlayerPage-description{display:inline;word-wrap:break-word}.PlayerPage-descriptionField{position:relative;margin-top:17px}.PlayerPage-viewCountText{margin-right:5px}.SampleVideo-content{background-color:#333;height:120px}@media (min-width:320px){.PlayerPage-content{padding:0 10px 0 16px}.PlayerPage-grid{padding:0}}@media (min-width:480px){.PlayerPage-relatedList .VideoList-title{font-size:15px;margin-bottom:5px}.PlayerPage-relatedList .VideoList-channel,.PlayerPage-relatedList .VideoList-viewCount{font-size:14px}}@media (min-width:640px){.PlayerPage-header{margin-bottom:25px}.PlayerPage-titleArea{margin-top:35px}.PlayerPage-description{font-size:14px}.PlayerPage-title{font-size:28px}.PlayerPage-metaData{font-size:17px}.PlayerPage-channelLink{font-size:21px}}@media (min-width:1024px){.PlayerPage-content{padding:0}.PlayerPage-relatedTitle{margin-top:42px}.PlayerPage-relatedList .VideoList-text{padding-top:0}.PlayerPage-relatedList .VideoList-title{margin-bottom:5px;line-height:1.2em;max-height:3.6em;overflow:hidden;white-space:normal}}.ChannelPage-content{padding:10px;padding-top:20px}.ChannelPage-pivots{margin-bottom:20px}.ChannelPage-pivots .ms-Pivot-link{font-size:21px}.ChannelsPage{padding:10px}.ChannelGroup-title{padding-bottom:10px;border-bottom:1px solid #eaeaea}.ChannelGroup-channel{padding:10px 0 10px 10px;border-width:4px;border-left-style:solid;margin-bottom:10px;display:block}.ChannelGroup-channel:hover{color:#000}@media (min-width:480px){.ChannelsPage{padding:20px}} \ No newline at end of file diff --git a/dist/documentation/Samples/VideoPortal/index.html b/dist/documentation/Samples/VideoPortal/index.html new file mode 100644 index 00000000..2e30a6c3 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/index.html @@ -0,0 +1,302 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + + +
      +
      + +
      + +
      +
      +
      +
      + + + 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 00000000..b8bdb3a7 --- /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 00000000..13e67dd0 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/Base.scss @@ -0,0 +1,42 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Base styles + + +* { + box-sizing: border-box; +} + +html, +body { + @include ms-font-m; + padding: 0; + margin: 0; +} + +a { + @include ms-Link; + font-size: inherit; + text-decoration: none; +} + +.VideoPortal-content { + position: relative; +} + +.VideoPortal-navBar { + display: block; + top: 0; + width: 100%; + z-index: 101; + height: 40px; +} + +.VideoPortal-page { + overflow: visible; + position: relative; + padding-bottom: 50px; +} diff --git a/dist/documentation/Samples/VideoPortal/sass/ChannelPage.scss b/dist/documentation/Samples/VideoPortal/sass/ChannelPage.scss new file mode 100644 index 00000000..23e9446c --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/ChannelPage.scss @@ -0,0 +1,21 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Individual Channel Page styles + + +.ChannelPage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelPage-pivots { + margin-bottom: 20px; + + // Small override for Fabric Pivot component + .ms-Pivot-link { + font-size: $ms-font-size-xl; + } +} diff --git a/dist/documentation/Samples/VideoPortal/sass/ChannelsPage.scss b/dist/documentation/Samples/VideoPortal/sass/ChannelsPage.scss new file mode 100644 index 00000000..4d49d1b4 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/ChannelsPage.scss @@ -0,0 +1,34 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Channels List page styles + + +.ChannelsPage { + padding: 10px; +} + +.ChannelGroup-title { + padding-bottom: 10px; + border-bottom: 1px solid $ms-color-neutralLight; +} + +.ChannelGroup-channel { + padding: 10px 0 10px 10px; + border-width: 4px; + border-left-style: solid; + margin-bottom: 10px; + display: block; + + &:hover { + color: $ms-color-black; + } +} + +@media (min-width: $ms-screen-md-min) { + .ChannelsPage { + padding: 20px; + } +} diff --git a/dist/documentation/Samples/VideoPortal/sass/HomePage.scss b/dist/documentation/Samples/VideoPortal/sass/HomePage.scss new file mode 100644 index 00000000..a936a063 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/HomePage.scss @@ -0,0 +1,22 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Home page styles + + +.HomePage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelList-title { + padding-left: 10px; + border-width: 4px; + border-left-style: solid; +} + +.ChannelList-titleText { + margin-right: 7px; +} diff --git a/dist/documentation/Samples/VideoPortal/sass/NavBar.scss b/dist/documentation/Samples/VideoPortal/sass/NavBar.scss new file mode 100644 index 00000000..ef99eb2a --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/NavBar.scss @@ -0,0 +1,10 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Fabric NavBar override styles + +.ms-CommandBar--navBar { + background-color: $ms-color-neutralLighter; +} \ No newline at end of file diff --git a/dist/documentation/Samples/VideoPortal/sass/PlayerPage.scss b/dist/documentation/Samples/VideoPortal/sass/PlayerPage.scss new file mode 100644 index 00000000..e9baf3b8 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/PlayerPage.scss @@ -0,0 +1,203 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Video Player page styles + + +.PlayerPage-theater { + background-color: $ms-color-neutralDark; +} + +.VideoPlayer-player { + max-width: 100%; + position: relative; + padding-bottom: 56.25%; // Necessary to maintain 16:9 aspect ratio + height: 0; + overflow: hidden; + + iframe, + video, + .VideoPlayer-iframe { + background-color: $ms-color-neutralSecondary; + position: absolute; + top: 0; + left: 0; + width: 1px; + min-width: 100%; + *width: 100%; + height: 100%; + min-height: 100%; + cursor: pointer; + + // "Play" arrow button + &::after { + position: absolute; + content: ''; + display: block; + width: 0; + height: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-left: 90px solid rgba(0,0,0,.4); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: $ms-duration1 border-color $ms-ease2; + } + + &:hover::after { + border-left-color: rgba(0,0,0,.75); + } + } +} + +.PlayerPage-content { + padding: 0 10px; +} + +.PlayerPage-info { + margin-bottom: 20px; + padding-right: 32px; +} + +.PlayerPage-header { + margin-bottom: 20px; +} + +.PlayerPage-titleArea { + margin-top: 17px; + margin-bottom: 8px; +} + +.PlayerPage-title { + margin-bottom: 5px; + margin-top: 0; + display: inline-block; +} + +.PlayerPage-titleSeparator { + display: inline-block; + margin: 0 10px; + position: relative; + bottom: 2px; +} + +.PlayerPage-channelLink { + font-size: $ms-font-size-l; + padding-left: 10px; + border-width: 4px; + border-left-style: solid; + + &:hover { + color: $ms-color-black; + } +} + +.PlayerPage-channelText { + position: relative; + bottom: 2px; +} + +.PlayerPage-metaData { + margin-bottom: 10px; +} + +.PlayerPage-descriptionArea { + margin-bottom: 10px; +} + +.PlayerPage-description { + display: inline; + word-wrap: break-word; +} + +.PlayerPage-descriptionField { + position: relative; + margin-top: 17px; +} + +.PlayerPage-viewCountText { + margin-right: 5px; +} + +.SampleVideo-content { + background-color: $ms-color-neutralPrimary; + height: 120px; +} + + +@media (min-width: $ms-screen-sm-min) { + .PlayerPage-content { + padding: 0 10px 0 16px; + } + + .PlayerPage-grid { + padding: 0; + } +} + +@media (min-width: $ms-screen-md-min) { + .PlayerPage-relatedList { + .VideoList-title { + font-size: $ms-font-size-m-plus; + margin-bottom: 5px; + } + + .VideoList-channel, + .VideoList-viewCount { + font-size: $ms-font-size-m; + } + } +} + +@media (min-width: $ms-screen-lg-min) { + .PlayerPage-header { + margin-bottom: 25px; + } + + .PlayerPage-titleArea { + margin-top: 35px; + } + + .PlayerPage-description { + font-size: $ms-font-size-m; + } + + .PlayerPage-title { + font-size: $ms-font-size-xxl; + } + + .PlayerPage-metaData { + font-size: $ms-font-size-l; + } + + .PlayerPage-channelLink { + font-size: $ms-font-size-xl; + } +} + +@media (min-width: $ms-screen-xl-min) { + .PlayerPage-content { + padding: 0; + } + + .PlayerPage-relatedTitle { + margin-top: 42px; + } + + .PlayerPage-relatedList { + .VideoList-text { + padding-top: 0; + } + + .VideoList-title { + margin-bottom: 5px; + line-height: 1.2em; + max-height: 3.6em; + overflow: hidden; + white-space: normal; + } + } +} diff --git a/dist/documentation/Samples/VideoPortal/sass/SpotLight.scss b/dist/documentation/Samples/VideoPortal/sass/SpotLight.scss new file mode 100644 index 00000000..031dffaa --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/SpotLight.scss @@ -0,0 +1,72 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// "Spotlight" container styles that celebrate a selection of videos + + +.SpotLight-container { + background-color: $ms-color-neutralDark; +} + +.SpotLightList { + white-space: nowrap; + overflow-x: scroll; + overflow-y: hidden; + position: relative; +} + +.SpotLight-title { + text-indent: 16px; +} + +.SpotLight-item { + position: relative; + display: inline-block; + float: none; + margin: 0; +} + +.SpotLight-thumb { + padding: 10px; +} + +.SpotLight-thumbImg { + max-width: 100%; + min-width: 100%; +} + +.SpotLight-text { + position: absolute; + right: 10px; + bottom: 13px; + left: 10px; + overflow: hidden; + color: #fff; + background: rgba(0,0,0,.4); + padding: 5px; +} + +.SpotLight-videoTitle, +.SpotLight-videoLength { + color: $ms-color-white; + display: block; +} + + +@media (min-width: $ms-screen-lg-min) { + .SpotLightList { + overflow: hidden; + } + + .SpotLight-container { + padding: 10px 0; + } +} + +@media (min-width: $ms-screen-xl-min) { + .SpotLight-title { + text-indent: 8px; + } +} diff --git a/dist/documentation/Samples/VideoPortal/sass/Utilities.scss b/dist/documentation/Samples/VideoPortal/sass/Utilities.scss new file mode 100644 index 00000000..d5afe890 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/Utilities.scss @@ -0,0 +1,30 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Utility classes + + +.u-contentCenter { // Utility for centering page areas regardless of parent container + position: relative; + margin: 0 auto; + max-width: 100%; + transition: $ms-duration1 all $ms-ease1; +} + +@media (min-width: $ms-screen-lg-min) { + .u-contentCenter { + max-width: 960px; + } +} + +@media (min-width: $ms-screen-xxl-min) { // 1366 + // Use a larger container size for non-player pages + .HomePage, + .ChannelPage { + .u-contentCenter { + max-width: 1200px; + } + } +} diff --git a/dist/documentation/Samples/VideoPortal/sass/VideoListItem.scss b/dist/documentation/Samples/VideoPortal/sass/VideoListItem.scss new file mode 100644 index 00000000..fa9bfae9 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/VideoListItem.scss @@ -0,0 +1,75 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Video Item tile styles + + +.VideoList-item.ms-Grid-col { + margin-bottom: 16px; + float: none; + display: inline-block; + vertical-align: top; + padding-left: 8px; + padding-right: 12px; +} + +.VideoList-thumbLink { + display: block; + position: relative; + width: 100%; + padding-bottom: 56.25%; +} + +.VideoList-thumbImg { + max-width: 100%; + min-width: 100%; + position: absolute; +} + +.VideoList-thumbCaption { + position: absolute; + right: 5px; + bottom: 5px; + padding: 3px; + color: $ms-color-white; + font-size: $ms-font-size-s; + background-color: rgba(0,0,0,.4); +} + +.VideoList-text { + padding-top: 5px; + margin: 0; +} + +.VideoList-title, +.VideoList-channel, +.VideoList-viewCount { + display: block; +} + +.VideoList-title { + display: block; + top: 0; + left: 10px; + bottom: 50%; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.VideoList-channel { + bottom: 1.2em; +} + +.VideoList-viewCount { + bottom: 0; +} + +@media (min-width: $ms-screen-md-min) { + .VideoList-item { + margin-right: -4px; // Need to offset margins from inline-block elements + } +} diff --git a/dist/documentation/Samples/VideoPortal/sass/VideoPortal.scss b/dist/documentation/Samples/VideoPortal/sass/VideoPortal.scss new file mode 100644 index 00000000..5e9b1cf3 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/sass/VideoPortal.scss @@ -0,0 +1,23 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Load all page and component styles + + +// Import both Fabric and Fabric Components by reference to access variables +// and mixins from each without compiling their contents. +@import '../../../../node_modules/office-ui-fabric-core/src/sass/Fabric.Common.scss'; +@import '../../../sass/Fabric.Components.scss'; + +// Import all LESS +@import 'Utilities'; +@import 'Base.scss'; +@import 'NavBar'; +@import 'VideoListItem'; +@import 'SpotLight'; +@import 'HomePage'; +@import 'PlayerPage'; +@import 'ChannelPage'; +@import 'ChannelsPage'; diff --git a/dist/documentation/images/favicon.ico b/dist/documentation/images/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..fd1b8ad2e1ad73776c5328c65535150808fe5aff GIT binary patch literal 3918 zcmeHKJ#y1P6#g>u44BGgDo~k{ibjo&zzG6{n5Qzabgx~8M;{?WG52>!{W8}PiU9L2Ya7ci}^ zr<7BgI@y`{{9su*@u*72?-kbbb@$JJT?TAF1509Y2R_li&4Ay8a@8lc60ZsMQ`ek5 z{pYJ_N)*kKXo+9Miugd}59U^G(Kup5h<6C`FNnAIs--wTz9GJ0`%nQtR*gaLZu5T} zYUw@ZM0v|^W4i?wmGC($=Bx?vi$@%J6lWje`osK1Gb4}2yX-hE$C!R!esRRHn=#rO zUz{^M{yu-de>bE?IrE!lB-C?%5=}9tbAL=T66#a#j~|=%WbLJMBJaJyY2z1%_U3q> zil4Q|t_Vkzqp`ig91O$XFJpE4z9D{V{~zCvmOtqJoz#=fXithJ%vTvwPnPNPiRLa( zakaZwXkCUq&!Rh`{+Qv*KEwADQNLvFfkRy46nA`H^+PBpsgVrWeD8F=Qg1ZRT4QU% zud!5GKc~Mw!n(bk@7IL51@)~o==0coKfepcr_X1hrj>F2k>A>bZu5d3e3HQ?nYye$ z=r%6c&iRkuKR*{*^GibOU+eI=K7t<4U(OguY?84d$4Z-T_2WLG&s)E4u-TlH?$6$H ea;y(L$Asset 3 \ No newline at end of file diff --git a/dist/documentation/images/logo-js-white.svg b/dist/documentation/images/logo-js-white.svg new file mode 100644 index 00000000..0d421d1f --- /dev/null +++ b/dist/documentation/images/logo-js-white.svg @@ -0,0 +1,54 @@ + + + + + + + + + + diff --git a/dist/documentation/images/logo-microsoft.png b/dist/documentation/images/logo-microsoft.png new file mode 100644 index 0000000000000000000000000000000000000000..d388e7173a2ca69beecfe974160be514482af640 GIT binary patch literal 5447 zcmV-N6}ak&P)Ba0?Y+nz` zLaP*{IwfsGAc#i^0V7%hq6&fv5|V&Pz$OqIV~nxK<9XiK?{&`JYxR%wyLV>pi~~f9 zR4G}~NOykcoc&m9?eALaySBXH4R7F#I3TdO0wsVr=gEbBvjBs2sHb4sy=Dz%a0zAc zF!AUSbZv|!C$5YTg~@nIobEwLfX&BIs2b>PV$+(qI3tQO>0d@DBXsjS%!(qruL3W~ z>fL}N66W7G_~0VM4VfG#^#+It?QDuk!d9+CHoil$O^kr3P$gxwx`HlO)a4 zYM4Wa0WC0|?4#P93FC*E=^~Z}XjZ~1K-sBytbZCpON#aNX7)gWrE4!%92%iL)KV1PDKb@Hj*!03zBK&v#21 z-Ae(t1UkDK@moc-kMnOGze{%x_YZPmad7u4hWNii2-k-Y&OCB|2JoNESak{^DDLNL zHO3e}2prz}K}0A^qmSjby+LHhY$!z^181K`33xlDlJ$3nSYPK`KTCpk^)^nOc%w)U zAEw1LZ2nMH9}7ZV*VmMWr@PycZKu+IFgplfu)|pHkWzYoOn$waBM2@IIPQX|QN|S> z3+~|NNKl9otQ#wGK3*W!UT=d#S6aRM9`0W+$6KfZCJ@&DDPn02m3)2xPd6rjxP?{zGxmJ zwmd`64C>&5jr#4RG%x8N8vjf45^_`Cp)RZ9p&L3)yCe_!`+c&b;>V_Fdjd(06%cnM z)%&S>2u?0}BWL?sNCnd|xDsnY!t7d#9_~!zpz2N{E=`c-&2x<1mQwBv8lH@MQ21f* z@4un+FZ%G=P;Qd8|8`A8j=oaziM^tUHn(4=%LATx<^v@R8_Fmnz1f4gwExDf%MIv_ z=AbVSX7fR%1ChCOZk9kg`2V{QH^m9x`^6n1I8MOK{uWDfYzx)S`dDz>6D~Cb>k=&o zBuv=WmQ13iiG&7c3KnSFO!T-aXOC3EL>I?|U7J|ebBvv=l)F@9MKxTGD2l(VZO0#0 z3R^H9rr+L%aW|<`N;eW}9LKDDQ8oPVIeQ95J~_mvk+9M{);up_!BupFIDO#E-W6PN zyh|vI8uw?q%B3lvT2yaZlW@eHFCn4(&K>ZJ!1n-#dkcE6ySw0508a;Iz-MqfvBM%Y z&X0jyk$Tfz;%(!i$8i5kNABJVQ#-6X&x!%3@949GkFSuP_gv&8_&43k zE#QFc1Aa_Y57qT(NsEnK^r$<3?&w2~bPmu>zv%7<+fHTkAzF7m>3+t{KGZFNU!<8fVRe%Un=ZTu47Jboo5-_v=Z082m* zcPAu!P6+xG$MLKW`lNrmEH>Al6zCE_^MnZL) zOG1zu_~n@5>jb&POsEE9FvlfPCyLqnXIfdg)lKg>8)e)S5g}CN^=T--F48+FwvG%0 zGbP0yzR>;&w*Cz9;?`S)B6HM`i$vrtF~*-3WWiOa2kUqdJof2f<7{jH(|p%&SdjHSa|G@Zls3WcvD<5>_ZeY*3#uKzEAckr^R0*J9 zX2UaQWor$7SxV{l5W-W=?87=32Q+|qz{=>!0E7gvOXe1FXCqFI{8Ehi_7H1;4q~m; zHavh>b8#ij$2C?@5z#F*;TAfQMjTNM>O4Ql>hmquKi{zOZbZOZ+>~l%^0t`lmadQy z+yh(XrmEnnT<+fXJPs$NUIa5j-gs7uetXckdpohUf=NWY&@IIWm6z8NPTx3*!)N97 z`VQ%h7bFa#is0tkwX?g61|6_NwjqBmDsiwCodmh~42-)%m@RwEce>Yi2=XJiA*w%X zTD`SfQ6cQwfYO45Cxl*l9@asxhuKG|`~=?HkxF-v;;wkYUA7mLw+-D92EACt+d~LX zaraKY#T#6|K(sr>rEiV=sHE~F2}#}A+WhpaxgM8N_*D@l=ez-Ih{_>}(Pi@pDam_c z;3?(-$FSlf&*4urm2bGFy@EeeB_DQE5GO28-X*&J4Q$_^db5GHYyVhNz8Q}=;BLpv z%I}p@9*QwtEjj)q$&!X7xtYP}ZbbBOmAE|w-EFRj6pDq1(CTyQv*TIn$0+$3itlj` zi2AVJyYT^=@&xha`>e_Ln~I6ZUJ+TE8?{)r?*J`llHpcF4v5J1VKdL)@giejw}{+% zR?K!Jc*>^+n8$Yv4z%xa4@56Nqn>B`Ag1)b zl+w=tnAv(WYn~?}-v+9=12m~hzZPTs_uU~7n$`Gf>dF5_s0D3xhqhEj0X}K&j|hMW z8mgE2@FIM832dw&8!Ly6FYl%ka&AXWJAEl) zUzM{~sKF`I@WE!9-|KGY4LSez({0=Sa}hnMfw5CQ>y#53(v8fGZuz_EWKTTIwa-cat{-NqOwk`jdI&BcUaP za8-!)^ASN5N>lzSuhy>-^NGxXO|^jO(RNmT&d9kNxF$5C7vK-}JSifIbVT*G_C%!> z5k#cHX<~|m81fd>i#lc0Z}Qp#8kkAg>RN1#Py%6jOk6&7+-9?nbTPmYk(ZaWbVa*( z3Hi{auq;0r)E@6HnE5)r$-An3t6howeIM)$(#NVRkZR9QD0Y#%gBm{R|0e5u?~w6s z#Pyu=MAXqBq^e_*&N4ObPH86poiYO&gbI~NS}adTE za4VJ;iN9?td0pxVq>ic>8RAo{8Gorv{3D`UI`k{*%C3oFTc`1y&2~%Z9;8T25%;qR z3P)l|w%MmWwE*JmIN6RDCHD@|4)(tj@$7&`)oSCruZ+iz04LG9c~y7fopv*PXnJ(v z!7{B8J^!>ls;GiF;rO>mo5wCAcA((qpyf+i6(lv7PI0rYN8??h5>r5RC)sZ}vTnn} zf9ks)hlB%!^%d;YZe+A{NVgJ|VA#0#m(8&SY_m_hSN5Itl}4WrLwTXKN~zY6GDc6=gf{Fa%=KSdY;fQk zW#8ra@BlfkFdJNo$q-pMh%Y}Ls@->CU8hNLyxzCZ(k{f$W3;!-g{TlxxM1T0Kw`nh zHTm>#2ZOeKdiLYUS4+G3$(ZcL05SDnmLIY=>*^yd@5vOGG)K(wb;%?lXxVl6V#|Aa{5cQLfvUAB)OCwSZ(^Wj2#HGR1 z_k{V-_ z+mGiNf6)|wk#0P2L=dEod(i|qE|IDn+n_lKZnz6mJBU}QBT^)xWjvvHhvc4_Rr~uU z4atuJ^`ooud%&qAqm1gE#ugAGoV*Vo)%XJM^A&qB79qA*v(o-39xfLV%p7yR6qZJx zjLRde4R}#@V#VJqGViLMMPCUqXzFeMU!Bk{V!DafEqI`uR^sAziMjP6;zob+ZDi`? z63HobuLQU4l0*#JYDwC;@~SD#2x9D`p`&&smOgRT{T&3RdF-PpI&ktNe6%#>seo!&#!ryu7cf*DmJE*ja)yJK9uV9D;>LvTRYPtPID}spAZpwRS zr)%1c>Ri2lKO%;dfNw4$ZT(;uBb^WeRaIS{QX<4a2-@XULYF^ip&bXxG$QeQk9G;T z8`j@V-unddo-47%gU9f$fiEhQ)(_1_h1s~!Obc#8nMB%|(@dP)_};B_z*_L$=FxP? z6us;Kgn$?Srdj**vvqm=Y}5aTA})XzC)RS6Hp5${-(99m(rF3v1W=%~dZ2BTrh#@` zA=)GDZ3qX}2?y4Z;p~u?j<_ik&=*V21_Sk@gzDN z--vfgcV{-6wx7-myRdqI_FGat#lkMA2lv@D{=(Gv|5KayfIJJKm#?laIf>V!zp%U& zvz2Pk^i}ELDSDTzqYE9UjTT%p#CAm^FWPP;Ip3UF{e|ou%wI@+E9`bzIkJ6aXRd~5 ztwtv zcl3|96ci*rE=c|F)FXo8*7-OV2wL3`H2svjgBVu$vajyDLpOSajg!v`sl8HC#-vYL ziPV*lo7o*^_K?WDiQ}PwLTEqk#sea8nTwu`WcdZV4J6=QxxGlj<|N z|H(5JF2YN5!F_I3BPExuf7_Xyn-G>qSI7NpND!=*oiV#pESjNz8cM*$?lqSWMvlo)$6+c^Cy!W1mx>Bz`ZbkEJiSK9qkkbwa%0KqE$Ypur0^hGLT#ts7(=+&&Cy`wiQbjhYO4Ls zw3Pfd)#|^@mqk_8?=0Rv&x5~PdhJn^%QVEBQmk(19LzBZN7{PtZ@4w+^i;m7H-oK7u;Z@bnhOL22Um=O$F{rT(uUs;8gAE&Ueyqv}LxwF>W>vgkIioKH1 zdss?~lqnZTtA&v4+6#Q zQ{lk$E7g!EV}j)7J#qXkL^@tvq=6{lHjrQF;Y2bl6eE7TSrIg6zzWwIhAXZ1UG_ec%QgE}sw) zd~zI}9HSJ!$qHXfF}_7Zj-qLvZ_djsb<7+u@|7}4ueCJ&G9u{sDC7|kKqSeWVG*n^ zX8rB3VM=%5!&h_bZ;CPgfdrpdqe53AwHou<;AUVipm|pQ%*@ZUay`ti#sr$v{(5cW zb1nO+wkaQFyU-VqApq{&BXxL#2dyckpNGqzFH1FIhN~d!lecJ-A45>fO}QuMewN(A zbQL)`z(px8Z!NR@UP|@i&~L5 z1XrlW-Ngv+%0i#&N7^=hDzEfjqSMW1BOC-45N~Z3zOL?{&5PBik+cz;HA)PWgS(L` z;p@{|L$m(bf?W$d9%KpeskialLF4}}zWFIaRU{7Q99QfV*>U2(*`)plbirQAWc6Ct zuwNx4w2W-Cx>HpCk5tX)#21Uqdj?jmAfbncNSVyuEhndU5kgant>;-j(jkEm1`VO# xc6SOU>BCmSHC}JtWLcghA`#0+ytntG{|_aGnM3oOX8iyF002ovPDHLkV1l##xR?L{ literal 0 HcmV?d00001 diff --git a/dist/documentation/images/logo-office-dev.svg b/dist/documentation/images/logo-office-dev.svg new file mode 100644 index 00000000..e546789c --- /dev/null +++ b/dist/documentation/images/logo-office-dev.svg @@ -0,0 +1,45 @@ + + + + + logo-office-dev + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/documentation/index.html b/dist/documentation/index.html new file mode 100644 index 00000000..5aff8d08 --- /dev/null +++ b/dist/documentation/index.html @@ -0,0 +1,742 @@ + + + + + Office UI Fabric JS + + + + + + + + + +
      +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      Fabric JS
      +
      +
      +
      + +
      +
      +
      +

      Office UI Fabric JS

      + Simple components that focus on appearance and styling while showing the visual language of Office. + Get started + Fabric Core 5.0.1 and Fabric JS 1.5.0 +
      +
      +
      + Javascript logo + Framework-independent and open source +

      Fabric JS provides you with simple components that don't require a framework. It's open source, easy to extend, and ready for you to add what makes your project unique.

      +

      Fabric JS works great with Add-ins and is the recommended front-end toolkit for making your next Office Add-in.

      + See components +
      +
      +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/documentation/styles.css b/dist/documentation/styles.css new file mode 100644 index 00000000..d08d91b4 --- /dev/null +++ b/dist/documentation/styles.css @@ -0,0 +1,2900 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + text-decoration: none; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* + 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 +*/ +body { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + line-height: 1.5; +} + +h2, +h3, +h4, +h5 { + color: #000000; + font-weight: 300; + margin-bottom: 16px; +} + +h2 { + font-size: 24px; + font-weight: 100; + margin-bottom: 4px; + margin-top: 48px; +} + +h3 { + font-size: 17px; + margin: 40px 0 8px 0; +} + +h4 { + color: #212121; + font-size: 14px; + font-weight: 600; + margin: 8px 0; +} + +p, +ul, +ol { + font-size: 14px; + font-weight: 400; + margin-bottom: 12px; +} + +ol { + list-style-position: inside; + list-style-type: decimal; +} + +a { + color: #0078d7; + text-decoration: none; +} + +em { + font-style: italic; +} + +strong { + font-weight: 600; +} + +code { + font-family: monospace; +} + +.od-Header { + background-color: #000000; + height: 50px; + left: 0; + padding: 0 8px; + position: fixed; + right: 0; + top: 0; + width: 100%; + z-index: 500; + box-sizing: border-box; +} + +.od-Header-banner { + height: 50px; + position: relative; + width: 100%; +} + +@media (min-width: 1300px) { + .od-Header-banner { + width: 1300px; + margin: auto; + } +} + +@media (min-width: 1300px) { + [dir='ltr'] .od-Header-logo { + padding-left: 8px; + } + + [dir='rtl'] .od-Header-logo { + padding-right: 8px; + } +} + +.od-Header-searchContainer { + position: absolute; + right: 0; + top: 8px; + width: 330px; + height: 33px; + display: none; +} + +@media screen and (min-width: 1366px) { + .od-Header-searchContainer { + display: block; + } +} + +.od-Header-navigationContainer { + position: absolute; + left: 0; + right: 0; + height: 50px; + background-color: #000000; + display: none; + padding-bottom: 1px; + box-sizing: content-box; +} + +.od-Header-navigationContainer.is-open { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .od-Header-navigationContainer { + border: 1px solid #ffffff; + border-top: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .od-Header-navigationContainer { + border: 1px solid #000000; + border-top: 0; + } +} + +.od-Header-hamburgerButton { + position: absolute; + right: 14px; + top: 5px; + width: 40px; + height: 40px; + font-size: 30px; + color: #ffffff; + cursor: pointer; + outline: none; + text-align: center; + display: none; +} + +.od-Header-hamburgerButton:focus { + box-shadow: inset 0px 0px 0px 1px #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .od-Header-hamburgerButton:focus { + box-shadow: inset 0px 0px 0px 1px #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .od-Header-hamburgerButton:focus { + box-shadow: inset 0px 0px 0px 1px #37006e; + } +} + +@media (min-width: 1300px) { + .docs-showNavigation { + display: block; + } +} + +.nav { + padding-top: 20px; + padding-bottom: 60px; +} + +[dir='ltr'] .nav { + padding-right: 12px; +} + +[dir='rtl'] .nav { + padding-left: 12px; +} + +[dir='ltr'] .nav { + padding-left: 36px; +} + +[dir='rtl'] .nav { + padding-right: 36px; +} + +.link { + font-size: 17px; + font-weight: 100; + line-height: 1.5; +} + +.link a { + color: #666666; + display: block; + margin-bottom: 12px; +} + +.link a:hover { + color: #212121; +} + +.link.isActive:not(.isHomePage), +.link:hover:not(.isHomePage), +.link.hasActiveChild { + color: #333333; + position: relative; +} + +.link.isActive:not(.isHomePage)::before, +.link:hover:not(.isHomePage)::before, +.link.hasActiveChild::before { + content: ''; + width: 2px; + height: 20px; + background: #a6a6a6; + position: absolute; + top: 3px; +} + +[dir='ltr'] .link.isActive:not(.isHomePage)::before, +[dir='ltr'] .link:hover:not(.isHomePage)::before, +[dir='ltr'] .link.hasActiveChild::before { + left: -16px; +} + +[dir='rtl'] .link.isActive:not(.isHomePage)::before, +[dir='rtl'] .link:hover:not(.isHomePage)::before, +[dir='rtl'] .link.hasActiveChild::before { + right: -16px; +} + +.link.isActive:not(.isHomePage).fabricPage::before, +.link:hover:not(.isHomePage).fabricPage::before, +.link.hasActiveChild.fabricPage::before { + background-color: #0078d7; +} + +.link.isActive:not(.isHomePage).getStartedPage::before, +.link:hover:not(.isHomePage).getStartedPage::before, +.link.hasActiveChild.getStartedPage::before { + background-color: #6b0036; +} + +.link.isActive:not(.isHomePage).Components::before, +.link:hover:not(.isHomePage).Components::before, +.link.hasActiveChild.Components::before { + background-color: #394146; +} + +.link .links { + display: none; +} + +.link.isActive a, +.link.hasActiveChild a { + color: #212121; +} + +.link.isActive > .links, +.link.hasActiveChild > .links { + display: block; +} + +.link.hideChildren > .links { + display: none; +} + +.isHomePage a, +.isHomePage.isActive a { + font-size: 21px; + font-weight: 600; + color: #333333; +} + +[dir='ltr'] .isSubMenu { + margin-left: 8px; +} + +[dir='rtl'] .isSubMenu { + margin-right: 8px; +} + +.isSubMenu .link a { + color: #666666; + font-size: 14px; + font-weight: 400; +} + +.isSubMenu .link a:hover { + color: #333333; +} + +.isSubMenu .link.isActive > a:first-child, +.isSubMenu .link:hover > a:first-child { + color: #333333; + font-weight: 600; +} + +.isSubMenu .link.isActive::before, +.isSubMenu .link:hover::before { + display: none; +} + +.isSubMenu .link.hasActiveChild > a:first-child { + color: #ffffff; + font-weight: 600; +} + +.isSubMenu .link.hasActiveChild::before { + display: none; +} + +body { + margin: 0; + padding: 0; + background: #000000; +} + +.App { + background-color: #ffffff; + -ms-flex-pack: center; + justify-content: center; + /* Z-index overrides for components */ +} + +.App .ms-Overlay { + z-index: 7; +} + +.App-wrapper { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + margin: 0 auto; + max-width: 1300px; + padding-top: 50px; + box-sizing: border-box; +} + +.App-mobileNavBar { + padding: 0 16px 0 16px; + background: #212121; + color: #ffffff; + display: -ms-flexbox; + display: flex; + height: 48px; + left: 0; + position: fixed; + right: 0; + z-index: 500; +} + +@media screen and (min-width: 640px) { + .App-mobileNavBar { + padding: 0 32px 0 32px; + } +} + +@media screen and (min-width: 1024px) { + .App-mobileNavBar { + padding: 0 40px 0 40px; + } +} + +.App-mobileNavBar .menuButton { + background: transparent; + color: #ffffff; + font-size: 24px; + font-weight: 400; + height: 48px; + line-height: 48px; + padding: 0; + border: 0; +} + +[dir='ltr'] .App-mobileNavBar .menuButton { + margin-right: 12px; +} + +[dir='rtl'] .App-mobileNavBar .menuButton { + margin-left: 12px; +} + +.App-mobileNavBar .menuButton:focus { + outline: 0; +} + +.App-mobileNavBar .siteTitle { + font-size: 24px; + font-weight: 100; + line-height: 46px; +} + +.App-nav { + -webkit-overflow-scrolling: touch; + bottom: 0; + position: fixed; + top: 98px; + transition: 0.267s cubic-bezier(0.1, 0.9, 0.2, 1); + width: 208px; + min-width: 208px; + overflow: auto; +} + +[dir='ltr'] .App-nav { + left: -208px; +} + +[dir='rtl'] .App-nav { + right: -208px; +} + +[dir='ltr'] .App-nav { + transition-property: left; +} + +[dir='rtl'] .App-nav { + transition-property: right; +} + +.App-content { + padding: 0 16px 0 16px; + background-color: #f4f4f4; + -ms-flex-positive: 1; + flex-grow: 1; + left: 0; + margin-top: 48px; + position: relative; + transition: all 0.267s cubic-bezier(0.1, 0.9, 0.2, 1); + overflow-x: hidden; +} + +@media screen and (min-width: 640px) { + .App-content { + padding: 0 32px 0 32px; + } +} + +@media screen and (min-width: 1024px) { + .App-content { + padding: 0 40px 0 40px; + } +} + +@media screen and (-ms-high-contrast: active) { + .App-content { + border-right: 1px solid #ffffff; + border-left: 1px solid #ffffff; + border-bottom: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .App-content { + border-right: 1px solid #000000; + border-left: 1px solid #000000; + border-bottom: 1px solid #000000; + } +} + +.App-mobileNavOverlay { + display: none; +} + +@media screen and (max-width: 1023px) { + .App.is-navOpen { + bottom: 0; + left: 0; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + } + + [dir='ltr'] .App.is-navOpen .App-mobileNavBar { + padding-left: 36px; + } + + [dir='rtl'] .App.is-navOpen .App-mobileNavBar { + padding-right: 36px; + } + + .App.is-navOpen .App-mobileNavBar .siteTitle { + display: none; + } + + .App.is-navOpen .App-mobileNavOverlay { + background: transparent; + bottom: 0; + display: block; + position: absolute; + top: 0; + z-index: 100; + } + + [dir='ltr'] .App.is-navOpen .App-mobileNavOverlay { + left: 208px; + } + + [dir='rtl'] .App.is-navOpen .App-mobileNavOverlay { + right: 208px; + } + + [dir='ltr'] .App.is-navOpen .App-mobileNavOverlay { + right: 0; + } + + [dir='rtl'] .App.is-navOpen .App-mobileNavOverlay { + left: 0; + } + + [dir='ltr'] .App.is-navOpen .App-nav { + left: 0; + } + + [dir='rtl'] .App.is-navOpen .App-nav { + right: 0; + } + + .App.is-navOpen .App-content { + opacity: 0.5; + } + + [dir='ltr'] .App.is-navOpen .App-content { + left: 208px; + } + + [dir='rtl'] .App.is-navOpen .App-content { + right: 208px; + } +} + +@media screen and (min-width: 1024px) { + .App-wrapper { + -ms-flex-direction: row; + flex-direction: row; + } + + .App-mobileNavBar { + display: none; + } + + .App-nav { + top: auto; + position: relative; + } + + [dir='ltr'] .App-nav { + left: auto; + } + + [dir='rtl'] .App-nav { + right: auto; + } + + .App-content { + margin-top: 0; + -ms-flex-positive: unset; + flex-grow: unset; + width: calc(100% - 208px); + } + + [dir='ltr'] .App.is-navOpen .App-nav { + left: auto; + } + + [dir='rtl'] .App.is-navOpen .App-nav { + right: auto; + } + + [dir='ltr'] .App.is-navOpen .App-content { + left: auto; + } + + [dir='rtl'] .App.is-navOpen .App-content { + right: auto; + } +} + +.od-Navigation { + width: 100%; + max-width: 1300px; +} + +@media (min-width: 1300px) { + .od-Navigation { + height: 50px; + margin: auto; + } +} + +.od-Navigation-links { + width: auto; + height: 100%; + position: relative; +} + +.od-Navigation-linkContainer { + position: relative; + width: 100%; + height: 100%; + background-color: #000000; + vertical-align: top; +} + +.od-Navigation-linkContainer.is-open .od-Navigation-link { + background-color: #3c3c3c; +} + +.od-Navigation-linkContainer.is-open .od-Navigation-subMenu { + display: block; +} + +.od-Navigation-linkContainer.is-open .ms-Icon { + transform: rotateZ(180deg); +} + +@media (min-width: 1300px) { + .od-Navigation-linkContainer { + display: inline-block; + width: auto; + } +} + +.od-Navigation-subMenu { + background-color: #3c3c3c; + width: 100vw; + overflow: hidden; + display: none; +} + +.od-Navigation-subMenu .ms-Grid, +.od-Navigation-subMenu .ms-Grid-row { + height: 100%; +} + +.od-Navigation-subMenu .ms-Grid-col { + padding-top: 12px; +} + +@media (min-width: 1300px) { + .od-Navigation-subMenu { + position: fixed; + top: 50px; + left: 0; + height: 404px; + } +} + +@media screen and (-ms-high-contrast: active) { + .od-Navigation-subMenu { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .od-Navigation-subMenu { + border: 1px solid #000000; + } +} + +.od-Navigation-subMenuItems { + width: 1300px; + margin: auto; + height: 100%; +} + +.od-Navigation-subMenuItem { + font-size: 16px; + line-height: 32px; + width: 100%; + display: block; + color: #ffffff; +} + +.od-Navigation-subMenuItem:focus { + box-shadow: inset 0px 0px 0px 1px #ffffff; + color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .od-Navigation-subMenuItem:focus { + box-shadow: inset 0px 0px 0px 1px #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .od-Navigation-subMenuItem:focus { + box-shadow: inset 0px 0px 0px 1px #37006e; + } +} + +.od-Navigation-subMenuItem:hover { + color: #f4f4f4; +} + +.od-Navigation-subMenuItem i { + font-size: 16px; + position: relative; + width: 22px; + height: 22px; + margin-right: 6px; + display: inline-block; + vertical-align: top; + margin-top: 5px; +} + +.od-Navigation-subMenuItem i:before { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.od-Navigation-menuFirstColumn { + padding-left: 30px; + padding-bottom: 12px; +} + +@media (min-width: 1300px) { + .od-Navigation-menuFirstColumn { + padding-bottom: 0; + padding-left: 0; + } +} + +.od-Navigation-menuSecondColumn { + background-color: #666666; + height: 100%; + padding-left: 30px; +} + +.od-Navigation-menuThirdColumn { + background-color: #767676; + height: 100%; + padding-left: 30px; +} + +.od-Navigation-subMenuOverflowColor { + background-color: #767676; + height: 100%; + width: 100vw; + position: absolute; + right: -100vw; + top: 0; +} + +.od-Navigation-searchContainer { + width: 100%; + position: relative; + padding: 8px; + padding-top: 12px; + padding-bottom: 12px; + background-color: #212121; +} + +@media (min-width: 1300px) { + .od-Navigation-searchContainer { + display: none; + } +} + +.od-Navigation-socialButtons { + position: absolute; + right: 0; + height: 100%; +} + +.od-Navigation-socialButton { + display: inline-block; + background-color: #212121; +} + +.od-Navigation-link { + width: 100%; + height: 50px; + display: block; + padding-left: 16px; + padding-right: 16px; + line-height: 50px; + color: #ffffff; + font-size: 16px; +} + +.od-Navigation-link:hover { + color: #f4f4f4; +} + +.od-Navigation-link:focus { + color: #ffffff; + box-shadow: inset 0px 0px 0px 1px #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .od-Navigation-link:focus { + box-shadow: inset 0px 0px 0px 1px #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .od-Navigation-link:focus { + box-shadow: inset 0px 0px 0px 1px #37006e; + } +} + +.od-Navigation-link.is-selected { + color: #a6a6a6; +} + +.od-Navigation-link.is-selected .ms-Icon { + color: #a6a6a6; +} + +.od-Navigation-link .ms-Icon { + color: #ffffff; + transition: transform 0.4s; + margin-top: 1px; + line-height: 40px; + height: 45px; + vertical-align: bottom; +} + +[dir='ltr'] .od-Navigation-link .ms-Icon { + margin-left: 6px; +} + +[dir='rtl'] .od-Navigation-link .ms-Icon { + margin-right: 6px; +} + +@media screen and (-ms-high-contrast: active) { + .od-Navigation-link .ms-Icon { + transition: none; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .od-Navigation-link .ms-Icon { + transition: none; + } +} + +@media (min-width: 1300px) { + .od-Navigation-link { + display: inline-block; + width: auto; + } + + .od-Navigation-link:hover:before { + content: ''; + height: 2px; + left: 0; + right: 0; + position: absolute; + bottom: 0; + background-color: #a6a6a6; + } + + .od-Navigation-link.is-selected:before { + content: ''; + height: 2px; + left: 0; + right: 0; + position: absolute; + bottom: 0; + background-color: #a6a6a6; + } +} + +.od-SearchBox { + background-color: #3c3c3c; + width: 100%; + padding-right: 33px; + padding-left: 8px; + height: 100%; + position: relative; + box-sizing: border-box; +} + +.od-SearchBox fieldset { + border: 0; + height: auto; + padding: 0; + margin: 0; +} + +@media screen and (-ms-high-contrast: active) { + .od-SearchBox { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .od-SearchBox { + border: 1px solid #000000; + } +} + +.od-SearchBox-field { + background-color: transparent; + height: 33px; + width: 100%; + border: 0; + font-size: 17px; + color: #ffffff; +} + +.od-SearchBox-button { + background: none; + border: 0; + color: transparent; + position: absolute; + top: 0; + height: 29px; + width: 33px; + overflow: hidden; + line-height: 30px; +} + +[dir='ltr'] .od-SearchBox-button { + right: 0; +} + +[dir='rtl'] .od-SearchBox-button { + left: 0; +} + +.od-SearchBox-button.ms-Icon:before { + font-size: 21px; + color: #ffffff; + position: absolute; +} + +.codeBlock.isCollapsible { + padding-top: 28px; + position: relative; +} + +.codeBlock.isCollapsible .code { + max-height: 1px; + overflow: hidden; + transition: max-height 0.3s ease; +} + +.codeBlock.isCollapsible .toggle { + background: transparent; + border: 1px solid #212121; + border-bottom-width: 0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + color: #000000; + font-family: monospace; + font-size: 14px; + font-weight: 400; + height: 28px; + padding: 0 8px; + position: absolute; + right: 0; + top: 0; + transition: all 0.167s ease; +} + +.codeBlock.isCollapsible.isOpen .code { + max-height: 400px; +} + +.codeBlock.isCollapsible.isOpen .toggle { + background: #212121; + color: #ffffff; +} + +.hljs { + -webkit-overflow-scrolling: touch; + display: block; + font-family: monospace; + line-height: 1.4; + overflow-x: auto; + padding: 20px; +} + +.codeBlock.isDarkTheme .hljs { + background: #212121; + color: #ffffff; +} + +.codeBlock.isDarkTheme .hljs-comment, +.codeBlock.isDarkTheme .hljs-quote { + color: #777777; +} + +.codeBlock.isDarkTheme .hljs-variable, +.codeBlock.isDarkTheme .hljs-template-variable, +.codeBlock.isDarkTheme .hljs-tag, +.codeBlock.isDarkTheme .hljs-regexp, +.codeBlock.isDarkTheme .hljs-meta, +.codeBlock.isDarkTheme .hljs-number, +.codeBlock.isDarkTheme .hljs-built_in, +.codeBlock.isDarkTheme .hljs-builtin-name, +.codeBlock.isDarkTheme .hljs-literal, +.codeBlock.isDarkTheme .hljs-params, +.codeBlock.isDarkTheme .hljs-symbol, +.codeBlock.isDarkTheme .hljs-bullet, +.codeBlock.isDarkTheme .hljs-link, +.codeBlock.isDarkTheme .hljs-deletion { + color: #ab875d; +} + +.codeBlock.isDarkTheme .hljs-section, +.codeBlock.isDarkTheme .hljs-title, +.codeBlock.isDarkTheme .hljs-name, +.codeBlock.isDarkTheme .hljs-selector-id, +.codeBlock.isDarkTheme .hljs-selector-class, +.codeBlock.isDarkTheme .hljs-type, +.codeBlock.isDarkTheme .hljs-attribute { + color: #9b869b; +} + +.codeBlock.isDarkTheme .hljs-string, +.codeBlock.isDarkTheme .hljs-keyword, +.codeBlock.isDarkTheme .hljs-selector-tag, +.codeBlock.isDarkTheme .hljs-addition { + color: #8f9c6c; +} + +.codeBlock.isDarkTheme .hljs-emphasis { + font-style: italic; +} + +.codeBlock.isDarkTheme .hljs-strong { + font-weight: bold; +} + +.codeBlock.isLightTheme .hljs { + background: #ffffff; +} + +.codeBlock.isLightTheme .hljs, +.codeBlock.isLightTheme .hljs-subst { + color: #434f54; +} + +.codeBlock.isLightTheme .hljs-keyword, +.codeBlock.isLightTheme .hljs-attribute, +.codeBlock.isLightTheme .hljs-selector-tag, +.codeBlock.isLightTheme .hljs-doctag, +.codeBlock.isLightTheme .hljs-name { + color: #00979d; +} + +.codeBlock.isLightTheme .hljs-built_in, +.codeBlock.isLightTheme .hljs-literal, +.codeBlock.isLightTheme .hljs-bullet, +.codeBlock.isLightTheme .hljs-code, +.codeBlock.isLightTheme .hljs-addition { + color: #d35400; +} + +.codeBlock.isLightTheme .hljs-regexp, +.codeBlock.isLightTheme .hljs-symbol, +.codeBlock.isLightTheme .hljs-variable, +.codeBlock.isLightTheme .hljs-template-variable, +.codeBlock.isLightTheme .hljs-link, +.codeBlock.isLightTheme .hljs-selector-attr, +.codeBlock.isLightTheme .hljs-selector-pseudo { + color: #00979d; +} + +.codeBlock.isLightTheme .hljs-type, +.codeBlock.isLightTheme .hljs-string, +.codeBlock.isLightTheme .hljs-selector-id, +.codeBlock.isLightTheme .hljs-selector-class, +.codeBlock.isLightTheme .hljs-quote, +.codeBlock.isLightTheme .hljs-template-tag, +.codeBlock.isLightTheme .hljs-deletion { + color: #005c5f; +} + +.codeBlock.isLightTheme .hljs-title, +.codeBlock.isLightTheme .hljs-section { + color: #880000; + font-weight: bold; +} + +.codeBlock.isLightTheme .hljs-comment { + color: rgba(149, 165, 166, 0.8); +} + +.codeBlock.isLightTheme .hljs-meta-keyword { + color: #728e00; +} + +.codeBlock.isLightTheme .hljs-meta { + color: #728e00; + color: #434f54; +} + +.codeBlock.isLightTheme .hljs-emphasis { + font-style: italic; +} + +.codeBlock.isLightTheme .hljs-strong { + font-weight: bold; +} + +.codeBlock.isLightTheme .hljs-function { + color: #728e00; +} + +.codeBlock.isLightTheme .hljs-number { + color: #8a7b52; +} + +.button { + border-radius: 3px; + border: 1px solid #b3dbf2; + color: #b3dbf2; + letter-spacing: 0.03em; + padding: 8px 20px 10px 20px; + transition: all 0.267s cubic-bezier(0.1, 0.9, 0.2, 1); + -ms-flex-negative: 0; + flex-shrink: 0; + font-size: 17px; +} + +.button:hover { + background-color: #b3dbf2; + color: #004e8c; +} + +.hero { + padding: 48px 16px 80px 16px; + margin-left: -16px; + margin-right: -16px; + position: relative; + -ms-flex-align: center; + align-items: center; + background-image: url('./images/home-background.svg'); + background-repeat: no-repeat; + background-size: cover; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; +} + +@media screen and (min-width: 640px) { + .hero { + padding: 48px 32px 80px 32px; + } +} + +@media screen and (min-width: 1024px) { + .hero { + padding: 48px 40px 80px 40px; + } +} + +@media screen and (min-width: 640px) { + .hero { + margin-left: -32px; + margin-right: -32px; + } +} + +@media screen and (min-width: 1024px) { + .hero { + margin-left: -40px; + margin-right: -40px; + } +} + +.hero::after { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%225%200%20395%2025%22%3E%3Cpolygon%20fill%3D%22%23333333%22%20points%3D%220%2025%200%200%20200%2021%20400%200%20400%2025%22%2F%3E%3C%2Fsvg%3E'); + background-position: center bottom; + background-repeat: no-repeat; + background-size: contain; + bottom: -10px; + content: ''; + height: 70px; + left: -10px; + position: absolute; + right: -10px; +} + +.title { + color: #ffffff; + font-size: 42px; + font-weight: 100; + line-height: 1; + margin-bottom: 8px; +} + +.tagline { + color: #ffffff; + font-size: 17px; + font-weight: 300; + line-height: 1.5; + margin-bottom: 36px; + max-width: 33em; + text-align: center; +} + +.primaryButton { + border-radius: 3px; + border: 1px solid #ffffff; + color: #ffffff; + letter-spacing: 0.03em; + padding: 8px 20px 10px 20px; + transition: all 0.267s cubic-bezier(0.1, 0.9, 0.2, 1); + background-color: #ffffff; + color: #038387; +} + +.primaryButton:hover { + background-color: #ffffff; + color: #004e8c; +} + +.primaryButton:hover { + background-color: #eaeaea; +} + +.version { + color: #ffffff; + font-size: 11px; + font-weight: 400; + margin-top: 16px; +} + +@media screen and (min-width: 640px) { + .hero { + padding-bottom: 120px; + } + + .title { + font-size: 72px; + } +} + +@media screen and (min-width: 1024px) { + .hero { + padding-top: 140px; + } +} + +.flavors { + padding: 62px 16px 0px 16px; + margin-left: -16px; + margin-right: -16px; + background: #333333; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-pack: distribute; + justify-content: space-around; + -ms-flex-direction: row; + flex-direction: row; + padding-bottom: 72px; +} + +@media screen and (min-width: 640px) { + .flavors { + padding: 62px 32px 0px 32px; + } +} + +@media screen and (min-width: 1024px) { + .flavors { + padding: 62px 40px 0px 40px; + } +} + +@media screen and (min-width: 640px) { + .flavors { + margin-left: -32px; + margin-right: -32px; + } +} + +@media screen and (min-width: 1024px) { + .flavors { + margin-left: -40px; + margin-right: -40px; + } +} + +.flavor { + -ms-flex-align: center; + align-items: center; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + margin-bottom: 60px; + -ms-flex-order: -1; + order: -1; + position: relative; + top: -110px; +} + +.flavor img { + margin-bottom: 12px; +} + +.flavor a { + color: #b3dbf2; + font-size: 14px; + transition: color 0.267s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.flavor a:hover { + color: #ffffff; +} + +.flavor .button { + border-radius: 3px; + border: 1px solid #30c6cc; + color: #30c6cc; + letter-spacing: 0.03em; + padding: 8px 20px 10px 20px; + transition: all 0.267s cubic-bezier(0.1, 0.9, 0.2, 1); + font-size: 14px; +} + +.flavor .button:hover { + background-color: #30c6cc; + color: #3c3c3c; +} + +.flavorTitle, +.flavorDescription { + color: #ffffff; + line-height: 1.5; +} + +.flavorTitle { + font-size: 21px; + font-weight: 300; + text-align: center; +} + +.flavorDescription { + max-width: 43em; + font-size: 14px; + margin-bottom: 12px; + text-align: center; +} + +@media screen and (min-width: 640px) { + .flavors { + -ms-flex-direction: row; + flex-direction: row; + padding-bottom: 72px; + padding-top: 62px; + } + + .flavor { + margin-bottom: 0; + -ms-flex-order: 0; + order: 0; + } +} + +.product { + padding: 20px 16px 40px 16px; + margin-left: -16px; + margin-right: -16px; + -ms-flex-align: center; + align-items: center; + color: #333333; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + font-weight: 300; +} + +@media screen and (min-width: 640px) { + .product { + padding: 20px 32px 40px 32px; + } +} + +@media screen and (min-width: 1024px) { + .product { + padding: 20px 40px 40px 40px; + } +} + +@media screen and (min-width: 640px) { + .product { + margin-left: -32px; + margin-right: -32px; + } +} + +@media screen and (min-width: 1024px) { + .product { + margin-left: -40px; + margin-right: -40px; + } +} + +@media screen and (-ms-high-contrast: active) { + .product { + border-top: 1px solid #ffffff; + border-bottom: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .product { + border-top: 1px solid #000000; + border-bottom: 1px solid #000000; + } +} + +.productImage { + height: auto; + margin-bottom: 20px; + width: 100%; +} + +.productTitle { + display: block; + font-size: 24px; + margin-bottom: 8px; +} + +.productDescription { + font-size: 17px; +} + +.productDescription a, +.productDescription a:visited { + color: #0078d7; + transition: color 0.267s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.productDescription a:hover, +.productDescription a:active { + color: #004e8c; +} + +.productSharepoint { + background-color: #f4f4f4; +} + +.productAddins { + background-color: #eaeaea; +} + +@media screen and (min-width: 640px) { + .product { + -ms-flex-direction: row; + flex-direction: row; + padding-bottom: 60px; + padding-top: 40px; + } + + .productAddins { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + .productAddins .productImage { + margin-left: 0; + margin-right: 32px; + } + + .productImage { + margin-bottom: 0; + margin-left: 32px; + width: 40%; + } +} + +@media screen and (min-width: 1024px) { + .productImage { + width: 50%; + } +} + +.featured { + padding: 40px 16px 40px 16px; + margin-bottom: -100px; + margin-left: -16px; + margin-right: -16px; + background-color: #333333; +} + +@media screen and (min-width: 640px) { + .featured { + padding: 40px 32px 40px 32px; + } +} + +@media screen and (min-width: 1024px) { + .featured { + padding: 40px 40px 40px 40px; + } +} + +@media screen and (min-width: 640px) { + .featured { + margin-left: -32px; + margin-right: -32px; + } +} + +@media screen and (min-width: 1024px) { + .featured { + margin-left: -40px; + margin-right: -40px; + } +} + +.featuredTitle, +.featuredDescription { + display: block; + font-weight: 300; +} + +.featuredTitle { + color: #eaeaea; + font-size: 24px; + margin-bottom: 12px; +} + +.featuredDescription { + color: #a6a6a6; + font-size: 17px; + line-height: 1.5; + margin-bottom: 28px; + max-width: 26em; +} + +.featureList { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.featureList li { + margin-bottom: 28px; +} + +.featureList li img { + width: 100%; + height: auto; +} + +.featureList li span { + color: #eaeaea; + display: block; + font-size: 17px; + transition: color 0.267s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.featureList li:hover span { + color: #ffffff; +} + +.trademark { + color: #a6a6a6; + display: block; + font-size: 12px; + margin-top: 32px; +} + +@media screen and (min-width: 640px) { + .featureList { + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + + .featureList li { + width: 48%; + } +} + +@media screen and (min-width: 1024px) { + .featureList li { + width: 23%; + } + + .trademark { + margin-top: 72px; + } +} + +.pageHeader { + margin-left: -16px; + margin-right: -16px; + position: relative; + z-index: 400; +} + +@media screen and (min-width: 640px) { + .pageHeader { + margin-left: -32px; + margin-right: -32px; + } +} + +@media screen and (min-width: 1024px) { + .pageHeader { + margin-left: -40px; + margin-right: -40px; + } +} + +.content { + padding: 0 16px 0 16px; + margin-bottom: 2px; +} + +@media screen and (min-width: 640px) { + .content { + padding: 0 32px 0 32px; + } +} + +@media screen and (min-width: 1024px) { + .content { + padding: 0 40px 0 40px; + } +} + +@media screen and (-ms-high-contrast: active) { + .content { + border-bottom: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .content { + border-bottom: 1px solid #000000; + } +} + +.pageTitle { + -ms-flex-align: center; + align-items: center; + color: #f8f8f8; + display: -ms-flexbox; + display: flex; + font-size: 48px; + font-weight: 100; + line-height: 1; + padding: 40px 0; +} + +.pageNav { + display: none; +} + +@media screen and (max-width: 639px) { + .pageHeader { + margin-bottom: -2px; + } +} + +@media screen and (min-width: 640px) { + .pageHeader { + height: 236px; + } + + .pageHeader.isAttached .content { + box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2); + max-width: 1092px; + position: fixed; + top: 98px; + width: 100%; + z-index: 100; + height: 128px; + } +} + +@media screen and (min-width: 640px) and (-ms-high-contrast: active) { + [dir='ltr'] .pageHeader.isAttached .content { + border-right: 1px solid #ffffff; + } + + [dir='rtl'] .pageHeader.isAttached .content { + border-left: 1px solid #ffffff; + } +} + +@media screen and (min-width: 640px) and (-ms-high-contrast: black-on-white) { + [dir='ltr'] .pageHeader.isAttached .content { + border-right: 1px solid #000000; + } + + [dir='rtl'] .pageHeader.isAttached .content { + border-left: 1px solid #000000; + } +} + +@media screen and (min-width: 640px) { + .pageHeader.isAttached .pageTitle { + font-size: 24px; + font-weight: 400; + padding-top: 32px; + transition: font-size 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + } + + .content { + height: 236px; + transition: box-shadow 0.267s cubic-bezier(0.1, 0.9, 0.2, 1); + position: relative; + } + + .pageTitle { + font-size: 72px; + padding-top: 94px; + } + + .pageNav { + display: block; + height: 48px; + position: absolute; + bottom: 0; + margin-bottom: 1px; + } + + .pageNav ul { + display: -ms-flexbox; + display: flex; + } + + .pageNav ul li a { + color: #ffffff; + display: inline-block; + font-size: 17px; + font-weight: 300; + height: 48px; + line-height: 48px; + text-decoration: none; + text-align: center; + } + + [dir='ltr'] .pageNav ul li a { + margin-right: 28px; + } + + [dir='rtl'] .pageNav ul li a { + margin-left: 28px; + } + + .pageNav ul li a:hover, + .pageNav ul li a.active { + font-weight: 600; + } + + .pageNav ul li a::after { + color: transparent; + content: attr(data-sectionname); + display: block; + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; + } +} + +@media screen and (min-width: 1024px) { + .pageHeader.isAttached .content { + top: 50px; + box-sizing: border-box; + } +} + +#design .pageHeader, +#design .content { + background-color: #6b0036; +} + +.designSection, +.structureSection, +.instructionsSection { + margin-left: -16px; + margin-right: -16px; + padding: 20px 16px 40px 16px; +} + +@media screen and (min-width: 640px) { + .designSection, + .structureSection, + .instructionsSection { + margin-left: -32px; + margin-right: -32px; + } +} + +@media screen and (min-width: 1024px) { + .designSection, + .structureSection, + .instructionsSection { + margin-left: -40px; + margin-right: -40px; + } +} + +@media screen and (min-width: 640px) { + .designSection, + .structureSection, + .instructionsSection { + padding: 20px 32px 40px 32px; + } +} + +@media screen and (min-width: 1024px) { + .designSection, + .structureSection, + .instructionsSection { + padding: 20px 40px 40px 40px; + } +} + +.designSection h2, +.structureSection h2 { + color: #f4f4f4; + font-size: 28px; + font-weight: 100; + line-height: 1.2; + margin-bottom: 48px; + margin-top: 0; + max-width: 12em; +} + +@media screen and (min-width: 640px) { + .designSection, + .structureSection, + .instructionsSection { + padding-top: 60px; + padding-bottom: 120px; + } + + .designSection h2, + .structureSection h2 { + font-size: 36px; + } +} + +.designSection { + position: relative; + background-color: #6b0036; + color: #f4f4f4; +} + +.designSection::after { + bottom: 0; + content: ''; + height: 70px; + left: -10px; + pointer-events: none; + position: absolute; + right: -10px; + background-repeat: no-repeat; + background-position: center bottom, center top; + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%225%200%20395%2042%22%3E%3Cpolygon%20fill%3D%22%23333333%22%20points%3D%22400%2050%20400%200%200%2042%200%2050%22%2F%3E%3C%2Fsvg%3E'), url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2042%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22grad1%22%20x1%3D%220%25%22%20y1%3D%2220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3Argb(0%2C0%2C0)%3Bstop-opacity%3A0%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3Argb(0%2C0%2C0)%3Bstop-opacity%3A0.04%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20fill%3D%22url(%23grad1)%22%20points%3D%220%200%20400%2042%20400%200%22%2F%3E%3C%2Fsvg%3E'); +} + +@media screen and (min-width: 640px) { + .designSection::after { + height: 140px; + } +} + +.feature { + -ms-flex-align: center; + align-items: center; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + margin-bottom: 32px; +} + +.feature img { + height: 100%; + margin-bottom: 8px; + width: 80%; +} + +.feature .title { + font-size: 24px; + font-weight: 300; + margin-bottom: 20px; + width: 100%; +} + +.feature .description { + font-weight: 300; + font-size: 17px; + line-height: 1.5; + color: #eaeaea; + max-width: 100%; +} + +@media screen and (max-width: 639px) { + .designSection .feature { + float: none; + } +} + +@media screen and (min-width: 640px) { + img { + margin-bottom: 20px; + } +} + +.structureSection { + color: #f4f4f4; + background-color: #333333; +} + +.instructionsSection { + max-width: 60em; +} + +.instructionsSection h2:not(:first-child) { + margin-top: 120px; +} + +.instructionsSection h2 + p { + font-size: 17px; +} + +.instructionsSection a { + color: #00188f; +} + +.steps { + counter-reset: li; + max-width: 65em; + margin: 60px auto; +} + +[dir='ltr'] .steps { + margin-right: 0; +} + +[dir='rtl'] .steps { + margin-left: 0; +} + +.steps li { + list-style: none; + position: relative; + padding-bottom: 24px; + padding-top: 56px; +} + +.steps li:not(:last-child) { + border-bottom: 1px solid #c8c8c8; + margin-bottom: 48px; +} + +.steps li::before { + color: #721481; + content: counter(li); + counter-increment: li; + font-size: 48px; + font-weight: 100; + line-height: 38px; + position: absolute; + top: 0; +} + +.steps code { + margin: 16px 0; +} + +@media screen and (min-width: 640px) { + .steps li { + padding-top: 0; + } + + [dir='ltr'] .steps li { + padding-left: 56px; + } + + [dir='rtl'] .steps li { + padding-right: 56px; + } + + [dir='ltr'] .steps li::before { + left: 0; + } + + [dir='rtl'] .steps li::before { + right: 0; + } +} + +.ComponentPageWrapper .content { + background-color: #394146; +} + +.ComponentPageWrapper .ms-Table .nowrap { + white-space: nowrap; + width: 1%; +} + +.ComponentPageWrapper .ms-Table p { + margin-bottom: 0; + line-height: 24px; +} + +.ComponentPage { + margin-left: -16px; + margin-right: -16px; +} + +@media screen and (min-width: 640px) { + .ComponentPage { + margin-left: -32px; + margin-right: -32px; + } +} + +@media screen and (min-width: 1024px) { + .ComponentPage { + margin-left: -40px; + margin-right: -40px; + } +} + +.ComponentPage { + background-color: #ffffff; +} + +.ComponentPage-title { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 28px; + font-weight: 100; + font-size: 82px; + line-height: 94px; + color: #ffffff; + display: inline-block; + width: 100%; + margin-top: 50px; + margin-bottom: 50px; +} + +.ComponentPage-subHeading { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 28px; + font-weight: 100; + font-size: 36px; + margin-top: 10px; + margin-bottom: 24px; +} + +.ComponentPage-smallSubHeading { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 17px; + font-weight: 300; + line-height: 21px; + margin-bottom: 18px; +} + +.ComponentPage-overviewSectionContent { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: justify; + justify-content: space-between; +} + +@media (min-width: 1024px) { + .ComponentPage-overviewSectionContent { + -ms-flex-direction: row; + flex-direction: row; + } +} + +.ComponentPage-overview { + font-size: 14px; + line-height: 1.5; + max-width: 50em; + margin-bottom: -6px; + box-sizing: border-box; +} + +[dir='ltr'] .ComponentPage-overview { + padding-right: 60px; +} + +[dir='rtl'] .ComponentPage-overview { + padding-left: 60px; +} + +.ComponentPage-overview p { + margin: 0; + padding: 16px 0; +} + +[dir='ltr'] .ComponentPage-overview ul { + padding-left: 18px; +} + +[dir='rtl'] .ComponentPage-overview ul { + padding-right: 18px; +} + +.ComponentPage-overview li { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + list-style: disc; + margin-bottom: 16px; +} + +.ComponentPage-related { + min-width: 200px; +} + +.ComponentPage-related .ComponentPage-relatedTitle { + color: #666666; + display: block; + font-size: 17px; + font-weight: 600; + margin-bottom: 12px; +} + +.ComponentPage-related a, +.ComponentPage-related a:visited { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 17px; + font-weight: 300; + text-decoration: none; +} + +.ComponentPage-overviewSection, +.ComponentPage-variantsSection, +.ComponentPage-usingSection, +.ComponentPage-statesSection, +.ComponentPage-methodsSection, +.ComponentPage-implementationSection { + padding: 50px; +} + +.ComponentPage-navigation { + width: 100%; +} + +.ComponentPage-navLink { + display: inline-block; +} + +[dir='ltr'] .ComponentPage-navLink { + margin-right: 40px; +} + +[dir='rtl'] .ComponentPage-navLink { + margin-left: 40px; +} + +.ComponentPage-navLink .ms-Link { + color: #ffffff; + text-decoration: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 17px; + font-weight: 300; + color: #ffffff; +} + +.ComponentPage-navLink .ms-Link:hover { + color: #eaeaea; +} + +.ComponentPage-usingSection { + background-color: #f8f8f8; +} + +.ComponentPage-usingSection .steps { + max-width: 100%; +} + +.ComponentPage-doSection { + width: 100%; + box-sizing: border-box; + display: inline-block; + vertical-align: top; + margin-bottom: 20px; +} + +.ComponentPage-doSection h3 { + margin: 16px 0 40px 0; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 21px; + font-weight: 100; +} + +.ComponentPage-doSection h3::after { + background-color: #a4cf0c; + border-radius: 3px; + content: ''; + display: block; + height: 8px; + margin: 12px 0; +} + +[dir='ltr'] .ComponentPage-doSection ul { + padding-left: 18px; +} + +[dir='rtl'] .ComponentPage-doSection ul { + padding-right: 18px; +} + +.ComponentPage-doSection li { + list-style: disc; + margin-bottom: 20px; +} + +[dir='ltr'] .ComponentPage-doSection:first-child { + margin-right: 116px; +} + +[dir='rtl'] .ComponentPage-doSection:first-child { + margin-left: 116px; +} + +.ComponentPage-doSection--dont h3::after { + background-color: #e74856; +} + +@media screen and (min-width: 640px) { + .ComponentPage-doSection { + margin-bottom: -10px; + width: calc(50% - 60px); + } +} + +.ComponentPage-overviewSection, +.ComponentPage-variantsSection, +.ComponentPage-usingSection, +.ComponentPage-statesSection, +.ComponentPage-methodsSection, +.ComponentPage-implementationSection { + padding: 50px 16px 50px 16px; +} + +@media screen and (min-width: 640px) { + .ComponentPage-overviewSection, + .ComponentPage-variantsSection, + .ComponentPage-usingSection, + .ComponentPage-statesSection, + .ComponentPage-methodsSection, + .ComponentPage-implementationSection { + padding: 50px 32px 50px 32px; + } +} + +@media screen and (min-width: 1024px) { + .ComponentPage-overviewSection, + .ComponentPage-variantsSection, + .ComponentPage-usingSection, + .ComponentPage-statesSection, + .ComponentPage-methodsSection, + .ComponentPage-implementationSection { + padding: 50px 40px 50px 40px; + } +} + +.ComponentPage-statesSection, +.ComponentPage-methodsSection { + overflow: auto; +} + +.ms-TableData tbody td { + line-height: 2; +} + +.ms-Table .tableMinWidth div { + min-width: 200px; + max-width: 350px; +} + +.ExampleCard { + margin-bottom: 20px; +} + +.ExampleCard-header { + border-bottom: 1px solid #a6a6a6; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + position: relative; +} + +.ExampleCard-title { + margin-bottom: 7px; + display: inline-block; +} + +.ExampleCard-toggleButtons { + display: block; +} + +[dir='ltr'] .ExampleCard-toggleButtons { + float: right; +} + +[dir='rtl'] .ExampleCard-toggleButtons { + float: left; +} + +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton { + background: none; + border: 1px solid #a6a6a6; + border-bottom: 0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + line-height: 1; + padding: 4px 12px; + min-width: 100px; + transition: border 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +[dir='ltr'] .ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton { + margin-right: 0; +} + +[dir='rtl'] .ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton { + margin-left: 0; +} + +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-icon { + display: inline-block; + position: relative; + top: 3px; +} + +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-icon .ms-Icon { + font-size: 17px; + padding: 0; +} + +[dir='ltr'] .ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-icon .ms-Icon { + margin-right: 8px; +} + +[dir='rtl'] .ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-icon .ms-Icon { + margin-left: 8px; +} + +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-label { + color: #212121; + display: inline-block; + padding-bottom: 6px; +} + +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .hideSpan { + display: none; +} + +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton.is-active, +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton:hover { + background-color: #212121; + border-color: #212121; +} + +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton.is-active .ms-Button-icon, +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton.is-active .ms-Button-label, +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton:hover .ms-Button-icon, +.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton:hover .ms-Button-label { + color: #ffffff; +} + +.ExampleCard-example { + -webkit-overflow-scrolling: touch; + padding: 20px 0; +} + +[dir='ltr'] .ExampleCard-example.is-right-aligned { + text-align: right; +} + +[dir='rtl'] .ExampleCard-example.is-right-aligned { + text-align: left; +} + +.ExampleCard-code { + background-color: #212121; + overflow: hidden; +} + +.ExampleCard-code pre { + margin: 0; + max-height: 0; + padding: 0; + overflow: hidden; + transition: all 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.ExampleCard-code code { + display: block; + margin: 12px; +} + +.ExampleCard.is-codeVisible .ExampleCard-header { + border-color: #212121; +} + +.ExampleCard.is-codeVisible .ExampleCard-code pre { + max-height: 480px; + border: 1px solid #212121; + border-top: 0; + overflow: auto; +} + +.ExampleCard.is-codeVisible .ExampleCard-codeButton { + background-color: #212121; +} + +.ExampleCard.is-codeVisible .ExampleCard-codeButton .ms-Button-icon, +.ExampleCard.is-codeVisible .ExampleCard-codeButton .ms-Button-label { + color: #ffffff; +} + +.ExampleCard.is-codeVisible .ExampleCard-codeButton .hideSpan { + display: inline; +} + +.ExampleCard.is-codeVisible .ExampleCard-codeButton .showSpan { + display: none; +} + +.ExampleCard.is-codeVisible .ExampleCard-code { + display: block; + margin-bottom: 20px; +} + +.ExampleCard-dosAndDonts { + width: 100%; +} + +.ExampleCard-dos { + width: calc(50% - 50px); + display: inline-block; +} + +[dir='ltr'] .ExampleCard-dos { + margin-right: 50px; +} + +[dir='rtl'] .ExampleCard-dos { + margin-left: 50px; +} + +.ExampleCard-dos h4 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 17px; + font-weight: 300; + color: #177d3e; +} + +.ExampleCard-donts { + width: calc(50%); + display: inline-block; +} + +.ExampleCard-donts h4 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 17px; + font-weight: 300; + color: #a61e22; +} + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #f0f0f0; +} + +.hljs, +.hljs-subst { + color: #444444; +} + +.hljs-comment { + color: #888888; +} + +.hljs-keyword, +.hljs-attribute, +.hljs-selector-tag, +.hljs-meta-keyword, +.hljs-doctag, +.hljs-name { + font-weight: bold; +} + +.hljs-type, +.hljs-string, +.hljs-number, +.hljs-selector-id, +.hljs-selector-class, +.hljs-quote, +.hljs-template-tag, +.hljs-deletion { + color: #880000; +} + +.hljs-title, +.hljs-section { + color: #880000; + font-weight: bold; +} + +.hljs-regexp, +.hljs-symbol, +.hljs-variable, +.hljs-template-variable, +.hljs-link, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #bc6060; +} + +.hljs-literal { + color: #78a960; +} + +.hljs-built_in, +.hljs-bullet, +.hljs-code, +.hljs-addition { + color: #397300; +} + +.hljs-meta { + color: #1f7199; +} + +.hljs-meta-string { + color: #4d99bf; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.od-OfficeFooter { + background: #000000; + color: #ffffff; + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-weight: 400; + font-size: 14px; + padding: 32px 20px; + position: relative; + z-index: 400; +} + +.od-OfficeFooter ul, +.od-OfficeFooter li { + list-style: none; +} + +[dir='ltr'] .od-OfficeFooter ul, +[dir='ltr'] .od-OfficeFooter li { + margin-left: 0; +} + +[dir='rtl'] .od-OfficeFooter ul, +[dir='rtl'] .od-OfficeFooter li { + margin-right: 0; +} + +[dir='ltr'] .od-OfficeFooter ul, +[dir='ltr'] .od-OfficeFooter li { + padding-left: 0; +} + +[dir='rtl'] .od-OfficeFooter ul, +[dir='rtl'] .od-OfficeFooter li { + padding-right: 0; +} + +.od-OfficeFooter-primary, +.od-OfficeFooter-secondary { + display: -ms-flexbox; + display: flex; + margin: 0 auto; + max-width: 1300px; +} + +.od-OfficeFooter-primary { + -ms-flex-direction: column; + flex-direction: column; + position: relative; +} + +.od-OfficeFooter-secondary { + -ms-flex-align: end; + align-items: flex-end; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.od-OfficeFooter-heading { + font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-weight: 600; + font-size: 17px; + white-space: nowrap; +} + +.od-OfficeFooter-linkList { + margin-bottom: 40px; +} + +.od-OfficeFooter-list li { + margin: 16px 0; + padding: 4px 0; +} + +.od-OfficeFooter-list li a { + color: #ffffff; + display: block; +} + +.od-OfficeFooter-list--secondary { + margin-bottom: 0; +} + +.od-OfficeFooter-list--secondary li { + margin: 4px 0; +} + +.od-OfficeFooter-microsoft { + margin-bottom: 8px; +} + +[dir='ltr'] .od-OfficeFooter-microsoft { + margin-left: 8px; +} + +[dir='rtl'] .od-OfficeFooter-microsoft { + margin-right: 8px; +} + +[dir='ltr'] .od-OfficeFooter-microsoft { + text-align: right; +} + +[dir='rtl'] .od-OfficeFooter-microsoft { + text-align: left; +} + +.od-OfficeFooter-microsoft img { + margin-bottom: 12px; +} + +@media (min-width: 480px) { + .od-OfficeFooter-primary { + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .od-OfficeFooter-linkList { + margin-bottom: 0; + } + + [dir='ltr'] .od-OfficeFooter-linkList { + padding-right: 40px; + } + + [dir='rtl'] .od-OfficeFooter-linkList { + padding-left: 40px; + } + + .od-OfficeFooter-list--secondary { + margin-bottom: 0; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-pack: end; + justify-content: flex-end; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + } + + [dir='ltr'] .od-OfficeFooter-list--secondary li { + margin-left: 20px; + } + + [dir='rtl'] .od-OfficeFooter-list--secondary li { + margin-right: 20px; + } +} + +@media (min-width: 640px) { + .od-OfficeFooter-primary { + -ms-flex-pack: start; + justify-content: flex-start; + } + + [dir='ltr'] .od-OfficeFooter-linkList { + margin-right: 120px; + } + + [dir='rtl'] .od-OfficeFooter-linkList { + margin-left: 120px; + } +} diff --git a/dist/documentation/styles.min.css b/dist/documentation/styles.min.css new file mode 100644 index 00000000..bf2faf50 --- /dev/null +++ b/dist/documentation/styles.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-decoration:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;line-height:1.5}h2,h3,h4,h5{color:#000;font-weight:300;margin-bottom:16px}h2{font-size:24px;font-weight:100;margin-bottom:4px;margin-top:48px}h3{font-size:17px;margin:40px 0 8px}h4{color:#212121;font-weight:600;margin:8px 0}h4,ol,p,ul{font-size:14px}ol,p,ul{font-weight:400;margin-bottom:12px}ol{list-style-position:inside;list-style-type:decimal}a{color:#0078d7;text-decoration:none}em{font-style:italic}strong{font-weight:600}code{font-family:monospace}.od-Header{background-color:#000;height:50px;left:0;padding:0 8px;position:fixed;right:0;top:0;width:100%;z-index:4;box-sizing:border-box}.od-Header-banner{height:50px;position:relative;width:100%}@media (min-width:1300px){.od-Header-banner{width:1300px;margin:auto}}@media (min-width:1300px){[dir=ltr] .od-Header-logo{padding-left:8px}[dir=rtl] .od-Header-logo{padding-right:8px}}.od-Header-searchContainer{position:absolute;right:0;top:8px;width:330px;height:33px;display:none}@media screen and (min-width:1366px){.od-Header-searchContainer{display:block}}.od-Header-navigationContainer{position:absolute;left:0;right:0;height:50px;background-color:#000;display:none;padding-bottom:1px;box-sizing:content-box}.od-Header-navigationContainer.is-open{display:block}@media screen and (-ms-high-contrast:active){.od-Header-navigationContainer{border:1px solid #fff;border-top:0}}@media screen and (-ms-high-contrast:black-on-white){.od-Header-navigationContainer{border:1px solid #000;border-top:0}}.od-Header-hamburgerButton{position:absolute;right:14px;top:5px;width:40px;height:40px;font-size:30px;color:#fff;cursor:pointer;outline:none;text-align:center;display:none}.od-Header-hamburgerButton:focus{box-shadow:inset 0 0 0 1px #fff}@media screen and (-ms-high-contrast:active){.od-Header-hamburgerButton:focus{box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.od-Header-hamburgerButton:focus{box-shadow:inset 0 0 0 1px #37006e}}@media (min-width:1300px){.docs-showNavigation{display:block}}.nav{padding-top:20px;padding-bottom:60px}[dir=ltr] .nav{padding-right:12px}[dir=rtl] .nav{padding-left:12px}[dir=ltr] .nav{padding-left:36px}[dir=rtl] .nav{padding-right:36px}.link{font-size:17px;font-weight:100;line-height:1.5}.link a{color:#666;display:block;margin-bottom:12px}.link a:hover{color:#212121}.link.hasActiveChild,.link.isActive:not(.isHomePage),.link:hover:not(.isHomePage){color:#333;position:relative}.link.hasActiveChild:before,.link.isActive:not(.isHomePage):before,.link:hover:not(.isHomePage):before{content:"";width:2px;height:20px;background:#a6a6a6;position:absolute;top:3px}[dir=ltr] .link.hasActiveChild:before,[dir=ltr] .link.isActive:not(.isHomePage):before,[dir=ltr] .link:hover:not(.isHomePage):before{left:-16px}[dir=rtl] .link.hasActiveChild:before,[dir=rtl] .link.isActive:not(.isHomePage):before,[dir=rtl] .link:hover:not(.isHomePage):before{right:-16px}.link.hasActiveChild.fabricPage:before,.link.isActive:not(.isHomePage).fabricPage:before,.link:hover:not(.isHomePage).fabricPage:before{background-color:#0078d7}.link.hasActiveChild.getStartedPage:before,.link.isActive:not(.isHomePage).getStartedPage:before,.link:hover:not(.isHomePage).getStartedPage:before{background-color:#6b0036}.link.hasActiveChild.Components:before,.link.isActive:not(.isHomePage).Components:before,.link:hover:not(.isHomePage).Components:before{background-color:#394146}.link .links{display:none}.link.hasActiveChild a,.link.isActive a{color:#212121}.link.hasActiveChild>.links,.link.isActive>.links{display:block}.link.hideChildren>.links{display:none}.isHomePage.isActive a,.isHomePage a{font-size:21px;font-weight:600;color:#333}[dir=ltr] .isSubMenu{margin-left:8px}[dir=rtl] .isSubMenu{margin-right:8px}.isSubMenu .link a{color:#666;font-size:14px;font-weight:400}.isSubMenu .link a:hover{color:#333}.isSubMenu .link.isActive>a:first-child,.isSubMenu .link:hover>a:first-child{color:#333;font-weight:600}.isSubMenu .link.isActive:before,.isSubMenu .link:hover:before{display:none}.isSubMenu .link.hasActiveChild>a:first-child{color:#fff;font-weight:600}.isSubMenu .link.hasActiveChild:before{display:none}body{margin:0;padding:0;background:#000}.App{background-color:#fff;-ms-flex-pack:center;justify-content:center}.App .ms-Overlay{z-index:1}.App-wrapper{-ms-flex-direction:column;flex-direction:column;margin:0 auto;max-width:1300px;padding-top:50px;box-sizing:border-box}.App-mobileNavBar,.App-wrapper{display:-ms-flexbox;display:flex}.App-mobileNavBar{padding:0 16px;background:#212121;color:#fff;height:48px;left:0;position:fixed;right:0;z-index:4}@media screen and (min-width:640px){.App-mobileNavBar{padding:0 32px}}@media screen and (min-width:1024px){.App-mobileNavBar{padding:0 40px}}.App-mobileNavBar .menuButton{background:transparent;color:#fff;font-size:24px;font-weight:400;height:48px;line-height:48px;padding:0;border:0}[dir=ltr] .App-mobileNavBar .menuButton{margin-right:12px}[dir=rtl] .App-mobileNavBar .menuButton{margin-left:12px}.App-mobileNavBar .menuButton:focus{outline:0}.App-mobileNavBar .siteTitle{font-size:24px;font-weight:100;line-height:46px}.App-nav{-webkit-overflow-scrolling:touch;bottom:0;position:fixed;top:98px;transition:.267s cubic-bezier(.1,.9,.2,1);width:208px;min-width:208px;overflow:auto}[dir=ltr] .App-nav{left:-208px}[dir=rtl] .App-nav{right:-208px}[dir=ltr] .App-nav{transition-property:left}[dir=rtl] .App-nav{transition-property:right}.App-content{padding:0 16px;background-color:#f4f4f4;-ms-flex-positive:1;flex-grow:1;left:0;margin-top:48px;position:relative;transition:all .267s cubic-bezier(.1,.9,.2,1);overflow-x:hidden}@media screen and (min-width:640px){.App-content{padding:0 32px}}@media screen and (min-width:1024px){.App-content{padding:0 40px}}@media screen and (-ms-high-contrast:active){.App-content{border-right:1px solid #fff;border-left:1px solid #fff;border-bottom:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.App-content{border-right:1px solid #000;border-left:1px solid #000;border-bottom:1px solid #000}}.App-mobileNavOverlay{display:none}@media screen and (max-width:1023px){.App.is-navOpen{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}[dir=ltr] .App.is-navOpen .App-mobileNavBar{padding-left:36px}[dir=rtl] .App.is-navOpen .App-mobileNavBar{padding-right:36px}.App.is-navOpen .App-mobileNavBar .siteTitle{display:none}.App.is-navOpen .App-mobileNavOverlay{background:transparent;bottom:0;display:block;position:absolute;top:0;z-index:2}[dir=ltr] .App.is-navOpen .App-mobileNavOverlay{left:208px}[dir=rtl] .App.is-navOpen .App-mobileNavOverlay{right:208px}[dir=ltr] .App.is-navOpen .App-mobileNavOverlay{right:0}[dir=ltr] .App.is-navOpen .App-nav,[dir=rtl] .App.is-navOpen .App-mobileNavOverlay{left:0}[dir=rtl] .App.is-navOpen .App-nav{right:0}.App.is-navOpen .App-content{opacity:.5}[dir=ltr] .App.is-navOpen .App-content{left:208px}[dir=rtl] .App.is-navOpen .App-content{right:208px}}@media screen and (min-width:1024px){.App-wrapper{-ms-flex-direction:row;flex-direction:row}.App-mobileNavBar{display:none}.App-nav{top:auto;position:relative}[dir=ltr] .App-nav{left:auto}[dir=rtl] .App-nav{right:auto}.App-content{margin-top:0;-ms-flex-positive:unset;flex-grow:unset;width:calc(100% - 208px)}[dir=ltr] .App.is-navOpen .App-nav{left:auto}[dir=rtl] .App.is-navOpen .App-nav{right:auto}[dir=ltr] .App.is-navOpen .App-content{left:auto}[dir=rtl] .App.is-navOpen .App-content{right:auto}}.od-Navigation{width:100%;max-width:1300px}@media (min-width:1300px){.od-Navigation{height:50px;margin:auto}}.od-Navigation-links{width:auto;height:100%;position:relative}.od-Navigation-linkContainer{position:relative;width:100%;height:100%;background-color:#000;vertical-align:top}.od-Navigation-linkContainer.is-open .od-Navigation-link{background-color:#3c3c3c}.od-Navigation-linkContainer.is-open .od-Navigation-subMenu{display:block}.od-Navigation-linkContainer.is-open .ms-Icon{transform:rotate(180deg)}@media (min-width:1300px){.od-Navigation-linkContainer{display:inline-block;width:auto}}.od-Navigation-subMenu{background-color:#3c3c3c;width:100vw;overflow:hidden;display:none}.od-Navigation-subMenu .ms-Grid,.od-Navigation-subMenu .ms-Grid-row{height:100%}.od-Navigation-subMenu .ms-Grid-col{padding-top:12px}@media (min-width:1300px){.od-Navigation-subMenu{position:fixed;top:50px;left:0;height:404px}}@media screen and (-ms-high-contrast:active){.od-Navigation-subMenu{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.od-Navigation-subMenu{border:1px solid #000}}.od-Navigation-subMenuItems{width:1300px;margin:auto;height:100%}.od-Navigation-subMenuItem{font-size:16px;line-height:32px;width:100%;display:block;color:#fff}.od-Navigation-subMenuItem:focus{box-shadow:inset 0 0 0 1px #fff;color:#fff}@media screen and (-ms-high-contrast:active){.od-Navigation-subMenuItem:focus{box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.od-Navigation-subMenuItem:focus{box-shadow:inset 0 0 0 1px #37006e}}.od-Navigation-subMenuItem:hover{color:#f4f4f4}.od-Navigation-subMenuItem i{font-size:16px;position:relative;width:22px;height:22px;margin-right:6px;display:inline-block;vertical-align:top;margin-top:5px}.od-Navigation-subMenuItem i:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.od-Navigation-menuFirstColumn{padding-left:30px;padding-bottom:12px}@media (min-width:1300px){.od-Navigation-menuFirstColumn{padding-bottom:0;padding-left:0}}.od-Navigation-menuSecondColumn{background-color:#666;height:100%;padding-left:30px}.od-Navigation-menuThirdColumn{background-color:#767676;height:100%;padding-left:30px}.od-Navigation-subMenuOverflowColor{background-color:#767676;height:100%;width:100vw;position:absolute;right:-100vw;top:0}.od-Navigation-searchContainer{width:100%;position:relative;padding:8px;padding-top:12px;padding-bottom:12px;background-color:#212121}@media (min-width:1300px){.od-Navigation-searchContainer{display:none}}.od-Navigation-socialButtons{position:absolute;right:0;height:100%}.od-Navigation-socialButton{display:inline-block;background-color:#212121}.od-Navigation-link{width:100%;height:50px;display:block;padding-left:16px;padding-right:16px;line-height:50px;color:#fff;font-size:16px}.od-Navigation-link:hover{color:#f4f4f4}.od-Navigation-link:focus{color:#fff;box-shadow:inset 0 0 0 1px #fff}@media screen and (-ms-high-contrast:active){.od-Navigation-link:focus{box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.od-Navigation-link:focus{box-shadow:inset 0 0 0 1px #37006e}}.od-Navigation-link.is-selected,.od-Navigation-link.is-selected .ms-Icon{color:#a6a6a6}.od-Navigation-link .ms-Icon{color:#fff;transition:transform .4s;margin-top:1px;line-height:40px;height:45px;vertical-align:bottom}[dir=ltr] .od-Navigation-link .ms-Icon{margin-left:6px}[dir=rtl] .od-Navigation-link .ms-Icon{margin-right:6px}@media screen and (-ms-high-contrast:active){.od-Navigation-link .ms-Icon{transition:none}}@media screen and (-ms-high-contrast:black-on-white){.od-Navigation-link .ms-Icon{transition:none}}@media (min-width:1300px){.od-Navigation-link{display:inline-block;width:auto}.od-Navigation-link.is-selected:before,.od-Navigation-link:hover:before{content:"";height:2px;left:0;right:0;position:absolute;bottom:0;background-color:#a6a6a6}}.od-SearchBox{background-color:#3c3c3c;width:100%;padding-right:33px;padding-left:8px;height:100%;position:relative;box-sizing:border-box}.od-SearchBox fieldset{border:0;height:auto;padding:0;margin:0}@media screen and (-ms-high-contrast:active){.od-SearchBox{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.od-SearchBox{border:1px solid #000}}.od-SearchBox-field{background-color:transparent;height:33px;width:100%;border:0;font-size:17px;color:#fff}.od-SearchBox-button{background:none;border:0;color:transparent;position:absolute;top:0;height:29px;width:33px;overflow:hidden;line-height:30px}[dir=ltr] .od-SearchBox-button{right:0}[dir=rtl] .od-SearchBox-button{left:0}.od-SearchBox-button.ms-Icon:before{font-size:21px;color:#fff;position:absolute}.codeBlock.isCollapsible{padding-top:28px;position:relative}.codeBlock.isCollapsible .code{max-height:1px;overflow:hidden;transition:max-height .3s ease}.codeBlock.isCollapsible .toggle{background:transparent;border:1px solid #212121;border-bottom-width:0;border-top-left-radius:4px;border-top-right-radius:4px;color:#000;font-family:monospace;font-size:14px;font-weight:400;height:28px;padding:0 8px;position:absolute;right:0;top:0;transition:all .167s ease}.codeBlock.isCollapsible.isOpen .code{max-height:400px}.codeBlock.isCollapsible.isOpen .toggle{background:#212121;color:#fff}.hljs{-webkit-overflow-scrolling:touch;font-family:monospace;line-height:1.4;padding:20px}.codeBlock.isDarkTheme .hljs{background:#212121;color:#fff}.codeBlock.isDarkTheme .hljs-comment,.codeBlock.isDarkTheme .hljs-quote{color:#777}.codeBlock.isDarkTheme .hljs-built_in,.codeBlock.isDarkTheme .hljs-builtin-name,.codeBlock.isDarkTheme .hljs-bullet,.codeBlock.isDarkTheme .hljs-deletion,.codeBlock.isDarkTheme .hljs-link,.codeBlock.isDarkTheme .hljs-literal,.codeBlock.isDarkTheme .hljs-meta,.codeBlock.isDarkTheme .hljs-number,.codeBlock.isDarkTheme .hljs-params,.codeBlock.isDarkTheme .hljs-regexp,.codeBlock.isDarkTheme .hljs-symbol,.codeBlock.isDarkTheme .hljs-tag,.codeBlock.isDarkTheme .hljs-template-variable,.codeBlock.isDarkTheme .hljs-variable{color:#ab875d}.codeBlock.isDarkTheme .hljs-attribute,.codeBlock.isDarkTheme .hljs-name,.codeBlock.isDarkTheme .hljs-section,.codeBlock.isDarkTheme .hljs-selector-class,.codeBlock.isDarkTheme .hljs-selector-id,.codeBlock.isDarkTheme .hljs-title,.codeBlock.isDarkTheme .hljs-type{color:#9b869b}.codeBlock.isDarkTheme .hljs-addition,.codeBlock.isDarkTheme .hljs-keyword,.codeBlock.isDarkTheme .hljs-selector-tag,.codeBlock.isDarkTheme .hljs-string{color:#8f9c6c}.codeBlock.isDarkTheme .hljs-emphasis{font-style:italic}.codeBlock.isDarkTheme .hljs-strong{font-weight:700}.codeBlock.isLightTheme .hljs{background:#fff}.codeBlock.isLightTheme .hljs,.codeBlock.isLightTheme .hljs-subst{color:#434f54}.codeBlock.isLightTheme .hljs-attribute,.codeBlock.isLightTheme .hljs-doctag,.codeBlock.isLightTheme .hljs-keyword,.codeBlock.isLightTheme .hljs-name,.codeBlock.isLightTheme .hljs-selector-tag{color:#00979d}.codeBlock.isLightTheme .hljs-addition,.codeBlock.isLightTheme .hljs-built_in,.codeBlock.isLightTheme .hljs-bullet,.codeBlock.isLightTheme .hljs-code,.codeBlock.isLightTheme .hljs-literal{color:#d35400}.codeBlock.isLightTheme .hljs-link,.codeBlock.isLightTheme .hljs-regexp,.codeBlock.isLightTheme .hljs-selector-attr,.codeBlock.isLightTheme .hljs-selector-pseudo,.codeBlock.isLightTheme .hljs-symbol,.codeBlock.isLightTheme .hljs-template-variable,.codeBlock.isLightTheme .hljs-variable{color:#00979d}.codeBlock.isLightTheme .hljs-deletion,.codeBlock.isLightTheme .hljs-quote,.codeBlock.isLightTheme .hljs-selector-class,.codeBlock.isLightTheme .hljs-selector-id,.codeBlock.isLightTheme .hljs-string,.codeBlock.isLightTheme .hljs-template-tag,.codeBlock.isLightTheme .hljs-type{color:#005c5f}.codeBlock.isLightTheme .hljs-section,.codeBlock.isLightTheme .hljs-title{color:#800;font-weight:700}.codeBlock.isLightTheme .hljs-comment{color:hsla(184,9%,62%,.8)}.codeBlock.isLightTheme .hljs-meta-keyword{color:#728e00}.codeBlock.isLightTheme .hljs-meta{color:#728e00;color:#434f54}.codeBlock.isLightTheme .hljs-emphasis{font-style:italic}.codeBlock.isLightTheme .hljs-strong{font-weight:700}.codeBlock.isLightTheme .hljs-function{color:#728e00}.codeBlock.isLightTheme .hljs-number{color:#8a7b52}.button{border-radius:3px;border:1px solid #b3dbf2;color:#b3dbf2;letter-spacing:.03em;padding:8px 20px 10px;transition:all .267s cubic-bezier(.1,.9,.2,1);-ms-flex-negative:0;flex-shrink:0;font-size:17px}.button:hover{background-color:#b3dbf2;color:#004e8c}.hero{padding:48px 16px 80px;margin-left:-16px;margin-right:-16px;position:relative;-ms-flex-align:center;align-items:center;background-image:url(images/home-background.svg);background-repeat:no-repeat;background-size:cover;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:640px){.hero{padding:48px 32px 80px}}@media screen and (min-width:1024px){.hero{padding:48px 40px 80px}}@media screen and (min-width:640px){.hero{margin-left:-32px;margin-right:-32px}}@media screen and (min-width:1024px){.hero{margin-left:-40px;margin-right:-40px}}.hero:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 0 395 25'%3E%3Cpath fill='%23333' d='M0 25V0l200 21L400 0v25z'/%3E%3C/svg%3E");background-position:bottom;background-repeat:no-repeat;background-size:contain;bottom:-10px;content:"";height:70px;left:-10px;position:absolute;right:-10px}.title{color:#fff;font-size:42px;font-weight:100;line-height:1;margin-bottom:8px}.tagline{color:#fff;font-size:17px;font-weight:300;line-height:1.5;margin-bottom:36px;max-width:33em;text-align:center}.primaryButton{border-radius:3px;border:1px solid #fff;color:#fff;letter-spacing:.03em;padding:8px 20px 10px;transition:all .267s cubic-bezier(.1,.9,.2,1);background-color:#fff;color:#038387}.primaryButton:hover{background-color:#fff;color:#004e8c;background-color:#eaeaea}.version{color:#fff;font-size:11px;font-weight:400;margin-top:16px}@media screen and (min-width:640px){.hero{padding-bottom:120px}.title{font-size:72px}}@media screen and (min-width:1024px){.hero{padding-top:140px}}.flavors{padding:62px 16px 0;margin-left:-16px;margin-right:-16px;background:#333;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-direction:row;flex-direction:row;padding-bottom:72px}@media screen and (min-width:640px){.flavors{padding:62px 32px 0}}@media screen and (min-width:1024px){.flavors{padding:62px 40px 0}}@media screen and (min-width:640px){.flavors{margin-left:-32px;margin-right:-32px}}@media screen and (min-width:1024px){.flavors{margin-left:-40px;margin-right:-40px}}.flavor{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-bottom:60px;-ms-flex-order:-1;order:-1;position:relative;top:-110px}.flavor img{margin-bottom:12px}.flavor a{color:#b3dbf2;font-size:14px;transition:color .267s cubic-bezier(.1,.9,.2,1)}.flavor a:hover{color:#fff}.flavor .button{border-radius:3px;border:1px solid #30c6cc;color:#30c6cc;letter-spacing:.03em;padding:8px 20px 10px;transition:all .267s cubic-bezier(.1,.9,.2,1);font-size:14px}.flavor .button:hover{background-color:#30c6cc;color:#3c3c3c}.flavorDescription,.flavorTitle{color:#fff;line-height:1.5}.flavorTitle{font-size:21px;font-weight:300;text-align:center}.flavorDescription{max-width:43em;font-size:14px;margin-bottom:12px;text-align:center}@media screen and (min-width:640px){.flavors{-ms-flex-direction:row;flex-direction:row;padding-bottom:72px;padding-top:62px}.flavor{margin-bottom:0;-ms-flex-order:0;order:0}}.product{padding:20px 16px 40px;margin-left:-16px;margin-right:-16px;-ms-flex-align:center;align-items:center;color:#333;display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse;font-weight:300}@media screen and (min-width:640px){.product{padding:20px 32px 40px}}@media screen and (min-width:1024px){.product{padding:20px 40px 40px}}@media screen and (min-width:640px){.product{margin-left:-32px;margin-right:-32px}}@media screen and (min-width:1024px){.product{margin-left:-40px;margin-right:-40px}}@media screen and (-ms-high-contrast:active){.product{border-top:1px solid #fff;border-bottom:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.product{border-top:1px solid #000;border-bottom:1px solid #000}}.productImage{height:auto;margin-bottom:20px;width:100%}.productTitle{display:block;font-size:24px;margin-bottom:8px}.productDescription{font-size:17px}.productDescription a,.productDescription a:visited{color:#0078d7;transition:color .267s cubic-bezier(.1,.9,.2,1)}.productDescription a:active,.productDescription a:hover{color:#004e8c}.productSharepoint{background-color:#f4f4f4}.productAddins{background-color:#eaeaea}@media screen and (min-width:640px){.product{-ms-flex-direction:row;flex-direction:row;padding-bottom:60px;padding-top:40px}.productAddins{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.productAddins .productImage{margin-left:0;margin-right:32px}.productImage{margin-bottom:0;margin-left:32px;width:40%}}@media screen and (min-width:1024px){.productImage{width:50%}}.featured{padding:40px 16px;margin-bottom:-100px;margin-left:-16px;margin-right:-16px;background-color:#333}@media screen and (min-width:640px){.featured{padding:40px 32px}}@media screen and (min-width:1024px){.featured{padding:40px}}@media screen and (min-width:640px){.featured{margin-left:-32px;margin-right:-32px}}@media screen and (min-width:1024px){.featured{margin-left:-40px;margin-right:-40px}}.featuredDescription,.featuredTitle{display:block;font-weight:300}.featuredTitle{color:#eaeaea;font-size:24px;margin-bottom:12px}.featuredDescription{color:#a6a6a6;font-size:17px;line-height:1.5;margin-bottom:28px;max-width:26em}.featureList{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}.featureList li{margin-bottom:28px}.featureList li img{width:100%;height:auto}.featureList li span{color:#eaeaea;display:block;font-size:17px;transition:color .267s cubic-bezier(.1,.9,.2,1)}.featureList li:hover span{color:#fff}.trademark{color:#a6a6a6;display:block;font-size:12px;margin-top:32px}@media screen and (min-width:640px){.featureList{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.featureList li{width:48%}}@media screen and (min-width:1024px){.featureList li{width:23%}.trademark{margin-top:72px}}.pageHeader{margin-left:-16px;margin-right:-16px;position:relative;z-index:3}@media screen and (min-width:640px){.pageHeader{margin-left:-32px;margin-right:-32px}}@media screen and (min-width:1024px){.pageHeader{margin-left:-40px;margin-right:-40px}}.content{padding:0 16px;margin-bottom:2px}@media screen and (min-width:640px){.content{padding:0 32px}}@media screen and (min-width:1024px){.content{padding:0 40px}}@media screen and (-ms-high-contrast:active){.content{border-bottom:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.content{border-bottom:1px solid #000}}.pageTitle{-ms-flex-align:center;align-items:center;color:#f8f8f8;display:-ms-flexbox;display:flex;font-size:48px;font-weight:100;line-height:1;padding:40px 0}.pageNav{display:none}@media screen and (max-width:639px){.pageHeader{margin-bottom:-2px}}@media screen and (min-width:640px){.pageHeader{height:236px}.pageHeader.isAttached .content{box-shadow:0 10px 30px -10px rgba(0,0,0,.2);max-width:1092px;position:fixed;top:98px;width:100%;z-index:2;height:128px}}@media screen and (min-width:640px) and (-ms-high-contrast:active){[dir=ltr] .pageHeader.isAttached .content{border-right:1px solid #fff}[dir=rtl] .pageHeader.isAttached .content{border-left:1px solid #fff}}@media screen and (min-width:640px) and (-ms-high-contrast:black-on-white){[dir=ltr] .pageHeader.isAttached .content{border-right:1px solid #000}[dir=rtl] .pageHeader.isAttached .content{border-left:1px solid #000}}@media screen and (min-width:640px){.pageHeader.isAttached .pageTitle{font-size:24px;font-weight:400;padding-top:32px;transition:font-size .167s cubic-bezier(.1,.9,.2,1)}.content{height:236px;transition:box-shadow .267s cubic-bezier(.1,.9,.2,1);position:relative}.pageTitle{font-size:72px;padding-top:94px}.pageNav{display:block;height:48px;position:absolute;bottom:0;margin-bottom:1px}.pageNav ul{display:-ms-flexbox;display:flex}.pageNav ul li a{color:#fff;display:inline-block;font-size:17px;font-weight:300;height:48px;line-height:48px;text-decoration:none;text-align:center}[dir=ltr] .pageNav ul li a{margin-right:28px}[dir=rtl] .pageNav ul li a{margin-left:28px}.pageNav ul li a.active,.pageNav ul li a:hover{font-weight:600}.pageNav ul li a:after{color:transparent;content:attr(data-sectionname);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}}@media screen and (min-width:1024px){.pageHeader.isAttached .content{top:50px;box-sizing:border-box}}#design .content,#design .pageHeader{background-color:#6b0036}.designSection,.instructionsSection,.structureSection{margin-left:-16px;margin-right:-16px;padding:20px 16px 40px}@media screen and (min-width:640px){.designSection,.instructionsSection,.structureSection{margin-left:-32px;margin-right:-32px}}@media screen and (min-width:1024px){.designSection,.instructionsSection,.structureSection{margin-left:-40px;margin-right:-40px}}@media screen and (min-width:640px){.designSection,.instructionsSection,.structureSection{padding:20px 32px 40px}}@media screen and (min-width:1024px){.designSection,.instructionsSection,.structureSection{padding:20px 40px 40px}}.designSection h2,.structureSection h2{color:#f4f4f4;font-size:28px;font-weight:100;line-height:1.2;margin-bottom:48px;margin-top:0;max-width:12em}@media screen and (min-width:640px){.designSection,.instructionsSection,.structureSection{padding-top:60px;padding-bottom:120px}.designSection h2,.structureSection h2{font-size:36px}}.designSection{position:relative;background-color:#6b0036;color:#f4f4f4}.designSection:after{bottom:0;content:"";height:70px;left:-10px;pointer-events:none;position:absolute;right:-10px;background-repeat:no-repeat;background-position:bottom,top;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 0 395 42'%3E%3Cpath fill='%23333' d='M400 50V0L0 42v8z'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 42'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' y1='20%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-opacity='.04'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 0l400 42V0z'/%3E%3C/svg%3E")}@media screen and (min-width:640px){.designSection:after{height:140px}}.feature{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-bottom:32px}.feature img{height:100%;margin-bottom:8px;width:80%}.feature .title{font-size:24px;font-weight:300;margin-bottom:20px;width:100%}.feature .description{font-weight:300;font-size:17px;line-height:1.5;color:#eaeaea;max-width:100%}@media screen and (max-width:639px){.designSection .feature{float:none}}@media screen and (min-width:640px){img{margin-bottom:20px}}.structureSection{color:#f4f4f4;background-color:#333}.instructionsSection{max-width:60em}.instructionsSection h2:not(:first-child){margin-top:120px}.instructionsSection h2+p{font-size:17px}.instructionsSection a{color:#00188f}.steps{counter-reset:a;max-width:65em;margin:60px auto}[dir=ltr] .steps{margin-right:0}[dir=rtl] .steps{margin-left:0}.steps li{list-style:none;position:relative;padding-bottom:24px;padding-top:56px}.steps li:not(:last-child){border-bottom:1px solid #c8c8c8;margin-bottom:48px}.steps li:before{color:#721481;content:counter(a);counter-increment:a;font-size:48px;font-weight:100;line-height:38px;position:absolute;top:0}.steps code{margin:16px 0}@media screen and (min-width:640px){.steps li{padding-top:0}[dir=ltr] .steps li{padding-left:56px}[dir=rtl] .steps li{padding-right:56px}[dir=ltr] .steps li:before{left:0}[dir=rtl] .steps li:before{right:0}}.ComponentPageWrapper .content{background-color:#394146}.ComponentPageWrapper .ms-Table .nowrap{white-space:nowrap;width:1%}.ComponentPageWrapper .ms-Table p{margin-bottom:0;line-height:24px}.ComponentPage{margin-left:-16px;margin-right:-16px}@media screen and (min-width:640px){.ComponentPage{margin-left:-32px;margin-right:-32px}}@media screen and (min-width:1024px){.ComponentPage{margin-left:-40px;margin-right:-40px}}.ComponentPage{background-color:#fff}.ComponentPage-title{font-size:28px;font-size:82px;line-height:94px;color:#fff;display:inline-block;width:100%;margin-top:50px;margin-bottom:50px}.ComponentPage-subHeading,.ComponentPage-title{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100}.ComponentPage-subHeading{font-size:28px;font-size:36px;margin-top:10px;margin-bottom:24px}.ComponentPage-smallSubHeading{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300;line-height:21px;margin-bottom:18px}.ComponentPage-overviewSectionContent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}@media (min-width:1024px){.ComponentPage-overviewSectionContent{-ms-flex-direction:row;flex-direction:row}}.ComponentPage-overview{font-size:14px;line-height:1.5;max-width:50em;margin-bottom:-6px;box-sizing:border-box}[dir=ltr] .ComponentPage-overview{padding-right:60px}[dir=rtl] .ComponentPage-overview{padding-left:60px}.ComponentPage-overview p{margin:0;padding:16px 0}[dir=ltr] .ComponentPage-overview ul{padding-left:18px}[dir=rtl] .ComponentPage-overview ul{padding-right:18px}.ComponentPage-overview li{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;list-style:disc;margin-bottom:16px}.ComponentPage-related{min-width:200px}.ComponentPage-related .ComponentPage-relatedTitle{color:#666;display:block;font-size:17px;font-weight:600;margin-bottom:12px}.ComponentPage-related a,.ComponentPage-related a:visited{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300;text-decoration:none}.ComponentPage-implementationSection,.ComponentPage-methodsSection,.ComponentPage-overviewSection,.ComponentPage-statesSection,.ComponentPage-usingSection,.ComponentPage-variantsSection{padding:50px}.ComponentPage-navigation{width:100%}.ComponentPage-navLink{display:inline-block}[dir=ltr] .ComponentPage-navLink{margin-right:40px}[dir=rtl] .ComponentPage-navLink{margin-left:40px}.ComponentPage-navLink .ms-Link{text-decoration:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300;color:#fff}.ComponentPage-navLink .ms-Link:hover{color:#eaeaea}.ComponentPage-usingSection{background-color:#f8f8f8}.ComponentPage-usingSection .steps{max-width:100%}.ComponentPage-doSection{width:100%;box-sizing:border-box;display:inline-block;vertical-align:top;margin-bottom:20px}.ComponentPage-doSection h3{margin:16px 0 40px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:21px;font-weight:100}.ComponentPage-doSection h3:after{background-color:#a4cf0c;border-radius:3px;content:"";display:block;height:8px;margin:12px 0}[dir=ltr] .ComponentPage-doSection ul{padding-left:18px}[dir=rtl] .ComponentPage-doSection ul{padding-right:18px}.ComponentPage-doSection li{list-style:disc;margin-bottom:20px}[dir=ltr] .ComponentPage-doSection:first-child{margin-right:116px}[dir=rtl] .ComponentPage-doSection:first-child{margin-left:116px}.ComponentPage-doSection--dont h3:after{background-color:#e74856}@media screen and (min-width:640px){.ComponentPage-doSection{margin-bottom:-10px;width:calc(50% - 60px)}}.ComponentPage-implementationSection,.ComponentPage-methodsSection,.ComponentPage-overviewSection,.ComponentPage-statesSection,.ComponentPage-usingSection,.ComponentPage-variantsSection{padding:50px 16px}@media screen and (min-width:640px){.ComponentPage-implementationSection,.ComponentPage-methodsSection,.ComponentPage-overviewSection,.ComponentPage-statesSection,.ComponentPage-usingSection,.ComponentPage-variantsSection{padding:50px 32px}}@media screen and (min-width:1024px){.ComponentPage-implementationSection,.ComponentPage-methodsSection,.ComponentPage-overviewSection,.ComponentPage-statesSection,.ComponentPage-usingSection,.ComponentPage-variantsSection{padding:50px 40px}}.ComponentPage-methodsSection,.ComponentPage-statesSection{overflow:auto}.ms-TableData tbody td{line-height:2}.ms-Table .tableMinWidth div{min-width:200px;max-width:350px}.ExampleCard{margin-bottom:20px}.ExampleCard-header{border-bottom:1px solid #a6a6a6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.ExampleCard-title{margin-bottom:7px;display:inline-block}.ExampleCard-toggleButtons{display:block}[dir=ltr] .ExampleCard-toggleButtons{float:right}[dir=rtl] .ExampleCard-toggleButtons{float:left}.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton{background:none;border:1px solid #a6a6a6;border-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;line-height:1;padding:4px 12px;min-width:100px;transition:border .367s cubic-bezier(.1,.9,.2,1)}[dir=ltr] .ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton{margin-right:0}[dir=rtl] .ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton{margin-left:0}.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-icon{display:inline-block;position:relative;top:3px}.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-icon .ms-Icon{font-size:17px;padding:0}[dir=ltr] .ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-icon .ms-Icon{margin-right:8px}[dir=rtl] .ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-icon .ms-Icon{margin-left:8px}.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .ms-Button-label{color:#212121;display:inline-block;padding-bottom:6px}.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton .hideSpan{display:none}.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton.is-active,.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton:hover{background-color:#212121;border-color:#212121}.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton.is-active .ms-Button-icon,.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton.is-active .ms-Button-label,.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton:hover .ms-Button-icon,.ExampleCard-toggleButtons .ms-Button.ExampleCard-codeButton:hover .ms-Button-label{color:#fff}.ExampleCard-example{-webkit-overflow-scrolling:touch;padding:20px 0}[dir=ltr] .ExampleCard-example.is-right-aligned{text-align:right}[dir=rtl] .ExampleCard-example.is-right-aligned{text-align:left}.ExampleCard-code{background-color:#212121;overflow:hidden}.ExampleCard-code pre{margin:0;max-height:0;padding:0;overflow:hidden;transition:all .367s cubic-bezier(.1,.9,.2,1)}.ExampleCard-code code{display:block;margin:12px}.ExampleCard.is-codeVisible .ExampleCard-header{border-color:#212121}.ExampleCard.is-codeVisible .ExampleCard-code pre{max-height:480px;border:1px solid #212121;border-top:0;overflow:auto}.ExampleCard.is-codeVisible .ExampleCard-codeButton{background-color:#212121}.ExampleCard.is-codeVisible .ExampleCard-codeButton .ms-Button-icon,.ExampleCard.is-codeVisible .ExampleCard-codeButton .ms-Button-label{color:#fff}.ExampleCard.is-codeVisible .ExampleCard-codeButton .hideSpan{display:inline}.ExampleCard.is-codeVisible .ExampleCard-codeButton .showSpan{display:none}.ExampleCard.is-codeVisible .ExampleCard-code{display:block;margin-bottom:20px}.ExampleCard-dosAndDonts{width:100%}.ExampleCard-dos{width:calc(50% - 50px);display:inline-block}[dir=ltr] .ExampleCard-dos{margin-right:50px}[dir=rtl] .ExampleCard-dos{margin-left:50px}.ExampleCard-dos h4{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300;color:#177d3e}.ExampleCard-donts{width:50%;display:inline-block}.ExampleCard-donts h4{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300;color:#a61e22}.hljs{display:block;overflow-x:auto;padding:.5em;background:#f0f0f0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#bc6060}.hljs-literal{color:#78a960}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.od-OfficeFooter{background:#000;color:#fff;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400;font-size:14px;padding:32px 20px;position:relative;z-index:3}.od-OfficeFooter li,.od-OfficeFooter ul{list-style:none}[dir=ltr] .od-OfficeFooter li,[dir=ltr] .od-OfficeFooter ul{margin-left:0}[dir=rtl] .od-OfficeFooter li,[dir=rtl] .od-OfficeFooter ul{margin-right:0}[dir=ltr] .od-OfficeFooter li,[dir=ltr] .od-OfficeFooter ul{padding-left:0}[dir=rtl] .od-OfficeFooter li,[dir=rtl] .od-OfficeFooter ul{padding-right:0}.od-OfficeFooter-primary,.od-OfficeFooter-secondary{display:-ms-flexbox;display:flex;margin:0 auto;max-width:1300px}.od-OfficeFooter-primary{-ms-flex-direction:column;flex-direction:column;position:relative}.od-OfficeFooter-secondary{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:justify;justify-content:space-between}.od-OfficeFooter-heading{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:600;font-size:17px;white-space:nowrap}.od-OfficeFooter-linkList{margin-bottom:40px}.od-OfficeFooter-list li{margin:16px 0;padding:4px 0}.od-OfficeFooter-list li a{color:#fff;display:block}.od-OfficeFooter-list--secondary{margin-bottom:0}.od-OfficeFooter-list--secondary li{margin:4px 0}.od-OfficeFooter-microsoft{margin-bottom:8px}[dir=ltr] .od-OfficeFooter-microsoft{margin-left:8px}[dir=rtl] .od-OfficeFooter-microsoft{margin-right:8px}[dir=ltr] .od-OfficeFooter-microsoft{text-align:right}[dir=rtl] .od-OfficeFooter-microsoft{text-align:left}.od-OfficeFooter-microsoft img{margin-bottom:12px}@media (min-width:480px){.od-OfficeFooter-primary{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}.od-OfficeFooter-linkList{margin-bottom:0}[dir=ltr] .od-OfficeFooter-linkList{padding-right:40px}[dir=rtl] .od-OfficeFooter-linkList{padding-left:40px}.od-OfficeFooter-list--secondary{margin-bottom:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}[dir=ltr] .od-OfficeFooter-list--secondary li{margin-left:20px}[dir=rtl] .od-OfficeFooter-list--secondary li{margin-right:20px}}@media (min-width:640px){.od-OfficeFooter-primary{-ms-flex-pack:start;justify-content:flex-start}[dir=ltr] .od-OfficeFooter-linkList{margin-right:120px}[dir=rtl] .od-OfficeFooter-linkList{margin-left:120px}} \ No newline at end of file diff --git a/dist/js/fabric.d.ts b/dist/js/fabric.d.ts new file mode 100644 index 00000000..c4e4a9ff --- /dev/null +++ b/dist/js/fabric.d.ts @@ -0,0 +1,1118 @@ +//Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +declare namespace fabric { + class Animate { + private static _transformProps; + private static _filters; + private static _timeProps; + private static _callbackProps; + private static _animationObjects; + /** + * @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 + */ + static transition(element: HTMLElement, props: any): void; + /** + * @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 + */ + static animation(element: HTMLElement, keyframes: string, props: any): void; + /** + * @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 + */ + static scrollTo(element: HTMLElement, props: any): void; + private static _setScrollProperties(obj); + private static _parseProperties(obj); + private static _animateScroll(obj); + private static _createTransition(obj); + private static _createAnimation(obj); + private static _getTransitionProperties(obj); + private static _setProperties(obj); + private static _setRegularValues(obj, key); + private static _setFilterValues(obj, key); + private static _setTransformValues(obj, key); + private static _setTransformations(obj); + private static _setCallback(obj); + private static _complete(event); + private static _getAnimationObjByElement(element); + private static _removeAnimationObject(obj); + private static _executeCallback(obj); + private static _contains(array, value); + private static _camelCaseToDash(value); + private static _easeOutExpo(time, begin, change, duration); + } +} + +declare namespace fabric { + class Ease { + static QUAD_EASE_IN: string; + static CUBIC_EASE_IN: string; + static QUART_EASE_IN: string; + static QUINT_EASE_IN: string; + static SINE_EASE_IN: string; + static EXPO_EASE_IN: string; + static CIRC_EASE_IN: string; + static BACK_EASE_IN: string; + static QUAD_EASE_OUT: string; + static CUBIC_EASE_OUT: string; + static QUART_EASE_OUT: string; + static QUINT_EASE_OUT: string; + static SINE_EASE_OUT: string; + static EXPO_EASE_OUT: string; + static CIRC_EASE_OUT: string; + static BACK_EASE_OUT: string; + static QUAD_EASE_IN_OUT: string; + static CUBIC_EASE_IN_OUT: string; + static QUART_EASE_IN_OUT: string; + static QUINT_EASE_IN_OUT: string; + static SINE_EASE_IN_OUT: string; + static EXPO_EASE_IN_OUT: string; + static CIRC_EASE_IN_OUT: string; + static BACK_EASE_IN_OUT: string; + private static CB; + } +} + +interface Window { + CustomEvent: Object; +} + +/** + * @namespace fabric + */ +declare namespace fabric { + /** + * Breadcrumb component + * + * Shows the user"s current location in a hierarchy and provides a means of navigating upward. + * + */ + class Breadcrumb { + private static MEDIUM; + container: HTMLElement; + private _breadcrumb; + private _listItems; + private _contextMenu; + private _overflowButton; + private _overflowMenu; + private _breadcrumbList; + private _currentMaxItems; + private _itemCollection; + private _tabIndex; + /** + * + * @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. + */ + constructor(container: HTMLElement); + /** + * removes focus outlines so they don"t linger after click + */ + removeOutlinesOnClick(): void; + /** + * Adds a breadcrumb item to a breadcrumb + * @param itemLabel {String} the item's text label + * @param itemLink {String} the item's href link + */ + addItem(itemLabel: string, itemLink: string): void; + /** + * Removes a breadcrumb item by item label in the breadcrumbs list + * @param itemLabel {String} the item's text label + */ + removeItemByLabel(itemLabel: string): void; + /** + * removes a breadcrumb item by position in the breadcrumb's list + * index starts at 0 + * @param value {number} the item's index + */ + removeItemByPosition(value: number): void; + /** + * initializes component + */ + init(): void; + /** + * create internal model of list items from DOM + */ + private _createItemCollection(); + /** + * Re-render lists on resize + * + */ + private _onResize(); + /** + * render breadcrumbs and overflow menus + */ + private _renderList(); + /** + * updates the breadcrumbs and overflow menu + */ + private _updateBreadcrumbs(); + /** + * creates the overflow menu + */ + private _addItemsToOverflow(maxItems); + /** + * creates the breadcrumbs + */ + private _addBreadcrumbItems(maxItems); + /** + * resets a list by removing its children + */ + private _resetList(list); + /** + * opens the overflow menu + */ + private _openOverflow(event); + private _overflowKeyPress(event); + /** + * closes the overflow menu + */ + private _closeOverflow(event); + /** + * caches elements and values of the component + */ + private _cacheDOM(); + /** + * sets handlers for resize and button click events + */ + private _setListeners(); + } +} + +/** + * Button + * + * Mostly just a click handler + * + */ +declare namespace fabric { + class Button { + private _container; + private _clickHandler; + constructor(container: Element, clickHandler?: EventListener); + disposeEvents(): void; + private _setClick(); + } +} + +interface IButton { + container?: Element; + label?: string; + icon?: string; + modifier?: string; + tag?: string; +} + +/** + * 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 + */ +declare namespace fabric { + class ContextualHost { + static hosts: Array; + private _contextualHost; + private _modalWidth; + private _modalHeight; + private _teWidth; + private _teHeight; + private _direction; + private _container; + private _disposalCallback; + private _targetElement; + private _matchTargetWidth; + private _contextualHostMain; + private _children; + private _hasArrow; + private _arrow; + constructor(content: HTMLElement, direction: string, targetElement: Element, hasArrow?: boolean, modifiers?: Array, matchTargetWidth?: boolean, disposalCallback?: Function); + disposeModal(): void; + setChildren(value: ContextualHost): void; + contains(value: HTMLElement): boolean; + private createContainer(); + private _openModal(); + private _findAvailablePosition(); + private _showModal(); + private _positionOk(pos1, pos2, pos3?, pos4?); + private _calcLeft(mWidth, teWidth, teLeft); + private _calcTop(mHeight, teHeight, teTop); + private _setPosition(curDirection?); + private _tryPosModalLeft(); + private _tryPosModalRight(); + private _tryPosModalBottom(); + private _tryPosModalTop(); + private _copyModalToBody(); + private _saveModalSize(); + private _dismissAction(e); + private _setDismissClick(); + private _handleKeyUpDismiss(e); + private _resizeAction(); + private _setResizeDisposal(); + } +} + +/// +/// +/// +/** + * Callout + * + * Add callouts to things and stuff + * + */ +declare const STATE_HIDDEN: string; +declare const CLOSE_BUTTON_CLASS: string; +declare const MODIFIER_OOBE_CLASS: string; +declare namespace fabric { + class Callout { + private _container; + private _addTarget; + private _closeButton; + private _position; + private _contextualHost; + constructor(container: Element, addTarget: Element, position: string); + private _setOpener(); + private _openContextMenu(); + private _hasModifier(modifierClass); + private _closeHandler(e); + private _clickHandler(e); + private _keyupHandler(event); + } +} + +declare namespace fabric { + /** + * CheckBox Plugin + * + * Adds basic demonstration functionality to .ms-CheckBox components. + * + */ + class CheckBox { + protected _choiceField: HTMLElement; + protected _choiceInput: HTMLInputElement; + private _container; + /** + * + * @param {HTMLElement} container - the target container for an instance of CheckBox + * @constructor + */ + constructor(container: HTMLElement); + getValue(): boolean; + toggle(): void; + check(): void; + unCheck(): void; + removeListeners(): void; + protected _addListeners(events?: any): void; + private _FocusHandler(); + private _BlurHandler(); + private _ClickHandler(event); + private _KeydownHandler(event); + } +} + +/// +declare namespace fabric { + /** + * RadioButton Plugin + * + * Adds basic demonstration functionality to .ms-RadioButton components. + * + */ + class RadioButton { + protected _choiceField: HTMLElement; + protected _choiceInput: HTMLInputElement; + private _container; + /** + * + * @param {HTMLElement} container - the target container for an instance of RadioButton + * @constructor + */ + constructor(container: HTMLElement); + getValue(): boolean; + toggle(): void; + check(): void; + unCheck(): void; + removeListeners(): void; + protected _addListeners(): void; + private _RadioClickHandler(event); + private _dispatchSelectEvent(); + private _RadioKeydownHandler(event); + private _FocusHandler(); + private _BlurHandler(); + } +} + +/// +declare namespace fabric { + /** + * ChoiceFieldGroup Plugin + * + * Adds basic demonstration functionality to .ms-ChoiceFieldGroup components. + * + */ + class ChoiceFieldGroup { + private _choiceFieldGroup; + private _choiceFieldComponents; + /** + * + * @param {HTMLElement} container - the target container for an instance of ChoiceFieldGroup + * @constructor + */ + constructor(container: HTMLElement); + removeListeners(): void; + private _initalSetup(); + private _addListeners(); + private _ChoiceFieldHandler(event); + } +} + +/** + * SearchBox component + * + * Allows you to search the world. + * + */ +/** + * @namespace fabric + */ +declare namespace fabric { + class SearchBox { + private _searchBoxField; + private _searchBox; + private _searchBoxClearButton; + private _searchBoxExitButton; + private _container; + private _boundExpandSearchHandler; + private _boundEnableClose; + private _boundCollapseSearchBox; + private _boundClearSearchBox; + private _boundHandleBlur; + private _boundExitSearchBox; + private _clearOnly; + constructor(container: HTMLElement); + setCollapsedListeners(): void; + getInputField(): Element; + private _saveDOMRefs(context); + private _disposeListeners(); + private _exitSearchBox(event); + private _collapseSearchBox(); + private _expandSearchHandler(); + private _enableClose(); + private _setHasText(); + private _setFocusAction(context); + private _clearSearchBox(event?); + private _setClearButtonAction(); + private _handleBlur(event); + private _setBlurAction(); + private _checkState(); + private _addAnimation(); + } +} + +/// +/** + * CommandButton + * + * Buttons used primarily in the command bar + * + */ +/** + * @namespace fabric + */ +declare namespace fabric { + class CommandButton { + private _command; + private _commandButton; + private _splitButton; + private _modalHostView; + private _container; + private _contextualMenu; + constructor(container: HTMLElement, contextMenu?: HTMLElement); + private _createModalHostView(); + private _setClick(); + private _checkForMenu(); + } +} + +/// +/// +/// +/** + * CommandBar + * + * Commanding and navigational surface + * + */ +declare namespace fabric { + class CommandBar { + private responsiveSizes; + private visibleCommands; + private commandWidths; + private overflowCommands; + private itemCollection; + private _sideAreaCollection; + private contextualItemContainerRef; + private contextualItemLink; + private contextualItemIcon; + private breakpoint; + private _elements; + private activeCommand; + private searchBoxInstance; + private _container; + private _commandButtonInstance; + constructor(container: Element); + private _runsSearchBox(state?); + private _runOverflow(); + private _initOverflow(); + private _hasClass(element, cls); + private _onSearchExpand(); + private _onSearchCollapse(); + private _getScreenSize(); + private _setBreakpoint(); + private _createSearchInstance(); + private _changeSearchState(state, action); + private _setElements(); + private _createItemCollection(iCollection, areaClass); + private _createContextualRef(); + private _getElementWidth(element); + private _saveCommandWidths(); + private _updateCommands(); + private _drawCommands(); + private _setWindowEvent(); + private _processCollapsedClasses(type); + private _setUIState(); + private _checkOverflow(); + private _redrawMenu(); + private _drawOverflowMenu(left); + private _doResize(); + } +} + +/// +/// +declare namespace fabric { + class ContextualMenu { + private _container; + private _hostTarget; + private _position; + private _host; + private _isOpen; + constructor(container: Element, hostTarget: Element, position?: string); + getHost(): ContextualHost; + private _init(); + private _onDocumentClick(event); + private _onContextualMenuClick(event); + private _multiSelect(target); + private _singleSelect(target); + private _toggleMenu(event); + private _setOpener(hostTarget); + private _openContextMenu(event); + private _checkForSubmenus(container); + private _createModalHostView(container, position, hostTarget); + } +} + +export interface IContextualMenuItem { + title: string; + state: string; +} +export interface IContextualMenu { + items: Array; + state?: string; +} + +/// +/// +declare namespace fabric { + /** + * DatePicker Plugin + */ + class DatePicker { + private picker; + constructor(container: any, options: any); + /** + * After the Pickadate plugin starts, this function + * adds additional controls to the picker view. + */ + initCustomView($datePicker: any): void; + /** Change the highlighted date. */ + changeHighlightedDate(dateArr: any): void; + /** Whenever the picker renders, do our own rendering on the custom controls. */ + updateCustomView($datePicker: any): void; + private setDateAttributes(dateArr); + } +} + +declare namespace fabric { + class Overlay { + overlayElement: HTMLElement; + constructor(overlayElement?: HTMLElement); + remove(): void; + show(): void; + hide(): void; + } +} + +/// +declare namespace fabric { + class Dialog { + private _dialog; + private _overlay; + private _closeButtonElement; + private _actionButtonElements; + constructor(dialog: HTMLElement); + close(): void; + open(): void; + } +} + +declare namespace fabric { + /** + * DialogHost class + */ + class DialogHost { + } +} + +/// +declare namespace fabric { + class PanelHost { + panelHost: Element; + overlay: Overlay; + private _layer; + private _callBack; + private _overlayContainer; + /** + * + * @param {HTMLElement} container - the target container for an instance of Panel + * @constructor + */ + constructor(layer: Node, callBack?: Function); + dismiss(): void; + update(layer: Node, callBack?: Function): void; + private _renderElements(); + private _createElements(); + } +} + +/// +declare namespace fabric { + class Panel { + panelHost: PanelHost; + private _panel; + private _direction; + private _animateOverlay; + private _closeButton; + private _clickHandler; + /** + * + * @param {HTMLElement} container - the target container for an instance of Panel + * @constructor + */ + constructor(panel: Element, direction?: string, animateOverlay?: boolean); + dismiss(callBack?: Function): void; + private _setEvents(); + private _animateInPanel(layer); + } +} + +/// +declare namespace fabric { + /** + * Dropdown Plugin + * + * Given .ms-Dropdown containers with generic elements inside, this plugin hides the original + * dropdown and creates a new "fake" dropdown that can more easily be styled across browsers. + * + */ + var Dropdown = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of Dropdown + * @constructor + */ + function Dropdown(container) { + this._container = container; + this._dropdownLabelHelper = document.createElement("span"); + this._dropdownLabelHelper.classList.add(DROPDOWN_LABEL_HELPER); + this._dropdownLabelHelper.classList.add(DROPDOWN_TITLE_CLASS); + this._newDropdownLabel = document.createElement("span"); + this._newDropdownLabel.classList.add(DROPDOWN_TITLE_CLASS); + this._newDropdown = document.createElement("ul"); + this._newDropdown.classList.add(DROPDOWN_ITEMS_CLASS); + this._dropdownItems = []; + this._originalDropdown = container.querySelector(DROPDOWN_SELECT_CLASS_SELECTOR); + var _originalOptions = this._originalDropdown.querySelectorAll("option"); + /** Bind the callbacks to retain their context */ + this._onCloseDropdown = this._onCloseDropdown.bind(this); + this._onItemSelection = this._onItemSelection.bind(this); + this._onOpenDropdown = this._onOpenDropdown.bind(this); + /** Create a new option as a list item, and add it to the replacement dropdown */ + for (var i = 0; i < _originalOptions.length; ++i) { + var option = _originalOptions[i]; + if (option.selected) { + this._newDropdownLabel.innerHTML = option.text; + } + var newItem = document.createElement("li"); + newItem.classList.add(DROPDOWN_ITEM_CLASS); + if (option.disabled) { + newItem.classList.add(IS_DISABLED_CLASS); + } + if (option.selected) { + newItem.classList.add(IS_SELECTED_CLASS); + } + newItem.innerHTML = option.text; + newItem.addEventListener("click", this._onItemSelection); + this._newDropdown.appendChild(newItem); + this._dropdownItems.push({ + oldOption: option, + newItem: newItem + }); + } + /** Add the new replacement dropdown */ + container.appendChild(this._newDropdownLabel); + container.appendChild(this._newDropdown); + /** Add dropdown label helper for truncation */ + container.appendChild(this._dropdownLabelHelper); + /** Toggle open/closed state of the dropdown when clicking its title. */ + this._newDropdownLabel.addEventListener("click", this._onOpenDropdown); + this._checkTruncation(); + this._setWindowEvent(); + } + Dropdown.prototype._setWindowEvent = function () { + var _this = this; + window.addEventListener("resize", function () { + _this._doResize(); + _this._checkTruncation(); + }, false); + }; + Dropdown.prototype._checkTruncation = function () { + var selected = this._newDropdown.querySelector("." + IS_SELECTED_CLASS); + var origText = (selected ? + selected.textContent : + this._newDropdown.querySelectorAll("." + DROPDOWN_ITEM_CLASS)[0].textContent); + this._dropdownLabelHelper.textContent = origText; + if (this._dropdownLabelHelper.offsetHeight > this._newDropdownLabel.offsetHeight) { + var i = 0; + var ellipsis = "..."; + var newText = void 0; + do { + i--; + newText = origText.slice(0, i); + this._dropdownLabelHelper.textContent = newText + ellipsis; + } while (this._dropdownLabelHelper.offsetHeight > this._newDropdownLabel.offsetHeight); + } + this._newDropdownLabel.textContent = this._dropdownLabelHelper.textContent; + }; + Dropdown.prototype._getScreenSize = function () { + var w = window; + var wSize = { + x: 0, + y: 0 + }; + var d = document, e = d.documentElement, g = d.getElementsByTagName("body")[0]; + wSize.x = w.innerWidth || e.clientWidth || g.clientWidth; + wSize.y = w.innerHeight || e.clientHeight || g.clientHeight; + return wSize; + }; + Dropdown.prototype._doResize = function () { + var isOpen = this._container.classList.contains(IS_OPEN_CLASS); + if (!isOpen) { + return; + } + var screenSize = this._getScreenSize().x; + if (screenSize <= SMALL_MAX_WIDTH) { + this._openDropdownAsPanel(); + } + else { + this._removeDropdownAsPanel(); + } + }; + Dropdown.prototype._openDropdownAsPanel = function () { + if (this._panel === undefined) { + this._panelContainer = document.createElement("div"); + this._panelContainer.classList.add(PANEL_CLASS); + this._panelContainer.classList.add(DROPDOWN_CLASS); + this._panelContainer.classList.add(IS_OPEN_CLASS); + this._panelContainer.classList.add(ANIMATE_IN_CLASS); + this._panelContainer.appendChild(this._newDropdown); + /** Assign the script to the new panel, which creates a panel host, overlay, and attaches it to the DOM */ + this._panel = new fabric.Panel(this._panelContainer); + } + }; + Dropdown.prototype._removeDropdownAsPanel = function (evt) { + var _this = this; + if (this._panel !== undefined) { + /** destroy panel and move dropdown back to outside the panel */ + /* if event target is overlay element, only append dropdown to prevent */ + /* double dismiss bug, otherwise, dismiss and append */ + if (evt && evt.target === this._panel.panelHost.overlay.overlayElement) { + this._container.appendChild(this._newDropdown); + } + else { + this._panel.dismiss(function () { + _this._container.appendChild(_this._newDropdown); + }); + } + this._panel = undefined; + } + }; + Dropdown.prototype._onOpenDropdown = function (evt) { + var isDisabled = this._container.classList.contains(IS_DISABLED_CLASS); + var isOpen = this._container.classList.contains(IS_OPEN_CLASS); + if (!isDisabled && !isOpen) { + /** Stop the click event from propagating, which would just close the dropdown immediately. */ + evt.stopPropagation(); + this._closeOtherDropdowns(); + /** Go ahead and open that dropdown. */ + this._container.classList.add(IS_OPEN_CLASS); + /** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */ + document.addEventListener("click", this._onCloseDropdown); + var screenSize = this._getScreenSize().x; + if (screenSize <= SMALL_MAX_WIDTH) { + this._openDropdownAsPanel(); + } + } + }; + Dropdown.prototype._closeOtherDropdowns = function () { + var dropdowns = document.querySelectorAll("." + DROPDOWN_CLASS + "." + IS_OPEN_CLASS); + for (var i = 0; i < dropdowns.length; i++) { + dropdowns[i].classList.remove(IS_OPEN_CLASS); + } + }; + Dropdown.prototype._onCloseDropdown = function (evt) { + this._removeDropdownAsPanel(evt); + this._container.classList.remove(IS_OPEN_CLASS); + document.removeEventListener("click", this._onCloseDropdown); + }; + Dropdown.prototype._onItemSelection = function (evt) { + var item = evt.target; + var isDropdownDisabled = this._container.classList.contains(IS_DISABLED_CLASS); + var isOptionDisabled = item.classList.contains(IS_DISABLED_CLASS); + if (!isDropdownDisabled && !isOptionDisabled) { + /** Deselect all items and select this one. */ + /** Update the original dropdown. */ + for (var i = 0; i < this._dropdownItems.length; ++i) { + if (this._dropdownItems[i].newItem === item) { + this._dropdownItems[i].newItem.classList.add(IS_SELECTED_CLASS); + this._dropdownItems[i].oldOption.selected = true; + } + else { + this._dropdownItems[i].newItem.classList.remove(IS_SELECTED_CLASS); + this._dropdownItems[i].oldOption.selected = false; + } + } + /** Update the replacement dropdown's title. */ + this._newDropdownLabel.innerHTML = item.textContent; + this._checkTruncation(); + /** Trigger any change event tied to the original dropdown. */ + var changeEvent = document.createEvent("HTMLEvents"); + changeEvent.initEvent("change", false, true); + this._originalDropdown.dispatchEvent(changeEvent); + } + }; + return Dropdown; + }()); + fabric.Dropdown = Dropdown; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// "use strict"; +/// +/// +var fabric; +(function (fabric) { + /** + * + * Adds basic demonstration functionality to .ms-PersonaCard components. + * + */ + var PersonaCard = (function () { + /** + * + * @param {Element} container - the target container for an instance of PersonaCard + * @constructor + */ + function PersonaCard(container) { + this._container = container; + var activeElement = this._container.querySelector(".ms-PersonaCard-action.is-active"); + var activeId = activeElement.getAttribute("data-action-id"); + this._actions = this._container.querySelector(".ms-PersonaCard-actions"); + this._expander = this._container.querySelector(".ms-PersonaCard-detailExpander"); + this._actionDetailBox = this._container.querySelector(".ms-PersonaCard-actionDetailBox"); + this._setDetail(activeId); + this._boundOnActionClick = this._onActionClick.bind(this); + this._boundOnExpanderClick = this._onExpanderClick.bind(this); + this._boundOnTab = this._onTab.bind(this); + this._addListeners(); + } + PersonaCard.prototype.removeListeners = function () { + this._actions.removeEventListener("click", this._boundOnActionClick); + this._expander.removeEventListener("click", this._boundOnExpanderClick); + this._container.removeEventListener("keydown", this._boundOnTab); + }; + PersonaCard.prototype._addListeners = function () { + this._actions.addEventListener("click", this._boundOnActionClick, false); + this._expander.addEventListener("click", this._boundOnExpanderClick, false); + this._container.addEventListener("keydown", this._boundOnTab, false); + }; + PersonaCard.prototype._onTab = function (event) { + var target = event.target; + if (event.keyCode === 9 && target.classList.contains("ms-PersonaCard-action")) { + this._onActionClick(event); + } + }; + PersonaCard.prototype._onExpanderClick = function (event) { + var parent = event.target.parentElement; + if (parent.classList.contains("is-collapsed")) { + parent.classList.remove("is-collapsed"); + } + else { + parent.classList.add("is-collapsed"); + } + var parentHeight = parent.clientHeight; + this._animateDetail(parentHeight); + }; + PersonaCard.prototype._onActionClick = function (event) { + var target = event.target; + var actionId = target.getAttribute("data-action-id"); + if (actionId && target.className.indexOf("is-active") === -1) { + this._setAction(target); + this._setDetail(actionId); + } + }; + PersonaCard.prototype._setAction = function (target) { + var activeElement = this._container.querySelector(".ms-PersonaCard-action.is-active"); + activeElement.classList.remove("is-active"); + target.classList.add("is-active"); + }; + PersonaCard.prototype._setDetail = function (activeId) { + var selector = ".ms-PersonaCard-details[data-detail-id='" + activeId + "']"; + var lastDetail = this._container.querySelector(".ms-PersonaCard-details.is-active"); + var activeDetail = this._container.querySelector(selector); + if (lastDetail) { + lastDetail.classList.remove("is-active"); + } + activeDetail.classList.add("is-active"); + var detailHeight = activeDetail.clientHeight; + this._animateDetail(detailHeight); + }; + PersonaCard.prototype._animateDetail = function (height) { + var _this = this; + this._actionDetailBox.style.overflowY = "hidden"; + fabric.Animate.transition(this._actionDetailBox, { + height: height, + duration: 0.25, + ease: fabric.Ease.SINE_EASE_OUT, + onEnd: function () { + _this._actionDetailBox.style.overflowY = "auto"; + } + }); + }; + return PersonaCard; + }()); + fabric.PersonaCard = PersonaCard; +})(fabric || (fabric = {})); + +/// +/// +/** + * FacePile + * + * A host for FacePile + * + */ +var fabric; +(function (fabric) { + // const CONTEXTUAL_HOST_CLASS = ".ms-ContextualHost"; + var MODAL_POSITION = "top"; + var Persona = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of FacePile + * @constructor + */ + function Persona(container) { + this._persona = container; + // If Persona Card and Contextual host exist continue + // this._contextualHost = this._persona.querySelector(CONTEXTUAL_HOST_CLASS); + this._personaCard = this._persona.querySelector(".ms-PersonaCard"); + if (this._personaCard) { + this._assignEvents(); + this._personaCard.setAttribute("style", "display: none;"); + this._createPersonaCard(); + } + } + Persona.prototype._createPersonaCard = function () { + this._personaCardInstance = new fabric.PersonaCard(this._personaCard); + }; + Persona.prototype._createContextualHostInstance = function () { + this._personaCard.setAttribute("style", "display: block;"); + this._contextualHostInstance = new fabric.ContextualHost(this._personaCard, MODAL_POSITION, this._persona); + }; + Persona.prototype._personaEventHandler = function () { + this._createContextualHostInstance(); + }; + Persona.prototype._assignEvents = function () { + var _this = this; + this._persona.addEventListener("click", this._personaEventHandler.bind(this), false); + this._persona.addEventListener("keyup", function (e) { return (e.keyCode === 32) ? _this._personaEventHandler() : null; }, false); + }; + return Persona; + }()); + fabric.Persona = Persona; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +var fabric; +(function (fabric) { + /** + * FacePile + * + * A host for FacePile + * + */ + var PERSONA_CLASS = ".ms-Persona--facePile"; + var PERSONA_INITIALS = ".ms-Persona-initials"; + var PERSONA_IMAGE = ".ms-Persona-image"; + var PERSONA_PRIMARY_CLASS = ".ms-Persona-primaryText"; + var PERSONA_SECONDARY_CLASS = ".ms-Persona-secondaryText"; + var FacePile = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of FacePile + * @constructor + */ + function FacePile(container) { + this._personaCollection = []; + this._facePile = container; + this._createPersonaCollection(); + } + FacePile.prototype._createPersonaCollection = function () { + var _personas = document.querySelectorAll(PERSONA_CLASS); + for (var i = 0; i < _personas.length; i++) { + var _thisPersona = _personas[i]; + this._personaCollection.push({ + item: _thisPersona, + initials: _thisPersona.querySelector(PERSONA_INITIALS).textContent, + image: _thisPersona.querySelector(PERSONA_IMAGE) ? + _thisPersona.querySelector(PERSONA_IMAGE).getAttribute("src") : null, + primaryText: _thisPersona.querySelector(PERSONA_PRIMARY_CLASS) ? + _thisPersona.querySelector(PERSONA_PRIMARY_CLASS).textContent : "", + secondaryText: _thisPersona.querySelector(PERSONA_SECONDARY_CLASS) ? + _thisPersona.querySelector(PERSONA_SECONDARY_CLASS).textContent : "", + personaInstance: new fabric.Persona(_thisPersona) + }); + } + }; + return FacePile; + }()); + fabric.FacePile = FacePile; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +"use strict"; +var fabric; +(function (fabric) { + /** + * List Item Plugin + * + * Adds basic demonstration functionality to .ms-ListItem components. + * + */ + var ListItem = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of ListItem + * @constructor + */ + function ListItem(container) { + this._container = container; + this._toggleElement = this._container.querySelector(".ms-ListItem-selectionTarget"); + this._addListeners(); + } + ListItem.prototype.removeListeners = function () { + this._toggleElement.removeEventListener("click", this._toggleHandler.bind(this)); + }; + ListItem.prototype._addListeners = function () { + this._toggleElement.addEventListener("click", this._toggleHandler.bind(this), false); + }; + ListItem.prototype._toggleHandler = function () { + this._container.classList.toggle("is-selected"); + }; + return ListItem; + }()); + fabric.ListItem = ListItem; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +"use strict"; +var fabric; +(function (fabric) { + /** + * List Item Plugin + * + * Adds basic demonstration functionality to .ms-List components. + * + */ + var List = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of List + * @constructor + */ + function List(container) { + this._container = container; + this._listItemComponents = []; + var choiceFieldElements = this._container.querySelectorAll(".ms-ListItem"); + for (var i = 0; i < choiceFieldElements.length; i++) { + this._listItemComponents[i] = new fabric.ListItem(choiceFieldElements[i]); + } + } + return List; + }()); + fabric.List = List; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * @namespace fabric + */ +var fabric; +(function (fabric) { + "use strict"; + /** + * MessageBanner component + * + * A component to display error messages + * + */ + var MessageBanner = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of MessageBanner + * @constructor + */ + function MessageBanner(container) { + this._textContainerMaxWidth = 700; + this._bufferElementsWidth = 88; + this._bufferElementsWidthSmall = 35; + this.SMALL_BREAK_POINT = 480; + this.container = container; + this.init(); + } + /** + * initializes component + */ + MessageBanner.prototype.init = function () { + this._cacheDOM(); + this._setListeners(); + this._clientWidth = this._errorBanner.offsetWidth; + this._initTextWidth = this._clipper.offsetWidth; + this._onResize(); + }; + /** + * shows banner if the banner is hidden + */ + MessageBanner.prototype.show = function () { + this._errorBanner.className = "ms-MessageBanner"; + }; + /** + * shows banner if the banner is hidden (deprecated) + */ + MessageBanner.prototype.showBanner = function () { + this.show(); + }; + /** + * hides banner when close button is clicked + */ + MessageBanner.prototype.hide = function () { + if (this._errorBanner.className.indexOf("hide") === -1) { + this._errorBanner.className += " hide"; + setTimeout(this._hideMessageBanner.bind(this), 500); + } + }; + MessageBanner.prototype._hideMessageBanner = function () { + this._errorBanner.className = "ms-MessageBanner is-hidden"; + }; + /** + * sets styles on resize + */ + MessageBanner.prototype._onResize = function () { + this._clientWidth = this._errorBanner.offsetWidth; + if (window.innerWidth >= this.SMALL_BREAK_POINT) { + this._resizeRegular(); + } + else { + this._resizeSmall(); + } + }; + /** + * resize above 480 pixel breakpoint + */ + MessageBanner.prototype._resizeRegular = function () { + if ((this._clientWidth - this._bufferSize) > this._initTextWidth && this._initTextWidth < this._textContainerMaxWidth) { + this._textWidth = "auto"; + this._chevronButton.className = "ms-MessageBanner-expand"; + this._collapse(); + } + else { + this._textWidth = Math.min((this._clientWidth - this._bufferSize), this._textContainerMaxWidth) + "px"; + if (this._chevronButton.className.indexOf("is-visible") === -1) { + this._chevronButton.className += " is-visible"; + } + } + this._clipper.style.width = this._textWidth; + }; + /** + * resize below 480 pixel breakpoint + */ + MessageBanner.prototype._resizeSmall = function () { + if (this._clientWidth - (this._bufferElementsWidthSmall + this._closeButton.offsetWidth) > this._initTextWidth) { + this._textWidth = "auto"; + this._collapse(); + } + else { + this._textWidth = (this._clientWidth - (this._bufferElementsWidthSmall + this._closeButton.offsetWidth)) + "px"; + } + this._clipper.style.width = this._textWidth; + }; + /** + * caches elements and values of the component + */ + MessageBanner.prototype._cacheDOM = function () { + this._errorBanner = this.container; + this._clipper = this.container.querySelector(".ms-MessageBanner-clipper"); + this._chevronButton = this.container.querySelector(".ms-MessageBanner-expand"); + this._actionButton = this.container.querySelector(".ms-MessageBanner-action"); + this._bufferSize = this._actionButton.offsetWidth + this._bufferElementsWidth; + this._closeButton = this.container.querySelector(".ms-MessageBanner-close"); + }; + /** + * expands component to show full error message + */ + MessageBanner.prototype._expand = function () { + var icon = this._chevronButton.querySelector(".ms-Icon"); + this._errorBanner.className += " is-expanded"; + icon.className = "ms-Icon ms-Icon--DoubleChevronUp"; + }; + /** + * collapses component to only show truncated message + */ + MessageBanner.prototype._collapse = function () { + var icon = this._chevronButton.querySelector(".ms-Icon"); + this._errorBanner.className = "ms-MessageBanner"; + icon.className = "ms-Icon ms-Icon--DoubleChevronDown"; + }; + MessageBanner.prototype._toggleExpansion = function () { + if (this._errorBanner.className.indexOf("is-expanded") > -1) { + this._collapse(); + } + else { + this._expand(); + } + }; + /** + * sets handlers for resize and button click events + */ + MessageBanner.prototype._setListeners = function () { + window.addEventListener("resize", this._onResize.bind(this), false); + this._chevronButton.addEventListener("click", this._toggleExpansion.bind(this), false); + this._closeButton.addEventListener("click", this.hide.bind(this), false); + }; + return MessageBanner; + }()); + fabric.MessageBanner = MessageBanner; +})(fabric || (fabric = {})); // end fabric namespace + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +/// +var fabric; +(function (fabric) { + /** + * People Picker + * + * People picker control + * + */ + var MODAL_POSITION = "bottom"; + var TOKEN_CLASS = "ms-Persona--token"; + var PeoplePicker = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of People Picker + * @constructor + */ + function PeoplePicker(container) { + this._container = container; + this._peoplePickerMenu = this._container.querySelector(".ms-PeoplePicker-results"); + this._peoplePickerSearch = this._container.querySelector(".ms-TextField-field"); + this._peoplePickerSearchBox = this._container.querySelector(".ms-PeoplePicker-searchBox"); + this._selectedPeople = this._container.querySelector(".ms-PeoplePicker-selectedPeople"); + this._assignClicks(); + if (this._selectedPeople) { + this._assignRemoveHandler(); + this._selectedCount = this._container.querySelector(".ms-PeoplePicker-selectedCount"); + this._selectedPlural = this._container.querySelector(".ms-PeoplePicker-selectedCountPlural"); + } + if (this._peoplePickerMenu) { + this._peoplePickerMenu.setAttribute("style", "display: none;"); + } + } + PeoplePicker.prototype._createModalHost = function (e) { + e.stopPropagation(); + this._peoplePickerMenu.setAttribute("style", "display: block;"); + this._contextualHostView = new fabric.ContextualHost(this._peoplePickerMenu, MODAL_POSITION, this._peoplePickerSearchBox, false, [""], true, this._contextHostCallBack.bind(this)); + this._peoplePickerSearchBox.classList.add("is-active"); + this._isContextualMenuOpen = true; + }; + PeoplePicker.prototype._clickHandler = function (e) { + this._createModalHost(e); + // Select all results and remove event listeners by cloning + var peoplePickerResults = this._peoplePickerMenu.querySelector(".ms-PeoplePicker-result"); + var resultsParent = peoplePickerResults.parentNode; + var resultsClone = resultsParent.cloneNode(true); + resultsParent.parentNode.replaceChild(resultsClone, resultsParent); + // Get all results + this._peoplePickerResults = this._peoplePickerMenu.querySelectorAll(".ms-PeoplePicker-result"); + // Add _selectResult listeners to each result + for (var i = 0; i < this._peoplePickerResults.length; i++) { + var personaResult = this._peoplePickerResults[i].querySelector(".ms-Persona"); + var removeButton = this._peoplePickerResults[i].querySelector(".ms-PeoplePicker-resultAction"); + personaResult.addEventListener("click", this._selectResult.bind(this), true); + removeButton.addEventListener("click", this._removeItem.bind(this), true); + } + }; + PeoplePicker.prototype._selectResult = function (e) { + e.stopPropagation(); + var currentResult = this._findElement(e.target, "ms-Persona"); + var clonedResult = currentResult.cloneNode(true); + // if facePile - add to members list / else tokenize + if (this._container.classList.contains("ms-PeoplePicker--facePile")) { + this._addResultToMembers(clonedResult); + } + else { + this._tokenizeResult(clonedResult); + } + this._updateCount(); + // Close the open contextual host + this._contextualHostView.disposeModal(); + }; + PeoplePicker.prototype._findElement = function (childObj, className) { + var currentElement = childObj.parentNode; + while (!currentElement.classList.contains(className)) { + currentElement = currentElement.parentNode; + } + return currentElement; + }; + PeoplePicker.prototype._addRemoveBtn = function (persona, token) { + var actionBtn; + var actionIcon = document.createElement("i"); + if (token) { + actionBtn = document.createElement("div"); + actionBtn.classList.add("ms-Persona-actionIcon"); + actionBtn.addEventListener("click", this._removeToken.bind(this), true); + } + else { + actionBtn = document.createElement("button"); + actionBtn.classList.add("ms-PeoplePicker-resultAction"); + actionBtn.addEventListener("click", this._removeResult.bind(this), true); + } + actionIcon.classList.add("ms-Icon", "ms-Icon--Cancel"); + actionBtn.appendChild(actionIcon); + persona.appendChild(actionBtn); + }; + PeoplePicker.prototype._removeToken = function (e) { + var currentToken = this._findElement(e.target, "ms-Persona"); + currentToken.remove(); + }; + PeoplePicker.prototype._removeResult = function (e) { + var currentResult = this._findElement(e.target, "ms-PeoplePicker-selectedPerson"); + currentResult.remove(); + this._updateCount(); + }; + PeoplePicker.prototype._removeItem = function (e) { + var currentItem = this._findElement(e.target, "ms-PeoplePicker-result"); + currentItem.remove(); + }; + PeoplePicker.prototype._updateCount = function () { + if (this._selectedPeople) { + var count = this._selectedPeople.querySelectorAll(".ms-PeoplePicker-selectedPerson").length; + this._selectedCount.textContent = count.toString(); + this._selectedPlural.style.display = (count === 1) ? "none" : "inline"; + } + }; + PeoplePicker.prototype._tokenizeResult = function (tokenResult) { + var searchBox = this._container.querySelector(".ms-PeoplePicker-searchBox"); + var textField = searchBox.querySelector(".ms-TextField"); + // Add token classes to persona + tokenResult.classList.add(TOKEN_CLASS, "ms-PeoplePicker-persona"); + // Add the remove button to the token + this._addRemoveBtn(tokenResult, true); + // Use persona xs variant for token + if (tokenResult.classList.contains("ms-Persona--sm")) { + tokenResult.classList.remove("ms-Persona--sm"); + tokenResult.classList.add("ms-Persona--xs"); + } + // Prepend the token before the search field + searchBox.insertBefore(tokenResult, textField); + }; + PeoplePicker.prototype._addResultToMembers = function (persona) { + var membersList = this._container.querySelector(".ms-PeoplePicker-selectedPeople"); + var firstMember = membersList.querySelector(".ms-PeoplePicker-selectedPerson"); + var selectedItem = document.createElement("li"); + // Create the selectedPerson list item + selectedItem.classList.add("ms-PeoplePicker-selectedPerson"); + selectedItem.tabIndex = 1; + // Append the result persona to list item + selectedItem.appendChild(persona); + // Add the remove button to the persona + this._addRemoveBtn(selectedItem, false); + // Add removeResult event to resultAction + selectedItem.querySelector(".ms-PeoplePicker-resultAction").addEventListener("click", this._removeResult.bind(this), true); + membersList.insertBefore(selectedItem, firstMember); + }; + PeoplePicker.prototype._assignClicks = function () { + var _this = this; + this._peoplePickerSearch.addEventListener("click", this._clickHandler.bind(this), true); + this._peoplePickerSearch.addEventListener("keyup", function (e) { + if (e.keyCode !== 27 && !_this._isContextualMenuOpen) { + _this._clickHandler(e); + } + }, true); + }; + PeoplePicker.prototype._assignRemoveHandler = function () { + var selectedPeople = this._selectedPeople.querySelectorAll(".ms-PeoplePicker-selectedPerson"); + for (var i = 0; i < selectedPeople.length; i++) { + selectedPeople[i].querySelector(".ms-PeoplePicker-resultAction").addEventListener("click", this._removeResult.bind(this), true); + } + }; + PeoplePicker.prototype._contextHostCallBack = function () { + this._peoplePickerSearchBox.classList.remove("is-active"); + this._isContextualMenuOpen = false; + }; + return PeoplePicker; + }()); + fabric.PeoplePicker = PeoplePicker; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +"use strict"; +var fabric; +(function (fabric) { + /** + * Pivot Plugin + * + * Adds basic demonstration functionality to .ms-Pivot components. + * + */ + var Pivot = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of Pivot + * @constructor + */ + function Pivot(container) { + this._container = container; + this._addListeners(); + // Show the first pivot's content + var firstContent = this._container.querySelector(".ms-Pivot-content"); + firstContent.style.display = "block"; + } + Pivot.prototype.removeListeners = function () { + this._container.removeEventListener("click", this._selectTab.bind(this)); + }; + Pivot.prototype._addListeners = function () { + var _this = this; + this._container.querySelector(".ms-Pivot-links").addEventListener("click", this._selectTabMouse.bind(this), false); + this._container.addEventListener("keyup", function (event) { + if (event.keyCode === 13) { + _this._selectTabKeyboard(event); + } + }, true); + }; + Pivot.prototype._selectTab = function (selectedTab) { + // Only if its a pivot link and if it doesn't have ellipsis + if (selectedTab.classList.contains("ms-Pivot-link") && !selectedTab.querySelector(".ms-Pivot-ellipsis")) { + // Iterate over siblings and un-select them + var sibling = selectedTab.parentElement.firstElementChild; + while (sibling) { + sibling.classList.remove("is-selected"); + sibling = sibling.nextElementSibling; + } + // Select the clicked tab + selectedTab.classList.add("is-selected"); + // Hide all of the content + var containers = this._container.querySelectorAll(".ms-Pivot-content"); + Array.prototype.forEach.call(containers, function (el, i) { + el.style.display = "none"; + }); + // Show the content that corresponds to the selected tab + var selectedContentName = selectedTab.getAttribute("data-content"); + var selectedContent = this._container.querySelector(".ms-Pivot-content[data-content='" + selectedContentName + "']"); + selectedContent.style.display = "block"; + } + }; + Pivot.prototype._selectTabMouse = function (event) { + event.preventDefault(); + var selectedTab = event.target; + this._selectTab(selectedTab); + }; + Pivot.prototype._selectTabKeyboard = function (event) { + event.preventDefault(); + var selectedTab = event.target; + this._selectTab(selectedTab); + }; + return Pivot; + }()); + fabric.Pivot = Pivot; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * @namespace fabric + */ +var fabric; +(function (fabric) { + "use strict"; + /** + * ProgressIndicator component + * + * A component for outputting determinate progress + * + */ + var ProgressIndicator = (function () { + /** + * + * @param {HTMLDivElement} container - the target container for an instance of ProgressIndicator + * @constructor + */ + function ProgressIndicator(container) { + this.container = container; + this.cacheDOM(); + } + /** + * Sets the progress percentage for a determinate + * operation. Either use this or setProgress + * and setTotal as setProgressPercent assumes + * you've done a percentage calculation before + * injecting it into the function + * @param {number} percent - a floating point number from 0 to 1 + */ + ProgressIndicator.prototype.setProgressPercent = function (percent) { + this._progressBar.style.width = Math.round(this._width * percent) + "px"; + }; + /** + * Sets the progress for a determinate operation. + * Use this in combination with setTotal. + * @param {number} progress + */ + ProgressIndicator.prototype.setProgress = function (progress) { + this._progress = progress; + var percentage = this._progress / this._total; + this.setProgressPercent(percentage); + }; + /** + * Sets the total file size, etc. for a + * determinate operation. Use this in + * combination with setProgress + * @param {number} total + */ + ProgressIndicator.prototype.setTotal = function (total) { + this._total = total; + }; + /** + * Sets the text for the title or label + * of an instance + * @param {string} name + */ + ProgressIndicator.prototype.setName = function (name) { + this._itemName.innerHTML = name; + }; + /** + * Sets the text for a description + * of an instance + * @param {string} name + */ + ProgressIndicator.prototype.setDescription = function (description) { + this._itemDescription.innerHTML = description; + }; + /** + * caches elements and values of the component + * + */ + ProgressIndicator.prototype.cacheDOM = function () { + // an itemName element is optional + this._itemName = this.container.querySelector(".ms-ProgressIndicator-itemName") || null; + // an itemDescription element is optional + this._itemDescription = this.container.querySelector(".ms-ProgressIndicator-itemDescription") || null; + this._progressBar = this.container.querySelector(".ms-ProgressIndicator-progressBar"); + var itemProgress = this.container.querySelector(".ms-ProgressIndicator-itemProgress"); + this._width = itemProgress.offsetWidth; + }; + return ProgressIndicator; + }()); + fabric.ProgressIndicator = ProgressIndicator; +})(fabric || (fabric = {})); // end fabric namespace + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * @namespace fabric + */ +var fabric; +(function (fabric) { + var CircleObject = (function () { + function CircleObject(element, j) { + this.element = element; + this.j = j; + } + return CircleObject; + }()); + /** + * Spinner Component + * + * An animating activity indicator. + * + */ + var Spinner = (function () { + /** + * @param {HTMLDOMElement} target - The element the Spinner will attach itself to. + */ + function Spinner(container) { + this.eightSize = 0.2; + this.animationSpeed = 90; + this.parentSize = 20; + this.fadeIncrement = 0; + this.circleObjects = []; + this._target = container; + this._init(); + } + /** + * @function start - starts or restarts the animation sequence + * @memberOf fabric.Spinner + */ + Spinner.prototype.start = function () { + var _this = this; + this.stop(); + this.interval = setInterval(function () { + var i = _this.circleObjects.length; + while (i--) { + _this._fade(_this.circleObjects[i]); + } + }, this.animationSpeed); + }; + /** + * @function stop - stops the animation sequence + * @memberOf fabric.Spinner + */ + Spinner.prototype.stop = function () { + clearInterval(this.interval); + }; + // private methods + Spinner.prototype._init = function () { + this._setTargetElement(); + this._setPropertiesForSize(); + this._createCirclesAndArrange(); + this._initializeOpacities(); + this.start(); + }; + Spinner.prototype._setPropertiesForSize = function () { + if (this.spinner.className.indexOf("large") > -1) { + this.parentSize = 28; + this.eightSize = 0.179; + } + this.offsetSize = this.eightSize; + this.numCircles = 8; + }; + Spinner.prototype._setTargetElement = function () { + // for backwards compatibility + if (this._target.className.indexOf("ms-Spinner") === -1) { + this.spinner = document.createElement("div"); + this.spinner.className = "ms-Spinner"; + this._target.appendChild(this.spinner); + } + else { + this.spinner = this._target; + } + }; + Spinner.prototype._initializeOpacities = function () { + var i = 0; + var j = 1; + var opacity; + this.fadeIncrement = 1 / this.numCircles; + for (i; i < this.numCircles; i++) { + var circleObject = this.circleObjects[i]; + opacity = (this.fadeIncrement * j++); + this._setOpacity(circleObject.element, opacity); + } + }; + Spinner.prototype._fade = function (circleObject) { + var opacity = this._getOpacity(circleObject.element) - this.fadeIncrement; + if (opacity <= 0) { + opacity = 1; + } + this._setOpacity(circleObject.element, opacity); + }; + Spinner.prototype._getOpacity = function (element) { + return parseFloat(window.getComputedStyle(element).getPropertyValue("opacity")); + }; + Spinner.prototype._setOpacity = function (element, opacity) { + element.style.opacity = opacity.toString(); + }; + Spinner.prototype._createCircle = function () { + var circle = document.createElement("div"); + circle.className = "ms-Spinner-circle"; + circle.style.width = circle.style.height = this.parentSize * this.offsetSize + "px"; + return circle; + }; + Spinner.prototype._createCirclesAndArrange = function () { + var angle = 0; + var offset = this.parentSize * this.offsetSize; + var step = (2 * Math.PI) / this.numCircles; + var i = this.numCircles; + var circleObject; + var radius = (this.parentSize - offset) * 0.5; + while (i--) { + var circle = this._createCircle(); + var x = Math.round(this.parentSize * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5; + var y = Math.round(this.parentSize * 0.5 + radius * Math.sin(angle) - circle.clientHeight * 0.5) - offset * 0.5; + this.spinner.appendChild(circle); + circle.style.left = x + "px"; + circle.style.top = y + "px"; + angle += step; + circleObject = new CircleObject(circle, i); + this.circleObjects.push(circleObject); + } + }; + return Spinner; + }()); + fabric.Spinner = Spinner; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * @namespace fabric + */ +var fabric; +(function (fabric) { + "use strict"; + var Table = (function () { + function Table(container) { + this.container = container; + // Is the table selectable? + if (this.container.className.indexOf("ms-Table--selectable") !== -1) { + this._addListeners(); + } + } + /** + * Add event listeners + */ + Table.prototype._addListeners = function () { + this.container.addEventListener("click", this._toggleRowSelection.bind(this), false); + }; + /** + * Select or deselect a row + */ + Table.prototype._toggleRowSelection = function (event) { + var selectedRow = event.target.parentElement; + if (selectedRow.tagName === "TR") { + var selectedStateClass = "is-selected"; + // Toggle the selected state class + if (selectedRow.className === selectedStateClass) { + selectedRow.className = ""; + } + else { + selectedRow.className = selectedStateClass; + } + } + }; + return Table; + }()); + fabric.Table = Table; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +"use strict"; +var fabric; +(function (fabric) { + var TextFieldConsts; + (function (TextFieldConsts) { + (function (Type) { + Type[Type["Placeholder"] = 0] = "Placeholder"; + Type[Type["Underlined"] = 1] = "Underlined"; + })(TextFieldConsts.Type || (TextFieldConsts.Type = {})); + var Type = TextFieldConsts.Type; + })(TextFieldConsts || (TextFieldConsts = {})); + /** + * Text Field Plugin + * + * Adds basic demonstration functionality to .ms-TextField components. + */ + var TextField = (function () { + /** + * + * @param {HTMLDivElement} container - the target container for an instance of TextField + * @constructor + */ + function TextField(container) { + this._container = container; + this._type = []; + this._textField = this._container.querySelector(".ms-TextField-field"); + this._textFieldLabel = this._container.querySelector(".ms-Label"); + this._setTextFieldType(); + this._addListeners(); + } + /** Populate _type with various kinds of text fields */ + TextField.prototype._setTextFieldType = function () { + if (this._container.classList.contains("ms-TextField--placeholder")) { + this._type.push(TextFieldConsts.Type.Placeholder); + } + if (this._container.classList.contains("ms-TextField--underlined")) { + this._type.push(TextFieldConsts.Type.Underlined); + } + }; + /** Add event listeners according to the type(s) of text field */ + TextField.prototype._addListeners = function () { + var _this = this; + // Ensure that the text box gets focus when the label is clicked. + this._textFieldLabel.addEventListener("click", function (event) { + _this._textField.focus(); + }); + /** Placeholder - hide/unhide the placeholder */ + if (this._type.indexOf(TextFieldConsts.Type.Placeholder) >= 0) { + this._textField.addEventListener("focus", function (event) { + _this._textFieldLabel.style.display = "none"; + }); + this._textField.addEventListener("blur", function (event) { + // Show only if no value in the text field + if (_this._textField.value.length === 0) { + _this._textFieldLabel.style.display = "block"; + } + }); + } + /** Underlined - adding/removing a focus class */ + if (this._type.indexOf(TextFieldConsts.Type.Underlined) >= 0) { + this._textField.addEventListener("focus", function (event) { + _this._container.classList.add("is-active"); + }); + this._textField.addEventListener("blur", function (event) { + _this._container.classList.remove("is-active"); + }); + } + }; + return TextField; + }()); + fabric.TextField = TextField; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +"use strict"; +var fabric; +(function (fabric) { + /** + * Toggle Plugin + * + * Adds basic demonstration functionality to .ms-Toggle components. + * + */ + var Toggle = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of Toggle + * @constructor + */ + function Toggle(container) { + this._container = container; + this._toggleField = this._container.querySelector(".ms-Toggle-field"); + this._addListeners(); + } + Toggle.prototype.removeListeners = function () { + this._toggleField.removeEventListener("click", this._toggleHandler.bind(this)); + }; + Toggle.prototype._addListeners = function () { + var _this = this; + this._toggleField.addEventListener("click", this._toggleHandler.bind(this), false); + this._toggleField.addEventListener("keyup", function (e) { return (e.keyCode === 32) ? _this._toggleHandler() : null; }, false); + }; + Toggle.prototype._toggleHandler = function () { + this._toggleField.classList.toggle("is-selected"); + }; + return Toggle; + }()); + fabric.Toggle = Toggle; +})(fabric || (fabric = {})); diff --git a/dist/js/fabric.min.js b/dist/js/fabric.min.js new file mode 100644 index 00000000..c7a97223 --- /dev/null +++ b/dist/js/fabric.min.js @@ -0,0 +1,8 @@ +//Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * Office UI Fabric JS 1.5.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +var fabric;!function(e){var t=33,i=function(){function e(){}return e.transition=function(t,i){var n={element:t,props:i,transformations:{}};e._animationObjects.push(n),e._parseProperties(n),e._createTransition(n),setTimeout(e._setProperties,0,n),e._setCallback(n)},e.animation=function(t,i,n){var s={element:t,keyframes:i,props:n};e._animationObjects.push(s),e._parseProperties(s),e._createAnimation(s),e._setCallback(s)},e.scrollTo=function(t,i){var n={element:t,props:i,step:0};e._setScrollProperties(n),n.props.delay?setTimeout(e._animationObjects,1e3*n.props.delay,n):e._animateScroll(n),e._animationObjects.push(n)},e._setScrollProperties=function(e){e.beginTop=e.element.scrollTop,e.change=e.props.top-e.beginTop,e.props.duration=1e3*e.props.duration},e._parseProperties=function(t){var i=e._timeProps.concat(e._callbackProps);t.tweenObj={};for(var n in t.props)e._contains(i,n)?t[n]=t.props[n]:t.tweenObj[n]=t.props[n]},e._animateScroll=function(i){var n=i.props.duration/t,s=e._easeOutExpo(i.step++,i.beginTop,i.change,n);i.element.scrollTop=s,i.step>=n?(i.element.scrollTop=i.props.top,e._executeCallback(i.props),e._removeAnimationObject(i)):setTimeout(function(){requestAnimationFrame(function(){e._animateScroll(i)})},t)},e._createTransition=function(t){var i=t.duration||0,n=t.delay||0;t.element.style.transitionProperty=e._getTransitionProperties(t.tweenObj),t.element.style.transitionDuration=i.toString()+"s",t.element.style.transitionTimingFunction=t.ease||"linear",t.element.style.transitionDelay=n.toString()+"s"},e._createAnimation=function(e){var t=e.duration||0,i=e.delay||0;e.element.style.animationName=e.keyframes,e.element.style.animationDuration=t.toString()+"s",e.element.style.animationTimingFunction=e.ease||"linear",e.element.style.animationDelay=i.toString()+"s",e.element.style.animationFillMode="both"},e._getTransitionProperties=function(t){var i=!1,n=!1,s=[];for(var o in t)e._contains(e._transformProps,o)?i=!0:e._contains(e._filters,o)?n=!0:s.push(e._camelCaseToDash(o));return i&&s.push("transform"),n&&(s.push("-webkit-filter"),s.push("filter")),s.join(", ")},e._setProperties=function(t){for(var i in t.tweenObj)e._contains(e._transformProps,i)?e._setTransformValues(t,i):e._contains(e._filters,i)?e._setFilterValues(t,i):e._setRegularValues(t,i);t.transformations&&e._setTransformations(t)},e._setRegularValues=function(e,t){var i=e.tweenObj[t];i.toString().indexOf("%")===-1&&(i+="opacity"!==t&&"backgroundColor"!==t&&"boxShadow"!==t?"px":""),e.element.style[t]=i},e._setFilterValues=function(t,i){var n=t.tweenObj[i];n="hueRotate"===i?"("+n+"deg)":"blur"===i?"("+n+"px)":"("+n+"%)",i=e._camelCaseToDash(i),t.element.style.webkitFilter=i+n,t.element.style.filter=i+n},e._setTransformValues=function(e,t){/x|y|z|scaleX|scaleY|scaleZ|rotate|rotateX|rotateY|rotateZ|skewX|skewY/.test(t)&&(e.transformations[t]=e.tweenObj[t])},e._setTransformations=function(e){var t="",i="",n="",s="",o=e.transformations;s+=void 0!==o.x&&o.x?"translateX("+o.x+"px) ":"",s+=void 0!==o.y&&o.y?"translateY("+o.y+"px) ":"",s+=void 0!==o.z&&o.z?"translateZ("+o.z+"px) ":"",t+=void 0!==o.rotate&&o.rotate?"rotate("+o.rotate+"deg) ":"",t+=void 0!==o.rotateX&&o.rotateX?"rotateX("+o.rotateX+"deg) ":"",t+=void 0!==o.rotateY&&o.rotateY?"rotate("+o.rotateY+"deg) ":"",t+=void 0!==o.rotateZ&&o.rotateZ?"rotate("+o.rotateZ+"deg) ":"",i+=void 0!==o.scaleX&&o.scaleX?"scaleX("+o.scaleX+") ":"",i+=void 0!==o.scaleY&&o.scaleY?"scaleY("+o.scaleY+") ":"",i+=void 0!==o.scaleZ&&o.scaleZ?"scaleZ("+o.scaleZ+") ":"",n+=void 0!==o.skewX&&o.skewX?"skewX("+o.skewX+"deg) ":"",n+=void 0!==o.skewY&&o.skewY?"skewY("+o.skewY+"deg) ":"",e.element.style.transform=s+t+i+n},e._setCallback=function(t){t.element.addEventListener("webkitTransitionEnd",e._complete,!1),t.element.addEventListener("transitionend",e._complete,!1),t.element.addEventListener("webkitAnimationEnd",e._complete,!1),t.element.addEventListener("animationend",e._complete,!1)},e._complete=function(t){t.target.removeEventListener("webkitTransitionEnd",e._complete),t.target.removeEventListener("transitionend",e._complete),t.target.removeEventListener("webkitAnimationEnd",e._complete),t.target.removeEventListener("animationend",e._complete);var i=e._getAnimationObjByElement(t.target);e._executeCallback(i),e._removeAnimationObject(i)},e._getAnimationObjByElement=function(t){for(var i=e._animationObjects.length;i--;)if(e._animationObjects[i].element===t)return e._animationObjects[i];return null},e._removeAnimationObject=function(t){for(var i=e._animationObjects.length;i--;)e._animationObjects[i]===t&&e._animationObjects.splice(i,1)},e._executeCallback=function(e){if(e.onEnd){var t=e.onEndArgs||[];e.onEnd.apply(null,t)}},e._contains=function(e,t){for(var i=e.length;i--;)if(t===e[i])return!0;return!1},e._camelCaseToDash=function(e){return e.replace(/\W+/g,"-").replace(/([a-z\d])([A-Z])/g,"$1-$2").toLowerCase()},e._easeOutExpo=function(e,t,i,n){return e===n?t+i:i*(-Math.pow(2,-10*e/n)+1)+t},e._transformProps=["x","y","z","scaleX","scaleY","scaleZ","rotate","rotateX","rotateY","rotateZ","skewX","skewY"],e._filters=["blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia"],e._timeProps=["duration","ease","delay"],e._callbackProps=["onEnd","onEndArgs"],e._animationObjects=[],e}();e.Animate=i}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function e(){}return e.QUAD_EASE_IN=e.CB+"(0.550, 0.085, 0.680, 0.530)",e.CUBIC_EASE_IN=e.CB+"(0.550, 0.055, 0.675, 0.190)",e.QUART_EASE_IN=e.CB+"(0.895, 0.030, 0.685, 0.220)",e.QUINT_EASE_IN=e.CB+"(0.755, 0.050, 0.855, 0.060)",e.SINE_EASE_IN=e.CB+"(0.470, 0, 0.745, 0.715)",e.EXPO_EASE_IN=e.CB+"(0.950, 0.050, 0.795, 0.035)",e.CIRC_EASE_IN=e.CB+"(0.600, 0.040, 0.980, 0.335)",e.BACK_EASE_IN=e.CB+"(0.600, 0.040, 0.980, 0.335)",e.QUAD_EASE_OUT=e.CB+"(0.250, 0.460, 0.450, 0.940)",e.CUBIC_EASE_OUT=e.CB+"(0.215, 0.610, 0.355, 1)",e.QUART_EASE_OUT=e.CB+"(0.165, 0.840, 0.440, 1)",e.QUINT_EASE_OUT=e.CB+"(0.230, 1, 0.320, 1)",e.SINE_EASE_OUT=e.CB+"(0.390, 0.575, 0.565, 1)",e.EXPO_EASE_OUT=e.CB+"(0.190, 1, 0.220, 1)",e.CIRC_EASE_OUT=e.CB+"(0.075, 0.820, 0.165, 1)",e.BACK_EASE_OUT=e.CB+"(0.175, 0.885, 0.320, 1.275)",e.QUAD_EASE_IN_OUT=e.CB+"(0.455, 0.030, 0.515, 0.955)",e.CUBIC_EASE_IN_OUT=e.CB+"(0.645, 0.045, 0.355, 1)",e.QUART_EASE_IN_OUT=e.CB+"(0.770, 0, 0.175, 1)",e.QUINT_EASE_IN_OUT=e.CB+"(0.860, 0, 0.070, 1)",e.SINE_EASE_IN_OUT=e.CB+"(0.445, 0.050, 0.550, 0.950)",e.EXPO_EASE_IN_OUT=e.CB+"(1, 0, 0, 1)",e.CIRC_EASE_IN_OUT=e.CB+"(0.785, 0.135, 0.150, 0.860)",e.BACK_EASE_IN_OUT=e.CB+"(0.680, -0.550, 0.265, 1.550)",e.CB="cubic-bezier",e}();e.Ease=t}(fabric||(fabric={})),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=Event.prototype,window.CustomEvent=e}();var fabric;!function(e){"use strict";var t=function(){function e(e){this._currentMaxItems=0,this._itemCollection=[],this._tabIndex=2,this.container=e,this._onResize=this._onResize.bind(this),this._openOverflow=this._openOverflow.bind(this),this._overflowKeyPress=this._overflowKeyPress.bind(this),this._closeOverflow=this._closeOverflow.bind(this),this.removeOutlinesOnClick=this.removeOutlinesOnClick.bind(this),this.init()}return e.prototype.removeOutlinesOnClick=function(){this._breadcrumbList.blur()},e.prototype.addItem=function(e,t){this._itemCollection.push({text:e,link:t}),this._updateBreadcrumbs()},e.prototype.removeItemByLabel=function(e){for(var t=this._itemCollection.length;t--;)this._itemCollection[t].text===e&&this._itemCollection.splice(t,1);this._updateBreadcrumbs()},e.prototype.removeItemByPosition=function(e){this._itemCollection.splice(e,1),this._updateBreadcrumbs()},e.prototype.init=function(){this._cacheDOM(),this._setListeners(),this._createItemCollection(),this._onResize()},e.prototype._createItemCollection=function(){var e,t,i,n,s=this._listItems.length,o=0;for(o;oe.MEDIUM?4:2;t!==this._currentMaxItems&&this._updateBreadcrumbs(),this._currentMaxItems=t},e.prototype._updateBreadcrumbs=function(){this._tabIndex=2;var t=window.innerWidth>e.MEDIUM?4:2;this._itemCollection.length>t?this._breadcrumb.classList.add("is-overflow"):this._breadcrumb.classList.remove("is-overflow"),this._addItemsToOverflow(t),this._addBreadcrumbItems(t)},e.prototype._addItemsToOverflow=function(e){var t=this;this._resetList(this._contextMenu);var i=this._itemCollection.length-e,n=this._itemCollection.slice(0,i);n.forEach(function(e){var i=document.createElement("li");i.className="ms-ContextualMenu-item";var n=document.createElement("a");n.className="ms-ContextualMenu-link",null!==e.link&&n.setAttribute("href",e.link),n.setAttribute("tabindex",(t._tabIndex++).toString()),n.textContent=e.text,i.appendChild(n),t._contextMenu.appendChild(i)})},e.prototype._addBreadcrumbItems=function(e){this._resetList(this._breadcrumbList);var t=this._itemCollection.length-e;if(t=t<0?0:t,t>=0)for(t;t0){window.removeEventListener("resize",this._resizeAction,!1),document.removeEventListener("click",this._dismissAction,!0),document.removeEventListener("keyup",this._handleKeyUpDismiss,!0),this._container.parentNode.removeChild(this._container),this._disposalCallback&&this._disposalCallback();var t=e.hosts.indexOf(this);e.hosts.splice(t,1);for(var i=e.hosts.length;i--;)e.hosts[i].disposeModal(),e.hosts.splice(i,1)}},e.prototype.setChildren=function(e){this._children||(this._children=[]),this._children.push(e)},e.prototype.contains=function(e){return this._container.contains(e)},e.prototype.createContainer=function(){var e=document.createElement("div");e.setAttribute("class","ms-ContextualHost"),e.innerHTML+=" ";var t=document.createElement("div");t.setAttribute("class",n),t.innerHTML+=" ",e.appendChild(t),e.innerHTML+=" ";var i=document.createElement("div");return i.setAttribute("class",s),e.appendChild(i),e.innerHTML+="",e},e.prototype._openModal=function(){var e=this;this._copyModalToBody(),this._saveModalSize(),this._findAvailablePosition(),this._showModal(),setTimeout(function(){e._setDismissClick()},100)},e.prototype._findAvailablePosition=function(){var e;switch(this._direction){case"left":e=this._positionOk(this._tryPosModalLeft.bind(this),this._tryPosModalRight.bind(this),this._tryPosModalBottom.bind(this),this._tryPosModalTop.bind(this)),this._setPosition(e);break;case"right":e=this._positionOk(this._tryPosModalRight.bind(this),this._tryPosModalLeft.bind(this),this._tryPosModalBottom.bind(this),this._tryPosModalTop.bind(this)),this._setPosition(e);break;case"top":e=this._positionOk(this._tryPosModalTop.bind(this),this._tryPosModalBottom.bind(this)),this._setPosition(e);break;case"bottom":e=this._positionOk(this._tryPosModalBottom.bind(this),this._tryPosModalTop.bind(this)),this._setPosition(e);break;default:this._setPosition()}},e.prototype._showModal=function(){this._container.classList.add(t)},e.prototype._positionOk=function(e,t,i,n){var s;return s=e(),s||(s=t(),!s&&i&&(s=i(),!s&&n&&(s=n()))),s},e.prototype._calcLeft=function(e,t,i){var n=e/2,s=t/2,o=i+s-n;return o=o-1||this._choiceField.addEventListener("focus",this._FocusHandler.bind(this),!1),t&&t.indexOf("blur")>-1||this._choiceField.addEventListener("blur",this._BlurHandler.bind(this),!1),t&&t.indexOf("click")>-1||this._choiceField.addEventListener("click",this._ClickHandler.bind(this),!1),t&&t.indexOf("keydown")>-1||this._choiceField.addEventListener("keydown",this._KeydownHandler.bind(this),!1)},e.prototype._FocusHandler=function(){this._choiceField.classList.add("in-focus")},e.prototype._BlurHandler=function(){this._choiceField.classList.remove("in-focus")},e.prototype._ClickHandler=function(e){e.stopPropagation(),e.preventDefault(),this._choiceField.classList.contains("is-disabled")||this.toggle()},e.prototype._KeydownHandler=function(e){32===e.keyCode&&(e.stopPropagation(),e.preventDefault(),this._choiceField.classList.contains("is-disabled")||this.toggle())},e}();e.CheckBox=t}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function e(e){this._container=e,this._choiceField=this._container.querySelector(".ms-RadioButton-field"),this._choiceInput=this._container.querySelector(".ms-RadioButton-input"),"true"===this._choiceField.getAttribute("aria-checked")&&this._choiceField.classList.add("is-checked"),this._addListeners()}return e.prototype.getValue=function(){return"true"===this._choiceField.getAttribute("aria-checked")},e.prototype.toggle=function(){this.getValue()?this.unCheck():this.check()},e.prototype.check=function(){this._choiceField.setAttribute("aria-checked","true"),this._choiceField.classList.add("is-checked"),this._choiceInput.checked=!0},e.prototype.unCheck=function(){this._choiceField.setAttribute("aria-checked","false"),this._choiceField.classList.remove("is-checked"),this._choiceInput.checked=!1},e.prototype.removeListeners=function(){this._choiceField.removeEventListener("focus",this._FocusHandler.bind(this)),this._choiceField.removeEventListener("blur",this._BlurHandler.bind(this)),this._choiceField.removeEventListener("click",this._RadioClickHandler.bind(this)),this._choiceField.addEventListener("keydown",this._RadioKeydownHandler.bind(this))},e.prototype._addListeners=function(){this._choiceField.addEventListener("focus",this._FocusHandler.bind(this),!1),this._choiceField.addEventListener("blur",this._BlurHandler.bind(this),!1),this._choiceField.addEventListener("click",this._RadioClickHandler.bind(this),!1),this._choiceField.addEventListener("keydown",this._RadioKeydownHandler.bind(this),!1)},e.prototype._RadioClickHandler=function(e){e.stopPropagation(),e.preventDefault(),this._choiceField.classList.contains("is-disabled")||this._dispatchSelectEvent()},e.prototype._dispatchSelectEvent=function(){var e={bubbles:!0,cancelable:!0,detail:{name:this._choiceField.getAttribute("name"),item:this}};this._choiceField.dispatchEvent(new CustomEvent("msChoicefield",e))},e.prototype._RadioKeydownHandler=function(e){32===e.keyCode&&(e.stopPropagation(),e.preventDefault(),this._choiceField.classList.contains("is-disabled")||this._dispatchSelectEvent())},e.prototype._FocusHandler=function(){this._choiceField.classList.add("in-focus")},e.prototype._BlurHandler=function(){this._choiceField.classList.remove("in-focus")},e}();e.RadioButton=t}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function t(e){this._choiceFieldGroup=e,this._choiceFieldComponents=[],this._initalSetup(),this._addListeners()}return t.prototype.removeListeners=function(){this._choiceFieldGroup.removeEventListener("msChoicefield",this._ChoiceFieldHandler.bind(this))},t.prototype._initalSetup=function(){for(var t=this._choiceFieldGroup.querySelectorAll(".ms-RadioButton"),i=0;i0?this._searchBox.classList.add(s):this._searchBox.classList.remove(s)},e.prototype._setFocusAction=function(e){var t=this;this._searchBoxField.addEventListener("focus",function(){t._setHasText(),t._searchBox.addEventListener("keyup",t._boundEnableClose,!1),t._searchBox.classList.add(o),t._searchBox.classList.add(o)},!0)},e.prototype._clearSearchBox=function(e){var t=this;this._clearOnly=!0,this._searchBoxField.value="",this._setHasText(),setTimeout(function(){t._clearOnly=!1},10)},e.prototype._setClearButtonAction=function(){var e=this;this._searchBoxExitButton&&this._searchBoxExitButton.addEventListener("click",this._boundExitSearchBox,!1),this._searchBoxClearButton.addEventListener("mousedown",this._boundClearSearchBox,!1),this._searchBoxClearButton.addEventListener("keydown",function(t){var i=t.keyCode;13===i&&e._clearSearchBox(t)},!1)},e.prototype._handleBlur=function(e){var t=this;this._clearOnly?this._searchBoxField.focus():(this._searchBox.removeEventListener("keyup",this._boundEnableClose),setTimeout(function(){t._searchBox.contains(document.activeElement)||(t._clearSearchBox(),t._collapseSearchBox(),t.setCollapsedListeners())},10)),this._clearOnly=!1},e.prototype._setBlurAction=function(){this._searchBoxField.addEventListener("blur",this._boundHandleBlur,!0),this._searchBoxClearButton.addEventListener("blur",this._boundHandleBlur,!0)},e.prototype._checkState=function(){this._searchBox.classList.contains("is-collapsed")&&this.setCollapsedListeners()},e.prototype._addAnimation=function(){this._container.classList.add(r)},e}();e.SearchBox=a}(fabric||(fabric={}));var fabric;!function(e){var t=".ms-ContextualMenu",i=".ms-CommandButton-splitIcon",n=".ms-CommandButton-button",s="bottom",o=function(){function o(e,s){this._container=e,this._command=this._container,this._commandButton=this._command.querySelector(n),this._splitButton=this._command.querySelector(i),s?this._contextualMenu=s:this._contextualMenu=this._container.querySelector(t),this._checkForMenu()}return o.prototype._createModalHostView=function(){this._modalHostView=new e.ContextualHost(this._contextualMenu,s,this._command,(!1))},o.prototype._setClick=function(){this._splitButton?this._splitButton.addEventListener("click",this._createModalHostView.bind(this),!1):this._commandButton.addEventListener("click",this._createModalHostView.bind(this),!1)},o.prototype._checkForMenu=function(){this._contextualMenu&&this._setClick()},o}();e.CommandButton=o}(fabric||(fabric={}));var fabric;!function(e){"use strict";var t=".ms-ContextualMenu",i=".ms-ContextualMenu-item",n=".ms-ContextualMenu-link",s=".ms-SearchBox",o=".ms-CommandBar-mainArea",r=".ms-CommandBar-sideCommands",a=".ms-CommandBar-overflowButton",c="ms-CommandButton--noLabel",l=".ms-SearchBox-closeField",h=".ms-CommandButton",d=".ms-CommandButton-label",p=".ms-Icon",u=40,_=30,m=function(){function m(e){this.responsiveSizes={"sm-min":320,"md-min":480,"lg-min":640,"xl-min":1024,"xxl-min":1366,"xxxl-min":1920},this.visibleCommands=[],this.commandWidths=[],this.overflowCommands=[],this.itemCollection=[],this._sideAreaCollection=[],this.breakpoint="sm",this._container=e,this.responsiveSizes["sm-max"]=this.responsiveSizes["md-min"]-1,this.responsiveSizes["md-max"]=this.responsiveSizes["lg-min"]-1,this.responsiveSizes["lg-max"]=this.responsiveSizes["xl-min"]-1,this.responsiveSizes["xl-max"]=this.responsiveSizes["xxl-min"]-1,this.responsiveSizes["xxl-max"]=this.responsiveSizes["xxxl-min"]-1,this._setElements(),this._setBreakpoint(),this._elements.overflowCommand&&this._initOverflow(),this._setUIState()}return m.prototype._runsSearchBox=function(e){void 0===e&&(e="add"),this._changeSearchState("is-collapsed",e)},m.prototype._runOverflow=function(){this._elements.overflowCommand&&(this._saveCommandWidths(),this._redrawMenu(),this._updateCommands(),this._drawCommands(),this._checkOverflow())},m.prototype._initOverflow=function(){this._createContextualRef(),this._createItemCollection(this.itemCollection,o), +this._createItemCollection(this._sideAreaCollection,r),this._saveCommandWidths(),this._updateCommands(),this._drawCommands(),this._setWindowEvent(),this._checkOverflow()},m.prototype._hasClass=function(e,t){return(" "+e.className+" ").indexOf(" "+t+" ")>-1},m.prototype._onSearchExpand=function(){"lg"===this.breakpoint&&(this._container.classList.add("search-expanded"),this._doResize())},m.prototype._onSearchCollapse=function(){"lg"===this.breakpoint&&(this._container.classList.remove("search-expanded"),this._doResize())},m.prototype._getScreenSize=function(){var e=window,t={x:0,y:0},i=document,n=i.documentElement,s=i.getElementsByTagName("body")[0];return t.x=e.innerWidth||n.clientWidth||s.clientWidth,t.y=e.innerHeight||n.clientHeight||s.clientHeight,t},m.prototype._setBreakpoint=function(){var e=this._getScreenSize().x;switch(!0){case e<=this.responsiveSizes["sm-max"]:this.breakpoint="sm";break;case e>=this.responsiveSizes["md-min"]&&e<=this.responsiveSizes["md-max"]:this.breakpoint="md";break;case e>=this.responsiveSizes["lg-min"]&&e<=this.responsiveSizes["lg-max"]:this.breakpoint="lg";break;case e>=this.responsiveSizes["xl-min"]&&e<=this.responsiveSizes["xl-max"]:this.breakpoint="xl";break;case e>=this.responsiveSizes["xxl-min"]&&e<=this.responsiveSizes["xxl-max"]:this.breakpoint="xxl";break;case e>=this.responsiveSizes["xxxl-min"]:this.breakpoint="xxxl"}},m.prototype._createSearchInstance=function(){return!!this._elements.searchBox&&new e.SearchBox(this._elements.searchBox)},m.prototype._changeSearchState=function(e,t){if(this._elements.searchBox)switch(t){case"remove":this._elements.searchBox.classList.remove(e);break;case"add":this._elements.searchBox.classList.add(e)}},m.prototype._setElements=function(){var e=this;this._elements={mainArea:this._container.querySelector(o)},this._container.querySelector(r)&&(this._elements.sideCommandArea=this._container.querySelector(r)),this._container.querySelector(a)&&(this._elements.overflowCommand=this._container.querySelector(a),this._elements.contextMenu=this._container.querySelector(a).querySelector(t)),this._container.querySelector(o+" "+s)&&(this._elements.searchBox=this._container.querySelector(o+" "+s),this._elements.searchBoxClose=this._container.querySelector(l),this.searchBoxInstance=this._createSearchInstance(),this.searchBoxInstance.getInputField().addEventListener("focus",function(){e._onSearchExpand()},!1),this.searchBoxInstance.getInputField().addEventListener("searchCollapse",function(){e._onSearchCollapse()},!1))},m.prototype._createItemCollection=function(t,i){var n,s,o,r,l=this._container.querySelectorAll(i+" > "+h+":not("+a+")");this._commandButtonInstance=new e.CommandButton(this._elements.overflowCommand);for(var u=0;u-1){_=r[m];break}}t.push({item:n,label:s,icon:_,isCollapsed:!!n.classList.contains(c),commandButtonRef:new e.CommandButton(n)})}},m.prototype._createContextualRef=function(){this.contextualItemContainerRef=this._elements.contextMenu.querySelector(i).cloneNode(!0),this.contextualItemLink=this._elements.contextMenu.querySelector(n).cloneNode(!1),this.contextualItemIcon=this._elements.contextMenu.querySelector(".ms-Icon").cloneNode(!1),this._elements.contextMenu.innerHTML=""},m.prototype._getElementWidth=function(e){var t,i;return null===e.offsetParent&&e.setAttribute("style","position: absolute; opacity: 0; display: block;"),t=e.getBoundingClientRect().width,i=window.getComputedStyle(e),t+=parseInt(i.marginLeft,10)+parseInt(i.marginRight,10),e.setAttribute("style",""),t},m.prototype._saveCommandWidths=function(){for(var e=0;e0?this._elements.overflowCommand.classList.remove("is-hidden"):(this._elements.overflowCommand.classList.add("is-hidden"),this.activeCommand===this._elements.overflowCommand&&this._elements.contextMenu.classList.remove("is-open"))},m.prototype._redrawMenu=function(){var e;this._hasClass(this._elements.contextMenu,"is-open")&&(e=this.activeCommand.getBoundingClientRect().left,this._drawOverflowMenu(e))},m.prototype._drawOverflowMenu=function(e){this._elements.contextMenu.setAttribute("style","left: "+e+"px; transform: translateX(-50%)")},m.prototype._doResize=function(){this._setBreakpoint(),this._setUIState()},m}();e.CommandBar=m}(fabric||(fabric={}));var fabric;!function(e){var t="bottom",i="right",n=function(){function n(e,i,n){this._container=e,this._hostTarget=i,this._position=n?n:t,this._isOpen=!1,this._setOpener(i),this._init()}return n.prototype.getHost=function(){return this._host},n.prototype._init=function(){this._container.addEventListener("click",this._onContextualMenuClick.bind(this),!0),document.addEventListener("click",this._onDocumentClick.bind(this),!1)},n.prototype._onDocumentClick=function(e){if(e.target instanceof HTMLElement){var t=e.target,i=t.classList;this._hostTarget.contains(t)||i.contains("ms-ContextualMenu-link")||(this._isOpen=!1)}},n.prototype._onContextualMenuClick=function(e){var t=e.target,i=t.classList;i.contains("ms-ContextualMenu-link")&&!i.contains("is-disabled")&&(this._container.classList.contains("ms-ContextualMenu--multiselect")?this._multiSelect(t):(this._singleSelect(t),t.parentElement.classList.contains("ms-ContextualMenu-item--hasMenu")||(this._host.disposeModal(),this._isOpen=!1)))},n.prototype._multiSelect=function(e){e.classList.contains("is-selected")?e.classList.remove("is-selected"):e.classList.add("is-selected")},n.prototype._singleSelect=function(e){for(var t=this._container.querySelectorAll(".is-selected"),i=t.length;i--;)t[i].classList.remove("is-selected");e.classList.add("is-selected")},n.prototype._toggleMenu=function(e){this._isOpen?this._host.disposeModal():this._openContextMenu(e),this._isOpen=!this._isOpen},n.prototype._setOpener=function(e){var t=this;e.addEventListener("click",function(e){e.preventDefault(),t._toggleMenu(e)})},n.prototype._openContextMenu=function(e){this._createModalHostView(this._container,this._position,this._hostTarget),this._checkForSubmenus(this._container)},n.prototype._checkForSubmenus=function(t){var n=this,s=t.querySelectorAll(".ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu"),o=s.length;if(s.length)for(var r=function(){var t=s[o].querySelector(".ms-ContextualMenu-link"),r=s[o].querySelector(".ms-ContextualMenu");if(r){var a=new e.ContextualMenu(r,t,i);r.addEventListener("hostAdded",function(){n._host.setChildren(a.getHost())})}};o--;)r()},n.prototype._createModalHostView=function(t,i,n){t.classList.remove("is-hidden"),this._host=new e.ContextualHost(t,i,n,(!1));var s=document.createEvent("Event");s.initEvent("hostAdded",!0,!0),t.dispatchEvent(s)},n}();e.ContextualMenu=n}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function e(e,t){var i=this,n=$(e),s=n.find(".ms-TextField-field").pickadate($.extend({weekdaysShort:["S","M","T","W","T","F","S"],clear:"",close:"",today:"",onStart:function(){i.initCustomView(n)},klass:{input:"ms-DatePicker-input",active:"ms-DatePicker-input--active",picker:"ms-DatePicker-picker",opened:"ms-DatePicker-picker--opened",focused:"ms-DatePicker-picker--focused",holder:"ms-DatePicker-holder",frame:"ms-DatePicker-frame",wrap:"ms-DatePicker-wrap",box:"ms-DatePicker-dayPicker",header:"ms-DatePicker-header",month:"ms-DatePicker-month",year:"ms-DatePicker-year",table:"ms-DatePicker-table",weekdays:"ms-DatePicker-weekday",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"}},t||{})),o=s.pickadate("picker");this.picker=o,o.on({render:function(){i.updateCustomView(n)}})}return e.prototype.initCustomView=function(e){var t=this,i=e.find(".ms-DatePicker-monthComponents"),n=e.find(".ms-DatePicker-goToday"),s=e.find(".ms-DatePicker-monthPicker"),o=e.find(".ms-DatePicker-yearPicker"),r=e.find(".ms-DatePicker-wrap"),a=e.find(".ms-TextField-field").pickadate("picker");i.appendTo(r),n.appendTo(r),s.appendTo(r),o.appendTo(r),this.updateCustomView(e),a.on("open",function(e){var t=document.createEvent("MouseEvents");t.initEvent("click",!0,!0),document.dispatchEvent(t)}),i.on("click",".js-prevMonth",function(e){e.preventDefault();var i=a.get("highlight").month-1;t.changeHighlightedDate([null,i,null])}),i.on("click",".js-nextMonth",function(e){e.preventDefault();var i=a.get("highlight").month+1;t.changeHighlightedDate([null,i,null])}),s.on("click",".js-prevYear",function(e){e.preventDefault();var i=a.get("highlight").year-1;t.changeHighlightedDate([i,null,null])}),s.on("click",".js-nextYear",function(e){e.preventDefault();var i=a.get("highlight").year+1;t.changeHighlightedDate([i,null,null])}),o.on("click",".js-prevDecade",function(e){e.preventDefault();var i=a.get("highlight").year-10;t.changeHighlightedDate([i,null,null])}),o.on("click",".js-nextDecade",function(e){e.preventDefault();var i=a.get("highlight").year+10;t.changeHighlightedDate([i,null,null])}),n.click(function(t){t.preventDefault();var i=new Date;a.set("select",[i.getFullYear(),i.getMonth(),i.getDate()]),e.removeClass("is-pickingMonths").removeClass("is-pickingYears")}),s.on("click",".js-changeDate",function(i){i.preventDefault();var n=$(i.target),s=n.attr("data-year"),o=n.attr("data-month"),r=n.attr("data-day");t.changeHighlightedDate([s,o,r]),e.hasClass("is-pickingMonths")&&e.removeClass("is-pickingMonths")}),o.on("click",".js-changeDate",function(i){i.preventDefault();var n=$(i.target),s=n.attr("data-year"),o=n.attr("data-month"),r=n.attr("data-day");t.changeHighlightedDate([s,o,r]),e.hasClass("is-pickingYears")&&e.removeClass("is-pickingYears")}),s.on("click",".js-showDayPicker",function(){e.removeClass("is-pickingMonths"),e.removeClass("is-pickingYears")}),i.on("click",".js-showMonthPicker",function(){e.toggleClass("is-pickingMonths")}),s.on("click",".js-showYearPicker",function(){e.toggleClass("is-pickingYears")})},e.prototype.changeHighlightedDate=function(e){var t=this.setDateAttributes(e);this.picker.set("highlight",t)},e.prototype.updateCustomView=function(e){var t=e.find(".ms-DatePicker-monthPicker"),i=e.find(".ms-DatePicker-yearPicker"),n=e.find(".ms-TextField-field").pickadate("picker");t.find(".ms-DatePicker-currentYear").text(n.get("view").year),t.find(".ms-DatePicker-monthOption").removeClass("is-highlighted"),t.find(".ms-DatePicker-monthOption[data-month='"+n.get("highlight").month+"']").addClass("is-highlighted"),i.find(".ms-DatePicker-currentDecade").remove(),i.find(".ms-DatePicker-optionGrid").remove();var s=n.get("highlight").year-11,o=s+" - "+(s+11),r="
      "+o+"
      ";r+="
      ";for(var a=s;a"+a+"";r+="
      ",i.append(r),i.find(".ms-DatePicker-yearOption").removeClass("is-highlighted"),i.find(".ms-DatePicker-yearOption[data-year='"+n.get("highlight").year+"']").addClass("is-highlighted")},e.prototype.setDateAttributes=function(e){var t=e[0],i=e[1],n=e[2];return"undefined"!=typeof t&&null!==t||(t=this.picker.get("highlight").year),"undefined"!=typeof i&&null!==i||(i=this.picker.get("highlight").month),"undefined"!=typeof n&&null!==n||(n=this.picker.get("highlight").date),[t,i,n]},e}();e.DatePicker=t}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function e(e){if(e)this.overlayElement=e;else{var t=document.createElement("div");t.setAttribute("class","ms-Overlay"),this.overlayElement=t}this.overlayElement.addEventListener("click",this.hide.bind(this),!1)}return e.prototype.remove=function(){this.overlayElement.parentElement.removeChild(this.overlayElement)},e.prototype.show=function(){this.overlayElement.classList.add("is-visible"),document.body.classList.add("ms-u-overflowHidden")},e.prototype.hide=function(){this.overlayElement.classList.remove("is-visible"),document.body.classList.remove("ms-u-overflowHidden")},e}();e.Overlay=t}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function t(e){this._dialog=e,this._closeButtonElement=this._dialog.querySelector(".ms-Dialog-buttonClose"),this._actionButtonElements=this._dialog.querySelectorAll(".ms-Dialog-action"),this._closeButtonElement&&this._closeButtonElement.addEventListener("click",this.close.bind(this),!1);for(var t=0;tthis._newDropdownLabel.offsetHeight){var i=0,n="...",s=void 0;do i--,s=t.slice(0,i),this._dropdownLabelHelper.textContent=s+n;while(this._dropdownLabelHelper.offsetHeight>this._newDropdownLabel.offsetHeight)}this._newDropdownLabel.textContent=this._dropdownLabelHelper.textContent},u.prototype._getScreenSize=function(){var e=window,t={x:0,y:0},i=document,n=i.documentElement,s=i.getElementsByTagName("body")[0];return t.x=e.innerWidth||n.clientWidth||s.clientWidth,t.y=e.innerHeight||n.clientHeight||s.clientHeight,t},u.prototype._doResize=function(){var e=this._container.classList.contains(c);if(e){var t=this._getScreenSize().x;t<=p?this._openDropdownAsPanel():this._removeDropdownAsPanel()}},u.prototype._openDropdownAsPanel=function(){void 0===this._panel&&(this._panelContainer=document.createElement("div"),this._panelContainer.classList.add(a),this._panelContainer.classList.add(t),this._panelContainer.classList.add(c),this._panelContainer.classList.add(d),this._panelContainer.appendChild(this._newDropdown),this._panel=new e.Panel(this._panelContainer))},u.prototype._removeDropdownAsPanel=function(e){var t=this;void 0!==this._panel&&(e&&e.target===this._panel.panelHost.overlay.overlayElement?this._container.appendChild(this._newDropdown):this._panel.dismiss(function(){t._container.appendChild(t._newDropdown)}),this._panel=void 0)},u.prototype._onOpenDropdown=function(e){var t=this._container.classList.contains(l),i=this._container.classList.contains(c);if(!t&&!i){e.stopPropagation(),this._closeOtherDropdowns(),this._container.classList.add(c),document.addEventListener("click",this._onCloseDropdown);var n=this._getScreenSize().x;n<=p&&this._openDropdownAsPanel()}},u.prototype._closeOtherDropdowns=function(){for(var e=document.querySelectorAll("."+t+"."+c),i=0;i=this.SMALL_BREAK_POINT?this._resizeRegular():this._resizeSmall()},e.prototype._resizeRegular=function(){this._clientWidth-this._bufferSize>this._initTextWidth&&this._initTextWidththis._initTextWidth?(this._textWidth="auto",this._collapse()):this._textWidth=this._clientWidth-(this._bufferElementsWidthSmall+this._closeButton.offsetWidth)+"px",this._clipper.style.width=this._textWidth},e.prototype._cacheDOM=function(){this._errorBanner=this.container,this._clipper=this.container.querySelector(".ms-MessageBanner-clipper"),this._chevronButton=this.container.querySelector(".ms-MessageBanner-expand"),this._actionButton=this.container.querySelector(".ms-MessageBanner-action"),this._bufferSize=this._actionButton.offsetWidth+this._bufferElementsWidth,this._closeButton=this.container.querySelector(".ms-MessageBanner-close")},e.prototype._expand=function(){var e=this._chevronButton.querySelector(".ms-Icon");this._errorBanner.className+=" is-expanded",e.className="ms-Icon ms-Icon--DoubleChevronUp"},e.prototype._collapse=function(){var e=this._chevronButton.querySelector(".ms-Icon");this._errorBanner.className="ms-MessageBanner",e.className="ms-Icon ms-Icon--DoubleChevronDown"},e.prototype._toggleExpansion=function(){this._errorBanner.className.indexOf("is-expanded")>-1?this._collapse():this._expand()},e.prototype._setListeners=function(){window.addEventListener("resize",this._onResize.bind(this),!1),this._chevronButton.addEventListener("click",this._toggleExpansion.bind(this),!1),this._closeButton.addEventListener("click",this.hide.bind(this),!1)},e}();e.MessageBanner=t}(fabric||(fabric={}));var fabric;!function(e){var t="bottom",i="ms-Persona--token",n=function(){function n(e){this._container=e,this._peoplePickerMenu=this._container.querySelector(".ms-PeoplePicker-results"),this._peoplePickerSearch=this._container.querySelector(".ms-TextField-field"),this._peoplePickerSearchBox=this._container.querySelector(".ms-PeoplePicker-searchBox"),this._selectedPeople=this._container.querySelector(".ms-PeoplePicker-selectedPeople"),this._assignClicks(),this._selectedPeople&&(this._assignRemoveHandler(),this._selectedCount=this._container.querySelector(".ms-PeoplePicker-selectedCount"),this._selectedPlural=this._container.querySelector(".ms-PeoplePicker-selectedCountPlural")),this._peoplePickerMenu&&this._peoplePickerMenu.setAttribute("style","display: none;")}return n.prototype._createModalHost=function(i){i.stopPropagation(),this._peoplePickerMenu.setAttribute("style","display: block;"),this._contextualHostView=new e.ContextualHost(this._peoplePickerMenu,t,this._peoplePickerSearchBox,(!1),[""],(!0),this._contextHostCallBack.bind(this)),this._peoplePickerSearchBox.classList.add("is-active"),this._isContextualMenuOpen=!0},n.prototype._clickHandler=function(e){this._createModalHost(e);var t=this._peoplePickerMenu.querySelector(".ms-PeoplePicker-result"),i=t.parentNode,n=i.cloneNode(!0);i.parentNode.replaceChild(n,i),this._peoplePickerResults=this._peoplePickerMenu.querySelectorAll(".ms-PeoplePicker-result");for(var s=0;s-1&&(this.parentSize=28,this.eightSize=.179),this.offsetSize=this.eightSize,this.numCircles=8},e.prototype._setTargetElement=function(){this._target.className.indexOf("ms-Spinner")===-1?(this.spinner=document.createElement("div"),this.spinner.className="ms-Spinner",this._target.appendChild(this.spinner)):this.spinner=this._target},e.prototype._initializeOpacities=function(){var e,t=0,i=1;for(this.fadeIncrement=1/this.numCircles,t;t=0&&(this._textField.addEventListener("focus",function(t){e._textFieldLabel.style.display="none"}),this._textField.addEventListener("blur",function(t){0===e._textField.value.length&&(e._textFieldLabel.style.display="block")})),this._type.indexOf(t.Type.Underlined)>=0&&(this._textField.addEventListener("focus",function(t){e._container.classList.add("is-active")}),this._textField.addEventListener("blur",function(t){e._container.classList.remove("is-active")}))},e}();e.TextField=i}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function e(e){this._container=e,this._toggleField=this._container.querySelector(".ms-Toggle-field"),this._addListeners()}return e.prototype.removeListeners=function(){this._toggleField.removeEventListener("click",this._toggleHandler.bind(this))},e.prototype._addListeners=function(){var e=this;this._toggleField.addEventListener("click",this._toggleHandler.bind(this),!1),this._toggleField.addEventListener("keyup",function(t){return 32===t.keyCode?e._toggleHandler():null},!1)},e.prototype._toggleHandler=function(){this._toggleField.classList.toggle("is-selected")},e}();e.Toggle=t}(fabric||(fabric={})); \ No newline at end of file diff --git a/dist/lib/PickaDate.js b/dist/lib/PickaDate.js new file mode 100644 index 00000000..d539613f --- /dev/null +++ b/dist/lib/PickaDate.js @@ -0,0 +1 @@ +!function(a){"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):this.Picker=a(jQuery)}(function(a){function b(f,g,h,k){function l(){return b._.node("div",b._.node("div",b._.node("div",b._.node("div",w.component.nodes(r.open),t.box),t.wrap),t.frame),t.holder)}function m(){u.data(g,w).addClass(t.input).val(u.data("value")?w.get("select",s.format):f.value).on("focus."+r.id+" click."+r.id,p),s.editable||u.on("keydown."+r.id,function(a){var b=a.keyCode,c=/^(8|46)$/.test(b);return 27==b?(w.close(),!1):void((32==b||c||!r.open&&w.component.key[b])&&(a.preventDefault(),a.stopPropagation(),c?w.clear().close():w.open()))}),e(f,{haspopup:!0,expanded:!1,readonly:!1,owns:f.id+"_root"+(w._hidden?" "+w._hidden.id:"")})}function n(){w.$root.on({focusin:function(a){w.$root.removeClass(t.focused),a.stopPropagation()},"mousedown click":function(b){var c=b.target;c!=w.$root.children()[0]&&(b.stopPropagation(),"mousedown"!=b.type||a(c).is(":input")||"OPTION"==c.nodeName||(b.preventDefault(),f.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var b=a(this),c=b.data(),d=b.hasClass(t.navDisabled)||b.hasClass(t.disabled),e=document.activeElement;e=e&&(e.type||e.href)&&e,(d||e&&!a.contains(w.$root[0],e))&&f.focus(),!d&&c.nav?w.set("highlight",w.component.item.highlight,{nav:c.nav}):!d&&"pick"in c?w.set("select",c.pick).close(!0):c.clear?w.clear().close(!0):c.close&&w.close(!0)}),e(w.$root[0],"hidden",!0)}function o(){var b;s.hiddenName===!0?(b=f.name,f.name=""):(b=["string"==typeof s.hiddenPrefix?s.hiddenPrefix:"","string"==typeof s.hiddenSuffix?s.hiddenSuffix:"_submit"],b=b[0]+f.name+b[1]),w._hidden=a('")[0],u.on("change."+r.id,function(){w._hidden.value=f.value?w.get("select",s.formatSubmit):""}).after(w._hidden)}function p(a){a.stopPropagation(),"focus"==a.type&&w.$root.addClass(t.focused),w.open()}if(!f)return b;var q=!1,r={id:f.id||"P"+Math.abs(~~(Math.random()*new Date))},s=h?a.extend(!0,{},h.defaults,k):k||{},t=a.extend({},b.klasses(),s.klass),u=a(f),v=function(){return this.start()},w=v.prototype={constructor:v,$node:u,start:function(){return r&&r.start?w:(r.methods={},r.start=!0,r.open=!1,r.type=f.type,f.autofocus=f==document.activeElement,f.readOnly=!s.editable,f.id=f.id||r.id,"text"!=f.type&&(f.type="text"),w.component=new h(w,s),w.$root=a(b._.node("div",l(),t.picker,'id="'+f.id+'_root"')),n(),s.formatSubmit&&o(),m(),s.container?a(s.container).append(w.$root):u.after(w.$root),w.on({start:w.component.onStart,render:w.component.onRender,stop:w.component.onStop,open:w.component.onOpen,close:w.component.onClose,set:w.component.onSet}).on({start:s.onStart,render:s.onRender,stop:s.onStop,open:s.onOpen,close:s.onClose,set:s.onSet}),q=c(w.$root.children()[0]),f.autofocus&&w.open(),w.trigger("start").trigger("render"))},render:function(a){return a?w.$root.html(l()):w.$root.find("."+t.box).html(w.component.nodes(r.open)),w.trigger("render")},stop:function(){return r.start?(w.close(),w._hidden&&w._hidden.parentNode.removeChild(w._hidden),w.$root.remove(),u.removeClass(t.input).removeData(g),setTimeout(function(){u.off("."+r.id)},0),f.type=r.type,f.readOnly=!1,w.trigger("stop"),r.methods={},r.start=!1,w):w},open:function(c){return r.open?w:(u.addClass(t.active),e(f,"expanded",!0),setTimeout(function(){w.$root.addClass(t.opened),e(w.$root[0],"hidden",!1)},0),c!==!1&&(r.open=!0,q&&j.css("overflow","hidden").css("padding-right","+="+d()),u.trigger("focus"),i.on("click."+r.id+" focusin."+r.id,function(a){var b=a.target;b!=f&&b!=document&&3!=a.which&&w.close(b===w.$root.children()[0])}).on("keydown."+r.id,function(c){var d=c.keyCode,e=w.component.key[d],g=c.target;27==d?w.close(!0):g!=f||!e&&13!=d?a.contains(w.$root[0],g)&&13==d&&(c.preventDefault(),g.click()):(c.preventDefault(),e?b._.trigger(w.component.key.go,w,[b._.trigger(e)]):w.$root.find("."+t.highlighted).hasClass(t.disabled)||w.set("select",w.component.item.highlight).close())})),w.trigger("open"))},close:function(a){return a&&(u.off("focus."+r.id).trigger("focus"),setTimeout(function(){u.on("focus."+r.id,p)},0)),u.removeClass(t.active),e(f,"expanded",!1),setTimeout(function(){w.$root.removeClass(t.opened+" "+t.focused),e(w.$root[0],"hidden",!0)},0),r.open?(r.open=!1,q&&j.css("overflow","").css("padding-right","-="+d()),i.off("."+r.id),w.trigger("close")):w},clear:function(a){return w.set("clear",null,a)},set:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(d=g&&a.isPlainObject(c)?c:d||{},b){g||(h[b]=c);for(e in h)f=h[e],e in w.component.item&&(void 0===f&&(f=null),w.component.set(e,f,d)),("select"==e||"clear"==e)&&u.val("clear"==e?"":w.get(e,s.format)).trigger("change");w.render()}return d.muted?w:w.trigger("set",h)},get:function(a,c){if(a=a||"value",null!=r[a])return r[a];if("value"==a)return f.value;if(a in w.component.item){if("string"==typeof c){var d=w.component.get(a);return d?b._.trigger(w.component.formats.toString,w.component,[c,d]):""}return w.component.get(a)}},on:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(b){g||(h[b]=c);for(e in h)f=h[e],d&&(e="_"+e),r.methods[e]=r.methods[e]||[],r.methods[e].push(f)}return w},off:function(){var a,b,c=arguments;for(a=0,namesCount=c.length;namesCount>a;a+=1)b=c[a],b in r.methods&&delete r.methods[b];return w},trigger:function(a,c){var d=function(a){var d=r.methods[a];d&&d.map(function(a){b._.trigger(a,w,[c])})};return d("_"+a),d(a),w}};return new v}function c(a){var b,c="position";return a.currentStyle?b=a.currentStyle[c]:window.getComputedStyle&&(b=getComputedStyle(a)[c]),"fixed"==b}function d(){if(j.height()<=h.height())return 0;var b=a('
      ').appendTo("body"),c=b[0].offsetWidth;b.css("overflow","scroll");var d=a('
      ').appendTo(b),e=d[0].offsetWidth;return b.remove(),c-e}function e(b,c,d){if(a.isPlainObject(c))for(var e in c)f(b,e,c[e]);else f(b,c,d)}function f(a,b,c){a.setAttribute(("role"==b?"":"aria-")+b,c)}function g(b,c){a.isPlainObject(b)||(b={attribute:c}),c="";for(var d in b){var e=("role"==d?"":"aria-")+d,f=b[d];c+=null==f?"":e+'="'+b[d]+'"'}return c}var h=a(window),i=a(document),j=a(document.documentElement);return b.klasses=function(a){return a=a||"picker",{picker:a,opened:a+"--opened",focused:a+"--focused",input:a+"__input",active:a+"__input--active",holder:a+"__holder",frame:a+"__frame",wrap:a+"__wrap",box:a+"__box"}},b._={group:function(a){for(var c,d="",e=b._.trigger(a.min,a);e<=b._.trigger(a.max,a,[e]);e+=a.i)c=b._.trigger(a.item,a,[e]),d+=b._.node(a.node,c[0],c[1],c[2]);return d},node:function(b,c,d,e){return c?(c=a.isArray(c)?c.join(""):c,d=d?' class="'+d+'"':"",e=e?" "+e:"","<"+b+d+e+">"+c+""):""},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/lib/jquery.js b/dist/lib/jquery.js new file mode 100644 index 00000000..5c82cc00 --- /dev/null +++ b/dist/lib/jquery.js @@ -0,0 +1,4 @@ +/*! jQuery v2.2.4 | (c) jQuery Foundation | jquery.org/license */ +!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="2.2.4",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(e.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:g,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=a&&a.toString();return!n.isArray(a)&&b-parseFloat(b)+1>=0},isPlainObject:function(a){var b;if("object"!==n.type(a)||a.nodeType||n.isWindow(a))return!1;if(a.constructor&&!k.call(a,"constructor")&&!k.call(a.constructor.prototype||{},"isPrototypeOf"))return!1;for(b in a);return void 0===b||k.call(a,b)},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?i[j.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=d.createElement("script"),b.text=a,d.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(s(a)){for(c=a.length;c>d;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):g.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:h.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,g=0,h=[];if(s(a))for(d=a.length;d>g;g++)e=b(a[g],g,c),null!=e&&h.push(e);else for(g in a)e=b(a[g],g,c),null!=e&&h.push(e);return f.apply([],h)},guid:1,proxy:function(a,b){var c,d,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(d=e.call(arguments,2),f=function(){return a.apply(b||this,d.concat(e.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:l}),"function"==typeof Symbol&&(n.fn[Symbol.iterator]=c[Symbol.iterator]),n.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){i["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=!!a&&"length"in a&&a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ga(),z=ga(),A=ga(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+M+"))|)"+L+"*\\]",O=":("+M+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+N+")*)|.*)\\)|)",P=new RegExp(L+"+","g"),Q=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),R=new RegExp("^"+L+"*,"+L+"*"),S=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),T=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),U=new RegExp(O),V=new RegExp("^"+M+"$"),W={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M+"|[*])"),ATTR:new RegExp("^"+N),PSEUDO:new RegExp("^"+O),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\\)|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+L+"*((?:-\\d)?\\d*)"+L+"*\\)|)(?=[^-]|$)","i")},X=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Z=/^[^{]+\{\s*\[native \w/,$=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,_=/[+~]/,aa=/'|\\/g,ba=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),ca=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},da=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(ea){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fa(a,b,d,e){var f,h,j,k,l,o,r,s,w=b&&b.ownerDocument,x=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==x&&9!==x&&11!==x)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==x&&(o=$.exec(a)))if(f=o[1]){if(9===x){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(w&&(j=w.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(o[2])return H.apply(d,b.getElementsByTagName(a)),d;if((f=o[3])&&c.getElementsByClassName&&b.getElementsByClassName)return H.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==x)w=b,s=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(aa,"\\$&"):b.setAttribute("id",k=u),r=g(a),h=r.length,l=V.test(k)?"#"+k:"[id='"+k+"']";while(h--)r[h]=l+" "+qa(r[h]);s=r.join(","),w=_.test(a)&&oa(b.parentNode)||b}if(s)try{return H.apply(d,w.querySelectorAll(s)),d}catch(y){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(Q,"$1"),b,d,e)}function ga(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ha(a){return a[u]=!0,a}function ia(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ja(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function ka(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function la(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function na(a){return ha(function(b){return b=+b,ha(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function oa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=fa.support={},f=fa.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fa.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ia(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ia(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Z.test(n.getElementsByClassName),c.getById=ia(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return"undefined"!=typeof b.getElementsByClassName&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=Z.test(n.querySelectorAll))&&(ia(function(a){o.appendChild(a).innerHTML="",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ia(function(a){var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Z.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ia(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",O)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Z.test(o.compareDocumentPosition),t=b||Z.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return ka(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?ka(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},fa.matches=function(a,b){return fa(a,null,null,b)},fa.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(T,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fa(b,n,null,[a]).length>0},fa.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fa.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fa.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fa.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fa.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fa.selectors={cacheLength:50,createPseudo:ha,match:W,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ba,ca),a[3]=(a[3]||a[4]||a[5]||"").replace(ba,ca),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fa.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fa.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return W.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&U.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ba,ca).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fa.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(P," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fa.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ha(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ha(function(a){var b=[],c=[],d=h(a.replace(Q,"$1"));return d[u]?ha(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ha(function(a){return function(b){return fa(a,b).length>0}}),contains:ha(function(a){return a=a.replace(ba,ca),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ha(function(a){return V.test(a||"")||fa.error("unsupported lang: "+a),a=a.replace(ba,ca).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Y.test(a.nodeName)},input:function(a){return X.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:na(function(){return[0]}),last:na(function(a,b){return[b-1]}),eq:na(function(a,b,c){return[0>c?c+b:c]}),even:na(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:na(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:na(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:na(function(a,b,c){for(var d=0>c?c+b:c;++db;b++)d+=a[b].value;return d}function ra(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j,k=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(j=b[u]||(b[u]={}),i=j[b.uniqueID]||(j[b.uniqueID]={}),(h=i[d])&&h[0]===w&&h[1]===f)return k[2]=h[2];if(i[d]=k,k[2]=a(b,c,g))return!0}}}function sa(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function ta(a,b,c){for(var d=0,e=b.length;e>d;d++)fa(a,b[d],c);return c}function ua(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(c&&!c(f,d,e)||(g.push(f),j&&b.push(h)));return g}function va(a,b,c,d,e,f){return d&&!d[u]&&(d=va(d)),e&&!e[u]&&(e=va(e,f)),ha(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||ta(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ua(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ua(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?J(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ua(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):H.apply(g,r)})}function wa(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ra(function(a){return a===b},h,!0),l=ra(function(a){return J(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[ra(sa(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return va(i>1&&sa(m),i>1&&qa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(Q,"$1"),c,e>i&&wa(a.slice(i,e)),f>e&&wa(a=a.slice(e)),f>e&&qa(a))}m.push(c)}return sa(m)}function xa(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=F.call(i));u=ua(u)}H.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&fa.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ha(f):f}return h=fa.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wa(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xa(e,d)),f.selector=a}return f},i=fa.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(ba,ca),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=W.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(ba,ca),_.test(j[0].type)&&oa(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qa(j),!a)return H.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,!b||_.test(a)&&oa(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ia(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ia(function(a){return a.innerHTML="","#"===a.firstChild.getAttribute("href")})||ja("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ia(function(a){return a.innerHTML="",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ja("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ia(function(a){return null==a.getAttribute("disabled")})||ja(K,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fa}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.uniqueSort=n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},v=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},w=n.expr.match.needsContext,x=/^<([\w-]+)\s*\/?>(?:<\/\1>|)$/,y=/^.[^:#\[\.,]*$/;function z(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(y.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return h.call(b,a)>-1!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(z(this,a||[],!1))},not:function(a){return this.pushStack(z(this,a||[],!0))},is:function(a){return!!z(this,"string"==typeof a&&w.test(a)?n(a):a||[],!1).length}});var A,B=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=n.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||A,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:B.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),x.test(e[1])&&n.isPlainObject(b))for(e in b)n.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&f.parentNode&&(this.length=1,this[0]=f),this.context=d,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?void 0!==c.ready?c.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};C.prototype=n.fn,A=n(d);var D=/^(?:parents|prev(?:Until|All))/,E={children:!0,contents:!0,next:!0,prev:!0};n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=w.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?h.call(n(a),this[0]):h.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.uniqueSort(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function F(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return u(a,"parentNode")},parentsUntil:function(a,b,c){return u(a,"parentNode",c)},next:function(a){return F(a,"nextSibling")},prev:function(a){return F(a,"previousSibling")},nextAll:function(a){return u(a,"nextSibling")},prevAll:function(a){return u(a,"previousSibling")},nextUntil:function(a,b,c){return u(a,"nextSibling",c)},prevUntil:function(a,b,c){return u(a,"previousSibling",c)},siblings:function(a){return v((a.parentNode||{}).firstChild,a)},children:function(a){return v(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(E[a]||n.uniqueSort(e),D.test(a)&&e.reverse()),this.pushStack(e)}});var G=/\S+/g;function H(a){var b={};return n.each(a.match(G)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?H(a):n.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h-1)f.splice(c,1),h>=c&&h--}),this},has:function(a){return a?n.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().progress(c.notify).done(c.resolve).fail(c.reject):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=e.call(arguments),d=c.length,f=1!==d||a&&n.isFunction(a.promise)?d:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(d){b[a]=this,c[a]=arguments.length>1?e.call(arguments):d,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(d>1)for(i=new Array(d),j=new Array(d),k=new Array(d);d>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().progress(h(b,j,i)).done(h(b,k,c)).fail(g.reject):--f;return f||g.resolveWith(k,c),g.promise()}});var I;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(I.resolveWith(d,[n]),n.fn.triggerHandler&&(n(d).triggerHandler("ready"),n(d).off("ready"))))}});function J(){d.removeEventListener("DOMContentLoaded",J),a.removeEventListener("load",J),n.ready()}n.ready.promise=function(b){return I||(I=n.Deferred(),"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(n.ready):(d.addEventListener("DOMContentLoaded",J),a.addEventListener("load",J))),I.promise(b)},n.ready.promise();var K=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)K(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},L=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function M(){this.expando=n.expando+M.uid++}M.uid=1,M.prototype={register:function(a,b){var c=b||{};return a.nodeType?a[this.expando]=c:Object.defineProperty(a,this.expando,{value:c,writable:!0,configurable:!0}),a[this.expando]},cache:function(a){if(!L(a))return{};var b=a[this.expando];return b||(b={},L(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[b]=c;else for(d in b)e[d]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=a[this.expando];if(void 0!==f){if(void 0===b)this.register(a);else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in f?d=[b,e]:(d=e,d=d in f?[d]:d.match(G)||[])),c=d.length;while(c--)delete f[d[c]]}(void 0===b||n.isEmptyObject(f))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!n.isEmptyObject(b)}};var N=new M,O=new M,P=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Q=/[A-Z]/g;function R(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Q,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:P.test(c)?n.parseJSON(c):c; +}catch(e){}O.set(a,b,c)}else c=void 0;return c}n.extend({hasData:function(a){return O.hasData(a)||N.hasData(a)},data:function(a,b,c){return O.access(a,b,c)},removeData:function(a,b){O.remove(a,b)},_data:function(a,b,c){return N.access(a,b,c)},_removeData:function(a,b){N.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=O.get(f),1===f.nodeType&&!N.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),R(f,d,e[d])));N.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){O.set(this,a)}):K(this,function(b){var c,d;if(f&&void 0===b){if(c=O.get(f,a)||O.get(f,a.replace(Q,"-$&").toLowerCase()),void 0!==c)return c;if(d=n.camelCase(a),c=O.get(f,d),void 0!==c)return c;if(c=R(f,d,void 0),void 0!==c)return c}else d=n.camelCase(a),this.each(function(){var c=O.get(this,d);O.set(this,d,b),a.indexOf("-")>-1&&void 0!==c&&O.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){O.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=N.get(a,b),c&&(!d||n.isArray(c)?d=N.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return N.get(a,c)||N.access(a,c,{empty:n.Callbacks("once memory").add(function(){N.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length",""],thead:[1,"","
      "],col:[2,"","
      "],tr:[2,"","
      "],td:[3,"","
      "],_default:[0,"",""]};$.optgroup=$.option,$.tbody=$.tfoot=$.colgroup=$.caption=$.thead,$.th=$.td;function _(a,b){var c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function aa(a,b){for(var c=0,d=a.length;d>c;c++)N.set(a[c],"globalEval",!b||N.get(b[c],"globalEval"))}var ba=/<|&#?\w+;/;function ca(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],o=0,p=a.length;p>o;o++)if(f=a[o],f||0===f)if("object"===n.type(f))n.merge(m,f.nodeType?[f]:f);else if(ba.test(f)){g=g||l.appendChild(b.createElement("div")),h=(Y.exec(f)||["",""])[1].toLowerCase(),i=$[h]||$._default,g.innerHTML=i[1]+n.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;n.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",o=0;while(f=m[o++])if(d&&n.inArray(f,d)>-1)e&&e.push(f);else if(j=n.contains(f.ownerDocument,f),g=_(l.appendChild(f),"script"),j&&aa(g),c){k=0;while(f=g[k++])Z.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),l.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="",l.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var da=/^key/,ea=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,fa=/^([^.]*)(?:\.(.+)|)/;function ga(){return!0}function ha(){return!1}function ia(){try{return d.activeElement}catch(a){}}function ja(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)ja(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=ha;else if(!e)return a;return 1===f&&(g=e,e=function(a){return n().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=n.guid++)),a.each(function(){n.event.add(this,b,e,d,c)})}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=N.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return"undefined"!=typeof n&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(G)||[""],j=b.length;while(j--)h=fa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=N.hasData(a)&&N.get(a);if(r&&(i=r.events)){b=(b||"").match(G)||[""],j=b.length;while(j--)if(h=fa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&N.remove(a,"handle events")}},dispatch:function(a){a=n.event.fix(a);var b,c,d,f,g,h=[],i=e.call(arguments),j=(N.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())a.rnamespace&&!a.rnamespace.test(g.namespace)||(a.handleObj=g,a.data=g.data,d=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==d&&(a.result=d)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&("click"!==a.type||isNaN(a.button)||a.button<1))for(;i!==this;i=i.parentNode||this)if(1===i.nodeType&&(i.disabled!==!0||"click"!==a.type)){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>-1:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h]*)\/>/gi,la=/\s*$/g;function pa(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function qa(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function ra(a){var b=na.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function sa(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(N.hasData(a)&&(f=N.access(a),g=N.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}O.hasData(a)&&(h=O.access(a),i=n.extend({},h),O.set(b,i))}}function ta(a,b){var c=b.nodeName.toLowerCase();"input"===c&&X.test(a.type)?b.checked=a.checked:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}function ua(a,b,c,d){b=f.apply([],b);var e,g,h,i,j,k,m=0,o=a.length,p=o-1,q=b[0],r=n.isFunction(q);if(r||o>1&&"string"==typeof q&&!l.checkClone&&ma.test(q))return a.each(function(e){var f=a.eq(e);r&&(b[0]=q.call(this,e,f.html())),ua(f,b,c,d)});if(o&&(e=ca(b,a[0].ownerDocument,!1,a,d),g=e.firstChild,1===e.childNodes.length&&(e=g),g||d)){for(h=n.map(_(e,"script"),qa),i=h.length;o>m;m++)j=e,m!==p&&(j=n.clone(j,!0,!0),i&&n.merge(h,_(j,"script"))),c.call(a[m],j,m);if(i)for(k=h[h.length-1].ownerDocument,n.map(h,ra),m=0;i>m;m++)j=h[m],Z.test(j.type||"")&&!N.access(j,"globalEval")&&n.contains(k,j)&&(j.src?n._evalUrl&&n._evalUrl(j.src):n.globalEval(j.textContent.replace(oa,"")))}return a}function va(a,b,c){for(var d,e=b?n.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||n.cleanData(_(d)),d.parentNode&&(c&&n.contains(d.ownerDocument,d)&&aa(_(d,"script")),d.parentNode.removeChild(d));return a}n.extend({htmlPrefilter:function(a){return a.replace(ka,"<$1>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(l.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=_(h),f=_(a),d=0,e=f.length;e>d;d++)ta(f[d],g[d]);if(b)if(c)for(f=f||_(a),g=g||_(h),d=0,e=f.length;e>d;d++)sa(f[d],g[d]);else sa(a,h);return g=_(h,"script"),g.length>0&&aa(g,!i&&_(a,"script")),h},cleanData:function(a){for(var b,c,d,e=n.event.special,f=0;void 0!==(c=a[f]);f++)if(L(c)){if(b=c[N.expando]){if(b.events)for(d in b.events)e[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);c[N.expando]=void 0}c[O.expando]&&(c[O.expando]=void 0)}}}),n.fn.extend({domManip:ua,detach:function(a){return va(this,a,!0)},remove:function(a){return va(this,a)},text:function(a){return K(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)},append:function(){return ua(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=pa(this,a);b.appendChild(a)}})},prepend:function(){return ua(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=pa(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return ua(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return ua(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(_(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return K(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!la.test(a)&&!$[(Y.exec(a)||["",""])[1].toLowerCase()]){a=n.htmlPrefilter(a);try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(_(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return ua(this,arguments,function(b){var c=this.parentNode;n.inArray(this,a)<0&&(n.cleanData(_(this)),c&&c.replaceChild(b,this))},a)}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),f=e.length-1,h=0;f>=h;h++)c=h===f?this:this.clone(!0),n(e[h])[b](c),g.apply(d,c.get());return this.pushStack(d)}});var wa,xa={HTML:"block",BODY:"block"};function ya(a,b){var c=n(b.createElement(a)).appendTo(b.body),d=n.css(c[0],"display");return c.detach(),d}function za(a){var b=d,c=xa[a];return c||(c=ya(a,b),"none"!==c&&c||(wa=(wa||n("