From f8be6d9ab669811a821301fbae35776734b2fa2d Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Mon, 5 Dec 2016 13:37:56 -0800 Subject: [PATCH] Committing dist for 1.3.0 using core 5.1.0 --- dist/components/Breadcrumb/Breadcrumb.hbs | 21 + dist/components/Breadcrumb/Breadcrumb.json | 6 + dist/components/Breadcrumb/Breadcrumb.scss | 177 + dist/components/Button/Button.hbs | 19 + dist/components/Button/Button.json | 7 + dist/components/Button/Button.scss | 289 + dist/components/Callout/Callout.hbs | 30 + dist/components/Callout/Callout.json | 10 + dist/components/Callout/Callout.scss | 160 + dist/components/CheckBox/CheckBox.hbs | 19 + dist/components/CheckBox/CheckBox.json | 6 + dist/components/CheckBox/CheckBox.scss | 175 + .../ChoiceFieldGroup/ChoiceFieldGroup.hbs | 15 + .../ChoiceFieldGroup/ChoiceFieldGroup.json | 7 + .../ChoiceFieldGroup/ChoiceFieldGroup.scss | 16 + dist/components/CommandBar/CommandBar.hbs | 27 + dist/components/CommandBar/CommandBar.json | 11 + dist/components/CommandBar/CommandBar.scss | 141 + .../CommandButton/CommandButton.hbs | 20 + .../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 | 30 + 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 | 16 + dist/components/Dropdown/Dropdown.json | 6 + dist/components/Dropdown/Dropdown.scss | 254 + dist/components/FacePile/FacePile.hbs | 19 + dist/components/FacePile/FacePile.json | 13 + dist/components/FacePile/FacePile.scss | 107 + dist/components/Label/Label.hbs | 6 + 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 | 11 + dist/components/List/List.json | 6 + dist/components/List/List.scss | 19 + dist/components/ListItem/ListItem.hbs | 23 + 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 | 17 + dist/components/MessageBar/MessageBar.json | 6 + dist/components/MessageBar/MessageBar.scss | 90 + dist/components/OrgChart/OrgChart.hbs | 22 + dist/components/OrgChart/OrgChart.json | 6 + dist/components/OrgChart/OrgChart.scss | 49 + dist/components/Overlay/Overlay.hbs | 7 + 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 | 62 + .../components/PeoplePicker/PeoplePicker.json | 12 + .../components/PeoplePicker/PeoplePicker.scss | 452 ++ dist/components/Persona/Persona.hbs | 48 + dist/components/Persona/Persona.json | 7 + dist/components/Persona/Persona.scss | 734 ++ dist/components/PersonaCard/PersonaCard.hbs | 40 + dist/components/PersonaCard/PersonaCard.json | 3 + dist/components/PersonaCard/PersonaCard.scss | 211 + dist/components/Pivot/Pivot.hbs | 25 + dist/components/Pivot/Pivot.json | 3 + dist/components/Pivot/Pivot.scss | 204 + .../ProgressIndicator/ProgressIndicator.hbs | 14 + .../ProgressIndicator/ProgressIndicator.json | 3 + .../ProgressIndicator/ProgressIndicator.scss | 67 + dist/components/RadioButton/RadioButton.hbs | 19 + 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 | 372 + dist/components/Spinner/Spinner.hbs | 13 + dist/components/Spinner/Spinner.json | 3 + dist/components/Spinner/Spinner.scss | 51 + dist/components/Table/Table.hbs | 30 + dist/components/Table/Table.json | 3 + dist/components/Table/Table.scss | 126 + dist/components/TextField/TextField.hbs | 12 + dist/components/TextField/TextField.json | 3 + dist/components/TextField/TextField.scss | 235 + dist/components/Toggle/Toggle.hbs | 14 + dist/components/Toggle/Toggle.json | 6 + dist/components/Toggle/Toggle.scss | 252 + dist/css/fabric.components.css | 6190 +++++++++++++++ dist/css/fabric.components.min.css | 6 + dist/css/fabric.components.rtl.css | 6051 +++++++++++++++ dist/css/fabric.components.rtl.min.css | 6 + dist/css/fabric.min.css | 6 + dist/css/fabric.rtl.min.css | 6 + .../Components/Breadcrumb/index.html | 184 + .../Components/Button/index.html | 184 + .../Components/Callout/index.html | 334 + .../Components/CheckBox/index.html | 123 + .../Components/ChoiceFieldGroup/index.html | 159 + .../Components/CommandBar/index.html | 527 ++ .../Components/CommandButton/index.html | 221 + .../Components/ContextualMenu/index.html | 330 + .../Components/DatePicker/index.html | 186 + .../Components/Dialog/index.html | 521 ++ .../Components/Dropdown/index.html | 125 + .../Components/FacePile/index.html | 1429 ++++ .../documentation/Components/Label/index.html | 79 + dist/documentation/Components/Link/index.html | 61 + dist/documentation/Components/List/index.html | 372 + .../Components/ListItem/index.html | 237 + .../Components/MessageBanner/index.html | 145 + .../Components/MessageBar/index.html | 151 + .../Components/OrgChart/index.html | 352 + .../Components/Overlay/index.html | 85 + .../documentation/Components/Panel/index.html | 249 + .../PeoplePicker/PeoplePicker.Searching.png | Bin 0 -> 1601 bytes .../Components/PeoplePicker/index.html | 513 ++ .../Components/Persona/Persona.Person.jpg | Bin 0 -> 5650 bytes .../Components/Persona/Persona.Person2.png | Bin 0 -> 15280 bytes .../Components/Persona/index.html | 976 +++ .../Components/PersonaCard/index.html | 492 ++ .../documentation/Components/Pivot/index.html | 207 + .../Components/ProgressIndicator/index.html | 139 + .../Components/SearchBox/index.html | 140 + .../Components/Spinner/index.html | 110 + .../documentation/Components/Table/index.html | 303 + .../Components/TextField/index.html | 121 + .../Components/Toggle/index.html | 108 + .../Getting Started/BUILDING.html | 98 + .../Getting Started/BUNDLING.html | 126 + .../Getting Started/COMPONENTSLIST.html | 73 + .../Getting Started/CONTRIBUTING.html | 73 + .../Getting Started/PACKAGES.html | 48 + .../Getting Started/RESOURCES.html | 39 + .../Getting Started/ROADMAP.html | 39 + dist/documentation/Samples/Form/css/Form.css | 6314 ++++++++++++++++ .../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 | 6648 +++++++++++++++++ .../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/demo.css | 291 + dist/documentation/demo.min.css | 6 + dist/documentation/index.html | 276 + dist/js/fabric.js | 3615 +++++++++ dist/js/fabric.min.js | 8 + dist/lib/PickaDate.js | 1 + 182 files changed, 48940 insertions(+) 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/index.html create mode 100644 dist/documentation/Components/Button/index.html create mode 100644 dist/documentation/Components/Callout/index.html create mode 100644 dist/documentation/Components/CheckBox/index.html create mode 100644 dist/documentation/Components/ChoiceFieldGroup/index.html create mode 100644 dist/documentation/Components/CommandBar/index.html create mode 100644 dist/documentation/Components/CommandButton/index.html create mode 100644 dist/documentation/Components/ContextualMenu/index.html create mode 100644 dist/documentation/Components/DatePicker/index.html create mode 100644 dist/documentation/Components/Dialog/index.html create mode 100644 dist/documentation/Components/Dropdown/index.html create mode 100644 dist/documentation/Components/FacePile/index.html create mode 100644 dist/documentation/Components/Label/index.html create mode 100644 dist/documentation/Components/Link/index.html create mode 100644 dist/documentation/Components/List/index.html create mode 100644 dist/documentation/Components/ListItem/index.html create mode 100644 dist/documentation/Components/MessageBanner/index.html create mode 100644 dist/documentation/Components/MessageBar/index.html create mode 100644 dist/documentation/Components/OrgChart/index.html create mode 100644 dist/documentation/Components/Overlay/index.html create mode 100644 dist/documentation/Components/Panel/index.html create mode 100644 dist/documentation/Components/PeoplePicker/PeoplePicker.Searching.png create mode 100644 dist/documentation/Components/PeoplePicker/index.html create mode 100644 dist/documentation/Components/Persona/Persona.Person.jpg create mode 100644 dist/documentation/Components/Persona/Persona.Person2.png create mode 100644 dist/documentation/Components/Persona/index.html create mode 100644 dist/documentation/Components/PersonaCard/index.html create mode 100644 dist/documentation/Components/Pivot/index.html create mode 100644 dist/documentation/Components/ProgressIndicator/index.html create mode 100644 dist/documentation/Components/SearchBox/index.html create mode 100644 dist/documentation/Components/Spinner/index.html create mode 100644 dist/documentation/Components/Table/index.html create mode 100644 dist/documentation/Components/TextField/index.html create mode 100644 dist/documentation/Components/Toggle/index.html create mode 100644 dist/documentation/Getting Started/BUILDING.html create mode 100644 dist/documentation/Getting Started/BUNDLING.html create mode 100644 dist/documentation/Getting Started/COMPONENTSLIST.html create mode 100644 dist/documentation/Getting Started/CONTRIBUTING.html create mode 100644 dist/documentation/Getting Started/PACKAGES.html create mode 100644 dist/documentation/Getting Started/RESOURCES.html create mode 100644 dist/documentation/Getting Started/ROADMAP.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/demo.css create mode 100644 dist/documentation/demo.min.css create mode 100644 dist/documentation/index.html create mode 100644 dist/js/fabric.js create mode 100644 dist/js/fabric.min.js create mode 100644 dist/lib/PickaDate.js diff --git a/dist/components/Breadcrumb/Breadcrumb.hbs b/dist/components/Breadcrumb/Breadcrumb.hbs new file mode 100644 index 00000000..def2a24e --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.hbs @@ -0,0 +1,21 @@ + + +
+
+
+
+
    +
    +
    + +
    \ No newline at end of file diff --git a/dist/components/Breadcrumb/Breadcrumb.json b/dist/components/Breadcrumb/Breadcrumb.json new file mode 100644 index 00000000..42d5f7c1 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.json @@ -0,0 +1,6 @@ +{ + "name": "Breadcrumb", + "dependencies": [ + "ContextualMenu" + ] +} diff --git a/dist/components/Breadcrumb/Breadcrumb.scss b/dist/components/Breadcrumb/Breadcrumb.scss new file mode 100644 index 00000000..be341397 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.scss @@ -0,0 +1,177 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Breadcrumb styles + + +.ms-Breadcrumb { + @include ms-baseFont; + margin: 23px 0 1px; + + &.is-overflow { + .ms-Breadcrumb-overflow { + display: inline; + } + } +} + +.ms-Breadcrumb-chevron { + font-size: $ms-font-size-s; + color: $ms-color-neutralSecondary; + vertical-align: top; + margin: 11px 7px; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; + + .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; + + &:last-of-type { + .ms-Breadcrumb-chevron { + display: none; + } + } + } +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; + + .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: $ms-color-themePrimary; + padding: 8px; + cursor: pointer; + vertical-align: top; + } +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; + margin-right: -2px; + + &.is-open { + display: block; + top: 36px; + left: 0; + @include drop-shadow; + background-color: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle); + } + + &::before { + position: absolute; + @include drop-shadow; + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + transform: rotate(45deg); + background-color: $ms-color-white; + } + + .ms-ContextualMenu { + border: 0; + box-shadow: none; + position: relative; + width: 190px; + + &.is-open { + margin-bottom: 0; + } + } +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; + + &:hover { + background-color: $ms-color-neutralLighter; + cursor: pointer; + } + + &:focus { + outline: $ms-color-neutralSecondaryAlt solid 1px; + color: $ms-color-black; + } + + &:active { + outline: transparent; + background-color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-Breadcrumb-itemLink { + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; +} + + +@media screen and (max-width: $ms-screen-md-max) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-l; + } + + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 8px 5px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 5px 4px; + } + } +} + +@media screen and (max-width: $ms-screen-sm-max) { + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-m; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } + } +} diff --git a/dist/components/Button/Button.hbs b/dist/components/Button/Button.hbs new file mode 100644 index 00000000..6d886b5f --- /dev/null +++ b/dist/components/Button/Button.hbs @@ -0,0 +1,19 @@ + + +<{{props.tag}} class="ms-Button {{props.customClasses}} + {{#if props.modifier}}ms-Button--{{props.modifier}}{{/if}} + {{#if props.label}}{{else}}ms-Button--noLabel{{/if}}"> + {{#if props.icon}} + + {{/if}} + {{props.label}} + {{#if props.description}} + {{props.description}} + {{/if}} + {{#if props.dropdownIcon}} + + {{/if}} + \ No newline at end of file diff --git a/dist/components/Button/Button.json b/dist/components/Button/Button.json new file mode 100644 index 00000000..2026b0a2 --- /dev/null +++ b/dist/components/Button/Button.json @@ -0,0 +1,7 @@ +{ + "name": "Button", + "props": { + "label": "Create Account", + "tag": "button" + } +} diff --git a/dist/components/Button/Button.scss b/dist/components/Button/Button.scss new file mode 100644 index 00000000..b1990401 --- /dev/null +++ b/dist/components/Button/Button.scss @@ -0,0 +1,289 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Button styles + + +.ms-Button { + @include ms-u-normalize; + @include ms-baseFont; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + background-color: $ms-color-neutralLighter; + border: 1px solid $ms-color-neutralLighter; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; + + &.is-hidden { + display: none; + } + + &:hover { + background-color: $ms-color-neutralLight; + border-color: $ms-color-neutralLight; + + .ms-Button-label { + color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackSelected; + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteSelected; + border-color: $ms-color-contrastWhiteSelected; + } + } + + &:focus { + background-color: $ms-color-neutralLight; + border-color: $ms-color-themePrimary; + outline: 1px solid transparent; + + .ms-Button-label { + color: $ms-color-black; + } + } + + &:active { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + .ms-Button-label { + color: $ms-color-white; + } + } + + &:disabled, + &.is-disabled { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + cursor: default; + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + + &:hover, + &:focus { + outline: 0; + } + } +} + +.ms-Button-label { + color: $ms-color-neutralPrimary; + font-weight: $ms-font-weight-semibold; + font-size: $ms-font-size-m; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +//== Modifier: Primary action button +// +.ms-Button.ms-Button--primary { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + .ms-Button-label { + color: $ms-color-white; + } + + &:hover { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDark; + } + + &:focus { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDarker; + } + + &:active { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + } + + &:disabled, + &.is-disabled { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Hero button +// +.ms-Button.ms-Button--hero { + align-items: center; + background-color: transparent; + border: 0; + display: flex; + padding: 0; + + .ms-Button-icon { + color: $ms-color-themePrimary; + display: inline-block; + font-size: $ms-font-size-s; + margin-right: 4px; + position: relative; + top: 1px; + text-align: center; + + .ms-Icon { + border-radius: 18px; + border: 1px solid $ms-color-themePrimary; + font-size: $ms-font-size-s; + height: 18px; + line-height: 18px; + width: 18px; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + font-size: $ms-font-size-xl; + font-weight: $ms-font-weight-light; + position: relative; + text-decoration: none; + } + + &:hover, + &:focus { + .ms-Button-icon { + color: $ms-color-themeDark; + + .ms-Icon { + border: 1px solid $ms-color-themeDark; + } + } + + .ms-Button-label { + color: $ms-color-themeDarker; + } + } + + &:active { + .ms-Button-icon { + color: $ms-color-themePrimary; + + .ms-Icon { + border: 1px solid $ms-color-themePrimary; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-icon { + color: $ms-color-neutralTertiaryAlt; + + .ms-Icon { + border: 1px solid $ms-color-neutralTertiaryAlt; + } + } + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Compound button +// +.ms-Button.ms-Button--compound { + display: block; + height: auto; + max-width: 280px; + min-height: 72px; + padding: 20px; + + .ms-Button-label { + display: block; + font-weight: $ms-font-weight-semibold; + position: relative; + text-align: left; + margin-top: -5px; + } + + .ms-Button-description { + color: $ms-color-neutralSecondary; + display: block; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-s; + position: relative; + text-align: left; + top: 3px; + } + + &:hover { + .ms-Button-description { + color: $ms-color-neutralDark; + } + } + + &:focus { + border-color: $ms-color-themePrimary; + background-color: $ms-color-neutralLighter; + + .ms-Button-label { + color: $ms-color-neutralPrimary; + } + + .ms-Button-description { + color: $ms-color-neutralSecondary; + } + } + + &:active { + background-color: $ms-color-themePrimary; + + .ms-Button-description, + .ms-Button-label { + color: $ms-color-white; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-label, + .ms-Button-description { + color: $ms-color-neutralTertiary; + } + + &:focus, + &:active { + border-color: $ms-color-neutralLighter; + background-color: $ms-color-neutralLighter; + + .ms-Button-label, + .ms-Button-description { + color: $ms-color-neutralTertiary; + } + } + } +} diff --git a/dist/components/Callout/Callout.hbs b/dist/components/Callout/Callout.hbs new file mode 100644 index 00000000..d12c496e --- /dev/null +++ b/dist/components/Callout/Callout.hbs @@ -0,0 +1,30 @@ + + + +
    +
    + {{#if props.closeIcon}} + + {{/if}} +
    +

    {{{props.title}}}

    +
    +
    +
    +

    {{props.subText}}

    +
    +
    + {{#each props.actions}} + {{renderPartial component props}} + {{/each}} +
    +
    +
    +
    diff --git a/dist/components/Callout/Callout.json b/dist/components/Callout/Callout.json new file mode 100644 index 00000000..50cb4193 --- /dev/null +++ b/dist/components/Callout/Callout.json @@ -0,0 +1,10 @@ +{ + "name": "Callout", + "dependencies": [ + "Button", + "Label", + "Link", + "ContextualHost", + "CommandButton" + ] +} diff --git a/dist/components/Callout/Callout.scss b/dist/components/Callout/Callout.scss new file mode 100644 index 00000000..4d7e6914 --- /dev/null +++ b/dist/components/Callout/Callout.scss @@ -0,0 +1,160 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Callout styles + +$ms-Callout-commandButtonHeight: 27px; + +.ms-Callout { + @include ms-baseFont; + width: 288px; + + &.is-hidden { + display: none; + } +} + +.ms-Callout-header { + z-index: ($ms-zIndex-Callout + $ms-zIndex-middle); + padding-top: 24px; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-title { + margin: 0; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xl; +} + +.ms-Callout-subText { + margin: 0; + font-weight: $ms-font-weight-semilight; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: $ms-color-neutralSecondary; + z-index: 110; +} + +.ms-Callout-link { + font-size: $ms-font-size-m; +} + +.ms-Callout-inner { + height: 100%; + padding-top: 0; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; + + .ms-CommandButton.ms-CommandButton--inline { + height: $ms-Callout-commandButtonHeight; + line-height: $ms-Callout-commandButtonHeight; + + .ms-CommandButton-button { + height: $ms-Callout-commandButtonHeight; + line-height: $ms-Callout-commandButtonHeight; + } + + .ms-CommandButton-label { + line-height: $ms-Callout-commandButtonHeight; + } + + .ms-CommandButton-icon { + line-height: $ms-Callout-commandButtonHeight; + } + + &:hover .ms-Button, + &:focus .ms-Button { + color: $ms-color-themePrimary; + } + } + + .ms-Callout-button { + margin-right: 12px; + } +} + +//= Modifier: OOBE (Out of box experience) callout +// +.ms-Callout.ms-Callout--OOBE { + + .ms-Callout-header { + padding: 28px 24px; + background-color: $ms-color-themePrimary; + } + + .ms-Callout-title { + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xxl; + color: $ms-color-white; + } + + .ms-Callout-inner { + padding-top: 20px; + } + + .ms-Callout-subText { + font-size: $ms-font-size-m; + } +} + + +//= Modifier: ActionText callout +// +.ms-Callout.ms-Callout--actionText { + .ms-Callout-actions { + border-top: 1px solid $ms-color-neutralLight; + padding-top: 12px; + } + + .ms-Callout-inner { + padding-bottom: 12px; + } +} + + +//= Modifier: Peek callout +// +.ms-Callout.ms-Callout--peek { + .ms-Callout-header { + padding-bottom: 0; + } + + .ms-Callout-title { + font-size: $ms-font-size-m; + } + + .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; + } +} diff --git a/dist/components/CheckBox/CheckBox.hbs b/dist/components/CheckBox/CheckBox.hbs new file mode 100644 index 00000000..7f718a11 --- /dev/null +++ b/dist/components/CheckBox/CheckBox.hbs @@ -0,0 +1,19 @@ + + + +
    + + +
    diff --git a/dist/components/CheckBox/CheckBox.json b/dist/components/CheckBox/CheckBox.json new file mode 100644 index 00000000..ac890ff0 --- /dev/null +++ b/dist/components/CheckBox/CheckBox.json @@ -0,0 +1,6 @@ +{ + "name": "CheckBox", + "dependencies": [ + "Label" + ] +} diff --git a/dist/components/CheckBox/CheckBox.scss b/dist/components/CheckBox/CheckBox.scss new file mode 100644 index 00000000..8e0db7f9 --- /dev/null +++ b/dist/components/CheckBox/CheckBox.scss @@ -0,0 +1,175 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// CheckBox styles + +$ms-checkbox-field-size: 20px; +$ms-checkbox-transition-duration: 200ms; +$ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1); + + +.ms-CheckBox { + box-sizing: border-box; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + min-height: 36px; + position: relative; + + .ms-Label { + font-size: $ms-font-size-m; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; + } +} + +// The hidden input +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +// The checkbox square container +.ms-CheckBox-field::before { + content: ''; + display: inline-block; + border: 2px solid $ms-color-neutralTertiary; + width: $ms-checkbox-field-size; + height: $ms-checkbox-field-size; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: $ms-checkbox-transition-duration; + transition-timing-function: $ms-checkbox-transition-timing; +} + +// The check mark icon +.ms-CheckBox-field::after { + @include ms-Icon--CheckMark; + font-family: 'FabricMDL2Icons'; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: $ms-font-size-s-plus; + top: 0; + color: $ms-color-white; + line-height: $ms-checkbox-field-size; + width: $ms-checkbox-field-size; + text-align: center; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-white; + } +} + +// The checkbox field +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; + + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } + + //== State: A disabled checkbox + // + &.is-disabled { + cursor: default; + + &::before { + background-color: $ms-color-neutralTertiaryAlt; + border-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + } + } + + .ms-Label { + color: $ms-color-neutralTertiary; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } + } + } + + //== State: A checkbox in focus + // + &.in-focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + &.is-disabled::before { + border-color: $ms-color-neutralTertiaryAlt; + } + + &.is-checked::before { + border-color: $ms-color-themeDarkAlt; + } + } +} + +//== State: When the checkbox is checked +// +.ms-CheckBox-field.is-checked { + &::before { + border: 10px solid $ms-color-themePrimary; + background-color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &::after { + display: block; + } + + &:hover, + &:focus { + &::before { + border-color: $ms-color-themeDarkAlt; + } + } +} diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs new file mode 100644 index 00000000..2131e158 --- /dev/null +++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs @@ -0,0 +1,15 @@ + + +
    +
    + +
    + +
    \ No newline at end of file diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json new file mode 100644 index 00000000..710cfa8b --- /dev/null +++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json @@ -0,0 +1,7 @@ +{ + "name": "ChoiceFieldGroup", + "dependencies": [ + "Label", + "CheckBox" + ] +} diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss new file mode 100644 index 00000000..3ecd646f --- /dev/null +++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss @@ -0,0 +1,16 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +//== Component: Choicefield group +// +// Choice field groups contain multiple radio buttons or checkboxes +.ms-ChoiceFieldGroup { + @include ms-baseFont; + margin-bottom: 4px; + + .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; + } +} diff --git a/dist/components/CommandBar/CommandBar.hbs b/dist/components/CommandBar/CommandBar.hbs new file mode 100644 index 00000000..cb53d1ca --- /dev/null +++ b/dist/components/CommandBar/CommandBar.hbs @@ -0,0 +1,27 @@ + + +
    + {{#if props.sideCommands}} +
    + {{#each props.sideCommands}} + {{renderPartial component props}} + {{/each}} +
    + {{/if}} +
    + {{#if props.transientComponent}} + {{renderPartial props.transientComponent.component props.transientComponent.props}} + {{/if}} + {{#each props.commands}} + {{renderPartial component props}} + {{/each}} + {{#if props.overflow}} + + {{renderPartial props.overflow.component props.overflow.props}} + + {{/if}} +
    +
    \ No newline at end of file diff --git a/dist/components/CommandBar/CommandBar.json b/dist/components/CommandBar/CommandBar.json new file mode 100644 index 00000000..be5ece1f --- /dev/null +++ b/dist/components/CommandBar/CommandBar.json @@ -0,0 +1,11 @@ +{ + "name": "CommandBar", + "dependencies": [ + "ContextualMenu", + "Button", + "Label", + "SearchBox", + "CommandButton", + "ContextualHost" + ] +} diff --git a/dist/components/CommandBar/CommandBar.scss b/dist/components/CommandBar/CommandBar.scss new file mode 100644 index 00000000..671119ed --- /dev/null +++ b/dist/components/CommandBar/CommandBar.scss @@ -0,0 +1,141 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Command Bar styles + +$CommandBar-height: 40px; +$CommandBar-md-height: 44px; +$CommandBar-iconSize: 18px; +$CommandBar-sideAreaWidthsm: 128px; +$SearchBox-width: 220px; +$CommandBarItem-height: $CommandBar-height; +$red: #FF0000; + +@mixin highContrastBorder($color) { + border-left: 1px solid $color; + border-right: 1px solid $color; +} + +.ms-CommandBar { + @include ms-baseFont; + background-color: $ms-color-neutralLighter; + height: $CommandBar-height; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; + + &:focus { + outline: none; + } + + .ms-CommandButton--actionButton { + border-right: 1px solid $ms-color-neutralLight; + } + + //== CommandBar -> ms-Button specific changes + // + .ms-Button { + height: 100%; + + &.ms-Button--noLabel { + .ms-Button-icon { + padding-right: 0; + } + } + + &.is-hidden { + display: none; + } + } + + .ms-SearchBox, + .ms-SearchBox-field, + .ms-SearchBox-label { + height: 100%; + } + + .ms-SearchBox { + display: inline-block; + vertical-align: top; + transition: margin-right $ms-duration2; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: $SearchBox-width; + + @media only screen and (max-width: $ms-screen-md-max) { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: $ms-zIndex-front; + } + } + + .ms-CommandBar-overflowButton { + .ms-CommandButton-button { + font-size: 18px; + padding: 0 11px; + } + } + + // Search is collapsed unless activated and its only + // collapsed < L break points + + @media only screen and (min-width: $ms-screen-xl-min) { + .ms-SearchBox { + margin-right: 24px; + } + } + + @media only screen and (max-width: $ms-screen-md-max) { + height: $CommandBar-md-height; + } + + @media only screen and (min-width: $ms-screen-lg-min) { + + &.search-expanded { + .ms-SearchBox { + margin-right: 8px; + } + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + transition: none; + } + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 4px; + height: 100%; + + .ms-Button:last-child { + margin-right: 0; + } + + @media only screen and (min-width: $ms-screen-lg-min) { + min-width: $CommandBar-sideAreaWidthsm; + } + + @media only screen and (min-width: $ms-screen-xl-min) { + padding-right: 20px; + } +} diff --git a/dist/components/CommandButton/CommandButton.hbs b/dist/components/CommandButton/CommandButton.hbs new file mode 100644 index 00000000..bb5ca3ba --- /dev/null +++ b/dist/components/CommandButton/CommandButton.hbs @@ -0,0 +1,20 @@ + + +
    + <{{props.tag}} class="ms-CommandButton-button" {{#if props.disabled}}tabIndex="-1"{{/if}}> + {{#if props.icon}} + {{/if}}{{props.label}}{{#if props.dropdownIcon}} + {{/if}} + + {{#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..a1a93bdf --- /dev/null +++ b/dist/components/CommandButton/CommandButton.scss @@ -0,0 +1,296 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Button styles + +$CommandButton-height: 40px; +$CommandButton-md-height: 44px; +$CommandButton-padding: 8px; +$CommandButtonIcon-size: 16px; +$CommandButtonIcon-md-size: 20px; + +.ms-CommandButton { + @include ms-baseFont; + display: inline-block; + position: relative; + vertical-align: top; + + &.is-hidden { + display: none; + } + + &:disabled, + &.is-disabled { + .ms-CommandButton-button { + cursor: default; + + &:hover { + background-color: $ms-color-themeLighterAlt; + } + + .ms-CommandButton-label { + color: $ms-color-neutralTertiary; + } + + .ms-CommandButton-icon { + color: $ms-color-neutralTertiary; + } + } + } + + .ms-ContextualMenu { + display: none; + } +} + +//== Mixins: Base button, focus, and icon alignments +// +@mixin ms-CommandButton-iconBase { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +@mixin ms-CommandBar-focusRectangle { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid $ms-color-neutralPrimary; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +@mixin ms-CommandBarButton-buttonBase { + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + // background-color: $ms-color-themeLighterAlt; + // border: 1px solid $ms-color-themeLighterAlt; + cursor: pointer; + display: inline-block; + height: $CommandButton-height; + line-height: $CommandButton-height; + outline: 1px solid transparent; + padding: 0 $CommandButton-padding; + position: relative; + vertical-align: top; + background: transparent; + + &:hover { + background-color: $ms-color-neutralLight; + + .ms-CommandButton-label { + color: $ms-color-neutralDark; + } + } + + &:active { + background-color: $ms-color-neutralLight; + } + + &:focus::before { + @include ms-CommandBar-focusRectangle; + } + + &:focus { + outline: 0; + } + + @media only screen and (max-width: $ms-screen-md-max) { + height: $CommandButton-md-height; + + .ms-CommandButton-icon { + font-size: $CommandButtonIcon-md-size; + } + + .ms-CommandButton-label { + line-height: $CommandButton-md-height; + } + } +} + +.ms-CommandButton-button, +.ms-CommandButton-splitIcon { + @include ms-CommandBarButton-buttonBase; +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +// Add space between adjacent command buttons. +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; + + @media only screen and (max-width: $ms-screen-md-max) { + margin-left: 4px; + } +} + +.ms-CommandButton-icon { + display: inline-block; + margin-right: $CommandButton-padding; + position: relative; + font-size: $CommandButtonIcon-size; + min-width: 16px; + height: 100%; + + .ms-Icon { + @include ms-CommandButton-iconBase; + } +} + +.ms-CommandButton-label { + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + color: $ms-color-neutralPrimary; + line-height: $CommandButton-height; + height: 100%; + display: inline-block; + vertical-align: top; + + &:hover { + color: $ms-color-neutralDark; + } +} + +.ms-CommandButton-dropdownIcon, +.ms-CommandButton-splitIcon { + display: inline-block; + position: relative; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-semilight; + min-width: 12px; + height: 100%; + vertical-align: top; + margin-left: 8px; + + .ms-Icon { + line-height: normal; + padding-top: $CommandButton-padding * 2; + } + + &:focus::before { + @include ms-CommandBar-focusRectangle; + } + + @media only screen and (max-width: $ms-screen-md-max) { + display: none; + } +} + +.ms-CommandButton-splitIcon { + margin-left: -2px; + width: 27px; + border: 0; + + .ms-Icon { + margin-left: -1px; + position: relative; + padding-top: 16px; + + &::after { + position: absolute; + content: ' '; + width: 1px; + height: 16px; + top: 12px; + left: -8px; + border-left: 1px solid $ms-color-neutralTertiaryAlt; + } + } +} + +//= Modifier: No Label modifier +// +.ms-CommandButton.ms-CommandButton--noLabel { + .ms-CommandButton-icon { + margin-right: 0; + } + + .ms-CommandButton-label { + display: none; + } + + .ms-CommandButton-button { + padding: 0 12px; + } +} + +//= Modifier: Inline modifier +// +.ms-CommandButton.ms-CommandButton--inline { + .ms-CommandButton-button { + background: none; + } +} + +//= Modifier: Action Button modifier +// +.ms-CommandButton.ms-CommandButton--actionButton { + .ms-CommandButton-button { + width: 50px; + height: $CommandButton-height; + } + + .ms-CommandButton-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + padding-right: 0; + } +} + +@mixin ms-CommandButton-pivotLine { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: $ms-color-themePrimary; + bottom: 0; + z-index: $ms-zIndex-middle; +} + +//= Modifier: Pivot Button modifier +// +.ms-CommandButton.ms-CommandButton--pivot { + + &.is-active::before { + @include ms-CommandButton-pivotLine; + } + + &:hover { + &::before { + @include ms-CommandButton-pivotLine; + } + } +} + +.ms-CommandButton.ms-CommandButton--textOnly, +.ms-CommandButton.ms-CommandButton--pivot { + + .ms-CommandButton-label { + display: inline-block; + + @media only screen and (max-width: $ms-screen-sm-max) { + font-size: 16px; + } + } +} diff --git a/dist/components/ContextualHost/ContextualHost.hbs b/dist/components/ContextualHost/ContextualHost.hbs new file mode 100644 index 00000000..7e4b0e5a --- /dev/null +++ b/dist/components/ContextualHost/ContextualHost.hbs @@ -0,0 +1,15 @@ + + + +
    +
    + {{#if @partial-block}} {{> @partial-block }} {{/if}} +
    +
    +
    \ No newline at end of file diff --git a/dist/components/ContextualHost/ContextualHost.json b/dist/components/ContextualHost/ContextualHost.json new file mode 100644 index 00000000..eadbe3b7 --- /dev/null +++ b/dist/components/ContextualHost/ContextualHost.json @@ -0,0 +1,3 @@ +{ + "name": "ContextualHost" +} diff --git a/dist/components/ContextualHost/ContextualHost.scss b/dist/components/ContextualHost/ContextualHost.scss new file mode 100644 index 00000000..c473ac41 --- /dev/null +++ b/dist/components/ContextualHost/ContextualHost.scss @@ -0,0 +1,145 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +.ms-ContextualHost { + @include ms-baseFont; + z-index: $ms-zIndex-front; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + background-color: $ms-color-white; + @include drop-shadow; + + &.is-positioned { + position: absolute; + margin: 0; + } + + &.is-open { + display: inline-block; + } +} + +// Mixin for arrow size and color +@mixin arrowBorders($ms-color-top, $ms-color-right, $ms-color-bottom, $ms-color-left) { + border-top: 10px solid $ms-color-top; + border-right: 10px solid $ms-color-right; + border-bottom: 10px solid $ms-color-bottom; + border-left: 10px solid $ms-color-left; +} + +.ms-ContextualHost-beak { + box-shadow: 0 0 15px -5px $ms-color-neutralPrimaryAlt; + position: absolute; + width: 28px; + height: 28px; + background: $ms-color-white;; + border: 1px solid $ms-color-neutralLight; + box-sizing: border-box; + top: -6px; + display: none; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + z-index: $ms-zIndex-back; + outline: 1px solid transparent; +} + +//= Modifier: ContextualHost with left and right arrows +// +.ms-ContextualHost.ms-ContextualHost--arrowLeft, +.ms-ContextualHost.ms-ContextualHost--arrowRight { + .ms-ContextualHost-beak { + top: 40px; + display: none; // Hide left and right arrows on sm screens + } +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft { + .ms-ContextualHost-beak { + left: -10px; + } +} + +.ms-ContextualHost.ms-ContextualHost--arrowRight { + .ms-ContextualHost-beak { + right: -10px; + } +} + +.ms-ContextualHost.ms-ContextualHost--arrowTop { + .ms-ContextualHost-beak { + display: block; + top: -10px; + } +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom { + .ms-ContextualHost-beak { + display: block; + bottom: -10px; + } +} + +// The actual ContextualHost element +.ms-ContextualHost-main { + position: relative; + background-color: $ms-color-white; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: $ms-zIndex-middle; + min-height: 10px; +} + +.ms-ContextualHost-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: $ms-font-size-m; + color: $ms-color-neutralSecondary; + z-index: $ms-zIndex-front; +} + +//= Modifier: Close button ContextualHost +// +.ms-ContextualHost.ms-ContextualHost--close { + .ms-ContextualHost-title { + margin-right: 20px; // Avoid overlap with close button + } +} + +//= Modifier: Close button ContextualHost +// + +.ms-ContextualHost.ms-ContextualHost--primaryArrow { + .ms-ContextualHost-beak { + background-color: $ms-color-themePrimary; + } +} + +@media (min-width: $ms-screen-md-min) { + // Make width larger and remove centering on md+ screens + .ms-ContextualHost { + margin: 16px; + + &.is-positioned { + margin: 0; + } + } + + // Show arrows right and left + .ms-ContextualHost.ms-ContextualHost--arrowRight, + .ms-ContextualHost.ms-ContextualHost--arrowLeft { + .ms-ContextualHost-beak { + display: block; + } + } +} diff --git a/dist/components/ContextualMenu/ContextualMenu.hbs b/dist/components/ContextualMenu/ContextualMenu.hbs new file mode 100644 index 00000000..d12fb663 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.hbs @@ -0,0 +1,28 @@ + + + \ No newline at end of file diff --git a/dist/components/ContextualMenu/ContextualMenu.json b/dist/components/ContextualMenu/ContextualMenu.json new file mode 100644 index 00000000..e77900f9 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.json @@ -0,0 +1,6 @@ +{ + "name": "ContextualMenu", + "dependencies": [ + "ContextualHost" + ] +} diff --git a/dist/components/ContextualMenu/ContextualMenu.scss b/dist/components/ContextualMenu/ContextualMenu.scss new file mode 100644 index 00000000..e9abf61b --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.scss @@ -0,0 +1,211 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Contextual Menu styles + +.ms-ContextualMenu { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + display: block; + min-width: 180px; + max-width: 220px; + list-style-type: none; + position: relative; + background-color: $ms-color-white; + + &.is-hidden { + display: none; + } +} + +.ms-ContextualMenu-item { + position: relative; +} + +.ms-ContextualMenu-link { + @include ms-u-borderBox; + text-decoration: none; + color: $ms-color-neutralPrimary; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 36px; + overflow: hidden; + line-height: 34px; + padding: 0 16px 0 25px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; + + &:hover, + &:active, + &:focus { + background-color: $ms-color-neutralLighter; + color: $ms-color-neutralDark; + + .ms-ContextualMenu-subMenuIcon { + color: $ms-color-neutralDark; + } + } + + &:focus { + outline: transparent; + border: 1px solid $ms-color-neutralSecondary; + } + + &.is-selected { + background-color: $ms-color-neutralQuaternaryAlt; + color: $ms-color-black; + font-weight: $ms-font-weight-semibold; + + ~.ms-ContextualMenu-subMenuIcon { + color: $ms-color-black; + } + + &:hover { + background-color: $ms-color-neutralQuaternary; + } + } + + &.is-disabled { + color: $ms-color-neutralTertiary; + background-color: $ms-color-white; + pointer-events: none; + + &:active, + &:focus { + border-color: $ms-color-white; + } + + .ms-Icon { + color: $ms-color-neutralTertiary; + pointer-events: none; + cursor: default; + } + } +} + +// Modifier: Menu item Dividers +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + background-color: $ms-color-neutralLight; + position: relative; +} + +// Modifier: Menu item Headers +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: $ms-color-themePrimary; + font-size: $ms-font-size-s; + text-transform: uppercase; + height: 36px; + line-height: 36px; + padding: 0 18px; +} + +// Modifier: Contextual menu with submenu +.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; // Move the submenu to the left of the menu item that triggered it +} + +// Right chevron. +// Note: The .ms-ContextualMenu-caretRight class has been deprecated. +// Please use .ms-ContextualMenu-subMenuIcon. +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: $ms-color-neutralPrimary; + font-size: 8px; + font-weight: 600; + width: 24px; + height: 36px; + line-height: 36px; + position: absolute; + text-align: center; + top: 0; + right: 0; + z-index: 1; + pointer-events: none; +} + +//== Modifier: Multi-select menu +// +.ms-ContextualMenu.ms-ContextualMenu--multiselect { + + // Align the header with the items + .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 16px 0 26px; + } + + .ms-ContextualMenu-link { + + // Multi-select checkmark + &.is-selected { + background-color: $ms-color-white; + font-weight: $ms-font-weight-semibold; + color: $ms-color-neutralPrimary; + + // Checkmark + &::after { + @include ms-Icon; + color: $ms-color-neutralPrimary; + content: '\E73E'; + font-size: $ms-icon-size-xs; + font-weight: 800; + height: 36px; + line-height: 36px; + position: absolute; + left: 7px; + } + + &:hover, + &:focus { + color: $ms-color-neutralDark; + background-color: $ms-color-neutralLighter; + + &::after { + color: $ms-color-neutralDark; + } + } + + &:active { + color: $ms-color-black; + background-color: $ms-color-neutralQuaternary; + + &::after { + color: $ms-color-black; + } + } + } + } +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks { + .ms-ContextualMenu-link { + padding-left: 40px; + } + + .ms-Icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + text-align: center; + } +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons { + width: 220px; +} diff --git a/dist/components/DatePicker/DatePicker.hbs b/dist/components/DatePicker/DatePicker.hbs new file mode 100644 index 00000000..882e01ca --- /dev/null +++ b/dist/components/DatePicker/DatePicker.hbs @@ -0,0 +1,49 @@ + + + + +
    +
    + + + +
    +
    + + +
    +
    + Go to today +
    +
    +
    + + +
    +
    +
    +
    + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
    +
    +
    +
    + + +
    +
    +
    diff --git a/dist/components/DatePicker/DatePicker.json b/dist/components/DatePicker/DatePicker.json new file mode 100644 index 00000000..86873e2f --- /dev/null +++ b/dist/components/DatePicker/DatePicker.json @@ -0,0 +1,3 @@ +{ + "name": "DatePicker" +} diff --git a/dist/components/DatePicker/DatePicker.scss b/dist/components/DatePicker/DatePicker.scss new file mode 100644 index 00000000..3437a831 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.scss @@ -0,0 +1,530 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Date Picker styles + + +.ms-DatePicker { + @include ms-baseFont; + @include ms-u-normalize; + margin-bottom: 17px; + z-index: $ms-zIndex-DatePicker; + + .ms-TextField { position: relative; } +} + +// Base wrapper for the date picker. +.ms-DatePicker-picker { + color: $ms-color-black; + font-size: $ms-font-size-m; + position: relative; + text-align: left; + z-index: $ms-zIndex-back; +} + +// Insert a calendar icon over the date field. +.ms-DatePicker-event { + color: $ms-color-neutralSecondary; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: $ms-zIndex-middle; +} + +// The holder is the only "scrollable" top-level container element. +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + @include ms-u-borderBox; + background: $ms-color-white; + position: absolute; + min-width: 300px; + display: none; +} + + +// When the picker opens, reveal the content. +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + @include ms-u-slideDownIn10; + @include ms-u-borderBox; + @include drop-shadow; + border: 1px solid $ms-color-neutralLight; + display: block; +} + +// When a picker opens, always open it in front of other closed pickers +.ms-DatePicker-picker--opened { + position: relative; + z-index: $ms-zIndex-front; +} + + +// The frame and wrap work together to ensure that +// clicks within the picker don’t reach the holder. +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + + +// Wrapper containing the calendar view to pick a specific date. +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + + +// The header containing the month and year. +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + + +// The month and year labels. +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-weight: $ms-font-weight-light; + font-size: 21px; + color: $ms-color-themePrimary; + margin-top: -1px; + + &:hover { + color: $ms-color-themeDark; + cursor: pointer; + } +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + + +// The calendar table of dates. +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; + + td { + margin: 0; + padding: 0; + + &:hover { outline: 1px solid transparent; } + } +} + + +// The days on the calendar. +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-weight: $ms-font-weight-regular; + font-size: 15px; + color: $ms-color-neutralPrimary; +} + + +// Today. +.ms-DatePicker-day--today { + position: relative; + background-color: $ms-color-themeLight; +} + + +// Disabled day. +.ms-DatePicker-day--disabled::before { + border-top-color: $ms-color-neutralTertiary; +} + + +// Out of focus days. +.ms-DatePicker-day--outfocus { + color: $ms-color-neutralTertiary; + font-weight: $ms-font-weight-regular; +} + + +// Hovered date picker items. +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: $ms-color-black; + background: $ms-color-neutralLight; +} + + +// Highlighted and hovered/focused dates. +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: $ms-color-white; + background: $ms-color-themePrimary; +} + + +// Disabled and highlighted dates. +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: $ms-color-neutralTertiary; +} + + +// Month and year pickers, hidden on small screens by default. +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + + +// Month and year previous/next components. +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + font-size: 21px; + color: $ms-color-neutralSecondary; + position: relative; + top: 3px; + + &:hover { + color: $ms-color-neutralDark; + cursor: pointer; + outline: 1px solid transparent; + } +} + +// Without modifying the Pickadate JS, this transparent +// button is necessary to toggle the month view. +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0; + position: absolute; + top: 0; + width: 140px; + z-index: $ms-zIndex-middle; + cursor: pointer; +} + + +// Text showing the currently-selected year. +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: $ms-font-weight-semilight; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +// The current year is blue and actionable. +.ms-DatePicker-currentYear { + color: $ms-color-themePrimary; + + &:hover { + color: $ms-color-themeDark; + cursor: pointer; + } +} + + +// A grid of month or year options, which pushes them over +// five pixels for horizontal centering and moves them down. +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +// Button to select a different month. +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: $ms-color-neutralLighter; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: $ms-font-weight-regular; + font-size: 13px; + color: $ms-color-neutralPrimary; + text-align: center; + + &:hover { + background-color: $ms-color-neutralTertiaryAlt; + outline: 1px solid transparent; + } + + &.is-highlighted { + background-color: $ms-color-neutralPrimary; + color: $ms-color-white; + } +} + + +// Button to navigate to the current date. +.ms-DatePicker-goToday { + bottom: 9px; + color: $ms-color-themePrimary; + cursor: pointer; + font-weight: $ms-font-weight-semilight; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; + + &:hover { + outline: 1px solid transparent; + } +} + +// State: The picker is showing the year components. +.ms-DatePicker.is-pickingYears { + + // Hide the day picking components. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: none; + } + + // Hide the month picking components. + .ms-DatePicker-monthPicker { + display: none; + } + + // Show the year picking components. + .ms-DatePicker-yearPicker { + display: block; + } + +} + +// 460px and up. +// +// On screens that can fit it, we show the month picker next to the day picker at all times. +@media (min-width: 460px) { + + .ms-DatePicker-holder { + width: 440px; + } + + + // Update header text styles. + .ms-DatePicker-month, + .ms-DatePicker-year { + font-weight: $ms-font-weight-semilight; + font-size: 17px; + color: $ms-color-neutralPrimary; + + &:hover { + color: $ms-color-neutralPrimary; + cursor: default; + } + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + // Contains the calendar view for picking a day. + .ms-DatePicker-dayPicker { + @include ms-u-borderBox; + border-right: 1px solid $ms-color-neutralLight; + width: 220px; + margin: -10px 0; + padding: 10px 0; + } + + // Show the month picker. + .ms-DatePicker-monthPicker { + display: block; + } + + // Style the the month and year pickers. + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + // Size the month components to the day picker's new width + .ms-DatePicker-monthComponents { + width: 210px; + } + + // Size and position of the month and year labels. + .ms-DatePicker-month { + margin-left: 12px; + } + + + // Calendar day cells are smaller. + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-weight: $ms-font-weight-semibold; + font-size: 12px; + } + + + // Reduce the size of arrows to change month/year. + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + + // This component is only used on small displays. + .ms-DatePicker-toggleMonthView { + display: none; + } + + + // Position the current year and decade labels. + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + + // Reduce the size of the month buttons. + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + + &:hover { + outline: 1px solid transparent; + } + } + + + // Position the "Go to today" button below the month picker. + .ms-DatePicker-goToday { + @include ms-u-borderBox; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + // State: The picker is showing the year components. + // On larger screens the calendar will remain and the years + // will replace the months. + .ms-DatePicker.is-pickingYears { + + // On large screens, we need to keep the day picker + // and month components in view. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: block; + } + + // Hide the month picking components. + .ms-DatePicker-monthPicker { + display: none; + } + + // Show the year picking components. + .ms-DatePicker-yearPicker { + display: block; + } + } +} + +// On smaller screens the month button toggles to the picking months state. +@media (max-width: 459px) { + + // State: The picker is showing the month components. + .ms-DatePicker.is-pickingMonths { + + // Hide the day picking components. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: none; + } + + // Show the month picking components. + .ms-DatePicker-monthPicker { + display: block; + } + } +} diff --git a/dist/components/DetailsList/DetailsList.hbs b/dist/components/DetailsList/DetailsList.hbs new file mode 100644 index 00000000..6c13ef2d --- /dev/null +++ b/dist/components/DetailsList/DetailsList.hbs @@ -0,0 +1,115 @@ + + + + +
    + +
    + + +
    +
    + + +
    +
    +
    + +
    +
    + + +
    +
    +
    + +
    +
    + + +
    +
    +
    + +
    +
    + + +
    +
    +
    +
    +
    + + + +
    + +
    +
    + + + +
    Commissioned Research
    +
    Yesterday, 3:34pm
    +
    Alton Lafferty
    +
    Editor
    + + +
    + + +
    +
    + + + +
    Commissioned Research
    +
    Yesterday, 3:34pm
    +
    Alex Darrow
    +
    Editor
    + + +
    + +
    +
    diff --git a/dist/components/DetailsList/DetailsList.json b/dist/components/DetailsList/DetailsList.json new file mode 100644 index 00000000..0eb1c58e --- /dev/null +++ b/dist/components/DetailsList/DetailsList.json @@ -0,0 +1,13 @@ +{ + "name": "DetailsList", + "notes": "", + "description": "DetailsList is a derivative of List and provides a sortable, filterable, justified table for rendering large sets of items.", + "template": "DetailsList.html", + "class": "ms-DetailsList", + "branches": [ + { + "name": "Default", + "default": true + } + ] +} diff --git a/dist/components/DetailsList/DetailsList.scss b/dist/components/DetailsList/DetailsList.scss new file mode 100644 index 00000000..9b76d498 --- /dev/null +++ b/dist/components/DetailsList/DetailsList.scss @@ -0,0 +1,340 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Styles for details list + +// Variables +$rowHeight: 36px; +$selectedColor: $ms-color-themeLighter; +$selectedHoverColor: $ms-color-themeLight; +$focusedBorderColor: $ms-color-neutralTertiary; +$selectedColor: $ms-color-themeLighter; +$selectedHoverColor: $ms-color-themeLight; +$unselectedHoverColor: $ms-color-themeLighterAlt; + +//== DetailsList +// +.ms-DetailsList { + position: relative; +} + +.ms-DetailsList.is-horizontalConstrained { + overflow-x: auto; + overflow-y: inherit; +} + +.ms-DetailsList-cell { + word-break: break-word; +} + + +//== DetailsHeader +// +.ms-DetailsHeader { + display: inline-block; + min-width: 100%; + height: $rowHeight; + line-height: $rowHeight; + white-space: nowrap; + padding-bottom: 1px; + border-bottom: 1px solid $ms-color-neutralLight; + margin-bottom: 1px; + cursor: default; + + @include user-select(none); + + &.is-singleSelect { + padding-left: 40px; + } + + &.is-resizingColumn .ms-DetailsHeader-sizerCover { + background: transparent; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 99; + cursor: col-resize; + } +} + +.ms-DetailsHeader-cell.is-check .ms-Check-circle { + visibility: hidden; +} + +.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, +.ms-DetailsHeader.is-allSelected .ms-Check-circle { + visibility: visible; +} + +.ms-DetailsHeader-cellWrapper { + display: inline-block; + position: relative; +} + +.ms-DetailsHeader-cellSizeWrapper { + display: inline-block; + vertical-align: top; + margin-right: 16px; + + &:last-child { + margin-right: 0; + } +} + +.ms-DetailsHeader-filterChevron.ms-Icon { + color: $ms-color-neutralTertiary; + padding-left: 4px; + vertical-align: middle; +} + +.ms-DetailsHeader-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + color: $ms-color-neutralTertiary; + border: 0; + background: none; + line-height: inherit; + margin: 0; + font-size: inherit; + font-family: inherit; + text-align: left; + height: $rowHeight; + vertical-align: top; + + &.is-check { + position: relative; + padding: 8px 10px; + margin: 0; + } + + &:focus { + outline: transparent; + } + + &.is-sortable { + color: $ms-color-black; + cursor: default; + + &:hover { + background-color: $ms-color-neutralLight; + } + } + + &.is-filter { + position: absolute; + right: 0; + width: 20px; + top: 0; + bottom: 0; + padding: 0; + text-align: center; + color: $ms-color-black; + + &:hover { + background-color: $ms-color-neutralLight; + } + } + + &.is-filter::before { + content: ''; + position: absolute; + border-left: 1px solid $ms-color-neutralTertiary; + top: 10px; + bottom: 10px; + left: 0; + } + + &.is-sizer { + position: absolute; + width: 16px; + cursor: col-resize; + bottom: 0; + top: 0; + height: inherit; + z-index: 99; + } + + &.is-sorted.is-sortable .ms-DetailsHeader-sortArrow { + display: inline; + } + + &is-sortedDescending .ms-DetailsHeader-sortArrow { + transform: rotate(180deg); + } +} + +.ms-DetailsHeader-cell.is-resizing.is-sizer::after, +.ms-DetailsHeader-cell.is-sizer:hover::after { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 1px; + background: $ms-color-neutralLight; + border: 1px solid $ms-color-white; +} + +.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsHeader-cell:focus::before { + content: ''; + pointer-events: none; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border: 1px solid $ms-color-neutralTertiary; +} + +.ms-DetailsHeader-sortArrow.ms-Icon { + font-size: 12px; + margin-right: 4px; + display: none; + color: $ms-color-neutralTertiary; +} + + +//== DetailsRow +// +.ms-DetailsRow { + position: relative; + display: inline-block; + min-width: 100%; + min-height: $rowHeight; + vertical-align: top; + white-space: nowrap; + padding: 10px 0; + + @include user-select(none); + + cursor: default; + box-sizing: border-box; + + &:focus { + outline: transparent; + } + + &.ms-DetailsRow.is-selected { + background: $selectedColor; + } +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsRow:hover { + background: $unselectedHoverColor; +} + +.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsRow.is-selected:hover { + background: $selectedHoverColor; +} + +.ms-DetailsRow-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + vertical-align: top; + white-space: normal; + word-break: break-word; + margin-right: 16px; + + &.is-clipped { + overflow: hidden; + } +} + +.ms-DetailsRow-cell:last-child { + margin-right: 0; +} + +.ms-DetailsRow-cellIcon { + display: inline-block; + margin-right: 6px; + position: relative; + bottom: -2px; +} + +.ms-DetailsRow-check { + display: inline-block; + cursor: default; + padding: 10px; + margin: -10px 0; + box-sizing: border-box; + vertical-align: top; + background: none; + border: 0; + visibility: hidden; + + &:focus { + outline: transparent; + } +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow.is-selected .ms-DetailsRow-check { + visibility: visible; +} + +.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox, +// TODO: Scope this state to *not* apply when wrapped in ms-Fabric +.ms-DetailsRow:focus .ms-DetailsRow-focusBox { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: 1px solid $focusedBorderColor; +} + +.ms-DetailsRow-cellMeasurer { + position: absolute; + visibility: hidden; + white-space: nowrap; + top: -1000000000; +} + +//== Check +// +.ms-Check { + display: inline-block; + cursor: default; + line-height: 0; + vertical-align: top; + + &.is-checked { + + .ms-Check-circle { + fill: $ms-color-themePrimary; + stroke: $ms-color-white; + stroke-width: 1px; + } + + .ms-Check-check { + stroke: $ms-color-white; + } + } +} + +.ms-Check-circle { + fill: $ms-color-white; + stroke: $ms-color-neutralTertiaryAlt; +} + +.ms-Check-check { + stroke: $ms-color-neutralTertiaryAlt; +} diff --git a/dist/components/Dialog/Dialog.hbs b/dist/components/Dialog/Dialog.hbs new file mode 100644 index 00000000..f3c8fab8 --- /dev/null +++ b/dist/components/Dialog/Dialog.hbs @@ -0,0 +1,30 @@ + + +
    + {{#if props.closeIcon}} + + {{/if}} +
    {{props.title}}
    +
    + {{#if props.subText}} +

    {{props.subText}}

    + {{/if}} + {{#if props.components}} + {{#each props.components}} + {{renderPartial component props}} + {{/each}} + {{/if}} +
    + {{#if props.actions}} +
    + {{#each props.actions}} + {{renderPartial component props}} + {{/each}} +
    + {{/if}} +
    diff --git a/dist/components/Dialog/Dialog.json b/dist/components/Dialog/Dialog.json new file mode 100644 index 00000000..0a3aa60c --- /dev/null +++ b/dist/components/Dialog/Dialog.json @@ -0,0 +1,9 @@ +{ + "name": "Dialog", + "dependencies": [ + "Button", + "CheckBox", + "Overlay", + "ContextualHost" + ] +} diff --git a/dist/components/Dialog/Dialog.scss b/dist/components/Dialog/Dialog.scss new file mode 100644 index 00000000..d9d29ac4 --- /dev/null +++ b/dist/components/Dialog/Dialog.scss @@ -0,0 +1,121 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Dialog styles + +.ms-Dialog { + @include ms-baseFont; + @include drop-shadow(0, 0, 5px, 0, .4); + background-color: $ms-color-white; + display: none; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: $ms-zIndex-front; + position: fixed; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} + +.ms-Dialog.is-open { + display: block; +} + +.ms-Dialog-title { + font-size: $ms-font-size-xl; + font-weight: $ms-font-weight-light; + margin-bottom: 24px; +} + +.ms-Dialog-content { + position: relative; +} + +.ms-Dialog-subText { + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-semilight; + line-height: 1.5; +} + +.ms-Dialog-actions { + margin-top: 24px; + text-align: right; +} + +//= Modifier: Multiline button dialog +// +.ms-Dialog--multiline { + .ms-Dialog-title { + font-size: $ms-font-size-xxl; + } +} + +//= Modifier: Large header dialog +// +.ms-Dialog.ms-Dialog--lgHeader { + .ms-Dialog-title { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + font-size: $ms-font-size-xxl; + font-weight: $ms-font-weight-light; + padding: 28px 24px; + margin-top: -28px; + margin-left: -24px; + margin-right: -24px; + } +} + +// Close button, hidden by default +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + right: 12px; + top: 12px; + z-index: $ms-zIndex-front; + + .ms-Icon.ms-Icon--Cancel { + color: $ms-color-neutralSecondary; + font-size: 16px; + } +} + +// Add margin bottom between compound buttons +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +//= Modifier: Dialog with close button +// +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) { + // Push the right side over so the icon doesn't overlap the text + .ms-Dialog-title { + margin-right: 20px; + } + + // Show the close button + .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; + } +} + +@media (min-width: $ms-screen-md-min) { + // Allow wider dialog on larger screens + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} diff --git a/dist/components/DialogHost/DialogHost.hbs b/dist/components/DialogHost/DialogHost.hbs new file mode 100644 index 00000000..5e1bb727 --- /dev/null +++ b/dist/components/DialogHost/DialogHost.hbs @@ -0,0 +1,10 @@ + +
    +
    + {{#if @partial-block}} {{> @partial-block }} {{/if}} +
    +
    \ No newline at end of file diff --git a/dist/components/DialogHost/DialogHost.json b/dist/components/DialogHost/DialogHost.json new file mode 100644 index 00000000..9651c4df --- /dev/null +++ b/dist/components/DialogHost/DialogHost.json @@ -0,0 +1,3 @@ +{ + "name": "DialogHost" +} diff --git a/dist/components/DialogHost/DialogHost.scss b/dist/components/DialogHost/DialogHost.scss new file mode 100644 index 00000000..fdf4b4bb --- /dev/null +++ b/dist/components/DialogHost/DialogHost.scss @@ -0,0 +1,15 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +.ms-DialogHost { + @include ms-baseFont; + @include drop-shadow; + background-color: $ms-color-white; + box-sizing: border-box; + line-height: 1.35; + width: 288px; + position: relative; + text-align: left; + outline: 1px solid transparent; +} diff --git a/dist/components/Dropdown/Dropdown.hbs b/dist/components/Dropdown/Dropdown.hbs new file mode 100644 index 00000000..3a1404f9 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.hbs @@ -0,0 +1,16 @@ + + + + +
    + + + +
    \ No newline at end of file diff --git a/dist/components/Dropdown/Dropdown.json b/dist/components/Dropdown/Dropdown.json new file mode 100644 index 00000000..f10c83ad --- /dev/null +++ b/dist/components/Dropdown/Dropdown.json @@ -0,0 +1,6 @@ +{ + "name": "Dropdown", + "dependencies": [ + "Label" + ] +} diff --git a/dist/components/Dropdown/Dropdown.scss b/dist/components/Dropdown/Dropdown.scss new file mode 100644 index 00000000..6a5a82e3 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.scss @@ -0,0 +1,254 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Dropdown styles + +// Mixin for high contrast mode link states +@mixin highContrastListItemState { + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + border-color: $ms-color-contrastBlackSelected; + color: $ms-color-black; + + &:focus { + border-color: $ms-color-black; + } + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + border-color: $ms-color-contrastWhiteSelected; + color: $ms-color-white; + } +} + +.ms-Dropdown { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + margin-bottom: 10px; + position: relative; + outline: 0; + + &:hover, + &:focus, + &:active { + .ms-Dropdown-title, + .ms-Dropdown-caretDown { + color: $ms-color-black; + } + } + + &:hover, + &:active { + .ms-Dropdown-title { + border-color: $ms-color-neutralSecondaryAlt; + } + } + + &:focus { + .ms-Dropdown-title { + border-color: $ms-color-themePrimary; + } + } + + .ms-Label { + display: inline-block; + margin-bottom: 8px; + } +} + +//== State: A disabled dropdown +.ms-Dropdown.is-disabled { + .ms-Dropdown-title { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + color: $ms-color-neutralTertiary; + cursor: default; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + color: $ms-color-contrastWhiteDisabled; + } + } + + .ms-Dropdown-caretDown { + color: $ms-color-neutralTertiary; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } + } +} + +// When the dropdown is opened +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: absolute; +} + +// Adjustments for when the dropdown is open as a panel on small screens +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; + + .ms-Dropdown-item { + padding: 7px 16px; + overflow: hidden; + text-overflow: ellipsis; + } + + &::before { + content: none; + border: 0; + } +} + +// Hide the original dropdown +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: $ms-color-neutralDark; + font-size: $ms-icon-size-s; + position: absolute; + right: 13px; + bottom: 9px; + z-index: 1; + pointer-events: none; +} + +// Style the new, replacement component +.ms-Dropdown-title { + @include ms-u-normalize; + background: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + cursor: pointer; + display: block; + height: 32px; + padding: 5px 32px 0 10px; + position: relative; + overflow: hidden; + + &.ms-Dropdown-truncator { + height: auto; + display: block; + position: absolute; + visibility: hidden; + } +} + +// Container for the dropdown items, displayed as a panel on small screens. +.ms-Dropdown-items { + @include ms-u-normalize; + @include drop-shadow; + background-color: $ms-color-white; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + z-index: ($ms-zIndex-Dropdown + $ms-zIndex-back); + overflow-y: scroll; + + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; + + &::before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid $ms-color-neutralLight; + } + + @media screen and (-ms-high-contrast: active) { + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 36px; + padding: 7px 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-white; + } + + &:hover { + background-color: $ms-color-neutralLight; + color: $ms-color-black; + + @include highContrastListItemState; + } + + &:active { + background-color: $ms-color-neutralLight; + border-color: $ms-color-themePrimary; + color: $ms-color-black; + } + + &.is-disabled { + background: $ms-color-white; + color: $ms-color-neutralTertiary; + cursor: default; + } +} + +//== State: A selected dropdown item +// Note: .ms-Dropdown-item--selected is deprecated and will be removed in a future version. +// Use .is-selected instead. +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: $ms-color-themeLight; + color: $ms-color-black; + + &:hover { + background-color: $ms-color-themeLight; + } + + @include highContrastListItemState; +} diff --git a/dist/components/FacePile/FacePile.hbs b/dist/components/FacePile/FacePile.hbs new file mode 100644 index 00000000..2b7fcdf2 --- /dev/null +++ b/dist/components/FacePile/FacePile.hbs @@ -0,0 +1,19 @@ + + + +
    + + + {{#each props.members}} + {{> Persona props=props}} + {{/each}} + + +
    \ No newline at end of file diff --git a/dist/components/FacePile/FacePile.json b/dist/components/FacePile/FacePile.json new file mode 100644 index 00000000..da44785d --- /dev/null +++ b/dist/components/FacePile/FacePile.json @@ -0,0 +1,13 @@ +{ + "name": "FacePile", + "dependencies": [ + "Overlay", + "Link", + "Panel", + "PeoplePicker", + "Persona", + "PersonaCard", + "Spinner", + "ContextualHost" + ] +} diff --git a/dist/components/FacePile/FacePile.scss b/dist/components/FacePile/FacePile.scss new file mode 100644 index 00000000..e2df3ae1 --- /dev/null +++ b/dist/components/FacePile/FacePile.scss @@ -0,0 +1,107 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// FacePile styles + +.ms-FacePile { + @include ms-baseFont; + position: relative; + height: 32px; + width: auto; + + .ms-FacePile-personaCardHost { + display: none; + } +} + +.ms-FacePile-addButton { + @include button-reset; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; + + .ms-Persona-presence, + .ms-Persona-details { + display: none; + } +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + font-size: $ms-font-size-l - 1; + + &:hover, + &:focus { + background-color: $ms-color-themeDark; + } + + &:active { + background-color: $ms-color-themeDarker; + } + + &:disabled { + background-color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralSecondary; + display: none; + + &.is-active { + display: block; + } + + &:hover { + color: $ms-color-neutralDark; + } + + &:disabled { + color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: $ms-font-size-m; +} + +//== Panels +// Overflow panel - only show member list +.ms-FacePile-panel.ms-FacePile-panel--overflow { + .ms-Panel-headerText, + .ms-PeoplePicker-searchBox, + .ms-PeoplePicker-results, + .ms-PeoplePicker-resultAction { + display: none; + } + + .ms-PeoplePicker-selectedHeader { + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + line-height: 82px; + height: 74px; + text-transform: none; + } +} diff --git a/dist/components/Label/Label.hbs b/dist/components/Label/Label.hbs new file mode 100644 index 00000000..73a870a1 --- /dev/null +++ b/dist/components/Label/Label.hbs @@ -0,0 +1,6 @@ + + + diff --git a/dist/components/Label/Label.json b/dist/components/Label/Label.json new file mode 100644 index 00000000..46d39a60 --- /dev/null +++ b/dist/components/Label/Label.json @@ -0,0 +1,3 @@ +{ + "name": "Label" +} diff --git a/dist/components/Label/Label.scss b/dist/components/Label/Label.scss new file mode 100644 index 00000000..f5d94f4e --- /dev/null +++ b/dist/components/Label/Label.scss @@ -0,0 +1,40 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Form field label styles + +@mixin ms-Label-is-disabled { + color: $ms-color-neutralTertiary; +} + +@mixin ms-Label-is-required { + &::after { + content: ' *'; + color: $ms-color-error; + } +} + +.ms-Label { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; + box-sizing: border-box; + display: block; + padding: 5px 0; + + &.is-required { + @include ms-Label-is-required; + } + + &.is-disabled { + @include ms-Label-is-disabled; + } +} diff --git a/dist/components/Link/Link.hbs b/dist/components/Link/Link.hbs new file mode 100644 index 00000000..3965e27d --- /dev/null +++ b/dist/components/Link/Link.hbs @@ -0,0 +1,11 @@ + + + +{{props.label}} + diff --git a/dist/components/Link/Link.json b/dist/components/Link/Link.json new file mode 100644 index 00000000..13c35771 --- /dev/null +++ b/dist/components/Link/Link.json @@ -0,0 +1,3 @@ +{ + "name": "Link" +} diff --git a/dist/components/Link/Link.scss b/dist/components/Link/Link.scss new file mode 100644 index 00000000..cd2586bd --- /dev/null +++ b/dist/components/Link/Link.scss @@ -0,0 +1,34 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Link (anchor) styles + + +@mixin ms-Link { + @include ms-baseFont; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + color: $ms-color-themePrimary; + text-decoration: none; + cursor: pointer; + outline: none; + + &:hover, + &:focus { + color: $ms-color-themeDarker; + } + + &:active { + color: $ms-color-themePrimary; + } +} + +.ms-Link { + @include ms-Link; +} diff --git a/dist/components/List/List.hbs b/dist/components/List/List.hbs new file mode 100644 index 00000000..4707e355 --- /dev/null +++ b/dist/components/List/List.hbs @@ -0,0 +1,11 @@ + + + + diff --git a/dist/components/List/List.json b/dist/components/List/List.json new file mode 100644 index 00000000..b453a215 --- /dev/null +++ b/dist/components/List/List.json @@ -0,0 +1,6 @@ +{ + "name": "List", + "dependencies": [ + "ListItem" + ] +} diff --git a/dist/components/List/List.scss b/dist/components/List/List.scss new file mode 100644 index 00000000..3f0663b4 --- /dev/null +++ b/dist/components/List/List.scss @@ -0,0 +1,19 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// List styles + +.ms-List { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + list-style-type: none; +} diff --git a/dist/components/ListItem/ListItem.hbs b/dist/components/ListItem/ListItem.hbs new file mode 100644 index 00000000..6da26acc --- /dev/null +++ b/dist/components/ListItem/ListItem.hbs @@ -0,0 +1,23 @@ + + + +
  • + {{#if props.image}}
    {{/if}} + {{#if props.primaryText}}{{props.primaryText}}{{/if}} + {{#if props.secondaryText}}{{props.secondaryText}}{{/if}} + {{#if props.tertiaryText}}{{props.tertiaryText}}{{/if}} + {{#if props.metaText}}{{props.metaText}}{{/if}} + {{#if props.listIcon}}
    {{/if}} +
    +
    + {{#each props.actions}}{{/each}} +
    +
    +
    +
    +
    +
    • + diff --git a/dist/components/ListItem/ListItem.json b/dist/components/ListItem/ListItem.json new file mode 100644 index 00000000..51a3ba44 --- /dev/null +++ b/dist/components/ListItem/ListItem.json @@ -0,0 +1,6 @@ +{ + "name": "ListItem", + "dependencies": [ + "List" + ] +} diff --git a/dist/components/ListItem/ListItem.scss b/dist/components/ListItem/ListItem.scss new file mode 100644 index 00000000..1a8dff97 --- /dev/null +++ b/dist/components/ListItem/ListItem.scss @@ -0,0 +1,240 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// List item styles + + +.ms-ListItem { + @include ms-baseFont; + @include ms-u-normalize; + @include ms-u-clearfix; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + @include noWrap; + display: block; +} + +.ms-ListItem-primaryText { + color: $ms-color-neutralDark; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xl; + padding-right: 80px; // Prevent overlap with up to three actions. + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: $ms-color-neutralPrimary; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-m; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: $ms-color-neutralSecondaryAlt; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: $ms-color-neutralPrimary; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xs; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; // Images sit closer to the edge than text. + margin-right: 10px; + width: 70px; + background-color: $ms-color-neutralPrimary; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; // Up to three actions. + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: $ms-color-neutralTertiary; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; + + .ms-Icon { + vertical-align: top; + } + + &:hover { + color: $ms-color-neutralSecondary; + outline: 1px solid transparent; + } +} + + +//== State: Unread list item +// +.ms-ListItem.is-unread { + border-left: 3px solid $ms-color-themePrimary; + padding-left: 27px; // Reduce padding to allow room for border. + + .ms-ListItem-secondaryText, + .ms-ListItem-metaText { + color: $ms-color-themePrimary; + font-weight: $ms-font-weight-semibold; + } +} + + +//== State: Unseen list item +// +.ms-ListItem.is-unseen { + &::after { + border-right: 10px solid transparent; + border-top: 10px solid $ms-color-themePrimary; + left: 0; + position: absolute; + top: 0; + } +} + + +//== State: Selectable list item +// +.ms-ListItem.is-selectable { + .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; + } + + .ms-ListItem-image { + margin-left: 0; + } + + &:hover { + background-color: $ms-color-neutralLight; + cursor: pointer; + outline: 1px solid transparent; + + // Insert the empty box. + &::before { + @include ms-Icon; + position: absolute; + top: 14px; + left: 7px; + height: 15px; + width: 15px; + border: 1px solid $ms-color-neutralSecondaryAlt; + } + } +} + + +//== State: Selected list item +// +.ms-ListItem.is-selected { + // Insert the checkmark. + &::before { + border: 1px solid transparent; + } + + &::before, + &:hover::before { + @include ms-Icon; + content: '\e73A'; + font-size: $ms-font-size-l; + color: $ms-color-neutralSecondaryAlt; + position: absolute; + top: 23px; + left: 7px; + border: 0; + } + + &:hover { + background-color: $ms-color-themeLight; + outline: 1px solid transparent; + } +} + + +//== Modifier: Document list item +// +.ms-ListItem.ms-ListItem--document { + padding: 0; + + // The icon for a file or folder in the items list. This may + // be an .ms-Icon or a specific modifier that loads an image. + .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; + } + + // If the item icon is an .ms-Icon, position and color it appropriately. + .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: $ms-color-neutralSecondary; + } + + // Primary text, typically the name. + .ms-ListItem-primaryText { + @include noWrap; + font-size: $ms-font-size-m; + padding-top: 15px; + padding-right: 0; + position: static; + } + + // Secondary text, typically the modified date or some other metadata. + .ms-ListItem-secondaryText { + @include noWrap; + color: $ms-color-neutralSecondary; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-xs; + padding-top: 6px; + } +} diff --git a/dist/components/MessageBanner/MessageBanner.hbs b/dist/components/MessageBanner/MessageBanner.hbs new file mode 100644 index 00000000..074573c7 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.hbs @@ -0,0 +1,24 @@ + + + +
    +
    +
    +
    + {{props.message}} +
    +
    + +
    + {{renderPartial props.button.name props.button.props}} +
    +
    + +
    diff --git a/dist/components/MessageBanner/MessageBanner.json b/dist/components/MessageBanner/MessageBanner.json new file mode 100644 index 00000000..87c9aad0 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.json @@ -0,0 +1,17 @@ +{ + "name": "MessageBanner", + "dependencies": [ + "Button" + ], + "props": { + "message": "You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.", + "button": { + "name": "Button", + "props": { + "label": "Get More Storage", + "modifier": "primary", + "tag": "button" + } + } + } +} diff --git a/dist/components/MessageBanner/MessageBanner.scss b/dist/components/MessageBanner/MessageBanner.scss new file mode 100644 index 00000000..975160d9 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.scss @@ -0,0 +1,131 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// MessageBanner Styles + +$MessageBanner-height: 52px; +$MessageBanner-iconSize: 40px; + +.ms-MessageBanner { + @include ms-baseFont; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; + position: relative; + border-bottom: 1px solid $ms-color-neutralSecondaryAlt; + background-color: $ms-color-themeLighterAlt; + min-width: 320px; + width: 100%; + height: $MessageBanner-height; + text-align: center; + overflow: hidden; + @include ms-u-slideDownIn20; + + .ms-Icon { + font-size: 16px; + } + + &.hide { + @include ms-u-slideUpOut20; + } + + &.is-hidden { + display: none; + } +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: $MessageBanner-height; + width: $MessageBanner-iconSize; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: $MessageBanner-height; + color: $ms-color-neutralSecondary; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; + + &.is-visible { + display: inline-block; + } +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; + + .ms-Button { + color: $ms-color-white; + } +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; + + .ms-MessageBanner-clipper { + white-space: normal; + } +} + + +@media screen and (max-width: 479px) { + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + display: inline-block; + padding: 0; + margin-left: -5px; + width: 20px; + + .ms-Icon { + color: $ms-color-themePrimary; + } + } +} diff --git a/dist/components/MessageBar/MessageBar.hbs b/dist/components/MessageBar/MessageBar.hbs new file mode 100644 index 00000000..41507610 --- /dev/null +++ b/dist/components/MessageBar/MessageBar.hbs @@ -0,0 +1,17 @@ + + + +
    +
    +
    + +
    +
    + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
    + Hyperlink string +
    +
    +
    diff --git a/dist/components/MessageBar/MessageBar.json b/dist/components/MessageBar/MessageBar.json new file mode 100644 index 00000000..0a8cba9c --- /dev/null +++ b/dist/components/MessageBar/MessageBar.json @@ -0,0 +1,6 @@ +{ + "name": "MessageBar", + "dependencies": [ + "Link" + ] +} diff --git a/dist/components/MessageBar/MessageBar.scss b/dist/components/MessageBar/MessageBar.scss new file mode 100644 index 00000000..2ae7247b --- /dev/null +++ b/dist/components/MessageBar/MessageBar.scss @@ -0,0 +1,90 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// MessageBar Styles + +$MessageBar-padding: 8px; + +.ms-MessageBar { + @include ms-baseFont; + padding: $MessageBar-padding; + display: table; + @include ms-bgColor-info; + + .ms-Link { + font-size: $ms-font-size-s; + } +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-right: $MessageBar-padding; + font-size: $ms-icon-size-m; + @include ms-fontColor-neutralSecondaryAlt; +} + +.ms-MessageBar-text { + @include ms-font-s; +} + + +//== Modifier: Warning message +// +.ms-MessageBar.ms-MessageBar--warning { + @include ms-bgColor-warning; +} + + +//== Modifier: Severe Warning message +// +.ms-MessageBar.ms-MessageBar--severeWarning { + @include ms-bgColor-severeWarning; + + .ms-MessageBar-icon { + @include ms-fontColor-severeWarning; + } +} + + +//== Modifier: Error message +// +.ms-MessageBar.ms-MessageBar--error { + @include ms-bgColor-error; + + .ms-MessageBar-icon { + @include ms-fontColor-error; + } +} + + +//== Modifier: Blocked message +// +.ms-MessageBar.ms-MessageBar--blocked { + @include ms-bgColor-error; + + .ms-MessageBar-icon { + @include ms-fontColor-error; + } +} + + +//== Modifier: Success message +// +.ms-MessageBar.ms-MessageBar--success { + @include ms-bgColor-success; + + .ms-MessageBar-icon { + @include ms-fontColor-green; + } +} diff --git a/dist/components/OrgChart/OrgChart.hbs b/dist/components/OrgChart/OrgChart.hbs new file mode 100644 index 00000000..91a3ee3c --- /dev/null +++ b/dist/components/OrgChart/OrgChart.hbs @@ -0,0 +1,22 @@ + + + +
    + {{#each props.groups}} +
    + {{#if title}}
    {{title}}
    {{/if}} +
      + {{#each personas}} +
    • + +
      • + {{/each}} +
    +
    + {{/each}} +
    \ No newline at end of file diff --git a/dist/components/OrgChart/OrgChart.json b/dist/components/OrgChart/OrgChart.json new file mode 100644 index 00000000..c8fb308e --- /dev/null +++ b/dist/components/OrgChart/OrgChart.json @@ -0,0 +1,6 @@ +{ + "name": "OrgChart", + "dependencies": [ + "Persona" + ] +} diff --git a/dist/components/OrgChart/OrgChart.scss b/dist/components/OrgChart/OrgChart.scss new file mode 100644 index 00000000..3338f2ee --- /dev/null +++ b/dist/components/OrgChart/OrgChart.scss @@ -0,0 +1,49 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Org chart styles + + +.ms-OrgChart { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; +} + +.ms-OrgChart-groupTitle { + color: $ms-color-neutralSecondary; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + @include button-reset; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; +} diff --git a/dist/components/Overlay/Overlay.hbs b/dist/components/Overlay/Overlay.hbs new file mode 100644 index 00000000..8195ea83 --- /dev/null +++ b/dist/components/Overlay/Overlay.hbs @@ -0,0 +1,7 @@ + + + +
    diff --git a/dist/components/Overlay/Overlay.json b/dist/components/Overlay/Overlay.json new file mode 100644 index 00000000..74e58eb2 --- /dev/null +++ b/dist/components/Overlay/Overlay.json @@ -0,0 +1,3 @@ +{ + "name": "Overlay" +} diff --git a/dist/components/Overlay/Overlay.scss b/dist/components/Overlay/Overlay.scss new file mode 100644 index 00000000..72e32502 --- /dev/null +++ b/dist/components/Overlay/Overlay.scss @@ -0,0 +1,37 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Modal overlay styles + + +.ms-Overlay { + @include ms-baseFont; + background-color: $ms-color-whiteTranslucent40; + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: $ms-zIndex-back; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +//== Modifier: Dark overlay +// +.ms-Overlay--dark { + background-color: $ms-color-blackTranslucent40; +} + +.ms-u-overflowHidden { + overflow: hidden; +} diff --git a/dist/components/Panel/Panel.hbs b/dist/components/Panel/Panel.hbs new file mode 100644 index 00000000..f02db754 --- /dev/null +++ b/dist/components/Panel/Panel.hbs @@ -0,0 +1,16 @@ + + +
    + +
    +

    {{props.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..f4d65bbe --- /dev/null +++ b/dist/components/Panel/Panel.scss @@ -0,0 +1,158 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Panel styles + +$ms-panel-width-sm: 272px; +$ms-panel-width-md: 340px; +$ms-panel-width-lg: 644px; +$ms-panel-width-xl: 940px; +$ms-panel-width-xxl: 1192px; + +$ms-panel-margin-md: 48px; +$ms-panel-margin-lg: 428px; +$ms-panel-margin-xl: 176px; + +$ms-panel-close-button-height: 40px; + +// The panel itself, where the content goes. +.ms-Panel { + @include ms-baseFont; + background-color: $ms-color-white; + width: 100%; + max-width: $ms-panel-width-md; + @include drop-shadow(-30px, 0, 30px, -30px, .2); + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: $ms-zIndex-front; + display: none; + height: 100%; + + // Animations -- Default (anchored right) + &.animate-in { + @include ms-u-slideLeftIn40; + } + + &.animate-out { + @include ms-u-slideRightOut40; + } + + &.is-open { + display: block; + } + + .ms-CommandBar { + padding-right: 0; + padding-left: 8px; + } +} + +//== Modifier: Medium panel (anchored right, fixed width) +// +.ms-Panel.ms-Panel--md { + max-width: $ms-panel-width-md; +} + +//== Modifier: Large panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--lg { + max-width: $ms-panel-width-lg; +} + +//== Modifier: XLarge panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--xl { + max-width: $ms-panel-width-xl; +} + +//== Modifier: XLarge panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--xxl { + max-width: $ms-panel-width-xxl; +} + +//== Modifier: Left anchored panel (anchored left, fixed width) +// Note: This panel variant should only be used for left nav. +.ms-Panel--left { + @include drop-shadow(-30px, 0, 30px, 30px, .2); + left: 0; + right: auto; + + &.animate-in { + @include ms-u-slideRightIn40; + } + + &.animate-out { + @include ms-u-slideLeftOut40; + } +} + +// The close button in the top right (x) +.ms-Panel-closeButton { + @include button-reset; + position: absolute; + right: 6px; + top: 0; + height: $ms-panel-close-button-height; + width: $ms-panel-close-button-height; + line-height: $ms-panel-close-button-height; + outline: 0; + padding: 0; + color: $ms-color-neutralSecondary; + font-size: $ms-icon-size-m; + + &:hover { + color: $ms-color-neutralPrimary; + } + + .ms-Icon--Cancel { + margin-top: 2px; + } + + @media (max-width: $ms-screen-md-max) { + font-size: $ms-icon-size-l; + line-height: $ms-icon-size-l; + height: 44px; + right: 4px; + } +} + +// Scrollable content area +.ms-Panel-contentInner { + margin-top: $ms-panel-close-button-height; + padding: 0 16px 20px; + overflow-y: auto; + height: 100%; + + @media (min-width: $ms-screen-lg-min) { + padding: 0 32px 20px; + } + + @media (min-width: $ms-screen-xxl-min) { + padding: 0 40px 20px; + } +} + +// Header text at the top of the panel. +.ms-Panel-headerText { + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; + + @media (min-width: $ms-screen-xl-min) { + margin-top: 30px; + } +} diff --git a/dist/components/PanelHost/PanelHost.hbs b/dist/components/PanelHost/PanelHost.hbs new file mode 100644 index 00000000..d61b033f --- /dev/null +++ b/dist/components/PanelHost/PanelHost.hbs @@ -0,0 +1,7 @@ + +
    + {{> Overlay }} +
    \ No newline at end of file diff --git a/dist/components/PanelHost/PanelHost.json b/dist/components/PanelHost/PanelHost.json new file mode 100644 index 00000000..3e44136f --- /dev/null +++ b/dist/components/PanelHost/PanelHost.json @@ -0,0 +1,6 @@ +{ + "name": "PanelHost", + "dependencies": [ + "Overlay" + ] +} diff --git a/dist/components/PanelHost/PanelHost.scss b/dist/components/PanelHost/PanelHost.scss new file mode 100644 index 00000000..97b4049b --- /dev/null +++ b/dist/components/PanelHost/PanelHost.scss @@ -0,0 +1,18 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// The panel covers the entire screen. +.ms-PanelHost { + @include ms-baseFont; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: $ms-zIndex-front; +} + +.ms-PanelHost .ms-Overlay { + cursor: pointer; +} diff --git a/dist/components/PeoplePicker/PeoplePicker.hbs b/dist/components/PeoplePicker/PeoplePicker.hbs new file mode 100644 index 00000000..f4ab9712 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.hbs @@ -0,0 +1,62 @@ + + + +
    +
    + {{> TextField props=props.textFieldProps}} +
    +
    + {{#each props.groups}} +
    +
    + {{title}} +
    + {{#each personas}} +
    + {{> Persona props=props}} + +
    + {{/each}} +
    + {{/each}} + {{#if props.searchMoreText}} + + {{/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..946a8070 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.scss @@ -0,0 +1,452 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// People Picker styles + +$personaItemHeight: 40px; +$ms-Persona-leftPadding: 16px; + +.ms-PeoplePicker { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + background-color: $ms-color-white; + margin-bottom: 10px; +} + +// Box that contains the search field and selected people. +.ms-PeoplePicker-searchBox { + border-bottom: 1px solid $ms-color-neutralTertiaryAlt; + cursor: text; + flex-flow: row wrap; + display: flex; + align-items: stretch; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + } + + &.is-active, + &:focus { + border-color: $ms-color-themePrimary; + } + + &:hover, + &:focus { + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + @include input-placeholder { + color: $ms-color-neutralSecondary; + } + + .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: 100%; + flex: 1; + + .ms-TextField-field { + min-height: 40px; + border: 0; + } + } +} + +// Highlight the search box when the people picker is active +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + .ms-TextField-field { + border-color: $ms-color-themePrimary; + } +} + +.ms-PeoplePicker-persona { + cursor: pointer; +} + +// The selected persona may be in an error state. +.ms-PeoplePicker-persona.has-error { + .ms-Persona-primaryText { + color: $ms-color-error; + } +} + +// Button to remove a selected person. +.ms-PeoplePicker-personaRemove { + @include button-reset; + background-color: $ms-color-neutralLighter; + color: $ms-color-neutralSecondary; + display: inline-block; + text-align: center; + height: 32px; + width: 32px; + + &:hover { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralPrimary; + cursor: pointer; + } + + &:focus { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralPrimary; + border: 1px solid $ms-color-themePrimary; + outline: none; + } +} + +// Results area, hidden by default +.ms-PeoplePicker-results { + background-color: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + margin-bottom: -1px; + padding-top: 9px; + width: 100%; + padding-left: 0; + box-sizing: border-box; +} + +// Show the results area when the people picker is active +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + + +// A group of results +.ms-PeoplePicker-resultGroup { + border-top: 1px solid $ms-color-neutralLight; + + // The first result group needs to be bumped up 1px to account for border on ms-PeoplePicker-results + &:first-child { + border-top: 0; + } +} + +// Title for a group of results (optional) +.ms-PeoplePicker-resultGroupTitle { + color: $ms-color-themePrimary; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-s; + padding-top: 8px; + padding-bottom: 8px; + text-transform: uppercase; + padding-left: $ms-Persona-leftPadding; +} + +// List of results +.ms-PeoplePicker-resultList { + @include ms-u-normalize; + margin-bottom: -1px; + list-style-type: none; // Browser default override. +} + +// A single result in the result list +.ms-PeoplePicker-result { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-left: $ms-Persona-leftPadding; + cursor: pointer; + outline: 0; + + &:hover, + &:focus { + background-color: $ms-color-neutralLight; + } + + &:focus { + box-shadow: 0 0 0 1px $ms-color-themePrimary inset; + } + + &.is-selected { + background-color: $ms-color-themeLight; + + .ms-PeoplePicker-resultAction { + &:hover { + background-color: $ms-color-themeTertiary; + } + + &:active { + background-color: $ms-color-themeTertiary; + } + } + } +} + +// Result buttons +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + @include button-reset; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px; + padding: 0 0 0 9px; + + @media (min-width: $ms-screen-md-min) { + height: 48px; + } + + &:hover { + background-color: $ms-color-neutralLight; + outline: 1px solid transparent; + } + + &:focus { + outline: 1; + } + + &.ms-PeoplePicker-resultBtn--compact { + height: 32px; + } +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; + + &:hover { + background-color: transparent; + } +} + +// Actionable icon on a result +.ms-PeoplePicker-resultAction { + @include button-reset; + display: block; + height: 100%; + transition: background-color .367s $ms-ease1; + position: absolute; + right: 0; + top: 0; + width: 40px; + text-align: center; + + .ms-Icon { + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-m-plus; + } + + &:hover { + background-color: $ms-color-neutralTertiaryAlt; + outline: 1px solid transparent; + } + + &:active { + background-color: $ms-color-neutralTertiary; + } +} + +// A result can contain additional content (usually a ms-PeoplePicker-resultList of Persona components) that is hidden initially +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +// Use the .is-expanded state to reveal the additional content +.ms-PeoplePicker-result.is-expanded { + background-color: $ms-color-neutralLighter; + margin-bottom: 11px; + + // Switch the toggle icon + .ms-PeoplePicker-resultAction .ms-Icon { + transform: rotate(180deg); + } + + // Show the content + .ms-PeoplePicker-resultAdditionalContent { + display: block; + } +} + +// After the result groups we have a button to trigger additional searches +.ms-PeoplePicker-searchMore { + @include button-reset; + height: 40px; + position: relative; + width: 100%; + + &:hover { + background-color: $ms-color-neutralLighter; + } +} + +.ms-PeoplePicker-searchMoreIcon { + font-size: $ms-font-size-xl; + height: 40px; + left: 16px; + line-height: 40px; + position: absolute; + text-align: center; + top: 0; + width: 40px; +} + +.ms-PeoplePicker-searchMoreText { + @include ms-baseFont; + font-size: $ms-font-size-m; + height: 40px; + left: 64px; + line-height: 40px; + position: absolute; + top: 0; +} + +//== Modifier: People Picker Compact +// +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact { + .ms-PeoplePicker-resultAction { + height: 32px; + width: 32px; + } + + .ms-PeoplePicker-resultGroups { + max-height: 209px; + } +} + + +//== Modifier: facePile +// +.ms-PeoplePicker.ms-PeoplePicker--facePile { + //= State: Searching in peoplepicker search field + &.is-searching { + .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; + } + + .ms-PeoplePicker-peopleListHeader { + display: none; + } + } + + .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; + + &.is-active { + display: block; + } + } + + .ms-Persona.ms-Persona--selectable { + padding: 0; + } +} + +// PeoplePicker results - facePile +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid $ms-color-neutralLight; +} + +// Personas are size xs on mobile, sm on md screens and above +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile, +.ms-PeoplePicker-selectedPeople { + @media (max-width: $ms-screen-sm-max) { + .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-s; + line-height: 32px; + } + + .ms-Persona-presence { + left: 19px; + } + + .ms-Persona-details { + padding-left: 8px; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 3px; + } + + .ms-Persona-secondaryText { + display: none; + } + } + + @media (min-width: $ms-screen-md-min) { + .ms-Persona .ms-Persona-secondaryText { + display: block; + } + } + + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + @media (min-width: $ms-screen-md-min) { + height: $personaItemHeight; + } + } + + .ms-PeoplePicker-resultAction { + @media (min-width: $ms-screen-md-min) { + height: $personaItemHeight; + } + } + + .ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; + + &.is-active { + display: block; + } + } +} + + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: $ms-color-themePrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + @include ms-u-normalize; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} diff --git a/dist/components/Persona/Persona.hbs b/dist/components/Persona/Persona.hbs new file mode 100644 index 00000000..12dd1f38 --- /dev/null +++ b/dist/components/Persona/Persona.hbs @@ -0,0 +1,48 @@ + + + +
    +
    + {{#if props.initials}} +
    {{props.initials}}
    + {{/if}} + {{#if props.image}} + + {{/if}} +
    +
    + {{#if props.icon}} + + {{/if}} +
    +
    + {{#if props.primaryText}} +
    {{props.primaryText}}
    + {{/if}} + {{#if props.secondaryText}} +
    {{props.secondaryText}}
    + {{/if}} + {{#if props.tertiaryText}} +
    {{props.tertiaryText}}
    + {{/if}} + {{#if props.optionalText}} +
    {{props.optionalText}}
    + {{/if}} +
    + {{#if props.actionIcon}} +
    + +
    + {{/if}} + {{#if props.personaCardProps}} + {{> PersonaCard props=props.personaCardProps}} + {{/if}} +
    diff --git a/dist/components/Persona/Persona.json b/dist/components/Persona/Persona.json new file mode 100644 index 00000000..c9387dc7 --- /dev/null +++ b/dist/components/Persona/Persona.json @@ -0,0 +1,7 @@ +{ + "name": "Persona", + "dependencies": [ + "PersonaCard", + "ContextualHost" + ] +} diff --git a/dist/components/Persona/Persona.scss b/dist/components/Persona/Persona.scss new file mode 100644 index 00000000..63c694e3 --- /dev/null +++ b/dist/components/Persona/Persona.scss @@ -0,0 +1,734 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Persona styles + + +// Skype presence colors +$ms-color-presence-available: #7FBA00; +$ms-color-presence-away: #FCD116; +$ms-color-presence-busy: #E81123; +$ms-color-presence-dnd-background: #E81123; +$ms-color-presence-dnd-line: #FFFFFF; +$ms-color-presence-offline: #93ABBD; +$ms-color-presence-out-of-office: $ms-color-magenta; + +// Other presence colors +$ms-color-presence-blocked-background: #DEDEDE; +$ms-color-presence-blocked-line: #C72D25; +$ms-color-presence-busy-stripe-light: #E57A79; +$ms-color-presence-busy-stripe-dark: #D00E0D; +$ms-color-presence-busy-average: #D93B3B; + +// Persona Sizes +$ms-Persona-sizeTiny: 30px; +$ms-Persona-sizeXs: 32px; +$ms-Persona-sizeSm: 40px; +$ms-Persona-sizeMd: 48px; +$ms-Persona-sizeLg: 72px; +$ms-Persona-sizeXl: 100px; + +// Details Spacing +$ms-Persona-imageDetailsSmSpace: 8px; +$ms-Persona-imageDetailsLgSpace: 12px; +$ms-Persona-imageDetailsXlSpace: 20px; + +// Presence Sizes +$ms-Persona-presenceSizeMd: 12px; +$ms-Persona-presenceSizeLg: 20px; +$ms-Persona-presenceSizeXl: 28px; + + +.ms-Persona { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + line-height: 1; + position: relative; + width: 100%; + height: $ms-Persona-sizeMd; + display: table; + table-layout: fixed; + border-collapse: separate; + + .ms-ContextualHost { + display: none; + } +} + +.ms-Persona-imageArea { + position: absolute; + overflow: hidden; + text-align: center; + max-width: $ms-Persona-sizeMd; + height: $ms-Persona-sizeMd; + border-radius: 50%; + z-index: $ms-zIndex-back; + width: 100%; + top: 0; + left: 0; + + @media screen and (-ms-high-contrast: active) { + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } +} + +//= Note: The doughboy placeholder is being deprecated. +// The initials color block (.ms-Persona-initials) will be used going forward +// as a fallback when the persona does not have an image. +.ms-Persona-placeholder { + color: $ms-color-white; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; + z-index: $ms-zIndex-middle; +} + +.ms-Persona-initials { + color: $ms-color-white; + font-size: $ms-font-size-l; + font-weight: $ms-font-weight-light; + line-height: $ms-Persona-sizeMd; + + &.ms-Persona-initials--blueLight { + background-color: $ms-color-blueLight; + } + + &.ms-Persona-initials--blue { + background-color: $ms-color-blue; + } + + &.ms-Persona-initials--blueDark { + background-color: $ms-color-blueDark; + } + + &.ms-Persona-initials--teal { + background-color: $ms-color-teal; + } + + &.ms-Persona-initials--greenLight { + background-color: $ms-color-greenLight; + } + + &.ms-Persona-initials--green { + background-color: $ms-color-green; + } + + &.ms-Persona-initials--greenDark { + background-color: $ms-color-greenDark; + } + + &.ms-Persona-initials--magentaLight { + background-color: $ms-color-magentaLight; + } + + &.ms-Persona-initials--magenta { + background-color: $ms-color-magenta; + } + + &.ms-Persona-initials--purpleLight { + background-color: $ms-color-purpleLight; + } + + &.ms-Persona-initials--purple { + background-color: $ms-color-purple; + } + + &.ms-Persona-initials--black { + background-color: $ms-color-black; + } + + &.ms-Persona-initials--orange { + background-color: $ms-color-orange; + } + + &.ms-Persona-initials--red { + background-color: $ms-color-red; + } + + &.ms-Persona-initials--redDark { + background-color: $ms-color-redDark; + } +} + +.ms-Persona-image { + position: absolute; + top: 0; + left: 0; + height: $ms-Persona-sizeMd; + z-index: $ms-zIndex-front; + width: 100%; + + &[src=''] { + display: none; + } +} + +.ms-Persona-presence { + background-color: $ms-color-presence-available; + position: absolute; + height: $ms-Persona-presenceSizeMd; + width: $ms-Persona-presenceSizeMd; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid $ms-color-white; + text-align: center; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-black; + box-shadow: 0 0 0 1px $ms-color-contrastBlackSelected inset; + color: $ms-color-black; + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-white; + box-shadow: 0 0 0 1px $ms-color-contrastWhiteSelected inset; + color: $ms-color-white; + background-color: $ms-color-black; + } +} + +.ms-Persona-presenceIcon { + color: $ms-color-white; + font-size: 8px; + line-height: $ms-Persona-presenceSizeMd; + vertical-align: top; +} + +.ms-Persona-details { + padding: 0 12px; + vertical-align: middle; + overflow: hidden; + text-align: left; + padding-left: $ms-Persona-sizeMd + $ms-Persona-imageDetailsLgSpace; + display: table-cell; + width: 100%; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + @include noWrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: $ms-color-neutralPrimary; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-l; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: $ms-color-neutralSecondary; + font-weight: $ms-font-weight-regular; + font-size: $ms-font-size-s; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; // Hidden on default persona +} + + +//== Modifier: Tiny Persona +// +.ms-Persona.ms-Persona--tiny { + height: $ms-Persona-sizeTiny; + display: inline-block; + + .ms-Persona-imageArea { + overflow: visible; + display: none; + } + + .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; + + @media screen and (-ms-high-contrast: active) { + top: 9px; + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } + } + + .ms-Persona-details { + padding-left: 20px; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 9px; + } + + .ms-Persona-secondaryText { + display: none; + } +} + + +//== Modifier: Tiny Persona with read only state +// +// This variant includes a semicolon, and is +// most often presented within a People Picker. +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; + + .ms-Persona-primaryText { + &::after { + content: ';'; + } + } +} + + +//== Modifier: Extra Small Persona, FacePile and Token modifiers +// +.ms-Persona.ms-Persona--xs, +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token { + height: $ms-Persona-sizeXs; + + .ms-Persona-imageArea, + .ms-Persona-image { + max-width: $ms-Persona-sizeXs; + height: $ms-Persona-sizeXs; + } + + .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-s; + line-height: $ms-Persona-sizeXs; + } + + .ms-Persona-presence { + left: 19px; + } + + .ms-Persona-details { + padding-left: $ms-Persona-sizeXs + $ms-Persona-imageDetailsSmSpace; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 3px; + } + + .ms-Persona-secondaryText { + display: none; + } +} + + +//== Modifier: Small Persona +// +.ms-Persona.ms-Persona--sm { + height: $ms-Persona-sizeSm; + + .ms-Persona-imageArea, + .ms-Persona-image { + max-width: $ms-Persona-sizeSm; + height: $ms-Persona-sizeSm; + } + + .ms-Persona-placeholder { + font-size: 38px; + top: 5px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-m; + line-height: $ms-Persona-sizeSm; + } + + .ms-Persona-presence { + left: 27px; + } + + .ms-Persona-details { + padding-left: $ms-Persona-sizeSm + $ms-Persona-imageDetailsSmSpace; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + } + + .ms-Persona-primaryText, + .ms-Persona-secondaryText { + padding-top: 1px; + } +} + + +//== Modifier: Large Persona +// +.ms-Persona.ms-Persona--lg { + height: $ms-Persona-sizeLg; + + .ms-Persona-imageArea, + .ms-Persona-image { + max-width: $ms-Persona-sizeLg; + height: $ms-Persona-sizeLg; + } + + .ms-Persona-placeholder { + font-size: 67px; + top: 10px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-xxl; + line-height: $ms-Persona-sizeLg; + } + + .ms-Persona-presence { + left: 49px; + height: $ms-Persona-presenceSizeLg; + width: $ms-Persona-presenceSizeLg; + border-width: 3px; + } + + .ms-Persona-presenceIcon { + line-height: $ms-Persona-presenceSizeLg; + font-size: $ms-font-size-m; + } + + .ms-Persona-details { + padding-left: $ms-Persona-sizeLg + $ms-Persona-imageDetailsLgSpace; + } + + .ms-Persona-secondaryText { + padding-top: 3px; + } + + .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; // Show tertiary text + } +} + + +//== Modifier: Extra Large Persona +// +.ms-Persona.ms-Persona--xl { + height: $ms-Persona-sizeXl; + + .ms-Persona-imageArea, + .ms-Persona-image { + max-width: $ms-Persona-sizeXl; + height: $ms-Persona-sizeXl; + } + + .ms-Persona-placeholder { + font-size: 95px; + top: 12px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-su; + line-height: $ms-Persona-sizeXl; + } + + .ms-Persona-presence { + height: $ms-Persona-presenceSizeXl; + width: $ms-Persona-presenceSizeXl; + left: 71px; + border-width: 4px; + } + + .ms-Persona-presenceIcon { + line-height: $ms-Persona-presenceSizeXl; + font-size: $ms-font-size-xl; + position: relative; + top: 1px; + } + + .ms-Persona-details { + padding-left: $ms-Persona-sizeXl + $ms-Persona-imageDetailsXlSpace; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-xl; + font-weight: $ms-font-weight-semilight; + margin-top: 0; + } + + .ms-Persona-secondaryText { + padding-top: 2px; + } + + .ms-Persona-tertiaryText, + .ms-Persona-optionalText { + padding-top: 5px; + display: block; // Show tertiary and optional text + } +} + + +//== Modifier: Persona with darker text +// +// Note: Typically applied when the component has a colored background. +.ms-Persona.ms-Persona--darkText { + .ms-Persona-primaryText { + color: $ms-color-neutralDark; + } + + .ms-Persona-secondaryText, + .ms-Persona-tertiaryText, + .ms-Persona-optionalText { + color: $ms-color-neutralPrimary; + } +} + + +//== Modifier: Selectable Persona +// +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; + + &:not(.ms-Persona--xl) { + &:hover, + &:focus { + background-color: $ms-color-themeLighter; + outline: 1px solid transparent; + } + } +} + + +//== Presence indicator variants. + +//== Modifier: Persona with available presence +// +.ms-Persona.ms-Persona--available { + .ms-Persona-presence { + background-color: $ms-color-presence-available; + } +} + + +//== Modifier: Persona with away presence +// +.ms-Persona.ms-Persona--away { + .ms-Persona-presence { + background-color: $ms-color-presence-away; + } + + .ms-Persona-presenceIcon { + position: relative; + left: 1px; + } +} + + +//== Modifier: Persona with blocked presence +// +.ms-Persona.ms-Persona--blocked { + .ms-Persona-presence { + background-color: $ms-color-white; + + &::before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset; + border-radius: 50%; + } + + &::after { + content: ''; + width: 100%; + height: 2px; + background-color: $ms-color-presence-busy-average; + transform: rotate(-45deg); + position: absolute; + top: 5px; + left: 0; + } + } + + &.ms-Persona--lg { + .ms-Persona-presence { + &::after { + top: 9px; + } + } + } + + &.ms-Persona--xl { + .ms-Persona-presence { + &::after { + top: 13px; + } + } + } +} + + +//== Modifier: Persona with busy presence +// +.ms-Persona.ms-Persona--busy { + .ms-Persona-presence { + background-color: $ms-color-presence-busy-average; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + } + } +} + + +//== Modifier: Persona with do not disturb presence +// +.ms-Persona.ms-Persona--dnd { + .ms-Persona-presence { + background-color: $ms-color-presence-dnd-background; + } +} + + +//== Modifier: Persona with offline presence +// +.ms-Persona.ms-Persona--offline { + .ms-Persona-presence { + background-color: $ms-color-presence-offline; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-black; + box-shadow: 0 0 0 1px $ms-color-white inset; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-white; + box-shadow: 0 0 0 1px $ms-color-black inset; + } + } +} + +//== Modifier: FacePile +// +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; + + &:hover { + cursor: pointer; + } + + .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: $ms-Persona-sizeXs; + } + + .ms-Persona-initials { + position: relative; + } + + .ms-Persona-details { + display: none; + } + + .ms-Persona-presence { + display: none; + } +} + +//== Modifier: FacePile +// +.ms-Persona.ms-Persona--token { + display: inline-flex; + width: auto; + background-color: $ms-color-neutralLighter; + border-radius: 20px; + margin: 4px; + + &:hover { + cursor: pointer; + } + + .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: $ms-Persona-sizeXs; + height: $ms-Persona-sizeXs; + padding: 0; + line-height: 30px; + transition: background-color $ms-duration1 $ms-ease1; + text-align: center; + + &:hover { + background-color: $ms-color-neutralLight; + } + } + + .ms-Persona-imageArea { + width: 100%; + min-width: $ms-Persona-sizeXs; + } + + .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-right: 8px; + } + + .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; + } + + .ms-Persona-initials { + position: relative; + } +} diff --git a/dist/components/PersonaCard/PersonaCard.hbs b/dist/components/PersonaCard/PersonaCard.hbs new file mode 100644 index 00000000..615a2e08 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.hbs @@ -0,0 +1,40 @@ + + +
    +
    + {{> Persona props=props.personaProps}} +
    + +
    +
    +
    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..bf75e32d --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.scss @@ -0,0 +1,211 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Persona Card styles + + +// Small +// +// The persona card docks to the bottom of the viewport. +.ms-PersonaCard { + @include ms-baseFont; + @include ms-u-slideUpIn10; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: $ms-color-neutralLighter; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 20px; +} + +.ms-PersonaCard-actions { + @include ms-u-borderBox; + position: relative; + list-style: none; + margin: 0; + padding: 0 10px; + background-color: $ms-color-white; + height: 48px; + + &::before { + content: ''; + position: absolute; + top: 47px; + left: 0; + width: 100%; + border-top: 1px solid $ms-color-neutralTertiaryAlt; + } +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: $ms-icon-size-m; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: $ms-color-neutralSecondary; + outline: transparent; + position: relative; + @include ms-u-borderBox; + + &:hover { + color: $ms-color-neutralDark; + } + + &:active { + color: $ms-color-themePrimary; + } + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; + top: 0; + left: 0; + z-index: 100; + } + + // Currently-selected action + &.is-active { + color: $ms-color-themePrimary; + + // Arrow + &::after { + @include ms-u-borderBox; + @include rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid $ms-color-neutralTertiaryAlt; + background-color: $ms-color-white; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 13px; + } + } +} + +.ms-PersonaCard-overflow { + font-size: $ms-font-size-m; + color: $ms-color-neutralPrimary; + float: right; + margin-top: -1px; + + &:hover { + color: $ms-color-themePrimary; + } +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: -95px; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: $ms-color-white; +} + +// Active detail items +.ms-PersonaCard-details { + display: none; + width: 100%; + margin: 0; + max-height: 300px; + min-height: 48px; + color: $ms-color-neutralSecondary; + padding: 9px 20px; + box-sizing: border-box; + + &.is-active { + display: block; + } + + // State: Contents are collapsed to a single line. + &.is-collapsed { + height: 30px; + overflow: hidden; + + // Show the expander icon. + .ms-PersonaCard-detailExpander::after { + @include ms-Icon--ChevronDown; + } + } +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +// Icon to expand a collapsed actionDetails section. +.ms-PersonaCard-detailExpander { + color: $ms-color-neutralPrimary; + cursor: pointer; + font-size: $ms-icon-size-m; + height: 30px; + line-height: 30px; + margin-top: 2px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; + + &::after { + @include ms-Icon; + @include ms-Icon--ChevronUp; + } +} + +.ms-PersonaCard-detailLine { + color: $ms-color-neutralPrimary; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: $ms-color-neutralSecondary; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart { + &::after { + display: none; // Hide arrow for orgchart action + } +} + +@media (min-width: $ms-screen-md-min) { + // Undock the persona card and give it a shadow. + .ms-PersonaCard { + @include drop-shadow; + max-width: 360px; + position: relative; + } + + .ms-ContextualHost { + .ms-PersonaCard { + box-shadow: none; + } + } +} diff --git a/dist/components/Pivot/Pivot.hbs b/dist/components/Pivot/Pivot.hbs new file mode 100644 index 00000000..dfe70153 --- /dev/null +++ b/dist/components/Pivot/Pivot.hbs @@ -0,0 +1,25 @@ + + + +
    + + {{#each props.links}} +
    + {{content}} +
    + {{/each}} +
    diff --git a/dist/components/Pivot/Pivot.json b/dist/components/Pivot/Pivot.json new file mode 100644 index 00000000..1eb16a64 --- /dev/null +++ b/dist/components/Pivot/Pivot.json @@ -0,0 +1,3 @@ +{ + "name": "Pivot" +} diff --git a/dist/components/Pivot/Pivot.scss b/dist/components/Pivot/Pivot.scss new file mode 100644 index 00000000..d4d8b119 --- /dev/null +++ b/dist/components/Pivot/Pivot.scss @@ -0,0 +1,204 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Pivot and tab styles + + +.ms-Pivot { + @include ms-baseFont; + @include ms-u-normalize; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; +} + +.ms-Pivot-links { + font-size: 0; // Bring inline-block children together + height: 40px; + list-style-type: none; + padding: 0; + white-space: nowrap; +} + +.ms-Pivot-link { + color: $ms-color-neutralPrimary; + display: inline-block; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + line-height: 40px; + margin-right: 8px; + padding: 0 8px; + text-align: center; + vertical-align: top; + + &:hover { + cursor: pointer; + } + + // Underline, not yet visible + &::before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + left: 8px; + position: absolute; + right: 8px; + transition: background-color $ms-duration2 $ms-ease2; + } + + // Make room for the heavier text of the selected state + &::after { + color: transparent; + content: attr(title); + display: block; + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; + } + + //== State: Selected + &.is-selected { + font-weight: $ms-font-weight-semibold; + position: relative; + + // Show the underline + &::before { + background-color: $ms-color-themePrimary; + } + } + + //== State: Disabled + &.is-disabled { + color: $ms-color-neutralTertiary; + } +} + + + + +// @TODO: Determine if any of the styles below this are necessary anymore. + + +// Overflow (ellipsis) +.ms-Pivot-link.ms-Pivot-link--overflow { + color: $ms-color-neutralSecondary; + + &.is-selected { + color: $ms-color-themePrimary; + } + + &:hover:not(.is-selected), + &:focus:not(.is-selected) { + color: $ms-color-neutralDark; + } + + &:active { + color: $ms-color-themePrimary; + } +} + +// Ellipsis icon +.ms-Pivot-ellipsis { + font-size: $ms-font-size-m-plus; + position: relative; + top: 0; +} + +// Pivot content, hidden by default +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + + +//== Modifier: Large Pivots +// +.ms-Pivot.ms-Pivot--large { + .ms-Pivot-link { + font-size: $ms-font-size-l; + + &.is-selected { + font-weight: $ms-font-weight-semilight; + } + } + + .ms-Pivot-link.ms-Pivot-link--overflow { + &::after { + font-size: $ms-font-size-l; + } + } +} + + +//== Modifier: Tabs +// +.ms-Pivot.ms-Pivot--tabs { + + .ms-Pivot-link { + height: 40px; + background-color: $ms-color-neutralLighter; + line-height: 40px; + margin-right: -2px; // Remove space next to inline-block element + padding: 0 10px; + + &:hover:not(.is-selected):not(.ms-Pivot-link--overflow), + &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: $ms-color-black; + } + + &:active { + color: $ms-color-white; + background-color: $ms-color-themePrimary; + } + + //== State: Selected + &.is-selected { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + font-weight: $ms-font-weight-semilight; + } + } + + .ms-Pivot-link.ms-Pivot-link--overflow { + &:hover:not(.is-selected), + &:focus:not(.is-selected) { + background-color: $ms-color-white; + } + + &:active { + background-color: $ms-color-themePrimary; + } + } +} + +// @TODO: Confirm that this component is not responsive. +// +// @media (min-width: $ms-screen-lg-min) { +// .ms-Pivot-link { +// font-size: $ms-font-size-m; +// } + +// .ms-Pivot-link.ms-Pivot-link--overflow { +// &:after { +// font-size: $ms-font-size-m; +// } +// } +// } + +// All high contrast styling rules +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs { + .ms-Pivot-link { + &.is-selected { + font-weight: $ms-font-weight-semibold; + } + } + } +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.hbs b/dist/components/ProgressIndicator/ProgressIndicator.hbs new file mode 100644 index 00000000..873c46ab --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.hbs @@ -0,0 +1,14 @@ + + + +
    +
    {{props.title}}
    +
    +
    +
    +
    +
    {{props.title}}
    +
    diff --git a/dist/components/ProgressIndicator/ProgressIndicator.json b/dist/components/ProgressIndicator/ProgressIndicator.json new file mode 100644 index 00000000..a3119c9f --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.json @@ -0,0 +1,3 @@ +{ + "name": "ProgressIndicator" +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.scss b/dist/components/ProgressIndicator/ProgressIndicator.scss new file mode 100644 index 00000000..208c9e6d --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.scss @@ -0,0 +1,67 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// ProgressIndicator Styles + + +$ProgressIndicatorMarginBetweenText: 8px; +$ProgressIndicatorButtonsWidth: 218px; +$ProgressIndicatorTextHeight: 18px; + +.ms-ProgressIndicator { + @include ms-baseFont; + font-weight: $ms-font-weight-regular; +} + +.ms-ProgressIndicator-itemName { + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: $ProgressIndicatorMarginBetweenText / 2; + line-height: $ProgressIndicatorTextHeight + 2; +} + +.ms-ProgressIndicator-itemDescription { + color: $ms-color-neutralSecondaryAlt; + font-size: $ms-font-size-xs; + line-height: $ProgressIndicatorTextHeight; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: $ProgressIndicatorMarginBetweenText 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: $ms-color-neutralLight; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + background-color: $ms-color-themePrimary; + height: 2px; + position: absolute; + transition: width .3s ease; + width: 0; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; + } +} diff --git a/dist/components/RadioButton/RadioButton.hbs b/dist/components/RadioButton/RadioButton.hbs new file mode 100644 index 00000000..49e0e33f --- /dev/null +++ b/dist/components/RadioButton/RadioButton.hbs @@ -0,0 +1,19 @@ + + + +
    + + +
    \ No newline at end of file diff --git a/dist/components/RadioButton/RadioButton.json b/dist/components/RadioButton/RadioButton.json new file mode 100644 index 00000000..2816006c --- /dev/null +++ b/dist/components/RadioButton/RadioButton.json @@ -0,0 +1,6 @@ +{ + "name": "RadioButton", + "dependencies": [ + "Label" + ] +} diff --git a/dist/components/RadioButton/RadioButton.scss b/dist/components/RadioButton/RadioButton.scss new file mode 100644 index 00000000..d8a58571 --- /dev/null +++ b/dist/components/RadioButton/RadioButton.scss @@ -0,0 +1,197 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// RadioButton styles + +$ms-radiobutton-field-size: 20px; +$ms-radiobutton-transition-duration: 200ms; +$ms-radiobutton-transition-duration-inner: 150ms; +$ms-radiobutton-transition-timing: cubic-bezier(.4, 0, .23, 1); + +.ms-RadioButton { + @include ms-baseFont; + box-sizing: border-box; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + min-height: 36px; + position: relative; + + .ms-Label { + font-size: $ms-font-size-m; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; + } +} + +// The hidden input +.ms-RadioButton-input { + position: absolute; + opacity: 0; +} + +// The radio button circle container +.ms-RadioButton-field::before { + content: ''; + display: inline-block; + border: 2px solid $ms-color-neutralTertiary; + width: $ms-radiobutton-field-size; + height: $ms-radiobutton-field-size; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: border-color; + transition-duration: $ms-radiobutton-transition-duration; + transition-timing-function: $ms-radiobutton-transition-timing; + border-radius: 50%; +} + +// The inner circle indicating a checked radio button +.ms-RadioButton-field::after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: 8px; + left: 8px; + bottom: 0; + right: 0; + transition-property: top, left, width, height; + transition-duration: $ms-radiobutton-transition-duration-inner; + transition-timing-function: $ms-radiobutton-transition-timing; + box-sizing: border-box; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } +} + +// The radio button field +.ms-RadioButton-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; + + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } + + //== State: A disabled radio button + // + &.is-disabled { + cursor: default; + + &::before { + background-color: $ms-color-neutralTertiaryAlt; + border-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + } + } + + .ms-Label { + color: $ms-color-neutralTertiary; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } + } + + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralTertiaryAlt; + } + } + } + + //== State: A radio button in focus + // + &.in-focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + } +} + + +//== State: When the radio button is selected (checked) +// +.ms-RadioButton-field.is-checked { + &::before { + border: 2px solid $ms-color-themePrimary; + background-color: transparent; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &::after { + background-color: $ms-color-themePrimary; + top: 5px; + left: 5px; + width: 10px; + height: 10px; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + } + } + + &:hover, + &:focus { + &::before { + border-color: $ms-color-themePrimary; + } + } + + //== State: A radio button in focus + // + &.in-focus { + &::before { + border-color: $ms-color-themePrimary; + } + } +} diff --git a/dist/components/SearchBox/SearchBox.hbs b/dist/components/SearchBox/SearchBox.hbs new file mode 100644 index 00000000..1be3ef76 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.hbs @@ -0,0 +1,16 @@ + + + +
    + + + {{renderPartial props.clearButton.component props.clearButton.props}} + {{#if props.exitButton}}{{renderPartial props.exitButton.component props.exitButton.props}}{{/if}} + {{#if props.filterButton}}{{renderPartial props.filterButton.component props.filterButton.props}}{{/if}} +
    \ No newline at end of file diff --git a/dist/components/SearchBox/SearchBox.json b/dist/components/SearchBox/SearchBox.json new file mode 100644 index 00000000..783f569b --- /dev/null +++ b/dist/components/SearchBox/SearchBox.json @@ -0,0 +1,26 @@ +{ + "name": "SearchBox", + "props": { + "label": "Search", + "defaultValue": "", + "icon": "search", + "clearButton": { + "component": "CommandButton", + "props": { + "icon": "x", + "modifier": "noLabel", + "tag": "button", + "customClasses": "ms-SearchBox-close" + } + }, + "filterButton": { + "component": "CommandButton", + "props": { + "icon": "Filter", + "modifier": "noLabel", + "tag": "button", + "customClasses": "ms-SearchBox-filter" + } + } + } +} diff --git a/dist/components/SearchBox/SearchBox.scss b/dist/components/SearchBox/SearchBox.scss new file mode 100644 index 00000000..6ab0cbe7 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.scss @@ -0,0 +1,372 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Search box styles + +$SearchBox-width: 208px; +$SearchBox-field-padding-left: 45px; +$SearchBox-height: 36px; +$SearchBox-commandbarHeight: 40px; +$SearchBox-commandbar-md-height: 44px; +$disabled-color: #F4F4F4; +$SearchBox-command-color: #F4F4F4; + +.ms-SearchBox { + @include ms-baseFont; + @include ms-u-normalize; + height: $SearchBox-height; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + position: relative; + margin-bottom: 10px; + display: inline-block; + overflow: hidden; + background-color: $ms-color-white; + + // State: Active searchbox + &.is-active { + z-index: $ms-zIndex-front; + + .ms-SearchBox-label { + display: none; + } + + .ms-SearchBox-clear { + display: block; + } + } + + &:hover { + background-color: $ms-color-themeLighter; + + .ms-SearchBox-label { + color: $ms-color-black; + + .ms-Icon { + color: $ms-color-neutralPrimary; + } + } + } + + // State: Disabled searchbox + &.is-disabled { + background-color: $disabled-color; + pointer-events: none; + + .ms-SearchBox-label { + @include ms-Label-is-disabled; + } + + .ms-SearchBox-icon { + color: $ms-color-neutralTertiary; + } + + .ms-SearchBox-field { + color: $ms-color-neutralTertiary; + background-color: transparent; + border-color: $ms-color-neutralLighter; + cursor: default; + } + } +} + +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + right: 0; + z-index: $ms-zIndex-front; + + .ms-CommandButton-button { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + height: $SearchBox-height; + } + + .ms-CommandButton-icon { + color: $ms-color-white; + } +} + +.ms-SearchBox-icon { + position: relative; + top: 50%; + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + margin-left: 12px; + margin-right: 6px; + color: $ms-color-themePrimary; + vertical-align: top; +} + +.ms-SearchBox-field { + position: relative; + @include ms-u-normalize; + border: 1px solid $ms-color-themeTertiary; + outline: transparent 1px solid; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; + color: $ms-color-black; + height: $SearchBox-height; + padding: 6px 3px 7px $SearchBox-field-padding-left; + width: $SearchBox-width; + background-color: transparent; + z-index: $ms-zIndex-middle; + transition: padding-left $ms-duration1; + + &:focus { + padding: 6px 32px 7px 10px; + border-color: $ms-color-themePrimary; + background-color: $ms-color-themeLighter; + } + + &::-ms-clear { + display: none; + } +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + height: $SearchBox-height; + line-height: $SearchBox-height; + color: $ms-color-neutralSecondary; +} + +//== Modifier: CommandBar Search +// +.ms-SearchBox.ms-SearchBox--commandBar { + @include ms-bgColor-white; + width: $SearchBox-width; + height: $SearchBox-commandbarHeight; + + .ms-SearchBox-field, + .ms-SearchBox-label { + height: $SearchBox-commandbarHeight; + line-height: $SearchBox-commandbarHeight; + } + + .ms-SearchBox-field { + transition: none; + border: 0; + + &:focus { + background-color: transparent; + padding: 6px 3px 7px $SearchBox-field-padding-left; + } + } + + .ms-SearchBox-clear, + .ms-SearchBox-filter, + .ms-SearchBox-exit { + display: none; + position: absolute; + top: 0; + z-index: $ms-zIndex-front; + color: $ms-color-neutralTertiary; + + .ms-CommandButton-button { + height: $SearchBox-commandbarHeight; + background-color: transparent; + } + } + + .ms-SearchBox-clear { + right: 8px; + } + + .ms-SearchBox-filter { + right: 8px; + + .ms-CommandButton-icon { + color: $ms-color-themePrimary; + } + } + + &::before { + position: absolute; + content: ' '; + right: 0; + bottom: 0; + left: 0; + margin: 0 8px; + border-bottom: 1px solid $ms-color-neutralLight; + } + + &:hover { + background-color: $ms-color-white; + + .ms-SearchBox-label { + color: $ms-color-neutralDark; + } + + .ms-SearchBox-icon { + color: $ms-color-themePrimary; + } + } + + &:focus { + background-color: transparent; + } + + &.is-active { + .ms-CommandButton { + .ms-SearchBox-exit, + .ms-SearchBox-filter { + display: block; + } + } + } + + &.is-collapsed { + width: 50px; + min-height: 40px; + z-index: $ms-zIndex-back; + background-color: $SearchBox-command-color; + + .ms-SearchBox-text { + display: none; + } + + .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); + } + + &::before { + visibility: hidden; + } + } + + &.is-collapsed.is-active { + width: 100%; + + .ms-SearchBox-field { + display: block; + cursor: text; + } + + .ms-SearchBox-text { + display: inline-block; + } + + @media only screen and (max-width: $ms-screen-md-max) { + width: 100%; + + .ms-SearchBox-clear { + display: inline-block; + right: 58px; + } + + .ms-SearchBox-filter { + display: inline-block; + } + + &.is-animated { + transition: width $ms-duration1 $ms-ease1; + } + } + + &::before { + visibility: visible; + } + } + + &.has-text { + .ms-SearchBox-clear { + display: inline-block; + + .ms-CommandButton-icon { + color: $ms-color-neutralTertiary; + + &:active { + color: $ms-color-themePrimary; + } + } + } + } + + @media only screen and (min-width: $ms-screen-xl-min) { + @include ms-bgColor-white; + border-right: 1px solid $ms-color-neutralLight; + } + + @media only screen and (max-width: $ms-screen-md-max) { + height: $SearchBox-commandbar-md-height; + + .ms-SearchBox-icon, + .ms-SearchBox-exit, + .ms-SearchBox-field, + .ms-SearchBox-label { + height: $SearchBox-commandbar-md-height; + line-height: $SearchBox-commandbar-md-height; + } + + .ms-SearchBox-icon, + .ms-SearchBox-exit, + .ms-SearchBox-filter, + .ms-SearchBox-clear { + font-size: 20px; + + .ms-CommandButton-button { + height: $SearchBox-commandbar-md-height; + } + } + + .ms-SearchBox-field, + .ms-SearchBox-label { + font-size: 16px; + } + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + @include ms-bgColor-white; + + .ms-SearchBox-label { + display: block; + line-height: $SearchBox-commandbarHeight; + height: $SearchBox-commandbarHeight; + + .ms-SearchBox-text { + display: none; + } + } + + &::before { + visibility: visible; + } + + @media only screen and (max-width: $ms-screen-md-max) { + .ms-SearchBox-field { + width: 100%; + padding-right: 100px; + } + + .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox-exit { + display: inline-block; + } + + &.has-text { + .ms-SearchBox-filter { + .ms-CommandButton-icon { + color: $ms-color-neutralTertiary; + } + } + } + } +} diff --git a/dist/components/Spinner/Spinner.hbs b/dist/components/Spinner/Spinner.hbs new file mode 100644 index 00000000..89c8fe8e --- /dev/null +++ b/dist/components/Spinner/Spinner.hbs @@ -0,0 +1,13 @@ + + + +
    + {{#if props.label}} +
    + {{props.label}} +
    + {{/if}} +
    diff --git a/dist/components/Spinner/Spinner.json b/dist/components/Spinner/Spinner.json new file mode 100644 index 00000000..a09023e5 --- /dev/null +++ b/dist/components/Spinner/Spinner.json @@ -0,0 +1,3 @@ +{ + "name": "Spinner" +} diff --git a/dist/components/Spinner/Spinner.scss b/dist/components/Spinner/Spinner.scss new file mode 100644 index 00000000..0902866f --- /dev/null +++ b/dist/components/Spinner/Spinner.scss @@ -0,0 +1,51 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Spinner styles + + +.ms-Spinner { + @include ms-baseFont; + position: relative; + height: 20px; + + &.ms-Spinner--large { + height: 28px; + + .ms-Spinner-label { + left: 34px; + top: 6px; + } + } +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: $ms-color-themePrimary; + opacity: 0; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; + } +} + +.ms-Spinner-label { + @include ms-baseFont; + position: relative; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; + color: $ms-color-themePrimary; + left: 28px; + top: 2px; +} diff --git a/dist/components/Table/Table.hbs b/dist/components/Table/Table.hbs new file mode 100644 index 00000000..8ccaf0af --- /dev/null +++ b/dist/components/Table/Table.hbs @@ -0,0 +1,30 @@ + + + + + + + {{#if props.isSelectable}} + + {{/if}} + {{#each props.headers}} + + {{/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..aab338da --- /dev/null +++ b/dist/components/Table/Table.scss @@ -0,0 +1,126 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Data table styles + +.ms-Table { + @include ms-baseFont; + display: table; + width: 100%; + border-collapse: collapse; +} + +// makes the table cells not expand with the content, keeping the table cells at a fixed size +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-s; + color: $ms-color-neutralPrimary; + + // Rows can be selected. + &.is-selected { + background-color: $ms-color-themeLight; + + // A checkmark in a selected row. + .ms-Table-rowCheck { + background-color: $ms-color-themePrimary; + + // Hide the checkbox. + &::before { + display: none; + } + + // But show the mark. + &::after { + @include ms-Icon--CheckboxComposite; + color: $ms-color-white; + } + } + } +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +// Style the first row as a header. +.ms-Table thead th, +.ms-Table-head { + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xs; + color: $ms-color-neutralSecondary; +} + +.ms-Table thead, +.ms-Table-head { + td, + th, + .ms-Table-cell, + .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid $ms-color-neutralLight; + } +} + +// On selectable tables, each row has a checkbox. +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; + + // Empty checkbox. + &::after { + @include ms-Icon; + @include ms-Icon--Checkbox; + color: $ms-color-neutralTertiary; + font-size: 12px; + position: absolute; + left: 4px; + top: 1px; + } +} + +// A table with selectable rows +.ms-Table--selectable { + tr:hover, + .ms-Table-row:hover { + background-color: $ms-color-neutralLighter; + cursor: pointer; + outline: 1px solid transparent; + } +} + +// All high contrast styling rules +@media screen and (-ms-high-contrast: active) { + .ms-Table-row { + // Rows can be selected. + &.is-selected { + // A checkmark in a selected row. + .ms-Table-rowCheck { + background: none; + + // Show the checkbox. + &::before { + display: block; + } + } + } + } +} diff --git a/dist/components/TextField/TextField.hbs b/dist/components/TextField/TextField.hbs new file mode 100644 index 00000000..23582a3a --- /dev/null +++ b/dist/components/TextField/TextField.hbs @@ -0,0 +1,12 @@ + + + +
    + {{#if props.label}}{{/if}} + {{#if props.textfield}}{{/if}} + {{#if props.multiline}}{{/if}} + {{#if props.description}}{{props.description}}{{/if}} +
    diff --git a/dist/components/TextField/TextField.json b/dist/components/TextField/TextField.json new file mode 100644 index 00000000..ee904cbd --- /dev/null +++ b/dist/components/TextField/TextField.json @@ -0,0 +1,3 @@ +{ + "name": "TextField" +} diff --git a/dist/components/TextField/TextField.scss b/dist/components/TextField/TextField.scss new file mode 100644 index 00000000..7c3a7371 --- /dev/null +++ b/dist/components/TextField/TextField.scss @@ -0,0 +1,235 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +@import '../Label/Label'; + +// +// Office UI Fabric +// -------------------------------------------------- +// Single line (input) and multiline (textarea) form field styles + +.ms-TextField { + @include ms-baseFont; + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + margin-bottom: 8px; + + .ms-Label { + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-semibold; + } +} + +//= State: A disabled textfield +.ms-TextField.is-disabled { + .ms-TextField-field { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + + @include input-placeholder { + color: $ms-color-neutralTertiary; + } +} + +//= State: A required textfield +.ms-TextField.is-required { + .ms-Label { + @include ms-Label-is-required + } + + @include input-placeholder { + @include ms-Label-is-required + } +} + +//= State: An active textfield +.ms-TextField.is-active { + border-color: $ms-color-themePrimary; +} + +.ms-TextField-field { + @include ms-u-normalize; + border: 1px solid $ms-color-neutralTertiaryAlt; + border-radius: 0; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; + color: $ms-color-neutralPrimary; + height: 32px; + padding: 6px 12px 7px; + width: 100%; + min-width: 180px; + outline: 0; + text-overflow: ellipsis; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + } + + &:focus { + border-color: $ms-color-themePrimary; + } + + &:hover, + &:focus { + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &[disabled] { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + + @include input-placeholder { + color: $ms-color-neutralSecondary; + } +} + +.ms-TextField-description { + color: $ms-color-neutralSecondaryAlt; + font-size: $ms-font-size-xs; +} + + +//== Modifier: Single line (default), placeholder label +// +.ms-TextField.ms-TextField--placeholder { + position: relative; + background-color: $ms-color-white; + + .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: $ms-zIndex-middle; + } + + .ms-Label { + position: absolute; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; + color: $ms-color-neutralSecondary; + padding: 6px 12px 7px; + pointer-events: none; + z-index: $ms-zIndex-back; + } + + &.is-disabled { + color: $ms-color-neutralTertiary; + + .ms-Label { + @include ms-Label-is-disabled; + } + } +} + + +//== Modifier: Single line (default), underlined +// +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid $ms-color-neutralTertiaryAlt; + display: table; + width: 100%; + min-width: 180px; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &:active, + &:focus { + border-color: $ms-color-themePrimary; + } + + .ms-Label { + font-size: $ms-font-size-m; + margin-right: 8px; + display: table-cell; + vertical-align: top; + padding-left: 12px; + padding-top: 9px; + height: 32px; + width: 1%; + white-space: nowrap; + } + + .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 3px; + + &:active, + &:focus, + &:hover { + outline: 0; + } + } + + &.is-disabled { + border-bottom-color: $ms-color-neutralLight; + + .ms-Label { + @include ms-Label-is-disabled; + } + + .ms-TextField-field { + background-color: transparent; + color: $ms-color-neutralTertiary; + } + } + + &.is-active { + border-color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } +} + + +//== Modifier: Multiline textfield +// +.ms-TextField.ms-TextField--multiline { + .ms-TextField-field { + @include ms-baseFont; + color: $ms-color-neutralSecondary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; + } +} diff --git a/dist/components/Toggle/Toggle.hbs b/dist/components/Toggle/Toggle.hbs new file mode 100644 index 00000000..7982546a --- /dev/null +++ b/dist/components/Toggle/Toggle.hbs @@ -0,0 +1,14 @@ + + + +
    + {{props.description}} + + +
    diff --git a/dist/components/Toggle/Toggle.json b/dist/components/Toggle/Toggle.json new file mode 100644 index 00000000..c8c368a6 --- /dev/null +++ b/dist/components/Toggle/Toggle.json @@ -0,0 +1,6 @@ +{ + "name": "Toggle", + "dependencies": [ + "Label" + ] +} diff --git a/dist/components/Toggle/Toggle.scss b/dist/components/Toggle/Toggle.scss new file mode 100644 index 00000000..759f040b --- /dev/null +++ b/dist/components/Toggle/Toggle.scss @@ -0,0 +1,252 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Toggle styles + + +@import '../Label/Label.scss'; + +// Slider mixin +@mixin ms-Toggle-slider($direction) { + // Slider pseudo element + &::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + #{$direction}: 4px; + background-color: $ms-color-neutralSecondary; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(.4, 0, .23, 1); + + @media screen and (-ms-high-contrast: active) { + border: 2.5px solid $ms-color-white; + height: 15px; + outline: 0; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-black; + } + } + + @if $direction == left { + &::before { + right: auto; + } + } + + @if $direction == right { + &::before { + background-color: $ms-color-white; + left: 28px; + } + } +} + +// Toggle +.ms-Toggle { + @include ms-baseFont; + @include ms-font-m; + @include ms-u-normalize; + position: relative; + display: block; + margin-bottom: 26px; + + // Action label (on/off) on the right of the toggle + .ms-Label { + position: relative; + top: -2px; + padding: 0 0 0 50px; + } + + // 'Off' state - slider on the left + & .ms-Toggle-field { + @include ms-Toggle-slider(left); + + // Show the off label / hide the on label + .ms-Label--off { + display: block; + } + + .ms-Label--on { + display: none; + } + } + + // 'On' state - slider on the right + & .ms-Toggle-field.is-selected { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + @include ms-Toggle-slider(right); + + // Show the on label / hide the off label + .ms-Label--off { + display: none; + } + + .ms-Label--on { + display: block; + } + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; + } + } + + &:focus, + &:hover { + & + .ms-Toggle-field { + border-color: $ms-color-neutralSecondary; + } + + & + .ms-Toggle-field::before { + background-color: $ms-color-neutralPrimary; + } + + &:checked + .ms-Toggle-field { + background-color: $ms-color-themeDarkAlt; + border-color: $ms-color-themeDarkAlt; + } + + &:checked + .ms-Toggle-field::before { + background-color: $ms-color-white; + } + } + + &:active { + &:checked + .ms-Toggle-field { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDark; + } + } + + .ms-Toggle-field { + &:focus, + &:hover { + border-color: $ms-color-neutralPrimary; + } + + &.is-selected { + &:focus, + &:hover { + background-color: $ms-color-themeDarkAlt; + border-color: $ms-color-themeDarkAlt; + } + } + + .ms-Label { + color: $ms-color-black; + user-select: none; + } + + &:hover { + .ms-Label { + color: $ms-color-black; + } + } + + &:active { + .ms-Label { + color: $ms-color-neutralPrimary; + } + } + } + + // Disabled state + &.is-disabled { + .ms-Label { + @include ms-Label-is-disabled; + } + + .ms-Toggle-field { + background-color: $ms-color-white; + border-color: $ms-color-neutralTertiaryAlt; + pointer-events: none; + cursor: default; + + &::before { + background-color: $ms-color-neutralTertiaryAlt; + } + } + + .ms-Toggle-field, + .ms-Toggle-field::before { + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + } + } + } +} + +// Description text +.ms-Toggle-description { + position: relative; + font-size: $ms-font-size-m; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +// Toggle input field +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 45px; + height: 20px; + box-sizing: border-box; + border: 2px solid $ms-color-neutralTertiary; + border-radius: 20px; + cursor: pointer; + transition-property: background, left, border-color; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(.4, 0, .23, 1); + outline: 0; + + &:hover, + &:focus { + border-color: $ms-color-neutralSecondary; + } +} + +// On/Off slide states +.ms-Toggle-input { + display: none; +} + +//== Modifier: Toggle with description text left +// +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; + + .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; + } + + .ms-Toggle-field { + float: right; + } +} diff --git a/dist/css/fabric.components.css b/dist/css/fabric.components.css new file mode 100644 index 00000000..7d0244aa --- /dev/null +++ b/dist/css/fabric.components.css @@ -0,0 +1,6190 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Breadcrumb { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 12px; + color: #666666; + vertical-align: top; + margin: 11px 7px; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: #0078d7; + padding: 8px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; + margin-right: -2px; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu::before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: #ffffff; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: 0; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + font-weight: 100; + font-size: 21px; + color: #333333; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 8px 5px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 5px 4px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 14px; + font-weight: 400; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button.is-hidden { + display: none; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Button:hover { + color: #1aebff; + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Button:hover { + color: #37006e; + border-color: #37006e; + } +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button-label { + color: #333333; + font-weight: 600; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border: 0; + display: -ms-flexbox; + display: flex; + padding: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + margin-right: 4px; + position: relative; + top: 1px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + font-size: 12px; + height: 18px; + line-height: 18px; + width: 18px; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-size: 21px; + font-weight: 100; + position: relative; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + border: 1px solid #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + border: 1px solid #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + border: 1px solid #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + display: block; + height: auto; + max-width: 280px; + min-height: 72px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-weight: 600; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-weight: 400; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Callout { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + width: 288px; +} + +.ms-Callout.is-hidden { + display: none; +} + +.ms-Callout-header { + z-index: 105; + padding-top: 24px; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-title { + margin: 0; + font-weight: 300; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-weight: 300; + color: #333333; + font-size: 12px; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-link { + font-size: 14px; +} + +.ms-Callout-inner { + height: 100%; + padding-top: 0; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button { + color: #0078d7; +} + +.ms-Callout-actions .ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-weight: 100; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + padding-top: 12px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-inner { + padding-bottom: 12px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +.ms-CheckBox { + box-sizing: border-box; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-CheckBox .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +.ms-CheckBox-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +.ms-CheckBox-field::after { + content: '\E73E'; + font-family: 'FabricMDL2Icons'; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: 13px; + top: 0; + color: #ffffff; + line-height: 20px; + width: 20px; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field::after { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field::after { + color: #ffffff; + } +} + +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-CheckBox-field:hover::before, +.ms-CheckBox-field:focus::before { + border-color: #767676; +} + +.ms-CheckBox-field:hover .ms-Label, +.ms-CheckBox-field:focus .ms-Label { + color: #000000; +} + +.ms-CheckBox-field.is-disabled { + cursor: default; +} + +.ms-CheckBox-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-CheckBox-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-CheckBox-field.in-focus::before { + border-color: #767676; +} + +.ms-CheckBox-field.in-focus.is-disabled::before { + border-color: #c8c8c8; +} + +.ms-CheckBox-field.in-focus.is-checked::before { + border-color: #106ebe; +} + +.ms-CheckBox-field.is-checked::before { + border: 10px solid #0078d7; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-CheckBox-field.is-checked::after { + display: block; +} + +.ms-CheckBox-field.is-checked:hover::before, +.ms-CheckBox-field.is-checked:focus::before { + border-color: #106ebe; +} + +.ms-RadioButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + color: #333333; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-RadioButton .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-RadioButton-input { + position: absolute; + opacity: 0; +} + +.ms-RadioButton-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + border-radius: 50%; +} + +.ms-RadioButton-field::after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: 8px; + left: 8px; + bottom: 0; + right: 0; + transition-property: top, left, width, height; + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field::after { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field::after { + color: #600000; + } +} + +.ms-RadioButton-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-RadioButton-field:hover::before, +.ms-RadioButton-field:focus::before { + border-color: #767676; +} + +.ms-RadioButton-field:hover .ms-Label, +.ms-RadioButton-field:focus .ms-Label { + color: #000000; +} + +.ms-RadioButton-field.is-disabled { + cursor: default; +} + +.ms-RadioButton-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-RadioButton-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-RadioButton-field.is-disabled:hover::before, +.ms-RadioButton-field.is-disabled:focus::before { + border-color: #c8c8c8; +} + +.ms-RadioButton-field.in-focus::before { + border-color: #767676; +} + +.ms-RadioButton-field.is-checked::before { + border: 2px solid #0078d7; + background-color: transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked::after { + background-color: #0078d7; + top: 5px; + left: 5px; + width: 10px; + height: 10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::after { + background-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked:hover::before, +.ms-RadioButton-field.is-checked:focus::before { + border-color: #0078d7; +} + +.ms-RadioButton-field.is-checked.in-focus::before { + border-color: #0078d7; +} + +.ms-ChoiceFieldGroup { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin-bottom: 4px; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; +} + +.ms-CommandBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #f4f4f4; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar .ms-CommandButton--actionButton { + border-right: 1px solid #eaeaea; +} + +.ms-CommandBar .ms-Button { + height: 100%; +} + +.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon { + padding-right: 0; +} + +.ms-CommandBar .ms-Button.is-hidden { + display: none; +} + +.ms-CommandBar .ms-SearchBox, +.ms-CommandBar .ms-SearchBox-field, +.ms-CommandBar .ms-SearchBox-label { + height: 100%; +} + +.ms-CommandBar .ms-SearchBox { + display: inline-block; + vertical-align: top; + transition: margin-right 0.267s; +} + +.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 220px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: 10; + } +} + +.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button { + font-size: 18px; + padding: 0 11px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar .ms-SearchBox { + margin-right: 24px; + } +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar { + height: 44px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar.search-expanded .ms-SearchBox { + margin-right: 8px; + } + + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + transition: none; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 4px; + height: 100%; +} + +.ms-CommandBar-sideCommands .ms-Button:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 20px; + } +} + +.ms-CommandButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: inline-block; + position: relative; + vertical-align: top; +} + +.ms-CommandButton.is-hidden { + display: none; +} + +.ms-CommandButton:disabled .ms-CommandButton-button, +.ms-CommandButton.is-disabled .ms-CommandButton-button { + cursor: default; +} + +.ms-CommandButton:disabled .ms-CommandButton-button:hover, +.ms-CommandButton.is-disabled .ms-CommandButton-button:hover { + background-color: #eff6fc; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label { + color: #a6a6a6; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-CommandButton .ms-ContextualMenu { + display: none; +} + +.ms-CommandButton-button, +.ms-CommandButton-splitIcon { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + cursor: pointer; + display: inline-block; + height: 40px; + line-height: 40px; + outline: 1px solid transparent; + padding: 0 8px; + position: relative; + vertical-align: top; + background: transparent; +} + +.ms-CommandButton-button:hover, +.ms-CommandButton-splitIcon:hover { + background-color: #eaeaea; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.ms-CommandButton-button:active, +.ms-CommandButton-splitIcon:active { + background-color: #eaeaea; +} + +.ms-CommandButton-button:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-button:focus, +.ms-CommandButton-splitIcon:focus { + outline: 0; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-button, + .ms-CommandButton-splitIcon { + height: 44px; + } + + .ms-CommandButton-button .ms-CommandButton-icon, + .ms-CommandButton-splitIcon .ms-CommandButton-icon { + font-size: 20px; + } + + .ms-CommandButton-button .ms-CommandButton-label, + .ms-CommandButton-splitIcon .ms-CommandButton-label { + line-height: 44px; + } +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton + .ms-CommandButton { + margin-left: 4px; + } +} + +.ms-CommandButton-icon { + display: inline-block; + margin-right: 8px; + position: relative; + font-size: 16px; + min-width: 16px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.ms-CommandButton-label { + font-size: 14px; + font-weight: 400; + color: #333333; + line-height: 40px; + height: 100%; + display: inline-block; + vertical-align: top; +} + +.ms-CommandButton-label:hover { + color: #212121; +} + +.ms-CommandButton-dropdownIcon, +.ms-CommandButton-splitIcon { + display: inline-block; + position: relative; + color: #333333; + font-size: 12px; + font-weight: 300; + min-width: 12px; + height: 100%; + vertical-align: top; + margin-left: 8px; +} + +.ms-CommandButton-dropdownIcon .ms-Icon, +.ms-CommandButton-splitIcon .ms-Icon { + line-height: normal; + padding-top: 16px; +} + +.ms-CommandButton-dropdownIcon:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-dropdownIcon, + .ms-CommandButton-splitIcon { + display: none; + } +} + +.ms-CommandButton-splitIcon { + margin-left: -2px; + width: 27px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + margin-left: -1px; + position: relative; + padding-top: 16px; +} + +.ms-CommandButton-splitIcon .ms-Icon::after { + position: absolute; + content: ' '; + width: 1px; + height: 16px; + top: 12px; + left: -8px; + border-left: 1px solid #c8c8c8; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + margin-right: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button { + padding: 0 12px; +} + +.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + background: none; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button { + width: 50px; + height: 40px; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + padding-right: 0; +} + +.ms-CommandButton.ms-CommandButton--pivot.is-active::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--pivot:hover::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, +.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + display: inline-block; +} + +@media only screen and (max-width: 479px) { + .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, + .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + font-size: 16px; + } +} + +.ms-ContextualMenu { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + max-width: 220px; + list-style-type: none; + position: relative; + background-color: #ffffff; +} + +.ms-ContextualMenu.is-hidden { + display: none; +} + +.ms-ContextualMenu-item { + position: relative; +} + +.ms-ContextualMenu-link { + box-sizing: border-box; + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 36px; + overflow: hidden; + line-height: 34px; + padding: 0 16px 0 25px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #f4f4f4; + color: #212121; +} + +.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon { + color: #212121; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; + border: 1px solid #666666; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #dadada; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon { + color: #000000; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #d0d0d0; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +.ms-ContextualMenu-link.is-disabled .ms-Icon { + color: #a6a6a6; + pointer-events: none; + cursor: default; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 36px; + line-height: 36px; + padding: 0 18px; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #333333; + font-size: 8px; + font-weight: 600; + width: 24px; + height: 36px; + line-height: 36px; + position: absolute; + text-align: center; + top: 0; + right: 0; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 16px 0 26px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; + font-weight: 600; + color: #333333; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + color: #333333; + content: '\E73E'; + font-size: 10px; + font-weight: 800; + height: 36px; + line-height: 36px; + position: absolute; + left: 7px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus { + color: #212121; + background-color: #f4f4f4; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover::after, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus::after { + color: #212121; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active { + color: #000000; + background-color: #d0d0d0; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active::after { + color: #000000; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link { + padding-left: 40px; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + width: 40px; + text-align: center; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons { + width: 220px; +} + +.ms-DatePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-weight: 100; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-weight: 400; + font-size: 15px; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #b3d6f2; +} + +.ms-DatePicker-day--disabled::before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-weight: 400; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0; + position: absolute; + top: 0; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: 300; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: 400; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-weight: 300; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-weight: 300; + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-weight: 600; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-DetailsList { + position: relative; +} + +.ms-DetailsList.is-horizontalConstrained { + overflow-x: auto; + overflow-y: inherit; +} + +.ms-DetailsList-cell { + word-break: break-word; +} + +.ms-DetailsHeader { + display: inline-block; + min-width: 100%; + height: 36px; + line-height: 36px; + white-space: nowrap; + padding-bottom: 1px; + border-bottom: 1px solid #eaeaea; + margin-bottom: 1px; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-DetailsHeader.is-singleSelect { + padding-left: 40px; +} + +.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover { + background: transparent; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 99; + cursor: col-resize; +} + +.ms-DetailsHeader-cell.is-check .ms-Check-circle { + visibility: hidden; +} + +.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, +.ms-DetailsHeader.is-allSelected .ms-Check-circle { + visibility: visible; +} + +.ms-DetailsHeader-cellWrapper { + display: inline-block; + position: relative; +} + +.ms-DetailsHeader-cellSizeWrapper { + display: inline-block; + vertical-align: top; + margin-right: 16px; +} + +.ms-DetailsHeader-cellSizeWrapper:last-child { + margin-right: 0; +} + +.ms-DetailsHeader-filterChevron.ms-Icon { + color: #a6a6a6; + padding-left: 4px; + vertical-align: middle; +} + +.ms-DetailsHeader-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + color: #a6a6a6; + border: 0; + background: none; + line-height: inherit; + margin: 0; + font-size: inherit; + font-family: inherit; + text-align: left; + height: 36px; + vertical-align: top; +} + +.ms-DetailsHeader-cell.is-check { + position: relative; + padding: 8px 10px; + margin: 0; +} + +.ms-DetailsHeader-cell:focus { + outline: transparent; +} + +.ms-DetailsHeader-cell.is-sortable { + color: #000000; + cursor: default; +} + +.ms-DetailsHeader-cell.is-sortable:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter { + position: absolute; + right: 0; + width: 20px; + top: 0; + bottom: 0; + padding: 0; + text-align: center; + color: #000000; +} + +.ms-DetailsHeader-cell.is-filter:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter::before { + content: ''; + position: absolute; + border-left: 1px solid #a6a6a6; + top: 10px; + bottom: 10px; + left: 0; +} + +.ms-DetailsHeader-cell.is-sizer { + position: absolute; + width: 16px; + cursor: col-resize; + bottom: 0; + top: 0; + height: inherit; + z-index: 99; +} + +.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow { + display: inline; +} + +.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-DetailsHeader-cell.is-resizing.is-sizer::after, +.ms-DetailsHeader-cell.is-sizer:hover::after { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 1px; + background: #eaeaea; + border: 1px solid #ffffff; +} + +.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before, +.ms-DetailsHeader-cell:focus::before { + content: ''; + pointer-events: none; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsHeader-sortArrow.ms-Icon { + font-size: 12px; + margin-right: 4px; + display: none; + color: #a6a6a6; +} + +.ms-DetailsRow { + position: relative; + display: inline-block; + min-width: 100%; + min-height: 36px; + vertical-align: top; + white-space: nowrap; + padding: 10px 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; +} + +.ms-DetailsRow:focus { + outline: transparent; +} + +.ms-DetailsRow.ms-DetailsRow.is-selected { + background: #deecf9; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover, +.ms-DetailsRow:hover { + background: #eff6fc; +} + +.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover, +.ms-DetailsRow.is-selected:hover { + background: #b3d6f2; +} + +.ms-DetailsRow-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + vertical-align: top; + white-space: normal; + word-break: break-word; + margin-right: 16px; +} + +.ms-DetailsRow-cell.is-clipped { + overflow: hidden; +} + +.ms-DetailsRow-cell:last-child { + margin-right: 0; +} + +.ms-DetailsRow-cellIcon { + display: inline-block; + margin-right: 6px; + position: relative; + bottom: -2px; +} + +.ms-DetailsRow-check { + display: inline-block; + cursor: default; + padding: 10px; + margin: -10px 0; + box-sizing: border-box; + vertical-align: top; + background: none; + border: 0; + visibility: hidden; +} + +.ms-DetailsRow-check:focus { + outline: transparent; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow.is-selected .ms-DetailsRow-check { + visibility: visible; +} + +.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox, +.ms-DetailsRow:focus .ms-DetailsRow-focusBox { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsRow-cellMeasurer { + position: absolute; + visibility: hidden; + white-space: nowrap; + top: -1000000000; +} + +.ms-Check { + display: inline-block; + cursor: default; + line-height: 0; + vertical-align: top; +} + +.ms-Check.is-checked .ms-Check-circle { + fill: #0078d7; + stroke: #ffffff; + stroke-width: 1px; +} + +.ms-Check.is-checked .ms-Check-check { + stroke: #ffffff; +} + +.ms-Check-circle { + fill: #ffffff; + stroke: #c8c8c8; +} + +.ms-Check-check { + stroke: #c8c8c8; +} + +.ms-Dialog { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: fixed; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} + +.ms-Dialog.is-open { + display: block; +} + +.ms-Dialog-title { + font-size: 21px; + font-weight: 100; + margin-bottom: 24px; +} + +.ms-Dialog-content { + position: relative; +} + +.ms-Dialog-subText { + color: #333333; + font-size: 12px; + font-weight: 300; + line-height: 1.5; +} + +.ms-Dialog-actions { + margin-top: 24px; + text-align: right; +} + +.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + background-color: #0078d7; + color: #ffffff; + font-size: 28px; + font-weight: 100; + padding: 28px 24px; + margin-top: -28px; + margin-left: -24px; + margin-right: -24px; +} + +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + right: 12px; + top: 12px; + z-index: 10; +} + +.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel { + color: #666666; + font-size: 16px; +} + +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: absolute; +} + +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; +} + +.ms-Panel .ms-Dropdown-items .ms-Dropdown-item { + padding: 7px 16px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Panel .ms-Dropdown-items::before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #212121; + font-size: 12px; + position: absolute; + right: 13px; + bottom: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + padding: 5px 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-title.ms-Dropdown-truncator { + height: auto; + display: block; + position: absolute; + visibility: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + z-index: 400; + overflow-y: scroll; + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; +} + +.ms-Dropdown-items::before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 36px; + padding: 7px 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #b3d6f2; + color: #000000; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #b3d6f2; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-FacePile { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 32px; + width: auto; +} + +.ms-FacePile .ms-FacePile-personaCardHost { + display: none; +} + +.ms-FacePile-addButton { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-FacePile-addButton .ms-Persona-presence, +.ms-FacePile-addButton .ms-Persona-details { + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover, +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus { + background-color: #005a9e; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active { + background-color: #004578; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active { + display: block; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover { + color: #212121; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled { + color: #c8c8c8; +} + +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: 14px; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-weight: 100; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Link { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-List { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + list-style-type: none; +} + +.ms-ListItem { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + color: #333333; + font-size: 14px; + font-weight: 400; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem::before, +.ms-ListItem::after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem::after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-weight: 300; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-weight: 400; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-weight: 300; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-weight: 300; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; + background-color: #333333; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-weight: 600; +} + +.ms-ListItem.is-unseen::after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + position: absolute; + top: 14px; + left: 7px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected::before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected::before, +.ms-ListItem.is-selected:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\e73A'; + font-size: 17px; + color: #767676; + position: absolute; + top: 23px; + left: 7px; + border: 0; +} + +.ms-ListItem.is-selected:hover { + background-color: #b3d6f2; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-weight: 400; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 12px; + font-weight: 400; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + display: inline-block; + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-ContextualHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + background-color: #ffffff; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-ContextualHost.is-positioned { + position: absolute; + margin: 0; +} + +.ms-ContextualHost.is-open { + display: inline-block; +} + +.ms-ContextualHost-beak { + box-shadow: 0 0 15px -5px #3c3c3c; + position: absolute; + width: 28px; + height: 28px; + background: #ffffff; + border: 1px solid #eaeaea; + box-sizing: border-box; + top: -6px; + display: none; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 0; + outline: 1px solid transparent; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak, +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + top: 40px; + display: none; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + left: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + right: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak { + display: block; + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + display: block; + bottom: -10px; +} + +.ms-ContextualHost-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + min-height: 10px; +} + +.ms-ContextualHost-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 10; +} + +.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title { + margin-right: 20px; +} + +.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak { + background-color: #0078d7; +} + +@media (min-width: 480px) { + .ms-ContextualHost { + margin: 16px; + } + + .ms-ContextualHost.is-positioned { + margin: 0; + } + + .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak, + .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + display: block; + } +} + +.ms-MessageBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.ms-MessageBar .ms-Link { + font-size: 12px; +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-right: 8px; + font-size: 16px; + color: #767676; +} + +.ms-MessageBar-text { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 12px; + font-weight: 400; +} + +.ms-MessageBar.ms-MessageBar--warning { + background-color: #fff4ce; +} + +.ms-MessageBar.ms-MessageBar--severeWarning { + background-color: #fed9cc; +} + +.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon { + color: #d83b01; +} + +.ms-MessageBar.ms-MessageBar--error { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--blocked { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-OrgChart { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; +} + +.ms-Overlay { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: rgba(255, 255, 255, 0.4); + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 0; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-u-overflowHidden { + overflow: hidden; +} + +.ms-Panel { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #ffffff; + width: 100%; + max-width: 340px; + box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2); + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: 10; + display: none; + height: 100%; +} + +.ms-Panel.animate-in { + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel.animate-out { + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel .ms-CommandBar { + padding-right: 0; + padding-left: 8px; +} + +.ms-Panel.ms-Panel--md { + max-width: 340px; +} + +.ms-Panel.ms-Panel--lg { + max-width: 644px; +} + +.ms-Panel.ms-Panel--xl { + max-width: 940px; +} + +.ms-Panel.ms-Panel--xxl { + max-width: 1192px; +} + +.ms-Panel--left { + box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2); + left: 0; + right: auto; +} + +.ms-Panel--left.animate-in { + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel--left.animate-out { + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 6px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 16px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-closeButton .ms-Icon--Cancel { + margin-top: 2px; +} + +@media (max-width: 639px) { + .ms-Panel-closeButton { + font-size: 20px; + line-height: 20px; + height: 44px; + right: 4px; + } +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; + height: 100%; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-weight: 100; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +.ms-PanelHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 10; +} + +.ms-PanelHost .ms-Overlay { + cursor: pointer; +} + +.ms-PeoplePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 1px solid #c8c8c8; + cursor: text; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker-searchBox.is-active, +.ms-PeoplePicker-searchBox:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #37006e; + } +} + +.ms-PeoplePicker-searchBox::-webkit-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox::-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-ms-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: 100%; + -ms-flex: 1; + flex: 1; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.ms-PeoplePicker-persona { + cursor: pointer; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + background-color: #ffffff; + border: 1px solid #c8c8c8; + margin-bottom: -1px; + padding-top: 9px; + width: 100%; + padding-left: 0; + box-sizing: border-box; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-weight: 300; + font-size: 12px; + padding-top: 8px; + padding-bottom: 8px; + text-transform: uppercase; + padding-left: 16px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-left: 16px; + cursor: pointer; + outline: 0; +} + +.ms-PeoplePicker-result:hover, +.ms-PeoplePicker-result:focus { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result:focus { + box-shadow: 0 0 0 1px #0078d7 inset; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #b3d6f2; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #69afe5; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active { + background-color: #69afe5; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 100%; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 40px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #a6a6a6; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + background: none; + border: 0; + cursor: pointer; + height: 40px; + position: relative; + width: 100%; +} + +.ms-PeoplePicker-searchMore:hover { + background-color: #f4f4f4; +} + +.ms-PeoplePicker-searchMoreIcon { + font-size: 21px; + height: 40px; + left: 16px; + line-height: 40px; + position: absolute; + text-align: center; + top: 0; + width: 40px; +} + +.ms-PeoplePicker-searchMoreText { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + height: 40px; + left: 64px; + line-height: 40px; + position: absolute; + top: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction { + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder, + .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials, + .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence, + .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details, + .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn { + height: 40px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction { + height: 40px; + } +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-weight: 400; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 1; + position: relative; + width: 100%; + height: 48px; + display: table; + table-layout: fixed; + border-collapse: separate; +} + +.ms-Persona .ms-ContextualHost { + display: none; +} + +.ms-Persona-imageArea { + position: absolute; + overflow: hidden; + text-align: center; + max-width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; + width: 100%; + top: 0; + left: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; + z-index: 5; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-weight: 100; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--blueLight { + background-color: #00bcf2; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #0078d7; +} + +.ms-Persona-initials.ms-Persona-initials--blueDark { + background-color: #002050; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #008272; +} + +.ms-Persona-initials.ms-Persona-initials--greenLight { + background-color: #bad80a; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #107c10; +} + +.ms-Persona-initials.ms-Persona-initials--greenDark { + background-color: #004b1c; +} + +.ms-Persona-initials.ms-Persona-initials--magentaLight { + background-color: #e3008c; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #b4009e; +} + +.ms-Persona-initials.ms-Persona-initials--purpleLight { + background-color: #b4a0ff; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #5c2d91; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #000000; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #d83b01; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #e81123; +} + +.ms-Persona-initials.ms-Persona-initials--redDark { + background-color: #a80000; +} + +.ms-Persona-image { + position: absolute; + top: 0; + left: 0; + height: 48px; + z-index: 10; + width: 100%; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #7fba00; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-presence { + border-color: #000000; + box-shadow: 0 0 0 1px #1aebff inset; + color: #000000; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-presence { + border-color: #ffffff; + box-shadow: 0 0 0 1px #37006e inset; + color: #ffffff; + background-color: #000000; + } +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 8px; + line-height: 12px; + vertical-align: top; +} + +.ms-Persona-details { + padding: 0 12px; + vertical-align: middle; + overflow: hidden; + text-align: left; + padding-left: 60px; + display: table-cell; + width: 100%; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-weight: 400; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-weight: 400; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + display: none; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText::after { + content: ';'; +} + +.ms-Persona.ms-Persona--xs, +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token { + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image, +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea, +.ms-Persona.ms-Persona--facePile .ms-Persona-image, +.ms-Persona.ms-Persona--token .ms-Persona-imageArea, +.ms-Persona.ms-Persona--token .ms-Persona-image { + max-width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder, +.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder, +.ms-Persona.ms-Persona--token .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials, +.ms-Persona.ms-Persona--facePile .ms-Persona-initials, +.ms-Persona.ms-Persona--token .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence, +.ms-Persona.ms-Persona--facePile .ms-Persona-presence, +.ms-Persona.ms-Persona--token .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details, +.ms-Persona.ms-Persona--facePile .ms-Persona-details, +.ms-Persona.ms-Persona--token .ms-Persona-details { + padding-left: 40px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText, +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--token .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--sm { + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + max-width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 48px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--lg { + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + max-width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; + height: 20px; + width: 20px; + border-width: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon { + line-height: 20px; + font-size: 14px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-details { + padding-left: 84px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--xl { + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + max-width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 28px; + width: 28px; + left: 71px; + border-width: 4px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon { + line-height: 28px; + font-size: 21px; + position: relative; + top: 1px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 120px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-weight: 300; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #7fba00; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #fcd116; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon { + position: relative; + left: 1px; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #ffffff; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 0 0 2px #d93b3b inset; + border-radius: 50%; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::after { + content: ''; + width: 100%; + height: 2px; + background-color: #d93b3b; + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + position: absolute; + top: 5px; + left: 0; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence::after { + top: 9px; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence::after { + top: 13px; +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #37006e; + } +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #000000; + box-shadow: 0 0 0 1px #ffffff inset; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #ffffff; + box-shadow: 0 0 0 1px #000000 inset; + } +} + +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; +} + +.ms-Persona.ms-Persona--facePile:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-initials { + position: relative; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-details { + display: none; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-presence { + display: none; +} + +.ms-Persona.ms-Persona--token { + display: -ms-inline-flexbox; + display: inline-flex; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin: 4px; +} + +.ms-Persona.ms-Persona--token:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: 32px; + height: 32px; + padding: 0; + line-height: 30px; + transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + text-align: center; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover { + background-color: #eaeaea; +} + +.ms-Persona.ms-Persona--token .ms-Persona-imageArea { + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-right: 8px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + color: #333333; + font-size: 14px; + font-weight: 400; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 20px; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + position: relative; + list-style: none; + margin: 0; + padding: 0 10px; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-actions::before { + content: ''; + position: absolute; + top: 47px; + left: 0; + width: 100%; + border-top: 1px solid #c8c8c8; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + outline: transparent; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action::before, +.ms-PersonaCard-overflow::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; + top: 0; + left: 0; + z-index: 100; +} + +.ms-PersonaCard-action.is-active, +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active::after, +.ms-PersonaCard-overflow.is-active::after { + box-sizing: border-box; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 13px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: -95px; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-details { + display: none; + width: 100%; + margin: 0; + max-height: 300px; + min-height: 48px; + color: #666666; + padding: 9px 20px; + box-sizing: border-box; +} + +.ms-PersonaCard-details.is-active { + display: block; +} + +.ms-PersonaCard-details.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander::after { + content: '\E70D'; +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 16px; + height: 30px; + line-height: 30px; + margin-top: 2px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E70E'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart::after { + display: none; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } + + .ms-ContextualHost .ms-PersonaCard { + box-shadow: none; + } +} + +.ms-Pivot { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + font-size: 0; + height: 40px; + list-style-type: none; + padding: 0; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-size: 14px; + font-weight: 400; + line-height: 40px; + margin-right: 8px; + padding: 0 8px; + text-align: center; + vertical-align: top; +} + +.ms-Pivot-link:hover { + cursor: pointer; +} + +.ms-Pivot-link::before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + left: 8px; + position: absolute; + right: 8px; + transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-Pivot-link::after { + color: transparent; + content: attr(title); + display: block; + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; +} + +.ms-Pivot-link.is-selected { + font-weight: 600; + position: relative; +} + +.ms-Pivot-link.is-selected::before { + background-color: #0078d7; +} + +.ms-Pivot-link.is-disabled { + color: #a6a6a6; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow::after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff; + background-color: #0078d7; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-weight: 600; + } +} + +.ms-ProgressIndicator { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-weight: 400; +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + background-color: #0078d7; + height: 2px; + position: absolute; + transition: width 0.3s ease; + width: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 36px; + color: #333333; + font-size: 14px; + font-weight: 400; + position: relative; + margin-bottom: 10px; + display: inline-block; + overflow: hidden; + background-color: #ffffff; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-SearchBox-clear { + display: block; +} + +.ms-SearchBox:hover { + background-color: #deecf9; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled { + background-color: #f4f4f4; + pointer-events: none; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + color: #a6a6a6; + background-color: transparent; + border-color: #f4f4f4; + cursor: default; +} + +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + right: 0; + z-index: 10; +} + +.ms-SearchBox-clear .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 36px; +} + +.ms-SearchBox-clear .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-icon { + position: relative; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + margin-left: 12px; + margin-right: 6px; + color: #0078d7; + vertical-align: top; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #69afe5; + outline: transparent 1px solid; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 36px; + padding: 6px 3px 7px 45px; + width: 208px; + background-color: transparent; + z-index: 5; + transition: padding-left 0.167s; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + height: 36px; + line-height: 36px; + color: #666666; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + width: 208px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 40px; + line-height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + transition: none; + border: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus { + background-color: transparent; + padding: 6px 3px 7px 45px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit { + display: none; + position: absolute; + top: 0; + z-index: 10; + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button { + height: 40px; + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar::before { + position: absolute; + content: ' '; + right: 0; + bottom: 0; + left: 0; + margin: 0 8px; + border-bottom: 1px solid #eaeaea; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label { + color: #212121; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:focus { + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit, +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + width: 50px; + min-height: 40px; + z-index: 0; + background-color: #f4f4f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed::before { + visibility: hidden; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field { + display: block; + cursor: text; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text { + display: inline-block; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear { + display: inline-block; + right: 58px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated { + transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active::before { + visibility: visible; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear { + display: inline-block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active { + color: #0078d7; +} + +@media only screen and (min-width: 1024px) { + .ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + border-right: 1px solid #eaeaea; + } +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 44px; + line-height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + font-size: 20px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + font-size: 16px; + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active::before { + visibility: visible; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field { + width: 100%; + padding-right: 100px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon { + color: #a6a6a6; + } +} + +.ms-Spinner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + font-size: 12px; + font-weight: 400; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-weight: 300; + font-size: 12px; + color: #333333; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #b3d6f2; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::before, +.ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::after, +.ms-Table-row.is-selected .ms-Table-rowCheck::after { + content: '\E73A'; + color: #ffffff; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E739'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 1px; +} + +.ms-Table--selectable tr:hover, +.ms-Table--selectable .ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: block; + } +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-TextField { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.ms-TextField .ms-Label { + font-size: 14px; + font-weight: 600; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled::-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-ms-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #333333; + height: 32px; + padding: 6px 12px 7px; + width: 100%; + min-width: 180px; + outline: 0; + text-overflow: ellipsis; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field[disabled] { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField-field::-webkit-input-placeholder { + color: #666666; +} + +.ms-TextField-field::-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; + background-color: #ffffff; +} + +.ms-TextField.ms-TextField--placeholder .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: 5; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 14px; + color: #666666; + padding: 6px 12px 7px; + pointer-events: none; + z-index: 0; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 14px; + margin-right: 8px; + display: table-cell; + vertical-align: top; + padding-left: 12px; + padding-top: 9px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 3px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #666666; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Toggle { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + top: -2px; + padding: 0 0 0 50px; +} + +.ms-Toggle .ms-Toggle-field::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + left: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field::before { + right: auto; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + right: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + background-color: #ffffff; + left: 28px; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #000000; + } +} + +.ms-Toggle:focus + .ms-Toggle-field, +.ms-Toggle:hover + .ms-Toggle-field { + border-color: #666666; +} + +.ms-Toggle:focus + .ms-Toggle-field::before, +.ms-Toggle:hover + .ms-Toggle-field::before { + background-color: #333333; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field, +.ms-Toggle:hover:checked + .ms-Toggle-field { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field::before, +.ms-Toggle:hover:checked + .ms-Toggle-field::before { + background-color: #ffffff; +} + +.ms-Toggle:active:checked + .ms-Toggle-field { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Toggle .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + border-color: #333333; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle .ms-Toggle-field .ms-Label { + color: #000000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Toggle .ms-Toggle-field:hover .ms-Label { + color: #000000; +} + +.ms-Toggle .ms-Toggle-field:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff; + border-color: #c8c8c8; + pointer-events: none; + cursor: default; +} + +.ms-Toggle.is-disabled .ms-Toggle-field::before { + background-color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 14px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 45px; + height: 20px; + box-sizing: border-box; + border: 2px solid #a6a6a6; + border-radius: 20px; + cursor: pointer; + transition-property: background, left, border-color; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + outline: 0; +} + +.ms-Toggle-field:hover, +.ms-Toggle-field:focus { + border-color: #666666; +} + +.ms-Toggle-input { + display: none; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} diff --git a/dist/css/fabric.components.min.css b/dist/css/fabric.components.min.css new file mode 100644 index 00000000..27a4302c --- /dev/null +++ b/dist/css/fabric.components.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:11px 7px}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute;margin-right:-2px}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:8px 5px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:5px 4px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-ms-flexbox;display:flex;padding:0}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-right:4px;position:relative;top:1px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:'\E73E';font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:'';width:0;height:0;border-radius:50%;position:absolute;top:8px;left:8px;bottom:0;right:0;transition-property:top,left,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;left:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-right:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-right:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-right:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-left:4px}}.ms-CommandButton-icon{display:inline-block;margin-right:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-left:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-left:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-left:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:' ';width:1px;height:16px;top:12px;left:-8px;border-left:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-right:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:'';height:2px;position:absolute;left:0;right:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 16px 0 25px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;right:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 16px 0 26px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:'\E73E';font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;left:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-left:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-left:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;left:0;top:0;right:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-right:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-right:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-left:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:left;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;right:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:'';position:absolute;border-left:1px solid #a6a6a6;top:10px;bottom:10px;left:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:'';pointer-events:none;position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-right:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-right:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-right:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-right:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);left:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:right}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-left:-24px;margin-right:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;right:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;right:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;left:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\e73A';font-size:17px;color:#767676;position:absolute;top:23px;left:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-right:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-right:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;left:0;right:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;right:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-right:0;padding-left:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:-30px 0 30px 30px rgba(0,0,0,.2);left:0;right:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;right:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-left:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-left:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-left:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;left:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;left:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;left:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;left:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:left;padding-left:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-left:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;left:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;left:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:'';width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:'';width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;left:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-right:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-left:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:'';position:absolute;top:47px;left:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:'';position:absolute;width:100%;height:100%;background-color:transparent;top:0;left:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\E70D'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E70E'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-right:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:'';height:2px;left:8px;position:absolute;right:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;right:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-left:12px;margin-right:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 3px 7px 45px;width:208px;background-color:transparent;z-index:5;transition:padding-left .167s}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;left:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px;line-height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 3px 7px 45px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{right:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:' ';right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;right:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-right:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-right:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:'\E73A';color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E739';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-right:8px;display:table-cell;vertical-align:top;padding-left:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 0 0 50px}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{right:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;left:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,left,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right} \ No newline at end of file diff --git a/dist/css/fabric.components.rtl.css b/dist/css/fabric.components.rtl.css new file mode 100644 index 00000000..56a4e15f --- /dev/null +++ b/dist/css/fabric.components.rtl.css @@ -0,0 +1,6051 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ + +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ + +.ms-Breadcrumb { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 12px; + color: #666666; + vertical-align: top; + margin: 11px 7px; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: #0078d7; + padding: 8px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; + margin-left: -2px; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + right: 0; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu:before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + top: -6px; + right: 6px; + content: ' '; + width: 16px; + height: 16px; + transform: rotate(45deg); + background-color: #ffffff; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: 0; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: 1px solid #767676; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + font-weight: 100; + font-size: 21px; + color: #333333; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; +} + +@media screen and (max-width:639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 8px 5px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 5px 4px; + } +} + +@media screen and (max-width:479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 14px; + font-weight: 400; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button.is-hidden { + display: none; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Button:hover { + color: #1aebff; + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Button:hover { + color: #37006e; + border-color: #37006e; + } +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.is-disabled, +.ms-Button:disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button.is-disabled .ms-Button-label, +.ms-Button:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.is-disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button:disabled:focus, +.ms-Button:disabled:hover { + outline: 0; +} + +.ms-Button-label { + color: #333333; + font-weight: 600; + font-size: 14px; +} + +.ms-Button-description, +.ms-Button-icon { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary.is-disabled, +.ms-Button.ms-Button--primary:disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label, +.ms-Button.ms-Button--primary:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border: 0; + display: -ms-flexbox; + display: flex; + padding: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + margin-left: 4px; + position: relative; + top: 1px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + font-size: 12px; + height: 18px; + line-height: 18px; + width: 18px; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-size: 21px; + font-weight: 100; + position: relative; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:focus .ms-Button-icon, +.ms-Button.ms-Button--hero:hover .ms-Button-icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon { + border: 1px solid #005a9e; +} + +.ms-Button.ms-Button--hero:focus .ms-Button-label, +.ms-Button.ms-Button--hero:hover .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + border: 1px solid #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon, +.ms-Button.ms-Button--hero:disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon { + border: 1px solid #c8c8c8; +} + +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label, +.ms-Button.ms-Button--hero:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + display: block; + height: auto; + max-width: 280px; + min-height: 72px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-weight: 600; + position: relative; + text-align: right; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-weight: 400; + font-size: 12px; + position: relative; + text-align: right; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound.is-disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound:disabled:focus { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label { + color: #a6a6a6; +} + +.ms-Callout { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + width: 288px; +} + +.ms-Callout.is-hidden { + display: none; +} + +.ms-Callout-header { + z-index: 105; + padding: 24px 28px 12px; +} + +.ms-Callout-title { + margin: 0; + font-weight: 300; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-weight: 300; + color: #333333; + font-size: 12px; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + left: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-link { + font-size: 14px; +} + +.ms-Callout-inner { + height: 100%; + padding: 0 28px 12px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button { + color: #0078d7; +} + +.ms-Callout-actions .ms-Callout-button { + margin-left: 12px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-weight: 100; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + padding-top: 12px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-inner { + padding-bottom: 12px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +.ms-CheckBox { + box-sizing: border-box; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-CheckBox .ms-Label { + font-size: 14px; + padding: 0 26px 0 0; + cursor: pointer; + display: inline-block; +} + +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +.ms-CheckBox-field:before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: 400; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); +} + +.ms-CheckBox-field:after { + content: '\E73E'; + font-family: FabricMDL2Icons; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: 13px; + top: 0; + color: #ffffff; + line-height: 20px; + width: 20px; + text-align: center; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CheckBox-field:after { + color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CheckBox-field:after { + color: #ffffff; + } +} + +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-CheckBox-field:focus:before, +.ms-CheckBox-field:hover:before { + border-color: #767676; +} + +.ms-CheckBox-field:focus .ms-Label, +.ms-CheckBox-field:hover .ms-Label { + color: #000000; +} + +.ms-CheckBox-field.is-disabled { + cursor: default; +} + +.ms-CheckBox-field.is-disabled:before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CheckBox-field.is-disabled:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CheckBox-field.is-disabled:before { + border-color: #600000; + } +} + +.ms-CheckBox-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-CheckBox-field.in-focus:before { + border-color: #767676; +} + +.ms-CheckBox-field.in-focus.is-disabled:before { + border-color: #c8c8c8; +} + +.ms-CheckBox-field.in-focus.is-checked:before { + border-color: #106ebe; +} + +.ms-CheckBox-field.is-checked:before { + border: 10px solid #0078d7; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CheckBox-field.is-checked:before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CheckBox-field.is-checked:before { + border-color: #37006e; + } +} + +.ms-CheckBox-field.is-checked:after { + display: block; +} + +.ms-CheckBox-field.is-checked:focus:before, +.ms-CheckBox-field.is-checked:hover:before { + border-color: #106ebe; +} + +.ms-RadioButton { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + color: #333333; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-RadioButton .ms-Label { + font-size: 14px; + padding: 0 26px 0 0; + cursor: pointer; + display: inline-block; +} + +.ms-RadioButton-input { + position: absolute; + opacity: 0; +} + +.ms-RadioButton-field:before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: 400; + position: absolute; + box-sizing: border-box; + transition-property: border-color; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); + border-radius: 50%; +} + +.ms-RadioButton-field:after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: 8px; + right: 8px; + bottom: 0; + left: 0; + transition-property: top, right, width, height; + transition-duration: 0.15s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field:after { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field:after { + color: #600000; + } +} + +.ms-RadioButton-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-RadioButton-field:focus:before, +.ms-RadioButton-field:hover:before { + border-color: #767676; +} + +.ms-RadioButton-field:focus .ms-Label, +.ms-RadioButton-field:hover .ms-Label { + color: #000000; +} + +.ms-RadioButton-field.is-disabled { + cursor: default; +} + +.ms-RadioButton-field.is-disabled:before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field.is-disabled:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field.is-disabled:before { + border-color: #600000; + } +} + +.ms-RadioButton-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-RadioButton-field.is-disabled:focus:before, +.ms-RadioButton-field.is-disabled:hover:before { + border-color: #c8c8c8; +} + +.ms-RadioButton-field.in-focus:before { + border-color: #767676; +} + +.ms-RadioButton-field.is-checked:before { + border: 2px solid #0078d7; + background-color: transparent; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field.is-checked:before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field.is-checked:before { + border-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked:after { + background-color: #0078d7; + top: 5px; + right: 5px; + width: 10px; + height: 10px; +} + +@media screen and (-ms-high-contrast:active) { + .ms-RadioButton-field.is-checked:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-RadioButton-field.is-checked:after { + background-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked.in-focus:before, +.ms-RadioButton-field.is-checked:focus:before, +.ms-RadioButton-field.is-checked:hover:before { + border-color: #0078d7; +} + +.ms-ChoiceFieldGroup { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + margin-bottom: 4px; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; +} + +.ms-CommandBar { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #f4f4f4; + height: 40px; + white-space: nowrap; + padding-right: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar .ms-CommandButton--actionButton { + border-left: 1px solid #eaeaea; +} + +.ms-CommandBar .ms-Button { + height: 100%; +} + +.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon { + padding-left: 0; +} + +.ms-CommandBar .ms-Button.is-hidden { + display: none; +} + +.ms-CommandBar .ms-SearchBox, +.ms-CommandBar .ms-SearchBox-field, +.ms-CommandBar .ms-SearchBox-label { + height: 100%; +} + +.ms-CommandBar .ms-SearchBox { + display: inline-block; + vertical-align: top; + transition: margin-left 0.267s; +} + +.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 220px; +} + +@media only screen and (max-width:639px) { + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + position: absolute; + right: 0; + left: 0; + z-index: 10; + } +} + +.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button { + font-size: 18px; + padding: 0 11px; +} + +@media only screen and (min-width:1024px) { + .ms-CommandBar .ms-SearchBox { + margin-left: 24px; + } +} + +@media only screen and (max-width:639px) { + .ms-CommandBar { + height: 44px; + } +} + +@media only screen and (min-width:640px) { + .ms-CommandBar.search-expanded .ms-SearchBox { + margin-left: 8px; + } + + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + transition: none; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: left; + text-align: left; + width: auto; + padding-left: 4px; + height: 100%; +} + +.ms-CommandBar-sideCommands .ms-Button:last-child { + margin-left: 0; +} + +@media only screen and (min-width:640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width:1024px) { + .ms-CommandBar-sideCommands { + padding-left: 20px; + } +} + +.ms-CommandButton { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + display: inline-block; + position: relative; + vertical-align: top; +} + +.ms-CommandButton.is-hidden { + display: none; +} + +.ms-CommandButton.is-disabled .ms-CommandButton-button, +.ms-CommandButton:disabled .ms-CommandButton-button { + cursor: default; +} + +.ms-CommandButton.is-disabled .ms-CommandButton-button:hover, +.ms-CommandButton:disabled .ms-CommandButton-button:hover { + background-color: #eff6fc; +} + +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label, +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon, +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label { + color: #a6a6a6; +} + +.ms-CommandButton .ms-ContextualMenu { + display: none; +} + +.ms-CommandButton-button, +.ms-CommandButton-splitIcon { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + cursor: pointer; + display: inline-block; + height: 40px; + line-height: 40px; + outline: 1px solid transparent; + padding: 0 8px; + position: relative; + vertical-align: top; + background: transparent; +} + +.ms-CommandButton-button:hover, +.ms-CommandButton-splitIcon:hover { + background-color: #eaeaea; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.ms-CommandButton-button:active, +.ms-CommandButton-splitIcon:active { + background-color: #eaeaea; +} + +.ms-CommandButton-button:focus:before, +.ms-CommandButton-splitIcon:focus:before { + top: 3px; + right: 3px; + left: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-button:focus, +.ms-CommandButton-splitIcon:focus { + outline: 0; +} + +@media only screen and (max-width:639px) { + .ms-CommandButton-button, + .ms-CommandButton-splitIcon { + height: 44px; + } + + .ms-CommandButton-button .ms-CommandButton-icon, + .ms-CommandButton-splitIcon .ms-CommandButton-icon { + font-size: 20px; + } + + .ms-CommandButton-button .ms-CommandButton-label, + .ms-CommandButton-splitIcon .ms-CommandButton-label { + line-height: 44px; + } +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-right: 8px; +} + +@media only screen and (max-width:639px) { + .ms-CommandButton + .ms-CommandButton { + margin-right: 4px; + } +} + +.ms-CommandButton-icon { + display: inline-block; + margin-left: 8px; + position: relative; + font-size: 16px; + min-width: 16px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + right: 50%; + transform: translate(-50%,-50%); +} + +.ms-CommandButton-label { + font-size: 14px; + font-weight: 400; + color: #333333; + line-height: 40px; + height: 100%; + display: inline-block; + vertical-align: top; +} + +.ms-CommandButton-label:hover { + color: #212121; +} + +.ms-CommandButton-dropdownIcon, +.ms-CommandButton-splitIcon { + display: inline-block; + position: relative; + color: #333333; + font-size: 12px; + font-weight: 300; + min-width: 12px; + height: 100%; + vertical-align: top; + margin-right: 8px; +} + +.ms-CommandButton-dropdownIcon .ms-Icon, +.ms-CommandButton-splitIcon .ms-Icon { + line-height: normal; + padding-top: 16px; +} + +.ms-CommandButton-dropdownIcon:focus:before, +.ms-CommandButton-splitIcon:focus:before { + top: 3px; + right: 3px; + left: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +@media only screen and (max-width:639px) { + .ms-CommandButton-dropdownIcon, + .ms-CommandButton-splitIcon { + display: none; + } +} + +.ms-CommandButton-splitIcon { + margin-right: -2px; + width: 27px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + margin-right: -1px; + position: relative; + padding-top: 16px; +} + +.ms-CommandButton-splitIcon .ms-Icon:after { + position: absolute; + content: ' '; + width: 1px; + height: 16px; + top: 12px; + right: -8px; + border-right: 1px solid #c8c8c8; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + margin-left: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button { + padding: 0 12px; +} + +.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + background: none; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button { + width: 50px; + height: 40px; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon { + position: absolute; + top: 50%; + right: 50%; + transform: translate(-50%,-50%); + width: 16px; + height: 16px; + padding-left: 0; +} + +.ms-CommandButton.ms-CommandButton--pivot.is-active:before, +.ms-CommandButton.ms-CommandButton--pivot:hover:before { + content: ''; + height: 2px; + position: absolute; + right: 0; + left: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label, +.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label { + display: inline-block; +} + +@media only screen and (max-width:479px) { + .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label, + .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label { + font-size: 16px; + } +} + +.ms-ContextualMenu { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + max-width: 220px; + list-style-type: none; + position: relative; + background-color: #ffffff; +} + +.ms-ContextualMenu.is-hidden { + display: none; +} + +.ms-ContextualMenu-item { + position: relative; +} + +.ms-ContextualMenu-link { + box-sizing: border-box; + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 36px; + overflow: hidden; + line-height: 34px; + padding: 0 25px 0 16px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus, +.ms-ContextualMenu-link:hover { + background-color: #f4f4f4; + color: #212121; +} + +.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon { + color: #212121; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; + border: 1px solid #666666; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #dadada; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon { + color: #000000; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #d0d0d0; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +.ms-ContextualMenu-link.is-disabled .ms-Icon { + color: #a6a6a6; + pointer-events: none; + cursor: default; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 36px; + line-height: 36px; + padding: 0 18px; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu { + position: absolute; + top: -1px; + right: 178px; +} + +.ms-ContextualMenu-caretRight, +.ms-ContextualMenu-subMenuIcon { + color: #333333; + font-size: 8px; + font-weight: 600; + width: 24px; + height: 36px; + line-height: 36px; + position: absolute; + text-align: center; + top: 0; + left: 0; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 26px 0 16px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; + font-weight: 600; + color: #333333; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + color: #333333; + content: '\E73E'; + font-size: 10px; + font-weight: 800; + height: 36px; + line-height: 36px; + position: absolute; + right: 7px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover { + color: #212121; + background-color: #f4f4f4; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after { + color: #212121; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active { + color: #000000; + background-color: #d0d0d0; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after { + color: #000000; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link, +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link { + padding-right: 40px; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon, +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + text-align: center; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons { + width: 220px; +} + +.ms-DatePicker { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: right; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + left: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + animation-name: fadeIn,slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-weight: 100; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-right: 15px; +} + +.ms-DatePicker-year { + margin-right: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-weight: 400; + font-size: 15px; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #b3d6f2; +} + +.ms-DatePicker-day--disabled:before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-weight: 400; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + left: 9px; + right: 9px; +} + +.ms-DatePicker-decadeComponents, +.ms-DatePicker-yearComponents { + position: absolute; + left: 10px; +} + +.ms-DatePicker-nextDecade, +.ms-DatePicker-nextMonth, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-prevMonth, +.ms-DatePicker-prevYear { + width: 40px; + height: 40px; + display: block; + float: left; + margin-right: 10px; + text-align: center; + line-height: 40px; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-nextDecade:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-prevYear:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + right: 0; + position: absolute; + top: 0; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentDecade, +.ms-DatePicker-currentYear { + display: block; + font-weight: 300; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-right: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 5px 30px 0; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: right; + margin: 0 0 10px 10px; + font-weight: 400; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-weight: 300; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + left: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width:460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-weight: 300; + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-left: 1px solid #eaeaea; + width: 220px; + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + right: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-right: 12px; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-weight: 600; + font-size: 12px; + } + + .ms-DatePicker-nextDecade, + .ms-DatePicker-nextMonth, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-prevMonth, + .ms-DatePicker-prevYear { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentDecade, + .ms-DatePicker-currentYear { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 0 10px 10px; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + left: 10px; + text-align: left; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width:459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-DetailsList { + position: relative; +} + +.ms-DetailsList.is-horizontalConstrained { + overflow-x: auto; + overflow-y: inherit; +} + +.ms-DetailsList-cell { + word-break: break-word; +} + +.ms-DetailsHeader { + display: inline-block; + min-width: 100%; + height: 36px; + line-height: 36px; + white-space: nowrap; + padding-bottom: 1px; + border-bottom: 1px solid #eaeaea; + margin-bottom: 1px; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-DetailsHeader.is-singleSelect { + padding-right: 40px; +} + +.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover { + background: transparent; + position: fixed; + right: 0; + top: 0; + left: 0; + bottom: 0; + z-index: 99; + cursor: col-resize; +} + +.ms-DetailsHeader-cell.is-check .ms-Check-circle { + visibility: hidden; +} + +.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, +.ms-DetailsHeader.is-allSelected .ms-Check-circle { + visibility: visible; +} + +.ms-DetailsHeader-cellWrapper { + display: inline-block; + position: relative; +} + +.ms-DetailsHeader-cellSizeWrapper { + display: inline-block; + vertical-align: top; + margin-left: 16px; +} + +.ms-DetailsHeader-cellSizeWrapper:last-child { + margin-left: 0; +} + +.ms-DetailsHeader-filterChevron.ms-Icon { + color: #a6a6a6; + padding-right: 4px; + vertical-align: middle; +} + +.ms-DetailsHeader-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + color: #a6a6a6; + border: 0; + background: none; + line-height: inherit; + margin: 0; + font-size: inherit; + font-family: inherit; + text-align: right; + height: 36px; + vertical-align: top; +} + +.ms-DetailsHeader-cell.is-check { + position: relative; + padding: 8px 10px; + margin: 0; +} + +.ms-DetailsHeader-cell:focus { + outline: transparent; +} + +.ms-DetailsHeader-cell.is-sortable { + color: #000000; + cursor: default; +} + +.ms-DetailsHeader-cell.is-sortable:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter { + position: absolute; + left: 0; + width: 20px; + top: 0; + bottom: 0; + padding: 0; + text-align: center; + color: #000000; +} + +.ms-DetailsHeader-cell.is-filter:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter:before { + content: ''; + position: absolute; + border-right: 1px solid #a6a6a6; + top: 10px; + bottom: 10px; + right: 0; +} + +.ms-DetailsHeader-cell.is-sizer { + position: absolute; + width: 16px; + cursor: col-resize; + bottom: 0; + top: 0; + height: inherit; + z-index: 99; +} + +.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow { + display: inline; +} + +.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow { + transform: rotate(180deg); +} + +.ms-DetailsHeader-cell.is-resizing.is-sizer:after, +.ms-DetailsHeader-cell.is-sizer:hover:after { + content: ''; + position: absolute; + right: 50%; + top: 0; + bottom: 0; + width: 1px; + background: #eaeaea; + border: 1px solid #ffffff; +} + +.ms-DetailsHeader-cell:focus:before, +.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before { + content: ''; + pointer-events: none; + position: absolute; + right: 0; + top: 0; + left: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsHeader-sortArrow.ms-Icon { + font-size: 12px; + margin-left: 4px; + display: none; + color: #a6a6a6; +} + +.ms-DetailsRow { + position: relative; + display: inline-block; + min-width: 100%; + min-height: 36px; + vertical-align: top; + white-space: nowrap; + padding: 10px 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; +} + +.ms-DetailsRow:focus { + outline: transparent; +} + +.ms-DetailsRow.ms-DetailsRow.is-selected { + background: #deecf9; +} + +.ms-DetailsRow:hover, +.ms-Fabric.is-stationary .ms-DetailsRow:hover { + background: #eff6fc; +} + +.ms-DetailsRow.is-selected:hover, +.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover { + background: #b3d6f2; +} + +.ms-DetailsRow-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + vertical-align: top; + white-space: normal; + word-break: break-word; + margin-left: 16px; +} + +.ms-DetailsRow-cell.is-clipped { + overflow: hidden; +} + +.ms-DetailsRow-cell:last-child { + margin-left: 0; +} + +.ms-DetailsRow-cellIcon { + display: inline-block; + margin-left: 6px; + position: relative; + bottom: -2px; +} + +.ms-DetailsRow-check { + display: inline-block; + cursor: default; + padding: 10px; + margin: -10px 0; + box-sizing: border-box; + vertical-align: top; + background: none; + border: 0; + visibility: hidden; +} + +.ms-DetailsRow-check:focus { + outline: transparent; +} + +.ms-DetailsRow.is-selected .ms-DetailsRow-check, +.ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check { + visibility: visible; +} + +.ms-DetailsRow:focus .ms-DetailsRow-focusBox, +.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsRow-cellMeasurer { + position: absolute; + visibility: hidden; + white-space: nowrap; + top: -1000000000; +} + +.ms-Check { + display: inline-block; + cursor: default; + line-height: 0; + vertical-align: top; +} + +.ms-Check.is-checked .ms-Check-circle { + fill: #0078d7; + stroke: #ffffff; + stroke-width: 1px; +} + +.ms-Check.is-checked .ms-Check-check { + stroke: #ffffff; +} + +.ms-Check-circle { + fill: #ffffff; + stroke: #c8c8c8; +} + +.ms-Check-check { + stroke: #c8c8c8; +} + +.ms-Dialog { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + display: none; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: fixed; + transform: translate(-50%,-50%); + right: 50%; + top: 50%; +} + +.ms-Dialog.is-open { + display: block; +} + +.ms-Dialog-title { + font-size: 21px; + font-weight: 100; + margin-bottom: 24px; +} + +.ms-Dialog-content { + position: relative; +} + +.ms-Dialog-subText { + color: #333333; + font-size: 12px; + font-weight: 300; + line-height: 1.5; +} + +.ms-Dialog-actions { + margin-top: 24px; + text-align: left; +} + +.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + background-color: #0078d7; + color: #ffffff; + font-size: 28px; + font-weight: 100; + padding: 28px 24px; + margin-top: -28px; + margin-right: -24px; + margin-left: -24px; +} + +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + left: 12px; + top: 12px; + z-index: 10; +} + +.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel { + color: #666666; + font-size: 16px; +} + +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-left: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; +} + +@media (min-width:480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:active .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:hover .ms-Dropdown-title { + color: #000000; +} + +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: absolute; +} + +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; +} + +.ms-Panel .ms-Dropdown-items .ms-Dropdown-item { + padding: 7px 16px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Panel .ms-Dropdown-items:before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #212121; + font-size: 12px; + position: absolute; + left: 13px; + bottom: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + padding: 5px 10px 0 32px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-title.ms-Dropdown-truncator { + height: auto; + display: block; + position: absolute; + visibility: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + z-index: 400; + overflow-y: scroll; + top: auto; + left: auto; + bottom: auto; + right: auto; + max-width: 100%; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + right: 0; + left: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 36px; + padding: 7px 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #b3d6f2; + color: #000000; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #b3d6f2; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-FacePile { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 32px; + width: auto; +} + +.ms-FacePile .ms-FacePile-personaCardHost { + display: none; +} + +.ms-FacePile-addButton { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: right; + padding: 0; + margin-left: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-FacePile-addButton .ms-Persona-details, +.ms-FacePile-addButton .ms-Persona-presence { + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus, +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover { + background-color: #005a9e; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active { + background-color: #004578; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active { + display: block; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover { + color: #212121; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled { + color: #c8c8c8; +} + +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: 14px; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox { + display: none; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-weight: 100; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Link { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; +} + +.ms-Link:focus, +.ms-Link:hover { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-List { + padding: 0; + list-style-type: none; +} + +.ms-List, +.ms-ListItem { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; +} + +.ms-ListItem { + padding: 0; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:after, +.ms-ListItem:before { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-weight: 300; + font-size: 21px; + padding-left: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-weight: 400; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-left: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-weight: 300; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-left: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-weight: 300; + font-size: 11px; + position: absolute; + left: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: right; + height: 70px; + margin-right: -8px; + margin-left: 10px; + width: 70px; + background-color: #333333; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + left: 30px; + text-align: left; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-right: 3px solid #0078d7; + padding-right: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-metaText, +.ms-ListItem.is-unread .ms-ListItem-secondaryText { + color: #0078d7; + font-weight: 600; +} + +.ms-ListItem.is-unseen:after { + border-left: 10px solid transparent; + border-top: 10px solid #0078d7; + right: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + right: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-right: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + position: absolute; + top: 14px; + right: 7px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + content: '\e73A'; + font-size: 17px; + color: #767676; + position: absolute; + top: 23px; + right: 7px; + border: 0; +} + +.ms-ListItem.is-selected:hover { + background-color: #b3d6f2; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: right; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-left: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-weight: 400; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 12px; + font-weight: 400; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + animation-name: fadeIn,slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + animation-name: fadeOut,slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-close, +.ms-MessageBanner-expand { + height: 52px; + width: 40px; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.ms-MessageBanner-close { + position: absolute; + left: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-right: 0; + max-width: 770px; + overflow: hidden; + text-align: right; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-right: 10px; + padding-left: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width:479px) { + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: left; + padding: 0 0 10px 10px; + } + + .ms-MessageBanner-text { + margin-right: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + display: inline-block; + padding: 0; + margin-right: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-ContextualHost { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + background-color: #ffffff; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); +} + +.ms-ContextualHost.is-positioned { + position: absolute; + margin: 0; +} + +.ms-ContextualHost.is-open { + display: inline-block; +} + +.ms-ContextualHost-beak { + box-shadow: 0 0 15px -5px #3c3c3c; + position: absolute; + width: 28px; + height: 28px; + background: #ffffff; + border: 1px solid #eaeaea; + box-sizing: border-box; + top: -6px; + display: none; + transform: rotate(45deg); + z-index: 0; + outline: 1px solid transparent; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak, +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + top: 40px; + display: none; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + right: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + left: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak { + display: block; + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + display: block; + bottom: -10px; +} + +.ms-ContextualHost-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + min-height: 10px; +} + +.ms-ContextualHost-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + left: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 10; +} + +.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title { + margin-left: 20px; +} + +.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak { + background-color: #0078d7; +} + +@media (min-width:480px) { + .ms-ContextualHost { + margin: 16px; + } + + .ms-ContextualHost.is-positioned { + margin: 0; + } + + .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak, + .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + display: block; + } +} + +.ms-MessageBar { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.ms-MessageBar .ms-Link { + font-size: 12px; +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-left: 8px; + font-size: 16px; + color: #767676; +} + +.ms-MessageBar-text { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 12px; + font-weight: 400; +} + +.ms-MessageBar.ms-MessageBar--warning { + background-color: #fff4ce; +} + +.ms-MessageBar.ms-MessageBar--severeWarning { + background-color: #fed9cc; +} + +.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon { + color: #d83b01; +} + +.ms-MessageBar.ms-MessageBar--error { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--blocked { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-OrgChart { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: right; + margin: 0; + padding: 0; +} + +.ms-Overlay { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + background-color: hsla(0,0%,100%,0.4); + position: fixed; + bottom: 0; + right: 0; + left: 0; + top: 0; + z-index: 0; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0,0,0,0.4); +} + +.ms-u-overflowHidden { + overflow: hidden; +} + +.ms-Panel { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #ffffff; + width: 100%; + max-width: 340px; + box-shadow: 30px 0 30px -30px rgba(0,0,0,0.2); + position: absolute; + top: 0; + left: 0; + bottom: 0; + z-index: 10; + display: none; + height: 100%; +} + +.ms-Panel.animate-in { + animation-name: fadeIn,slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-fill-mode: both; +} + +.ms-Panel.animate-out { + animation-name: fadeOut,slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel .ms-CommandBar { + padding-left: 0; + padding-right: 8px; +} + +.ms-Panel.ms-Panel--md { + max-width: 340px; +} + +.ms-Panel.ms-Panel--lg { + max-width: 644px; +} + +.ms-Panel.ms-Panel--xl { + max-width: 940px; +} + +.ms-Panel.ms-Panel--xxl { + max-width: 1192px; +} + +.ms-Panel--left { + box-shadow: 30px 0 30px 30px rgba(0,0,0,0.2); + right: 0; + left: auto; +} + +.ms-Panel--left.animate-in { + animation-name: fadeIn,slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-fill-mode: both; +} + +.ms-Panel--left.animate-out { + animation-name: fadeOut,slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + left: 6px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 16px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-closeButton .ms-Icon--Cancel { + margin-top: 2px; +} + +@media (max-width:639px) { + .ms-Panel-closeButton { + font-size: 20px; + line-height: 20px; + height: 44px; + left: 4px; + } +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; + height: 100%; +} + +@media (min-width:640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width:1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-weight: 100; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width:1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +.ms-PanelHost { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + bottom: 0; + right: 0; + position: fixed; + left: 0; + top: 0; + z-index: 10; +} + +.ms-PanelHost .ms-Overlay { + cursor: pointer; +} + +.ms-PeoplePicker { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 1px solid #c8c8c8; + cursor: text; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker-searchBox.is-active, +.ms-PeoplePicker-searchBox:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-PeoplePicker-searchBox:focus, + .ms-PeoplePicker-searchBox:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-PeoplePicker-searchBox:focus, + .ms-PeoplePicker-searchBox:hover { + border-color: #37006e; + } +} + +.ms-PeoplePicker-searchBox::-webkit-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-moz-placeholder, +.ms-PeoplePicker-searchBox::-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-ms-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: 100%; + -ms-flex: 1; + flex: 1; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.ms-PeoplePicker-persona { + cursor: pointer; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + background-color: #ffffff; + border: 1px solid #c8c8c8; + margin-bottom: -1px; + padding-top: 9px; + width: 100%; + padding-right: 0; + box-sizing: border-box; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-weight: 300; + font-size: 12px; + padding-top: 8px; + padding-bottom: 8px; + text-transform: uppercase; + padding-right: 16px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-right: 16px; + cursor: pointer; + outline: 0; +} + +.ms-PeoplePicker-result:focus, +.ms-PeoplePicker-result:hover { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result:focus { + box-shadow: inset 0 0 0 1px #0078d7; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #b3d6f2; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active, +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #69afe5; +} + +.ms-PeoplePicker-peopleListBtn, +.ms-PeoplePicker-resultBtn { + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: right; + margin: 0 0 10px; + padding: 0 9px 0 0; +} + +@media (min-width:480px) { + .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-resultBtn { + height: 48px; + } +} + +.ms-PeoplePicker-peopleListBtn:hover, +.ms-PeoplePicker-resultBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-peopleListBtn:focus, +.ms-PeoplePicker-resultBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 100%; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + left: 0; + top: 0; + width: 40px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #a6a6a6; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + background: none; + border: 0; + cursor: pointer; + height: 40px; + position: relative; + width: 100%; +} + +.ms-PeoplePicker-searchMore:hover { + background-color: #f4f4f4; +} + +.ms-PeoplePicker-searchMoreIcon { + font-size: 21px; + height: 40px; + right: 16px; + line-height: 40px; + position: absolute; + text-align: center; + top: 0; + width: 40px; +} + +.ms-PeoplePicker-searchMoreText { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + height: 40px; + right: 64px; + line-height: 40px; + position: absolute; + top: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction { + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width:479px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder, + .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials, + .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence, + .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + right: 19px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details, + .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-right: 8px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width:480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width:480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction, + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn { + height: 40px; + } +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-peopleListHeader, +.ms-PeoplePicker-selectedHeader { + color: #0078d7; + font-size: 12px; + font-weight: 400; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-peopleList, +.ms-PeoplePicker-selectedPeople { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 1; + position: relative; + width: 100%; + height: 48px; + display: table; + table-layout: fixed; + border-collapse: separate; +} + +.ms-Persona .ms-ContextualHost { + display: none; +} + +.ms-Persona-imageArea { + position: absolute; + overflow: hidden; + text-align: center; + max-width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; + width: 100%; + top: 0; + right: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + left: 0; + right: 0; + font-size: 47px; + top: 9px; + z-index: 5; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-weight: 100; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--blueLight { + background-color: #00bcf2; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #0078d7; +} + +.ms-Persona-initials.ms-Persona-initials--blueDark { + background-color: #002050; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #008272; +} + +.ms-Persona-initials.ms-Persona-initials--greenLight { + background-color: #bad80a; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #107c10; +} + +.ms-Persona-initials.ms-Persona-initials--greenDark { + background-color: #004b1c; +} + +.ms-Persona-initials.ms-Persona-initials--magentaLight { + background-color: #e3008c; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #b4009e; +} + +.ms-Persona-initials.ms-Persona-initials--purpleLight { + background-color: #b4a0ff; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #5c2d91; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #000000; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #d83b01; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #e81123; +} + +.ms-Persona-initials.ms-Persona-initials--redDark { + background-color: #a80000; +} + +.ms-Persona-image { + position: absolute; + top: 0; + right: 0; + height: 48px; + z-index: 10; + width: 100%; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #7fba00; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + right: 34px; + bottom: -1px; + border: 2px solid #ffffff; + text-align: center; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona-presence { + border-color: #000000; + box-shadow: inset 0 0 0 1px #1aebff; + color: #000000; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona-presence { + border-color: #ffffff; + box-shadow: inset 0 0 0 1px #37006e; + color: #ffffff; + background-color: #000000; + } +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 8px; + line-height: 12px; + vertical-align: top; +} + +.ms-Persona-details { + padding: 0 12px; + vertical-align: middle; + overflow: hidden; + text-align: right; + padding-right: 60px; + display: table-cell; + width: 100%; +} + +.ms-Persona-optionalText, +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText { + display: block; + white-space: nowrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-weight: 400; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-optionalText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText { + color: #666666; + font-weight: 400; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-optionalText, +.ms-Persona-tertiaryText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + display: none; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + left: auto; + top: 10px; + right: 0; + border: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-right: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token, +.ms-Persona.ms-Persona--xs { + height: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-image, +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea, +.ms-Persona.ms-Persona--token .ms-Persona-image, +.ms-Persona.ms-Persona--token .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image, +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea { + max-width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder, +.ms-Persona.ms-Persona--token .ms-Persona-placeholder, +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-initials, +.ms-Persona.ms-Persona--token .ms-Persona-initials, +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-presence, +.ms-Persona.ms-Persona--token .ms-Persona-presence, +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + right: 19px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-details, +.ms-Persona.ms-Persona--token .ms-Persona-details, +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-right: 40px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText, +.ms-Persona.ms-Persona--token .ms-Persona-primaryText, +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--token .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--sm { + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-image, +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea { + max-width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + right: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-right: 48px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--lg { + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-image, +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea { + max-width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + right: 49px; + height: 20px; + width: 20px; + border-width: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon { + line-height: 20px; + font-size: 14px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-details { + padding-right: 84px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--xl { + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-image, +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea { + max-width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 28px; + width: 28px; + right: 71px; + border-width: 4px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon { + line-height: 28px; + font-size: 21px; + position: relative; + top: 1px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-right: 120px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-weight: 300; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText, +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #7fba00; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #fcd116; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon { + position: relative; + right: 1px; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #ffffff; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + right: 0; + box-shadow: inset 0 0 0 2px #d93b3b; + border-radius: 50%; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after { + content: ''; + width: 100%; + height: 2px; + background-color: #d93b3b; + transform: rotate(-45deg); + position: absolute; + top: 5px; + right: 0; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after { + top: 9px; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after { + top: 13px; +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #37006e; + } +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #000000; + box-shadow: inset 0 0 0 1px #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #ffffff; + box-shadow: inset 0 0 0 1px #000000; + } +} + +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; +} + +.ms-Persona.ms-Persona--facePile:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-initials { + position: relative; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-details, +.ms-Persona.ms-Persona--facePile .ms-Persona-presence { + display: none; +} + +.ms-Persona.ms-Persona--token { + display: -ms-inline-flexbox; + display: inline-flex; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin: 4px; +} + +.ms-Persona.ms-Persona--token:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: 32px; + height: 32px; + padding: 0; + line-height: 30px; + transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + text-align: center; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover { + background-color: #eaeaea; +} + +.ms-Persona.ms-Persona--token .ms-Persona-imageArea { + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-left: 8px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + animation-name: fadeIn,slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-fill-mode: both; + color: #333333; + font-size: 14px; + font-weight: 400; + bottom: 0; + right: 0; + position: fixed; + left: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; + padding-top: 12px; + padding-bottom: 12px; + padding-right: 20px; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + position: relative; + list-style: none; + margin: 0; + padding: 0 10px; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-actions:before { + content: ''; + position: absolute; + top: 47px; + right: 0; + width: 100%; + border-top: 1px solid #c8c8c8; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + outline: transparent; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action:before, +.ms-PersonaCard-overflow:before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; + top: 0; + right: 0; + z-index: 100; +} + +.ms-PersonaCard-action.is-active, +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.ms-PersonaCard-overflow.is-active:after { + box-sizing: border-box; + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-left: 0; + border-bottom: 0; + bottom: -4px; + right: 13px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: left; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + left: 12px; + top: -95px; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-details { + display: none; + width: 100%; + margin: 0; + max-height: 300px; + min-height: 48px; + color: #666666; + padding: 9px 20px; + box-sizing: border-box; +} + +.ms-PersonaCard-details.is-active { + display: block; +} + +.ms-PersonaCard-details.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\E70D'; +} + +.ms-PersonaCard-details[data-detail-id=org] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 16px; + height: 30px; + line-height: 30px; + margin-top: 2px; + position: absolute; + left: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + content: '\E70E'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after { + display: none; +} + +@media (min-width:480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + max-width: 360px; + position: relative; + } + + .ms-ContextualHost .ms-PersonaCard { + box-shadow: none; + } +} + +.ms-Pivot { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + font-size: 0; + height: 40px; + list-style-type: none; + padding: 0; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-size: 14px; + font-weight: 400; + line-height: 40px; + margin-left: 8px; + padding: 0 8px; + text-align: center; + vertical-align: top; +} + +.ms-Pivot-link:hover { + cursor: pointer; +} + +.ms-Pivot-link:before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + right: 8px; + position: absolute; + left: 8px; + transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-Pivot-link:after { + color: transparent; + content: attr(title); + display: block; + font-weight: 700; + height: 1px; + overflow: hidden; + visibility: hidden; +} + +.ms-Pivot-link.is-selected { + font-weight: 600; + position: relative; +} + +.ms-Pivot-link.is-selected:before { + background-color: #0078d7; +} + +.ms-Pivot-link.is-disabled { + color: #a6a6a6; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-left: -2px; + padding: 0 10px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff; + background-color: #0078d7; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-weight: 600; + } +} + +.ms-ProgressIndicator { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-weight: 400; +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + background-color: #0078d7; + height: 2px; + position: absolute; + transition: width 0.3s ease; + width: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 36px; + color: #333333; + font-size: 14px; + font-weight: 400; + position: relative; + margin-bottom: 10px; + display: inline-block; + overflow: hidden; + background-color: #ffffff; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-SearchBox-clear { + display: block; +} + +.ms-SearchBox:hover { + background-color: #deecf9; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled { + background-color: #f4f4f4; + pointer-events: none; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon, +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + color: #a6a6a6; + background-color: transparent; + border-color: #f4f4f4; + cursor: default; +} + +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + left: 0; + z-index: 10; +} + +.ms-SearchBox-clear .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 36px; +} + +.ms-SearchBox-clear .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-icon { + position: relative; + top: 50%; + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + margin-right: 12px; + margin-left: 6px; + color: #0078d7; + vertical-align: top; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #69afe5; + outline: 1px solid transparent; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 36px; + padding: 6px 45px 7px 3px; + width: 208px; + background-color: transparent; + z-index: 5; + transition: padding-right 0.167s; +} + +.ms-SearchBox-field:focus { + padding: 6px 10px 7px 32px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + right: 0; + height: 36px; + line-height: 36px; + color: #666666; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + width: 208px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 40px; + line-height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + transition: none; + border: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus { + background-color: transparent; + padding: 6px 45px 7px 3px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter { + display: none; + position: absolute; + top: 0; + z-index: 10; + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button { + height: 40px; + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter { + left: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:before { + position: absolute; + content: ' '; + left: 0; + bottom: 0; + right: 0; + margin: 0 8px; + border-bottom: 1px solid #eaeaea; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label { + color: #212121; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:focus { + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit, +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + width: 50px; + min-height: 40px; + z-index: 0; + background-color: #f4f4f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before { + visibility: hidden; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field { + display: block; + cursor: text; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text { + display: inline-block; +} + +@media only screen and (max-width:639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear { + display: inline-block; + left: 58px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated { + transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before { + visibility: visible; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear { + display: inline-block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active { + color: #0078d7; +} + +@media only screen and (min-width:1024px) { + .ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + border-left: 1px solid #eaeaea; + } +} + +@media only screen and (max-width:639px) { + .ms-SearchBox.ms-SearchBox--commandBar { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 44px; + line-height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon { + font-size: 20px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + font-size: 16px; + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active:before { + visibility: visible; +} + +@media only screen and (max-width:639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field { + width: 100%; + padding-left: 100px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon { + color: #a6a6a6; + } +} + +.ms-Spinner { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + right: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + font-size: 12px; + font-weight: 400; + color: #0078d7; + right: 28px; + top: 2px; +} + +.ms-Spinner-label, +.ms-Table { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; +} + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table-row, +.ms-Table tr { + display: table-row; + line-height: 30px; + font-weight: 300; + font-size: 12px; + color: #333333; +} + +.ms-Table-row.is-selected, +.ms-Table tr.is-selected { + background-color: #b3d6f2; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck, +.ms-Table tr.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:before, +.ms-Table tr.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:after, +.ms-Table tr.is-selected .ms-Table-rowCheck:after { + content: '\E73A'; + color: #ffffff; +} + +.ms-Table-cell, +.ms-Table td, +.ms-Table th { + display: table-cell; + padding: 0 10px; +} + +.ms-Table-head, +.ms-Table thead th { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table thead td, +.ms-Table thead th { + font-weight: 400; + text-align: right; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: FabricMDL2Icons; + font-style: normal; + font-weight: 400; + speak: none; + content: '\E739'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + right: 4px; + top: 1px; +} + +.ms-Table--selectable .ms-Table-row:hover, +.ms-Table--selectable tr:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: block; + } +} + +.ms-TextField { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.ms-TextField .ms-Label { + font-size: 14px; + font-weight: 600; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled::-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-ms-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #333333; + height: 32px; + padding: 6px 12px 7px; + width: 100%; + min-width: 180px; + outline: 0; + text-overflow: ellipsis; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField-field:focus, + .ms-TextField-field:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField-field:focus, + .ms-TextField-field:hover { + border-color: #37006e; + } +} + +.ms-TextField-field[disabled] { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField-field::-webkit-input-placeholder { + color: #666666; +} + +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field::-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; + background-color: #ffffff; +} + +.ms-TextField.ms-TextField--placeholder .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: 5; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 14px; + color: #666666; + padding: 6px 12px 7px; + pointer-events: none; + z-index: 0; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled, +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 14px; + margin-left: 8px; + display: table-cell; + vertical-align: top; + padding-right: 12px; + padding-top: 9px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: right; + display: table-cell; + text-align: right; + padding-top: 8px; + padding-bottom: 3px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #666666; + font-size: 14px; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label, +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + -webkit-font-smoothing: antialiased; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-weight: 400; +} + +.ms-Label { + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Toggle { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + top: -2px; + padding: 0 50px 0 0; +} + +.ms-Toggle .ms-Toggle-field:before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + right: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, right; + transition-duration: 0.25s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field:before { + left: auto; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Toggle .ms-Toggle-field.is-selected:before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + left: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, right; + transition-duration: 0.25s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle .ms-Toggle-field.is-selected:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected:before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field.is-selected:before { + background-color: #ffffff; + right: 28px; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #000000; + } +} + +.ms-Toggle:focus + .ms-Toggle-field, +.ms-Toggle:hover + .ms-Toggle-field { + border-color: #666666; +} + +.ms-Toggle:focus + .ms-Toggle-field:before, +.ms-Toggle:hover + .ms-Toggle-field:before { + background-color: #333333; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field, +.ms-Toggle:hover:checked + .ms-Toggle-field { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field:before, +.ms-Toggle:hover:checked + .ms-Toggle-field:before { + background-color: #ffffff; +} + +.ms-Toggle:active:checked + .ms-Toggle-field { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Toggle .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + border-color: #333333; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle .ms-Toggle-field .ms-Label { + color: #000000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Toggle .ms-Toggle-field:hover .ms-Label { + color: #000000; +} + +.ms-Toggle .ms-Toggle-field:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff; + border-color: #c8c8c8; + pointer-events: none; + cursor: default; +} + +.ms-Toggle.is-disabled .ms-Toggle-field:before { + background-color: #c8c8c8; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 14px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 45px; + height: 20px; + box-sizing: border-box; + border: 2px solid #a6a6a6; + border-radius: 20px; + cursor: pointer; + transition-property: background, right, border-color; + transition-duration: 0.25s; + transition-timing-function: cubic-bezier(0.4,0,0.23,1); + outline: 0; +} + +.ms-Toggle-field:focus, +.ms-Toggle-field:hover { + border-color: #666666; +} + +.ms-Toggle-input { + display: none; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: left; +} diff --git a/dist/css/fabric.components.rtl.min.css b/dist/css/fabric.components.rtl.min.css new file mode 100644 index 00000000..0c9ccc25 --- /dev/null +++ b/dist/css/fabric.components.rtl.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:11px 7px}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute;margin-left:-2px}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;right:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;right:6px;content:' ';width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:8px 5px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:5px 4px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-ms-flexbox;display:flex;padding:0}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-left:4px;position:relative;top:1px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:right;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:right;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;left:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-left:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 26px 0 0;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:'\E73E';font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 26px 0 0;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:'';width:0;height:0;border-radius:50%;position:absolute;top:8px;right:8px;bottom:0;left:0;transition-property:top,right,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;right:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-right:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-left:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-left:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-left .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;right:0;left:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-left:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-left:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:left;text-align:left;width:auto;padding-left:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-left:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-left:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;right:3px;left:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-right:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-right:4px}}.ms-CommandButton-icon{display:inline-block;margin-left:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;right:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-right:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;right:3px;left:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-right:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-right:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:' ';width:1px;height:16px;top:12px;right:-8px;border-right:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-left:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;right:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-left:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:'';height:2px;position:absolute;right:0;left:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 25px 0 16px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;right:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;left:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 26px 0 16px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:'\E73E';font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;right:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-right:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:right;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;left:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-right:15px}.ms-DatePicker-year{margin-right:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;left:9px;right:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;left:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:left;margin-right:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;right:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-right:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 5px 30px 0}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:right;margin:0 0 10px 10px;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;left:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-left:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;right:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-right:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 0 10px 10px}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;left:10px;text-align:left;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-right:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;right:0;top:0;left:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-left:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-left:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-right:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:right;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;left:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:'';position:absolute;border-right:1px solid #a6a6a6;top:10px;bottom:10px;right:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:'';position:absolute;right:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:'';pointer-events:none;position:absolute;right:0;top:0;left:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-left:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-left:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-left:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-left:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;right:0;left:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);right:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:left}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-right:-24px;margin-left:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;left:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-left:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;left:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 10px 0 32px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;left:auto;bottom:auto;right:auto;max-width:100%}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;right:0;left:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:right;padding:0;margin-left:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-left:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-left:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-left:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;left:30px;top:39px}.ms-ListItem-image{float:right;height:70px;margin-right:-8px;margin-left:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;left:30px;text-align:left;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-right:3px solid #0078d7;padding-right:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-left:10px solid transparent;border-top:10px solid #0078d7;right:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;right:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-right:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;right:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\e73A';font-size:17px;color:#767676;position:absolute;top:23px;right:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:right;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-left:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;left:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-right:0;max-width:770px;overflow:hidden;text-align:right}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;padding-left:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:left;padding:0 0 10px 10px}.ms-MessageBanner-text{margin-right:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-right:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;left:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-left:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-left:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:right;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;right:0;left:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;left:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-left:0;padding-right:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:30px 0 30px 30px rgba(0,0,0,.2);right:0;left:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;left:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;left:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;right:0;position:fixed;left:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-right:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-right:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-right:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:right;margin:0 0 10px;padding:0 9px 0 0}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;left:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;right:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;right:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{right:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-right:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;right:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;left:0;right:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;right:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;right:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:right;padding-right:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{left:auto;top:10px;right:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-right:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{right:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-right:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{right:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-right:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{right:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-right:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;right:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-right:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;right:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:'';width:100%;height:100%;position:absolute;top:0;right:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:'';width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;right:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-left:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;right:0;position:fixed;left:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-right:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:'';position:absolute;top:47px;right:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:'';position:absolute;width:100%;height:100%;background-color:transparent;top:0;right:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-left:0;border-bottom:0;bottom:-4px;right:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:left;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;left:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\E70D'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;left:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E70E'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-left:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:'';height:2px;right:8px;position:absolute;left:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-left:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;left:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-right:12px;margin-left:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 45px 7px 3px;width:208px;background-color:transparent;z-index:5;transition:padding-right .167s}.ms-SearchBox-field:focus{padding:6px 10px 7px 32px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;right:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px;line-height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 45px 7px 3px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{left:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:' ';left:0;bottom:0;right:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;left:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-left:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-left:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{right:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;right:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:'\E73A';color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:right;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E739';color:#a6a6a6;font-size:12px;position:absolute;right:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-left:8px;display:table-cell;vertical-align:top;padding-right:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:right;display:table-cell;text-align:right;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 50px 0 0}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,right;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{left:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,right;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;right:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,right,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:left} \ No newline at end of file diff --git a/dist/css/fabric.min.css b/dist/css/fabric.min.css new file mode 100644 index 00000000..29c996f2 --- /dev/null +++ b/dist/css/fabric.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric Core 5.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-borderBase{border:1px solid}.ms-u-clearfix{*zoom:1}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-u-clearfix:after{clear:both}.ms-u-normalize{box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-u-textAlignLeft{text-align:left}.ms-u-textAlignCenter{text-align:center}.ms-u-textAlignRight{text-align:right}.ms-u-screenReaderOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-u-textTruncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ms-u-noWrap{white-space:nowrap}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2488d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#69afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#b3d6f2}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-neutralPrimaryAlt,.ms-bgColor-neutralPrimaryAlt--hover:hover{background-color:#3c3c3c}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#666}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#767676}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a6a6a6}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c8c8}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#eaeaea}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f4f4f4}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#f8f8f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-yellow{background-color:#ffb900}.ms-bgColor-yellowLight{background-color:#fff100}.ms-bgColor-orange{background-color:#d83b01}.ms-bgColor-orangeLight{background-color:#ea4300}.ms-bgColor-orangeLighter{background-color:#ff8c00}.ms-bgColor-redDark{background-color:#a80000}.ms-bgColor-red{background-color:#e81123}.ms-bgColor-magentaDark{background-color:#5c005c}.ms-bgColor-magenta{background-color:#b4009e}.ms-bgColor-magentaLight{background-color:#e3008c}.ms-bgColor-purpleDark{background-color:#32145a}.ms-bgColor-purple{background-color:#5c2d91}.ms-bgColor-purpleLight{background-color:#b4a0ff}.ms-bgColor-blueDark{background-color:#002050}.ms-bgColor-blueMid{background-color:#00188f}.ms-bgColor-blue{background-color:#0078d7}.ms-bgColor-blueLight{background-color:#00bcf2}.ms-bgColor-tealDark{background-color:#004b50}.ms-bgColor-teal{background-color:#008272}.ms-bgColor-tealLight{background-color:#00b294}.ms-bgColor-greenDark{background-color:#004b1c}.ms-bgColor-green{background-color:#107c10}.ms-bgColor-greenLight{background-color:#bad80a}.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-severeWarning{background-color:#fed9cc}.ms-bgColor-warning{background-color:#fff4ce}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2488d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#69afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#b3d6f2}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-neutralPrimaryAlt,.ms-borderColor-neutralPrimaryAlt--hover:hover{border-color:#3c3c3c}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#666}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#767676}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a6a6a6}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c8c8}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#eaeaea}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f4f4f4}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#f8f8f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-yellow{border-color:#ffb900}.ms-borderColor-yellowLight{border-color:#fff100}.ms-borderColor-orange{border-color:#d83b01}.ms-borderColor-orangeLight{border-color:#ea4300}.ms-borderColor-orangeLighter{border-color:#ff8c00}.ms-borderColor-redDark{border-color:#a80000}.ms-borderColor-red{border-color:#e81123}.ms-borderColor-magentaDark{border-color:#5c005c}.ms-borderColor-magenta{border-color:#b4009e}.ms-borderColor-magentaLight{border-color:#e3008c}.ms-borderColor-purpleDark{border-color:#32145a}.ms-borderColor-purple{border-color:#5c2d91}.ms-borderColor-purpleLight{border-color:#b4a0ff}.ms-borderColor-blueDark{border-color:#002050}.ms-borderColor-blueMid{border-color:#00188f}.ms-borderColor-blue{border-color:#0078d7}.ms-borderColor-blueLight{border-color:#00bcf2}.ms-borderColor-tealDark{border-color:#004b50}.ms-borderColor-teal{border-color:#008272}.ms-borderColor-tealLight{border-color:#00b294}.ms-borderColor-greenDark{border-color:#004b1c}.ms-borderColor-green{border-color:#107c10}.ms-borderColor-greenLight{border-color:#bad80a}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l,.ms-font-xl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi,.ms-font-xs{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-mi{font-size:10px;font-weight:600}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-weight:100}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-weight:300}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-weight:400}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-weight:600}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2488d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#69afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#b3d6f2}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-neutralPrimaryAlt,.ms-fontColor-neutralPrimaryAlt--hover:hover{color:#3c3c3c}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#666}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#767676}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a6a6a6}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c8c8}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#eaeaea}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f4f4f4}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#f8f8f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d7}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-fontColor-info,.ms-fontColor-info--hover:hover{color:#767676}.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-warning,.ms-fontColor-warning--hover:hover{color:#767676}.ms-fontColor-severeWarning,.ms-fontColor-severeWarning--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Light'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.ttf) format('truetype');font-weight:100;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semibold'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.ttf) format('truetype');font-weight:600;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semilight'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.ttf) format('truetype');font-weight:200;font-style:normal}@font-face{font-family:FabricMDL2Icons;src:url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.ttf) format('truetype');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none}.ms-Icon,.ms-Icon--circle{-webkit-font-smoothing:antialiased;display:inline-block}.ms-Icon--circle{position:relative;font-size:1rem;width:1em;height:1em;margin:0 .5em 0 0;padding:0;text-align:left}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;left:0;transform:scale(2);transform-origin:50% 50%;z-index:0}.ms-Icon--xs{font-size:10px}.ms-Icon--s{font-size:12px}.ms-Icon--m{font-size:16px}.ms-Icon--l{font-size:20px}.ms-Icon--CarotRightSolid8:before{content:'\EDDA'}.ms-Icon--DynamicsCRMLogo:before{content:'\EDCC'}.ms-Icon--DecreaseIndentLegacy:before{content:'\E290'}.ms-Icon--IncreaseIndentLegacy:before{content:'\E291'}.ms-Icon--GlobalNavButton:before{content:'\E700'}.ms-Icon--InternetSharing:before{content:'\E704'}.ms-Icon--Brightness:before{content:'\E706'}.ms-Icon--MapPin:before{content:'\E707'}.ms-Icon--Airplane:before{content:'\E709'}.ms-Icon--Tablet:before{content:'\E70A'}.ms-Icon--QuickNote:before{content:'\E70B'}.ms-Icon--ChevronDown:before{content:'\E70D'}.ms-Icon--ChevronUp:before{content:'\E70E'}.ms-Icon--Edit:before{content:'\E70F'}.ms-Icon--Add:before{content:'\E710'}.ms-Icon--Cancel:before{content:'\E711'}.ms-Icon--More:before{content:'\E712'}.ms-Icon--Settings:before{content:'\E713'}.ms-Icon--Video:before{content:'\E714'}.ms-Icon--Mail:before{content:'\E715'}.ms-Icon--People:before{content:'\E716'}.ms-Icon--Phone:before{content:'\E717'}.ms-Icon--Pin:before{content:'\E718'}.ms-Icon--Shop:before{content:'\E719'}.ms-Icon--Link:before{content:'\E71B'}.ms-Icon--Filter:before{content:'\E71C'}.ms-Icon--Zoom:before{content:'\E71E'}.ms-Icon--ZoomOut:before{content:'\E71F'}.ms-Icon--Microphone:before{content:'\E720'}.ms-Icon--Search:before{content:'\E721'}.ms-Icon--Camera:before{content:'\E722'}.ms-Icon--Attach:before{content:'\E723'}.ms-Icon--Send:before{content:'\E724'}.ms-Icon--FavoriteList:before{content:'\E728'}.ms-Icon--PageSolid:before{content:'\E729'}.ms-Icon--Forward:before{content:'\E72A'}.ms-Icon--Back:before{content:'\E72B'}.ms-Icon--Refresh:before{content:'\E72C'}.ms-Icon--Share:before{content:'\E72D'}.ms-Icon--Lock:before{content:'\E72E'}.ms-Icon--EMI:before{content:'\E731'}.ms-Icon--MiniLink:before{content:'\E732'}.ms-Icon--Blocked:before{content:'\E733'}.ms-Icon--FavoriteStar:before{content:'\E734'}.ms-Icon--FavoriteStarFill:before{content:'\E735'}.ms-Icon--ReadingMode:before{content:'\E736'}.ms-Icon--Remove:before{content:'\E738'}.ms-Icon--Checkbox:before{content:'\E739'}.ms-Icon--CheckboxComposite:before{content:'\E73A'}.ms-Icon--CheckboxIndeterminate:before{content:'\E73C'}.ms-Icon--CheckMark:before{content:'\E73E'}.ms-Icon--BackToWindow:before{content:'\E73F'}.ms-Icon--FullScreen:before{content:'\E740'}.ms-Icon--Print:before{content:'\E749'}.ms-Icon--Up:before{content:'\E74A'}.ms-Icon--Down:before{content:'\E74B'}.ms-Icon--Delete:before{content:'\E74D'}.ms-Icon--Save:before{content:'\E74E'}.ms-Icon--Sad:before{content:'\E757'}.ms-Icon--SIPMove:before{content:'\E759'}.ms-Icon--EraseTool:before{content:'\E75C'}.ms-Icon--GripperTool:before{content:'\E75E'}.ms-Icon--Dialpad:before{content:'\E75F'}.ms-Icon--PageLeft:before{content:'\E760'}.ms-Icon--PageRight:before{content:'\E761'}.ms-Icon--MultiSelect:before{content:'\E762'}.ms-Icon--Play:before{content:'\E768'}.ms-Icon--Pause:before{content:'\E769'}.ms-Icon--ChevronLeft:before{content:'\E76B'}.ms-Icon--ChevronRight:before{content:'\E76C'}.ms-Icon--Emoji2:before{content:'\E76E'}.ms-Icon--System:before{content:'\E770'}.ms-Icon--Globe:before{content:'\E774'}.ms-Icon--ContactInfo:before{content:'\E779'}.ms-Icon--Unpin:before{content:'\E77A'}.ms-Icon--Contact:before{content:'\E77B'}.ms-Icon--Memo:before{content:'\E77C'}.ms-Icon--WindowsLogo:before{content:'\E782'}.ms-Icon--Error:before{content:'\E783'}.ms-Icon--Unlock:before{content:'\E785'}.ms-Icon--Calendar:before{content:'\E787'}.ms-Icon--Megaphone:before{content:'\E789'}.ms-Icon--AutoEnhanceOn:before{content:'\E78D'}.ms-Icon--AutoEnhanceOff:before{content:'\E78E'}.ms-Icon--Color:before{content:'\E790'}.ms-Icon--SaveAs:before{content:'\E792'}.ms-Icon--Light:before{content:'\E793'}.ms-Icon--Filters:before{content:'\E795'}.ms-Icon--Contrast:before{content:'\E7A1'}.ms-Icon--Redo:before{content:'\E7A6'}.ms-Icon--Undo:before{content:'\E7A7'}.ms-Icon--PhotoCollection:before{content:'\E7AA'}.ms-Icon--Album:before{content:'\E7AB'}.ms-Icon--Rotate:before{content:'\E7AD'}.ms-Icon--PanoIndicator:before{content:'\E7B0'}.ms-Icon--RedEye:before{content:'\E7B3'}.ms-Icon--ThumbnailView:before{content:'\E7B6'}.ms-Icon--Package:before{content:'\E7B8'}.ms-Icon--Warning:before{content:'\E7BA'}.ms-Icon--Financial:before{content:'\E7BB'}.ms-Icon--ShoppingCart:before{content:'\E7BF'}.ms-Icon--Train:before{content:'\E7C0'}.ms-Icon--Flag:before{content:'\E7C1'}.ms-Icon--Move:before{content:'\E7C2'}.ms-Icon--Page:before{content:'\E7C3'}.ms-Icon--TouchPointer:before{content:'\E7C9'}.ms-Icon--Merge:before{content:'\E7D5'}.ms-Icon--TurnRight:before{content:'\E7DB'}.ms-Icon--Ferry:before{content:'\E7E3'}.ms-Icon--Tab:before{content:'\E7E9'}.ms-Icon--Admin:before{content:'\E7EF'}.ms-Icon--TVMonitor:before{content:'\E7F4'}.ms-Icon--Speakers:before{content:'\E7F5'}.ms-Icon--Nav2DMapView:before{content:'\E800'}.ms-Icon--Car:before{content:'\E804'}.ms-Icon--EatDrink:before{content:'\E807'}.ms-Icon--LocationCircle:before{content:'\E80E'}.ms-Icon--Home:before{content:'\E80F'}.ms-Icon--SwitcherStartEnd:before{content:'\E810'}.ms-Icon--IncidentTriangle:before{content:'\E814'}.ms-Icon--Touch:before{content:'\E815'}.ms-Icon--MapDirections:before{content:'\E816'}.ms-Icon--History:before{content:'\E81C'}.ms-Icon--Location:before{content:'\E81D'}.ms-Icon--Work:before{content:'\E821'}.ms-Icon--Recent:before{content:'\E823'}.ms-Icon--Hotel:before{content:'\E824'}.ms-Icon--LocationDot:before{content:'\E827'}.ms-Icon--News:before{content:'\E900'}.ms-Icon--Chat:before{content:'\E901'}.ms-Icon--Group:before{content:'\E902'}.ms-Icon--View:before{content:'\E890'}.ms-Icon--Clear:before{content:'\E894'}.ms-Icon--Sync:before{content:'\E895'}.ms-Icon--Download:before{content:'\E896'}.ms-Icon--Help:before{content:'\E897'}.ms-Icon--Upload:before{content:'\E898'}.ms-Icon--Emoji:before{content:'\E899'}.ms-Icon--MailForward:before{content:'\E89C'}.ms-Icon--ClosePane:before{content:'\E89F'}.ms-Icon--OpenPane:before{content:'\E8A0'}.ms-Icon--PreviewLink:before{content:'\E8A1'}.ms-Icon--ZoomIn:before{content:'\E8A3'}.ms-Icon--Bookmarks:before{content:'\E8A4'}.ms-Icon--Document:before{content:'\E8A5'}.ms-Icon--ProtectedDocument:before{content:'\E8A6'}.ms-Icon--OpenInNewWindow:before{content:'\E8A7'}.ms-Icon--MailFill:before{content:'\E8A8'}.ms-Icon--ViewAll:before{content:'\E8A9'}.ms-Icon--Switch:before{content:'\E8AB'}.ms-Icon--Rename:before{content:'\E8AC'}.ms-Icon--Folder:before{content:'\E8B7'}.ms-Icon--Picture:before{content:'\E8B9'}.ms-Icon--ShowResults:before{content:'\E8BC'}.ms-Icon--Message:before{content:'\E8BD'}.ms-Icon--CalendarDay:before{content:'\E8BF'}.ms-Icon--CalendarWeek:before{content:'\E8C0'}.ms-Icon--MailReplyAll:before{content:'\E8C2'}.ms-Icon--Read:before{content:'\E8C3'}.ms-Icon--PaymentCard:before{content:'\E8C7'}.ms-Icon--Copy:before{content:'\E8C8'}.ms-Icon--Important:before{content:'\E8C9'}.ms-Icon--MailReply:before{content:'\E8CA'}.ms-Icon--Sort:before{content:'\E8CB'}.ms-Icon--GotoToday:before{content:'\E8D1'}.ms-Icon--Font:before{content:'\E8D2'}.ms-Icon--FontColor:before{content:'\E8D3'}.ms-Icon--FolderFill:before{content:'\E8D5'}.ms-Icon--Permissions:before{content:'\E8D7'}.ms-Icon--DisableUpdates:before{content:'\E8D8'}.ms-Icon--Unfavorite:before{content:'\E8D9'}.ms-Icon--Italic:before{content:'\E8DB'}.ms-Icon--Underline:before{content:'\E8DC'}.ms-Icon--Bold:before{content:'\E8DD'}.ms-Icon--MoveToFolder:before{content:'\E8DE'}.ms-Icon--Dislike:before{content:'\E8E0'}.ms-Icon--Like:before{content:'\E8E1'}.ms-Icon--AlignRight:before{content:'\E8E2'}.ms-Icon--AlignCenter:before{content:'\E8E3'}.ms-Icon--AlignLeft:before{content:'\E8E4'}.ms-Icon--OpenFile:before{content:'\E8E5'}.ms-Icon--FontDecrease:before{content:'\E8E7'}.ms-Icon--FontIncrease:before{content:'\E8E8'}.ms-Icon--FontSize:before{content:'\E8E9'}.ms-Icon--CellPhone:before{content:'\E8EA'}.ms-Icon--Tag:before{content:'\E8EC'}.ms-Icon--Library:before{content:'\E8F1'}.ms-Icon--PostUpdate:before{content:'\E8F3'}.ms-Icon--NewFolder:before{content:'\E8F4'}.ms-Icon--CalendarReply:before{content:'\E8F5'}.ms-Icon--UnsyncFolder:before{content:'\E8F6'}.ms-Icon--SyncFolder:before{content:'\E8F7'}.ms-Icon--BlockContact:before{content:'\E8F8'}.ms-Icon--AddFriend:before{content:'\E8FA'}.ms-Icon--BulletedList:before{content:'\E8FD'}.ms-Icon--Preview:before{content:'\E8FF'}.ms-Icon--DockLeft:before{content:'\E90C'}.ms-Icon--DockRight:before{content:'\E90D'}.ms-Icon--Repair:before{content:'\E90F'}.ms-Icon--Accounts:before{content:'\E910'}.ms-Icon--RadioBullet:before{content:'\E915'}.ms-Icon--Stopwatch:before{content:'\E916'}.ms-Icon--Clock:before{content:'\E917'}.ms-Icon--WorldClock:before{content:'\E918'}.ms-Icon--AlarmClock:before{content:'\E919'}.ms-Icon--Hospital:before{content:'\E91D'}.ms-Icon--Timer:before{content:'\E91E'}.ms-Icon--FullCircleMask:before{content:'\E91F'}.ms-Icon--LocationFill:before{content:'\E920'}.ms-Icon--ChromeMinimize:before{content:'\E921'}.ms-Icon--Annotation:before{content:'\E924'}.ms-Icon--ChromeClose:before{content:'\E8BB'}.ms-Icon--Accept:before{content:'\E8FB'}.ms-Icon--Fingerprint:before{content:'\E928'}.ms-Icon--Handwriting:before{content:'\E929'}.ms-Icon--StackIndicator:before{content:'\E7FF'}.ms-Icon--Completed:before{content:'\E930'}.ms-Icon--Label:before{content:'\E932'}.ms-Icon--FlickDown:before{content:'\E935'}.ms-Icon--FlickUp:before{content:'\E936'}.ms-Icon--FlickLeft:before{content:'\E937'}.ms-Icon--FlickRight:before{content:'\E938'}.ms-Icon--MusicInCollection:before{content:'\E940'}.ms-Icon--OneDrive:before{content:'\E941'}.ms-Icon--CompassNW:before{content:'\E942'}.ms-Icon--Code:before{content:'\E943'}.ms-Icon--LightningBolt:before{content:'\E945'}.ms-Icon--Info:before{content:'\E946'}.ms-Icon--CalculatorAddition:before{content:'\E948'}.ms-Icon--CalculatorSubtract:before{content:'\E949'}.ms-Icon--PrintfaxPrinterFile:before{content:'\E956'}.ms-Icon--Headset:before{content:'\E95B'}.ms-Icon--Health:before{content:'\E95E'}.ms-Icon--ChevronUpSmall:before{content:'\E96D'}.ms-Icon--ChevronDownSmall:before{content:'\E96E'}.ms-Icon--ChevronLeftSmall:before{content:'\E96F'}.ms-Icon--ChevronRightSmall:before{content:'\E970'}.ms-Icon--ChevronUpMed:before{content:'\E971'}.ms-Icon--ChevronDownMed:before{content:'\E972'}.ms-Icon--ChevronLeftMed:before{content:'\E973'}.ms-Icon--ChevronRightMed:before{content:'\E974'}.ms-Icon--Dictionary:before{content:'\E82D'}.ms-Icon--ChromeBack:before{content:'\E830'}.ms-Icon--PC1:before{content:'\E977'}.ms-Icon--PresenceChickletVideo:before{content:'\E979'}.ms-Icon--Reply:before{content:'\E97A'}.ms-Icon--DoubleChevronLeftMed:before{content:'\E991'}.ms-Icon--Volume0:before{content:'\E992'}.ms-Icon--Volume1:before{content:'\E993'}.ms-Icon--Volume2:before{content:'\E994'}.ms-Icon--Volume3:before{content:'\E995'}.ms-Icon--CaretHollow:before{content:'\E817'}.ms-Icon--CaretSolid:before{content:'\E818'}.ms-Icon--FolderOpen:before{content:'\E838'}.ms-Icon--Pinned:before{content:'\E840'}.ms-Icon--PinnedFill:before{content:'\E842'}.ms-Icon--Chart:before{content:'\E999'}.ms-Icon--BidiLtr:before{content:'\E9AA'}.ms-Icon--BidiRtl:before{content:'\E9AB'}.ms-Icon--RevToggleKey:before{content:'\E845'}.ms-Icon--RightDoubleQuote:before{content:'\E9B1'}.ms-Icon--Sunny:before{content:'\E9BD'}.ms-Icon--CloudWeather:before{content:'\E9BE'}.ms-Icon--Cloudy:before{content:'\E9BF'}.ms-Icon--PartlyCloudyDay:before{content:'\E9C0'}.ms-Icon--PartlyCloudyNight:before{content:'\E9C1'}.ms-Icon--ClearNight:before{content:'\E9C2'}.ms-Icon--RainShowersDay:before{content:'\E9C3'}.ms-Icon--Rain:before{content:'\E9C4'}.ms-Icon--Thunderstorms:before{content:'\E9C6'}.ms-Icon--RainSnow:before{content:'\E9C7'}.ms-Icon--BlowingSnow:before{content:'\E9C9'}.ms-Icon--Frigid:before{content:'\E9CA'}.ms-Icon--Fog:before{content:'\E9CB'}.ms-Icon--Squalls:before{content:'\E9CC'}.ms-Icon--Duststorm:before{content:'\E9CD'}.ms-Icon--Precipitation:before{content:'\E9CF'}.ms-Icon--Ringer:before{content:'\EA8F'}.ms-Icon--PDF:before{content:'\EA90'}.ms-Icon--SortLines:before{content:'\E9D0'}.ms-Icon--Ribbon:before{content:'\E9D1'}.ms-Icon--CheckList:before{content:'\E9D5'}.ms-Icon--Generate:before{content:'\E9DA'}.ms-Icon--Equalizer:before{content:'\E9E9'}.ms-Icon--BarChartHorizontal:before{content:'\E9EB'}.ms-Icon--Freezing:before{content:'\E9EF'}.ms-Icon--SnowShowerDay:before{content:'\E9FD'}.ms-Icon--HailDay:before{content:'\EA00'}.ms-Icon--WorkFlow:before{content:'\EA01'}.ms-Icon--StoreLogoMed:before{content:'\EA04'}.ms-Icon--RainShowersNight:before{content:'\EA0F'}.ms-Icon--SnowShowerNight:before{content:'\EA11'}.ms-Icon--HailNight:before{content:'\EA13'}.ms-Icon--Info2:before{content:'\EA1F'}.ms-Icon--StoreLogo:before{content:'\EA96'}.ms-Icon--MultiSelectMirrored:before{content:'\EA98'}.ms-Icon--Broom:before{content:'\EA99'}.ms-Icon--MusicInCollectionFill:before{content:'\EA36'}.ms-Icon--List:before{content:'\EA37'}.ms-Icon--Asterisk:before{content:'\EA38'}.ms-Icon--ErrorBadge:before{content:'\EA39'}.ms-Icon--CircleRing:before{content:'\EA3A'}.ms-Icon--CircleFill:before{content:'\EA3B'}.ms-Icon--BookmarksMirrored:before{content:'\EA41'}.ms-Icon--BulletedListMirrored:before{content:'\EA42'}.ms-Icon--CaretHollowMirrored:before{content:'\EA45'}.ms-Icon--CaretSolidMirrored:before{content:'\EA46'}.ms-Icon--ChromeBackMirrored:before{content:'\EA47'}.ms-Icon--ClosePaneMirrored:before{content:'\EA49'}.ms-Icon--DockLeftMirrored:before{content:'\EA4C'}.ms-Icon--DoubleChevronLeftMedMirrored:before{content:'\EA4D'}.ms-Icon--HelpMirrored:before{content:'\EA51'}.ms-Icon--ListMirrored:before{content:'\EA55'}.ms-Icon--MailForwardMirrored:before{content:'\EA56'}.ms-Icon--MailReplyMirrored:before{content:'\EA57'}.ms-Icon--MailReplyAllMirrored:before{content:'\EA58'}.ms-Icon--OpenPaneMirrored:before{content:'\EA5B'}.ms-Icon--SendMirrored:before{content:'\EA63'}.ms-Icon--ShowResultsMirrored:before{content:'\EA65'}.ms-Icon--ThumbnailViewMirrored:before{content:'\EA67'}.ms-Icon--Devices3:before{content:'\EA6C'}.ms-Icon--Lightbulb:before{content:'\EA80'}.ms-Icon--StatusTriangle:before{content:'\EA82'}.ms-Icon--VolumeDisabled:before{content:'\EA85'}.ms-Icon--Puzzle:before{content:'\EA86'}.ms-Icon--EmojiNeutral:before{content:'\EA87'}.ms-Icon--EmojiDisappointed:before{content:'\EA88'}.ms-Icon--HomeSolid:before{content:'\EA8A'}.ms-Icon--Cocktails:before{content:'\EA9D'}.ms-Icon--Articles:before{content:'\EAC1'}.ms-Icon--Cycling:before{content:'\EAC7'}.ms-Icon--DietPlanNotebook:before{content:'\EAC8'}.ms-Icon--Pill:before{content:'\EACB'}.ms-Icon--Running:before{content:'\EADA'}.ms-Icon--Weights:before{content:'\EADB'}.ms-Icon--BarChart4:before{content:'\EAE7'}.ms-Icon--CirclePlus:before{content:'\EAEE'}.ms-Icon--Coffee:before{content:'\EAEF'}.ms-Icon--Cotton:before{content:'\EAF3'}.ms-Icon--Market:before{content:'\EAFC'}.ms-Icon--Money:before{content:'\EAFD'}.ms-Icon--PieDouble:before{content:'\EB04'}.ms-Icon--RemoveFilter:before{content:'\EB08'}.ms-Icon--StockDown:before{content:'\EB0F'}.ms-Icon--StockUp:before{content:'\EB11'}.ms-Icon--Cricket:before{content:'\EB1E'}.ms-Icon--Golf:before{content:'\EB1F'}.ms-Icon--Baseball:before{content:'\EB20'}.ms-Icon--Soccer:before{content:'\EB21'}.ms-Icon--MoreSports:before{content:'\EB22'}.ms-Icon--AutoRacing:before{content:'\EB24'}.ms-Icon--CollegeHoops:before{content:'\EB25'}.ms-Icon--CollegeFootball:before{content:'\EB26'}.ms-Icon--ProFootball:before{content:'\EB27'}.ms-Icon--ProHockey:before{content:'\EB28'}.ms-Icon--Rugby:before{content:'\EB2D'}.ms-Icon--Tennis:before{content:'\EB33'}.ms-Icon--Arrivals:before{content:'\EB34'}.ms-Icon--Design:before{content:'\EB3C'}.ms-Icon--Website:before{content:'\EB41'}.ms-Icon--Drop:before{content:'\EB42'}.ms-Icon--Snow:before{content:'\EB46'}.ms-Icon--BusSolid:before{content:'\EB47'}.ms-Icon--FerrySolid:before{content:'\EB48'}.ms-Icon--TrainSolid:before{content:'\EB4D'}.ms-Icon--Heart:before{content:'\EB51'}.ms-Icon--HeartFill:before{content:'\EB52'}.ms-Icon--Ticket:before{content:'\EB54'}.ms-Icon--Devices4:before{content:'\EB66'}.ms-Icon--AzureLogo:before{content:'\EB6A'}.ms-Icon--BingLogo:before{content:'\EB6B'}.ms-Icon--MSNLogo:before{content:'\EB6C'}.ms-Icon--OutlookLogo:before{content:'\EB6D'}.ms-Icon--OfficeLogo:before{content:'\EB6E'}.ms-Icon--SkypeLogo:before{content:'\EB6F'}.ms-Icon--Door:before{content:'\EB75'}.ms-Icon--EditMirrored:before{content:'\EB7E'}.ms-Icon--GiftCard:before{content:'\EB8E'}.ms-Icon--DoubleBookmark:before{content:'\EB8F'}.ms-Icon--StatusErrorFull:before{content:'\EB90'}.ms-Icon--Certificate:before{content:'\EB95'}.ms-Icon--Photo2:before{content:'\EB9F'}.ms-Icon--CloudDownload:before{content:'\EBD3'}.ms-Icon--WindDirection:before{content:'\EBE6'}.ms-Icon--Family:before{content:'\EBDA'}.ms-Icon--CSS:before{content:'\EBEF'}.ms-Icon--JS:before{content:'\EBF0'}.ms-Icon--ReminderGroup:before{content:'\EBF8'}.ms-Icon--Section:before{content:'\EC0C'}.ms-Icon--OneNoteLogo:before{content:'\EC0D'}.ms-Icon--ToggleFilled:before{content:'\EC11'}.ms-Icon--ToggleBorder:before{content:'\EC12'}.ms-Icon--SliderThumb:before{content:'\EC13'}.ms-Icon--ToggleThumb:before{content:'\EC14'}.ms-Icon--Documentation:before{content:'\EC17'}.ms-Icon--Badge:before{content:'\EC1B'}.ms-Icon--Giftbox:before{content:'\EC1F'}.ms-Icon--ExcelLogo:before{content:'\EC28'}.ms-Icon--WordLogo:before{content:'\EC29'}.ms-Icon--PowerPointLogo:before{content:'\EC2A'}.ms-Icon--Cafe:before{content:'\EC32'}.ms-Icon--SpeedHigh:before{content:'\EC4A'}.ms-Icon--MusicNote:before{content:'\EC4F'}.ms-Icon--EdgeLogo:before{content:'\EC60'}.ms-Icon--CompletedSolid:before{content:'\EC61'}.ms-Icon--AlbumRemove:before{content:'\EC62'}.ms-Icon--MessageFill:before{content:'\EC70'}.ms-Icon--TabletSelected:before{content:'\EC74'}.ms-Icon--MobileSelected:before{content:'\EC75'}.ms-Icon--LaptopSelected:before{content:'\EC76'}.ms-Icon--TVMonitorSelected:before{content:'\EC77'}.ms-Icon--DeveloperTools:before{content:'\EC7A'}.ms-Icon--InsertTextBox:before{content:'\EC7D'}.ms-Icon--LowerBrightness:before{content:'\EC8A'}.ms-Icon--CloudUpload:before{content:'\EC8E'}.ms-Icon--DateTime:before{content:'\EC92'}.ms-Icon--Event:before{content:'\ECA3'}.ms-Icon--Cake:before{content:'\ECA4'}.ms-Icon--Tiles:before{content:'\ECA5'}.ms-Icon--Org:before{content:'\ECA6'}.ms-Icon--PartyLeader:before{content:'\ECA7'}.ms-Icon--DRM:before{content:'\ECA8'}.ms-Icon--CloudAdd:before{content:'\ECA9'}.ms-Icon--AppIconDefault:before{content:'\ECAA'}.ms-Icon--Photo2Add:before{content:'\ECAB'}.ms-Icon--Photo2Remove:before{content:'\ECAC'}.ms-Icon--POI:before{content:'\ECAF'}.ms-Icon--FacebookLogo:before{content:'\ECB3'}.ms-Icon--AddTo:before{content:'\ECC8'}.ms-Icon--RadioBtnOn:before{content:'\ECCB'}.ms-Icon--Embed:before{content:'\ECCE'}.ms-Icon--VideoSolid:before{content:'\EA0C'}.ms-Icon--Teamwork:before{content:'\EA12'}.ms-Icon--PeopleAdd:before{content:'\EA15'}.ms-Icon--Glasses:before{content:'\EA16'}.ms-Icon--DateTime2:before{content:'\EA17'}.ms-Icon--Shield:before{content:'\EA18'}.ms-Icon--Header1:before{content:'\EA19'}.ms-Icon--PageAdd:before{content:'\EA1A'}.ms-Icon--NumberedList:before{content:'\EA1C'}.ms-Icon--PowerBILogo:before{content:'\EA1E'}.ms-Icon--Product:before{content:'\ECDC'}.ms-Icon--Blocked2:before{content:'\ECE4'}.ms-Icon--FangBody:before{content:'\ECEB'}.ms-Icon--Glimmer:before{content:'\ECF4'}.ms-Icon--ChatInviteFriend:before{content:'\ECFE'}.ms-Icon--SharepointLogo:before{content:'\ED18'}.ms-Icon--YammerLogo:before{content:'\ED19'}.ms-Icon--Hide:before{content:'\ED1A'}.ms-Icon--ReturnToSession:before{content:'\ED24'}.ms-Icon--OpenFolderHorizontal:before{content:'\ED25'}.ms-Icon--CalendarMirrored:before{content:'\ED28'}.ms-Icon--SwayLogo:before{content:'\ED29'}.ms-Icon--OutOfOffice:before{content:'\ED34'}.ms-Icon--Trophy:before{content:'\ED3F'}.ms-Icon--ReopenPages:before{content:'\ED50'}.ms-Icon--AADLogo:before{content:'\ED68'}.ms-Icon--AccessLogo:before{content:'\ED69'}.ms-Icon--AdminALogo:before{content:'\ED6A'}.ms-Icon--AdminCLogo:before{content:'\ED6B'}.ms-Icon--AdminDLogo:before{content:'\ED6C'}.ms-Icon--AdminELogo:before{content:'\ED6D'}.ms-Icon--AdminLLogo:before{content:'\ED6E'}.ms-Icon--AdminMLogo:before{content:'\ED6F'}.ms-Icon--AdminOLogo:before{content:'\ED70'}.ms-Icon--AdminPLogo:before{content:'\ED71'}.ms-Icon--AdminSLogo:before{content:'\ED72'}.ms-Icon--AdminYLogo:before{content:'\ED73'}.ms-Icon--AlchemyLogo:before{content:'\ED74'}.ms-Icon--BoxLogo:before{content:'\ED75'}.ms-Icon--DelveLogo:before{content:'\ED76'}.ms-Icon--DropboxLogo:before{content:'\ED77'}.ms-Icon--ExchangeLogo:before{content:'\ED78'}.ms-Icon--LyncLogo:before{content:'\ED79'}.ms-Icon--OfficeVideoLogo:before{content:'\ED7A'}.ms-Icon--ParatureLogo:before{content:'\ED7B'}.ms-Icon--SocialListeningLogo:before{content:'\ED7C'}.ms-Icon--VisioLogo:before{content:'\ED7D'}.ms-Icon--Balloons:before{content:'\ED7E'}.ms-Icon--Cat:before{content:'\ED7F'}.ms-Icon--MailAlert:before{content:'\ED80'}.ms-Icon--MailCheck:before{content:'\ED81'}.ms-Icon--MailLowImportance:before{content:'\ED82'}.ms-Icon--MailPause:before{content:'\ED83'}.ms-Icon--MailRepeat:before{content:'\ED84'}.ms-Icon--SecurityGroup:before{content:'\ED85'}.ms-Icon--Table:before{content:'\ED86'}.ms-Icon--VoicemailForward:before{content:'\ED87'}.ms-Icon--VoicemailReply:before{content:'\ED88'}.ms-Icon--Waffle:before{content:'\ED89'}.ms-Icon--RemoveEvent:before{content:'\ED8A'}.ms-Icon--EventInfo:before{content:'\ED8B'}.ms-Icon--ForwardEvent:before{content:'\ED8C'}.ms-Icon--WipePhone:before{content:'\ED8D'}.ms-Icon--AddOnlineMeeting:before{content:'\ED8E'}.ms-Icon--JoinOnlineMeeting:before{content:'\ED8F'}.ms-Icon--RemoveLink:before{content:'\ED90'}.ms-Icon--PeopleBlock:before{content:'\ED91'}.ms-Icon--PeopleRepeat:before{content:'\ED92'}.ms-Icon--PeopleAlert:before{content:'\ED93'}.ms-Icon--PeoplePause:before{content:'\ED94'}.ms-Icon--TransferCall:before{content:'\ED95'}.ms-Icon--AddPhone:before{content:'\ED96'}.ms-Icon--UnknownCall:before{content:'\ED97'}.ms-Icon--NoteReply:before{content:'\ED98'}.ms-Icon--NoteForward:before{content:'\ED99'}.ms-Icon--NotePinned:before{content:'\ED9A'}.ms-Icon--RemoveOccurrence:before{content:'\ED9B'}.ms-Icon--Timeline:before{content:'\ED9C'}.ms-Icon--EditNote:before{content:'\ED9D'}.ms-Icon--CircleHalfFull:before{content:'\ED9E'}.ms-Icon--Room:before{content:'\ED9F'}.ms-Icon--Unsubscribe:before{content:'\EDA0'}.ms-Icon--Subscribe:before{content:'\EDA1'}.ms-Icon--RecurringTask:before{content:'\EDB2'}.ms-Icon--TaskManager:before{content:'\EDB7'}.ms-Icon--TaskManagerMirrored:before{content:'\EDB8'}.ms-Icon--Combine:before{content:'\EDBB'}.ms-Icon--Split:before{content:'\EDBC'}.ms-Icon--DoubleChevronUp:before{content:'\EDBD'}.ms-Icon--DoubleChevronLeft:before{content:'\EDBE'}.ms-Icon--DoubleChevronRight:before{content:'\EDBF'}.ms-Icon--Ascending:before{content:'\EDC0'}.ms-Icon--Descending:before{content:'\EDC1'}.ms-Icon--TextBox:before{content:'\EDC2'}.ms-Icon--TextField:before{content:'\EDC3'}.ms-Icon--NumberField:before{content:'\EDC4'}.ms-Icon--Dropdown:before{content:'\EDC5'}.ms-Icon--BookingsLogo:before{content:'\EDC7'}.ms-Icon--ClassNotebookLogo:before{content:'\EDC8'}.ms-Icon--CollabsDBLogo:before{content:'\EDC9'}.ms-Icon--DelveAnalyticsLogo:before{content:'\EDCA'}.ms-Icon--DocsLogo:before{content:'\EDCB'}.ms-Icon--Dynamics365Logo:before{content:'\EDCC'}.ms-Icon--DynamicSMBLogo:before{content:'\EDCD'}.ms-Icon--OfficeAssistantLogo:before{content:'\EDCE'}.ms-Icon--OfficeStoreLogo:before{content:'\EDCF'}.ms-Icon--OneNoteEduLogo:before{content:'\EDD0'}.ms-Icon--Planner:before{content:'\EDD1'}.ms-Icon--PowerApps:before{content:'\EDD2'}.ms-Icon--Suitcase:before{content:'\EDD3'}.ms-Icon--ProjectLogo:before{content:'\EDD4'}.ms-Icon--CaretLeft8:before{content:'\EDD5'}.ms-Icon--CaretRight8:before{content:'\EDD6'}.ms-Icon--CaretUp8:before{content:'\EDD7'}.ms-Icon--CaretDown8:before{content:'\EDD8'}.ms-Icon--CaretLeftSolid8:before{content:'\EDD9'}.ms-Icon--CaretRightSolid8:before{content:'\EDDA'}.ms-Icon--CaretUpSolid8:before{content:'\EDDB'}.ms-Icon--CaretDownSolid8:before{content:'\EDDC'}.ms-Icon--ClearFormatting:before{content:'\EDDD'}.ms-Icon--Superscript:before{content:'\EDDE'}.ms-Icon--Subscript:before{content:'\EDDF'}.ms-Icon--Strikethrough:before{content:'\EDE0'}.ms-Icon--SingleBookmark:before{content:'\EDFF'}.ms-Icon--DoubleChevronDown:before{content:'\EE04'}.ms-Icon--ReplyAll:before{content:'\EE0A'}.ms-Icon--GoogleDriveLogo:before{content:'\EE0B'}.ms-Icon--Questionnaire:before{content:'\EE19'}.ms-Icon--ReplyMirrored:before{content:'\EE35'}.ms-Icon--ReplyAllMirrored:before{content:'\EE36'}.ms-Icon--AddGroup:before{content:'\EE3D'}.ms-Icon--QuestionnaireMirrored:before{content:'\EE4B'}.ms-Icon--TemporaryUser:before{content:'\EE58'}.ms-Icon--GroupedDescending:before{content:'\EE66'}.ms-Icon--GroupedAscending:before{content:'\EE67'}.ms-Icon--SortUp:before{content:'\EE68'}.ms-Icon--SortDown:before{content:'\EE69'}.ms-Icon--AwayStatus:before{content:'\EE6A'}.ms-Icon--SyncToPC:before{content:'\EE6E'}.ms-Icon--AustralianRules:before{content:'\EE70'}.ms-Icon--DateTimeMirrored:before{content:'\EE93'}.ms-Icon--DoubleChevronUp12:before{content:'\EE96'}.ms-Icon--DoubleChevronDown12:before{content:'\EE97'}.ms-Icon--DoubleChevronLeft12:before{content:'\EE98'}.ms-Icon--DoubleChevronRight12:before{content:'\EE99'}.ms-Icon--CalendarAgenda:before{content:'\EE9A'}.ms-Icon--AddEvent:before{content:'\EEB5'}.ms-Icon--AssetLibrary:before{content:'\EEB6'}.ms-Icon--DataConnectionLibrary:before{content:'\EEB7'}.ms-Icon--DocLibrary:before{content:'\EEB8'}.ms-Icon--FormLibrary:before{content:'\EEB9'}.ms-Icon--FormLibraryMirrored:before{content:'\EEBA'}.ms-Icon--ReportLibrary:before{content:'\EEBB'}.ms-Icon--ReportLibraryMirrored:before{content:'\EEBC'}.ms-Icon--ContactCard:before{content:'\EEBD'}.ms-Icon--CustomList:before{content:'\EEBE'}.ms-Icon--CustomListMirrored:before{content:'\EEBF'}.ms-Icon--IssueTracking:before{content:'\EEC0'}.ms-Icon--IssueTrackingMirrored:before{content:'\EEC1'}.ms-Icon--PictureLibrary:before{content:'\EEC2'}.ms-Icon--AppForOfficeLogo:before{content:'\EEC7'}.ms-Icon--OfflineOneDriveParachute:before{content:'\EEC8'}.ms-Icon--OfflineOneDriveParachuteDisabled:before{content:'\EEC9'}.ms-Icon--LargeGrid:before{content:'\EECB'}.ms-Icon--TriangleSolidUp12:before{content:'\EECC'}.ms-Icon--TriangleSolidDown12:before{content:'\EECD'}.ms-Icon--TriangleSolidLeft12:before{content:'\EECE'}.ms-Icon--TriangleSolidRight12:before{content:'\EECF'}.ms-Icon--TriangleUp12:before{content:'\EED0'}.ms-Icon--TriangleDown12:before{content:'\EED1'}.ms-Icon--TriangleLeft12:before{content:'\EED2'}.ms-Icon--TriangleRight12:before{content:'\EED3'}.ms-Icon--ArrowUpRight8:before{content:'\EED4'}.ms-Icon--ArrowDownRight8:before{content:'\EED5'}.ms-Icon--DocumentSet:before{content:'\EED6'}.ms-Icon--DelveAnalytics:before{content:'\EEEE'}.ms-Icon--ArrowUpRightMirrored8:before{content:'\EEEF'}.ms-Icon--ArrowDownRightMirrored8:before{content:'\EEF0'}.ms-Icon--OneDriveAdd:before{content:'\EF32'}.ms-Icon--Header2:before{content:'\EF36'}.ms-Icon--Header3:before{content:'\EF37'}.ms-Icon--Header4:before{content:'\EF38'}.ms-Icon--MarketDown:before{content:'\EF42'}.ms-Icon--CalendarWorkWeek:before{content:'\EF51'}.ms-Icon--SidePanel:before{content:'\EF52'}.ms-Icon--GlobeFavorite:before{content:'\EF53'}.ms-Icon--CaretTopLeftSolid8:before{content:'\EF54'}.ms-Icon--CaretTopRightSolid8:before{content:'\EF55'}.ms-Icon--ViewAll2:before{content:'\EF56'}.ms-Icon--DocumentReply:before{content:'\EF57'}.ms-Icon--PlayerSettings:before{content:'\EF58'}.ms-Icon--ReceiptForward:before{content:'\EF59'}.ms-Icon--ReceiptReply:before{content:'\EF5A'}.ms-Icon--ReceiptCheck:before{content:'\EF5B'}.ms-Icon--Fax:before{content:'\EF5C'}.ms-Icon--RecurringEvent:before{content:'\EF5D'}.ms-Icon--ReplyAlt:before{content:'\EF5E'}.ms-Icon--ReplyAllAlt:before{content:'\EF5F'}.ms-Icon--EditStyle:before{content:'\EF60'}.ms-Icon--EditMail:before{content:'\EF61'}.ms-Icon--Lifesaver:before{content:'\EF62'}.ms-Icon--LifesaverLock:before{content:'\EF63'}.ms-Icon--InboxCheck:before{content:'\EF64'}.ms-Icon--FolderSearch:before{content:'\EF65'}.ms-Icon--CollapseMenu:before{content:'\EF66'}.ms-Icon--ExpandMenu:before{content:'\EF67'}.ms-Icon--Boards:before{content:'\EF68'}.ms-Icon--SunAdd:before{content:'\EF69'}.ms-Icon--SunQuestionMark:before{content:'\EF6A'}.ms-Icon--LandscapeOrientation:before{content:'\EF6B'}.ms-Icon--DocumentSearch:before{content:'\EF6C'}.ms-Icon--PublicCalendar:before{content:'\EF6D'}.ms-Icon--PublicContactCard:before{content:'\EF6E'}.ms-Icon--PublicEmail:before{content:'\EF6F'}.ms-Icon--PublicFolder:before{content:'\EF70'}.ms-Icon--WordDocument:before{content:'\EF71'}.ms-Icon--PowerPointDocument:before{content:'\EF72'}.ms-Icon--ExcelDocument:before{content:'\EF73'}.ms-Icon--GroupedList:before{content:'\EF74'}.ms-Icon--ClassroomLogo:before{content:'\EF75'}.ms-Icon--Sections:before{content:'\EF76'}.ms-Icon--EditPhoto:before{content:'\EF77'}.ms-Icon--Starburst:before{content:'\EF78'}.ms-Icon--ShareiOS:before{content:'\EF79'}.ms-Icon--AirTickets:before{content:'\EF7A'}.ms-Icon--PencilReply:before{content:'\EF7B'}.ms-Icon--Tiles2:before{content:'\EF7C'}.ms-Icon--SkypeCircleCheck:before{content:'\EF7D'}.ms-Icon--SkypeCircleClock:before{content:'\EF7E'}.ms-Icon--SkypeCircleMinus:before{content:'\EF7F'}.ms-Icon--SkypeCheck:before{content:'\EF80'}.ms-Icon--SkypeClock:before{content:'\EF81'}.ms-Icon--SkypeMinus:before{content:'\EF82'}.ms-Icon--SkypeMessage:before{content:'\EF83'}.ms-Icon--ClosedCaption:before{content:'\EF84'}.ms-Icon--ATPLogo:before{content:'\EF85'}.ms-Icon--OfficeFormLogo:before{content:'\EF86'}.ms-Icon--RecycleBin:before{content:'\EF87'}.ms-Icon--EmptyRecycleBin:before{content:'\EF88'}.ms-Icon--Hide2:before{content:'\EF89'}.ms-Icon--iOSAppStoreLogo:before{content:'\EF8A'}.ms-Icon--AndroidLogo:before{content:'\EF8B'}.ms-Icon--Breadcrumb:before{content:'\EF8C'}.ms-Icon--ClearFilter:before{content:'\EF8F'}.ms-Icon--Flow:before{content:'\EF90'}.ms-Icon--PageCheckedOut:before{content:'\F02C'}.ms-Icon--SetAction:before{content:'\F071'}.ms-Icon--PowerAppsLogo:before{content:'\F091'}.ms-Icon--PowerApps2Logo:before{content:'\F092'}.ms-Icon--FabricAssetLibrary:before{content:'\F09C'}.ms-Icon--FabricDataConnectionLibrary:before{content:'\F09D'}.ms-Icon--FabricDocLibrary:before{content:'\F09E'}.ms-Icon--FabricFormLibrary:before{content:'\F09F'}.ms-Icon--FabricFormLibraryMirrored:before{content:'\F0A0'}.ms-Icon--FabricReportLibrary:before{content:'\F0A1'}.ms-Icon--FabricReportLibraryMirrored:before{content:'\F0A2'}.ms-Icon--FabricPublicFolder:before{content:'\F0A3'}.ms-Icon--FabricFolderSearch:before{content:'\F0A4'}.ms-Icon--FabricMovetoFolder:before{content:'\F0A5'}.ms-Icon--FabricUnsyncFolder:before{content:'\F0A6'}.ms-Icon--FabricSyncFolder:before{content:'\F0A7'}.ms-Icon--FabricOpenFolderHorizontal:before{content:'\F0A8'}.ms-Icon--FabricFolder:before{content:'\F0A9'}.ms-Icon--FabricFolderFill:before{content:'\F0AA'}.ms-Icon--FabricNewFolder:before{content:'\F0AB'}.ms-Icon--FabricPictureLibrary:before{content:'\F0AC'}.ms-Icon--AddFavorite:before{content:'\F0C8'}.ms-Icon--AddFavoriteFill:before{content:'\F0C9'}.ms-Icon--BufferTimeBefore:before{content:'\F0CF'}.ms-Icon--BufferTimeAfter:before{content:'\F0D0'}.ms-Icon--BufferTimeBoth:before{content:'\F0D1'}.ms-Icon--PageCheckedin:before{content:'\F104'}.ms-Icon--CaretBottomLeftSolid8:before{content:'\F121'}.ms-Icon--CaretBottomRightSolid8:before{content:'\F122'}.ms-Icon--FolderHorizontal:before{content:'\F12B'}.ms-Icon--MicrosoftStaffhubLogo:before{content:'\F130'}.ms-Icon--CaloriesAdd:before{content:'\F172'}.ms-Icon--BranchFork:before{content:'\F173'}.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_16x1.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_48x1.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_96x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_48x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_96x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_16x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_48x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_96x1.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_16x1.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_48x1.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_96x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_16x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_48x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_96x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_16x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_48x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_96x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_16x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_48x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_96x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_16x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_48x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_96x1.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_16x1.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_48x1.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_96x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_16x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_48x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_96x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_16x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_48x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_96x1.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_16x1.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_48x1.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_96x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_16x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_48x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_96x1.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_16x1.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_48x1.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_96x1.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_16x1.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_48x1.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_96x1.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_16x1.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_48x1.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_96x1.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_16x1.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_48x1.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_96x1.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_16x1.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_48x1.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_96x1.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_16x1.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_48x1.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_96x1.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_16x1.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_48x1.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_96x1.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_16x1.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_48x1.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_96x1.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_16x1.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_48x1.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_96x1.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_16x1.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_48x1.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_96x1.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_16x1.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_48x1.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_96x1.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_16x1.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_48x1.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_96x1.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_16x1.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_48x1.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_96x1.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_16x1.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_48x1.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_96x1.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_16x1.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_48x1.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_96x1.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_16x1.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_48x1.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_96x1.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_16x1.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_48x1.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_96x1.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_16x1.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_48x1.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_96x1.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_16x1.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_48x1.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_96x1.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_16x1.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_48x1.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_96x1.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_16x1.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_48x1.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_96x1.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_16x1.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_48x1.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_96x1.png)}.ms-BrandIcon--Icon16{background-size:100% 100%;width:16px;height:16px}.ms-BrandIcon--Icon48{background-size:100% 100%;width:48px;height:48px}.ms-BrandIcon--Icon96{background-size:100% 100%;width:96px;height:96px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi){.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_16x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_48x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_96x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_48x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_96x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_16x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_48x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_96x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_16x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_48x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_96x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_16x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_48x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_96x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_16x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_48x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_96x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_16x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_48x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_96x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_16x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_48x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_96x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_16x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_48x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_96x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_16x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_48x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_96x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_16x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_48x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_96x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_16x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_48x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_96x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_16x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_48x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_96x1_5.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_16x1_5.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_48x1_5.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_96x1_5.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_16x1_5.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_48x1_5.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_96x1_5.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_16x1_5.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_48x1_5.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_96x1_5.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_16x1_5.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_48x1_5.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_96x1_5.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_16x1_5.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_48x1_5.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_96x1_5.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_16x1_5.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_48x1_5.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_96x1_5.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_16x1_5.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_48x1_5.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_96x1_5.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_16x1_5.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_48x1_5.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_96x1_5.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_16x1_5.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_48x1_5.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_96x1_5.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_16x1_5.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_48x1_5.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_96x1_5.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_16x1_5.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_48x1_5.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_96x1_5.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_16x1_5.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_48x1_5.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_96x1_5.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_16x1_5.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_48x1_5.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_96x1_5.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_16x1_5.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_48x1_5.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_96x1_5.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_16x1_5.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_48x1_5.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_96x1_5.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_16x1_5.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_48x1_5.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_96x1_5.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_16x1_5.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_48x1_5.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_96x1_5.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_16x1_5.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_48x1_5.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_96x1_5.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_16x1_5.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_48x1_5.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_96x1_5.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_16x1_5.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_48x1_5.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_96x1_5.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_16x1_5.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_48x1_5.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_96x1_5.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_16x1_5.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_48x1_5.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_96x1_5.png)}}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi){.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_16x2.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_48x2.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_96x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_48x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_96x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_16x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_48x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_96x2.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_16x2.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_48x2.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_96x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_16x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_48x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_96x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_16x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_48x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_96x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_16x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_48x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_96x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_16x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_48x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_96x2.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_16x2.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_48x2.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_96x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_16x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_48x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_96x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_16x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_48x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_96x2.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_16x2.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_48x2.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_96x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_16x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_48x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_96x2.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_16x2.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_48x2.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_96x2.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_16x2.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_48x2.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_96x2.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_16x2.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_48x2.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_96x2.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_16x2.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_48x2.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_96x2.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_16x2.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_48x2.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_96x2.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_16x2.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_48x2.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_96x2.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_16x2.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_48x2.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_96x2.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_16x2.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_48x2.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_96x2.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_16x2.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_48x2.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_96x2.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_16x2.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_48x2.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_96x2.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_16x2.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_48x2.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_96x2.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_16x2.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_48x2.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_96x2.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_16x2.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_48x2.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_96x2.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_16x2.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_48x2.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_96x2.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_16x2.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_48x2.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_96x2.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_16x2.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_48x2.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_96x2.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_16x2.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_48x2.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_96x2.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_16x2.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_48x2.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_96x2.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_16x2.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_48x2.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_96x2.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_16x2.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_48x2.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_96x2.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_16x2.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_48x2.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_96x2.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_16x2.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_48x2.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_96x2.png)}}@media only screen and (-webkit-min-device-pixel-ratio:3),only screen and (min-resolution:288dpi){.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_16x3.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_48x3.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_96x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_48x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_96x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_16x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_48x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_96x3.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_16x3.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_48x3.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_96x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_16x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_48x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_96x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_16x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_48x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_96x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_16x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_48x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_96x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_16x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_48x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_96x3.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_16x3.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_48x3.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_96x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_16x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_48x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_96x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_16x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_48x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_96x3.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_16x3.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_48x3.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_96x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_16x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_48x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_96x3.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_16x3.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_48x3.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_96x3.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_16x3.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_48x3.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_96x3.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_16x3.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_48x3.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_96x3.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_16x3.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_48x3.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_96x3.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_16x3.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_48x3.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_96x3.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_16x3.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_48x3.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_96x3.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_16x3.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_48x3.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_96x3.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_16x3.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_48x3.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_96x3.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_16x3.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_48x3.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_96x3.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_16x3.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_48x3.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_96x3.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_16x3.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_48x3.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_96x3.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_16x3.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_48x3.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_96x3.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_16x3.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_48x3.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_96x3.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_16x3.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_48x3.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_96x3.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_16x3.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_48x3.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_96x3.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_16x3.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_48x3.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_96x3.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_16x3.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_48x3.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_96x3.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_16x3.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_48x3.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_96x3.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_16x3.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_48x3.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_96x3.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_16x3.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_48x3.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_96x3.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_16x3.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_48x3.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_96x3.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_16x3.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_48x3.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_96x3.png)}}.ms-u-slideRightIn10{animation-name:fadeIn,slideRightIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn10{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn20{animation-name:fadeIn,slideRightIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn20{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn40{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn40{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn10{animation-name:fadeIn,slideLeftIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn10{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn20{animation-name:fadeIn,slideLeftIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn20{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn40{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn40{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn400{animation-name:fadeIn,slideRightIn400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn400{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn400{animation-name:fadeIn,slideLeft400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeft400{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn20{animation-name:fadeIn,slideUpIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideUpIn20{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn10{animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpIn10{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn20{animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideDownIn20{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn10{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownIn10{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}.ms-u-slideRightOut40{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut40{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut40{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{animation-name:fadeOut,slideRightOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut400{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{animation-name:fadeOut,slideLeftOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut400{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{animation-name:fadeOut,slideUpOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{animation-name:fadeOut,slideDownOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{animation-name:fadeOut,slideDownOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{animation-name:fadeIn,scaleUp100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleUp100{0%{transform:scale3d(.98,.98,1)}to{transform:scaleX(1)}}.ms-u-scaleDownIn100{animation-name:fadeIn,scaleDown100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleDown100{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleX(1)}}.ms-u-scaleUpOut103{animation-name:fadeOut,scaleUp103;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleUp103{0%{transform:scaleX(1)}to{transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{animation-name:fadeOut,scaleDown98;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleDown98{0%{transform:scaleX(1)}to{transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both}.ms-u-fadeIn100{animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeIn{0%{opacity:0;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both}.ms-u-fadeOut100{animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeOut{0%{opacity:1;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{animation-name:rotate90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotate90{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}.ms-u-rotateN90deg{animation-name:rotateN90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotateN90{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}.ms-u-expandCollapse400{transition:height .367s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height .167s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{animation-delay:.167s}.ms-u-delay200{animation-delay:.267s}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{right:100%}.ms-u-smPull11{right:91.66666666666666%}.ms-u-smPull10{right:83.33333333333334%}.ms-u-smPull9{right:75%}.ms-u-smPull8{right:66.66666666666666%}.ms-u-smPull7{right:58.333333333333336%}.ms-u-smPull6{right:50%}.ms-u-smPull5{right:41.66666666666667%}.ms-u-smPull4{right:33.33333333333333%}.ms-u-smPull3{right:25%}.ms-u-smPull2{right:16.666666666666664%}.ms-u-smPull1{right:8.333333333333332%}.ms-u-smPull0{right:auto}.ms-u-smPush12{left:100%}.ms-u-smPush11{left:91.66666666666666%}.ms-u-smPush10{left:83.33333333333334%}.ms-u-smPush9{left:75%}.ms-u-smPush8{left:66.66666666666666%}.ms-u-smPush7{left:58.333333333333336%}.ms-u-smPush6{left:50%}.ms-u-smPush5{left:41.66666666666667%}.ms-u-smPush4{left:33.33333333333333%}.ms-u-smPush3{left:25%}.ms-u-smPush2{left:16.666666666666664%}.ms-u-smPush1{left:8.333333333333332%}.ms-u-smPush0{left:auto}.ms-u-smOffset11{margin-left:91.66666666666666%}.ms-u-smOffset10{margin-left:83.33333333333334%}.ms-u-smOffset9{margin-left:75%}.ms-u-smOffset8{margin-left:66.66666666666666%}.ms-u-smOffset7{margin-left:58.333333333333336%}.ms-u-smOffset6{margin-left:50%}.ms-u-smOffset5{margin-left:41.66666666666667%}.ms-u-smOffset4{margin-left:33.33333333333333%}.ms-u-smOffset3{margin-left:25%}.ms-u-smOffset2{margin-left:16.666666666666664%}.ms-u-smOffset1{margin-left:8.333333333333332%}.ms-u-smOffset0{margin-left:0}@media (min-width:480px){.ms-u-md12{width:100%}}@media (min-width:480px){.ms-u-md11{width:91.66666666666666%}}@media (min-width:480px){.ms-u-md10{width:83.33333333333334%}}@media (min-width:480px){.ms-u-md9{width:75%}}@media (min-width:480px){.ms-u-md8{width:66.66666666666666%}}@media (min-width:480px){.ms-u-md7{width:58.333333333333336%}}@media (min-width:480px){.ms-u-md6{width:50%}}@media (min-width:480px){.ms-u-md5{width:41.66666666666667%}}@media (min-width:480px){.ms-u-md4{width:33.33333333333333%}}@media (min-width:480px){.ms-u-md3{width:25%}}@media (min-width:480px){.ms-u-md2{width:16.666666666666664%}}@media (min-width:480px){.ms-u-md1{width:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull12{right:100%}}@media (min-width:480px){.ms-u-mdPull11{right:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPull10{right:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPull9{right:75%}}@media (min-width:480px){.ms-u-mdPull8{right:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPull7{right:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPull6{right:50%}}@media (min-width:480px){.ms-u-mdPull5{right:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPull4{right:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPull3{right:25%}}@media (min-width:480px){.ms-u-mdPull2{right:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPull1{right:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull0{right:auto}}@media (min-width:480px){.ms-u-mdPush12{left:100%}}@media (min-width:480px){.ms-u-mdPush11{left:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPush10{left:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPush9{left:75%}}@media (min-width:480px){.ms-u-mdPush8{left:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPush7{left:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPush6{left:50%}}@media (min-width:480px){.ms-u-mdPush5{left:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPush4{left:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPush3{left:25%}}@media (min-width:480px){.ms-u-mdPush2{left:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPush1{left:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPush0{left:auto}}@media (min-width:480px){.ms-u-mdOffset11{margin-left:91.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset10{margin-left:83.33333333333334%}}@media (min-width:480px){.ms-u-mdOffset9{margin-left:75%}}@media (min-width:480px){.ms-u-mdOffset8{margin-left:66.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset7{margin-left:58.333333333333336%}}@media (min-width:480px){.ms-u-mdOffset6{margin-left:50%}}@media (min-width:480px){.ms-u-mdOffset5{margin-left:41.66666666666667%}}@media (min-width:480px){.ms-u-mdOffset4{margin-left:33.33333333333333%}}@media (min-width:480px){.ms-u-mdOffset3{margin-left:25%}}@media (min-width:480px){.ms-u-mdOffset2{margin-left:16.666666666666664%}}@media (min-width:480px){.ms-u-mdOffset1{margin-left:8.333333333333332%}}@media (min-width:480px){.ms-u-mdOffset0{margin-left:0}}@media (min-width:640px){.ms-u-lg12{width:100%}}@media (min-width:640px){.ms-u-lg11{width:91.66666666666666%}}@media (min-width:640px){.ms-u-lg10{width:83.33333333333334%}}@media (min-width:640px){.ms-u-lg9{width:75%}}@media (min-width:640px){.ms-u-lg8{width:66.66666666666666%}}@media (min-width:640px){.ms-u-lg7{width:58.333333333333336%}}@media (min-width:640px){.ms-u-lg6{width:50%}}@media (min-width:640px){.ms-u-lg5{width:41.66666666666667%}}@media (min-width:640px){.ms-u-lg4{width:33.33333333333333%}}@media (min-width:640px){.ms-u-lg3{width:25%}}@media (min-width:640px){.ms-u-lg2{width:16.666666666666664%}}@media (min-width:640px){.ms-u-lg1{width:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull12{right:100%}}@media (min-width:640px){.ms-u-lgPull11{right:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPull10{right:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPull9{right:75%}}@media (min-width:640px){.ms-u-lgPull8{right:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPull7{right:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPull6{right:50%}}@media (min-width:640px){.ms-u-lgPull5{right:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPull4{right:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPull3{right:25%}}@media (min-width:640px){.ms-u-lgPull2{right:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPull1{right:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull0{right:auto}}@media (min-width:640px){.ms-u-lgPush12{left:100%}}@media (min-width:640px){.ms-u-lgPush11{left:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPush10{left:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPush9{left:75%}}@media (min-width:640px){.ms-u-lgPush8{left:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPush7{left:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPush6{left:50%}}@media (min-width:640px){.ms-u-lgPush5{left:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPush4{left:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPush3{left:25%}}@media (min-width:640px){.ms-u-lgPush2{left:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPush1{left:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPush0{left:auto}}@media (min-width:640px){.ms-u-lgOffset11{margin-left:91.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset10{margin-left:83.33333333333334%}}@media (min-width:640px){.ms-u-lgOffset9{margin-left:75%}}@media (min-width:640px){.ms-u-lgOffset8{margin-left:66.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset7{margin-left:58.333333333333336%}}@media (min-width:640px){.ms-u-lgOffset6{margin-left:50%}}@media (min-width:640px){.ms-u-lgOffset5{margin-left:41.66666666666667%}}@media (min-width:640px){.ms-u-lgOffset4{margin-left:33.33333333333333%}}@media (min-width:640px){.ms-u-lgOffset3{margin-left:25%}}@media (min-width:640px){.ms-u-lgOffset2{margin-left:16.666666666666664%}}@media (min-width:640px){.ms-u-lgOffset1{margin-left:8.333333333333332%}}@media (min-width:640px){.ms-u-lgOffset0{margin-left:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}}@media (min-width:1024px){.ms-u-xl11{width:91.66666666666666%}}@media (min-width:1024px){.ms-u-xl10{width:83.33333333333334%}}@media (min-width:1024px){.ms-u-xl9{width:75%}}@media (min-width:1024px){.ms-u-xl8{width:66.66666666666666%}}@media (min-width:1024px){.ms-u-xl7{width:58.333333333333336%}}@media (min-width:1024px){.ms-u-xl6{width:50%}}@media (min-width:1024px){.ms-u-xl5{width:41.66666666666667%}}@media (min-width:1024px){.ms-u-xl4{width:33.33333333333333%}}@media (min-width:1024px){.ms-u-xl3{width:25%}}@media (min-width:1024px){.ms-u-xl2{width:16.666666666666664%}}@media (min-width:1024px){.ms-u-xl1{width:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull12{right:100%}}@media (min-width:1024px){.ms-u-xlPull11{right:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull10{right:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPull9{right:75%}}@media (min-width:1024px){.ms-u-xlPull8{right:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull7{right:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPull6{right:50%}}@media (min-width:1024px){.ms-u-xlPull5{right:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPull4{right:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPull3{right:25%}}@media (min-width:1024px){.ms-u-xlPull2{right:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPull1{right:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull0{right:auto}}@media (min-width:1024px){.ms-u-xlPush12{left:100%}}@media (min-width:1024px){.ms-u-xlPush11{left:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush10{left:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPush9{left:75%}}@media (min-width:1024px){.ms-u-xlPush8{left:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush7{left:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPush6{left:50%}}@media (min-width:1024px){.ms-u-xlPush5{left:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPush4{left:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPush3{left:25%}}@media (min-width:1024px){.ms-u-xlPush2{left:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPush1{left:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPush0{left:auto}}@media (min-width:1024px){.ms-u-xlOffset11{margin-left:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset10{margin-left:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlOffset9{margin-left:75%}}@media (min-width:1024px){.ms-u-xlOffset8{margin-left:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset7{margin-left:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlOffset6{margin-left:50%}}@media (min-width:1024px){.ms-u-xlOffset5{margin-left:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlOffset4{margin-left:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlOffset3{margin-left:25%}}@media (min-width:1024px){.ms-u-xlOffset2{margin-left:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlOffset1{margin-left:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlOffset0{margin-left:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}}@media (min-width:1366px){.ms-u-xxl11{width:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxl10{width:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxl9{width:75%}}@media (min-width:1366px){.ms-u-xxl8{width:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxl7{width:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxl6{width:50%}}@media (min-width:1366px){.ms-u-xxl5{width:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxl4{width:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxl3{width:25%}}@media (min-width:1366px){.ms-u-xxl2{width:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxl1{width:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull12{right:100%}}@media (min-width:1366px){.ms-u-xxlPull11{right:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull10{right:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPull9{right:75%}}@media (min-width:1366px){.ms-u-xxlPull8{right:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull7{right:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPull6{right:50%}}@media (min-width:1366px){.ms-u-xxlPull5{right:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPull4{right:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPull3{right:25%}}@media (min-width:1366px){.ms-u-xxlPull2{right:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPull1{right:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull0{right:auto}}@media (min-width:1366px){.ms-u-xxlPush12{left:100%}}@media (min-width:1366px){.ms-u-xxlPush11{left:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush10{left:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPush9{left:75%}}@media (min-width:1366px){.ms-u-xxlPush8{left:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush7{left:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPush6{left:50%}}@media (min-width:1366px){.ms-u-xxlPush5{left:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPush4{left:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPush3{left:25%}}@media (min-width:1366px){.ms-u-xxlPush2{left:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPush1{left:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPush0{left:auto}}@media (min-width:1366px){.ms-u-xxlOffset11{margin-left:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset10{margin-left:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlOffset9{margin-left:75%}}@media (min-width:1366px){.ms-u-xxlOffset8{margin-left:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset7{margin-left:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlOffset6{margin-left:50%}}@media (min-width:1366px){.ms-u-xxlOffset5{margin-left:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlOffset4{margin-left:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlOffset3{margin-left:25%}}@media (min-width:1366px){.ms-u-xxlOffset2{margin-left:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlOffset1{margin-left:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlOffset0{margin-left:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}}@media (min-width:1920px){.ms-u-xxxl11{width:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl10{width:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxl9{width:75%}}@media (min-width:1920px){.ms-u-xxxl8{width:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl7{width:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxl6{width:50%}}@media (min-width:1920px){.ms-u-xxxl5{width:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxl4{width:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxl3{width:25%}}@media (min-width:1920px){.ms-u-xxxl2{width:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxl1{width:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull12{right:100%}}@media (min-width:1920px){.ms-u-xxxlPull11{right:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull10{right:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPull9{right:75%}}@media (min-width:1920px){.ms-u-xxxlPull8{right:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull7{right:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPull6{right:50%}}@media (min-width:1920px){.ms-u-xxxlPull5{right:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPull4{right:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPull3{right:25%}}@media (min-width:1920px){.ms-u-xxxlPull2{right:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPull1{right:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull0{right:auto}}@media (min-width:1920px){.ms-u-xxxlPush12{left:100%}}@media (min-width:1920px){.ms-u-xxxlPush11{left:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush10{left:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPush9{left:75%}}@media (min-width:1920px){.ms-u-xxxlPush8{left:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush7{left:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPush6{left:50%}}@media (min-width:1920px){.ms-u-xxxlPush5{left:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPush4{left:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPush3{left:25%}}@media (min-width:1920px){.ms-u-xxxlPush2{left:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPush1{left:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPush0{left:auto}}@media (min-width:1920px){.ms-u-xxxlOffset11{margin-left:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset10{margin-left:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlOffset9{margin-left:75%}}@media (min-width:1920px){.ms-u-xxxlOffset8{margin-left:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset7{margin-left:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlOffset6{margin-left:50%}}@media (min-width:1920px){.ms-u-xxxlOffset5{margin-left:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlOffset4{margin-left:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlOffset3{margin-left:25%}}@media (min-width:1920px){.ms-u-xxxlOffset2{margin-left:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlOffset1{margin-left:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlOffset0{margin-left:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-left:8px;padding-right:8px;box-sizing:border-box;float:left}.ms-Grid-col .ms-Grid{padding:0}.ms-Fabric{color:#333} \ No newline at end of file diff --git a/dist/css/fabric.rtl.min.css b/dist/css/fabric.rtl.min.css new file mode 100644 index 00000000..78c4eff1 --- /dev/null +++ b/dist/css/fabric.rtl.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric Core 5.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-borderBase{border:1px solid}.ms-u-clearfix{*zoom:1}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-u-clearfix:after{clear:both}.ms-u-normalize{box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-u-textAlignLeft{text-align:right}.ms-u-textAlignCenter{text-align:center}.ms-u-textAlignRight{text-align:left}.ms-u-screenReaderOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-u-textTruncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ms-u-noWrap{white-space:nowrap}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2488d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#69afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#b3d6f2}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-neutralPrimaryAlt,.ms-bgColor-neutralPrimaryAlt--hover:hover{background-color:#3c3c3c}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#666}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#767676}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a6a6a6}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c8c8}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#eaeaea}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f4f4f4}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#f8f8f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-yellow{background-color:#ffb900}.ms-bgColor-yellowLight{background-color:#fff100}.ms-bgColor-orange{background-color:#d83b01}.ms-bgColor-orangeLight{background-color:#ea4300}.ms-bgColor-orangeLighter{background-color:#ff8c00}.ms-bgColor-redDark{background-color:#a80000}.ms-bgColor-red{background-color:#e81123}.ms-bgColor-magentaDark{background-color:#5c005c}.ms-bgColor-magenta{background-color:#b4009e}.ms-bgColor-magentaLight{background-color:#e3008c}.ms-bgColor-purpleDark{background-color:#32145a}.ms-bgColor-purple{background-color:#5c2d91}.ms-bgColor-purpleLight{background-color:#b4a0ff}.ms-bgColor-blueDark{background-color:#002050}.ms-bgColor-blueMid{background-color:#00188f}.ms-bgColor-blue{background-color:#0078d7}.ms-bgColor-blueLight{background-color:#00bcf2}.ms-bgColor-tealDark{background-color:#004b50}.ms-bgColor-teal{background-color:#008272}.ms-bgColor-tealLight{background-color:#00b294}.ms-bgColor-greenDark{background-color:#004b1c}.ms-bgColor-green{background-color:#107c10}.ms-bgColor-greenLight{background-color:#bad80a}.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-severeWarning{background-color:#fed9cc}.ms-bgColor-warning{background-color:#fff4ce}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2488d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#69afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#b3d6f2}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-neutralPrimaryAlt,.ms-borderColor-neutralPrimaryAlt--hover:hover{border-color:#3c3c3c}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#666}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#767676}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a6a6a6}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c8c8}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#eaeaea}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f4f4f4}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#f8f8f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-yellow{border-color:#ffb900}.ms-borderColor-yellowLight{border-color:#fff100}.ms-borderColor-orange{border-color:#d83b01}.ms-borderColor-orangeLight{border-color:#ea4300}.ms-borderColor-orangeLighter{border-color:#ff8c00}.ms-borderColor-redDark{border-color:#a80000}.ms-borderColor-red{border-color:#e81123}.ms-borderColor-magentaDark{border-color:#5c005c}.ms-borderColor-magenta{border-color:#b4009e}.ms-borderColor-magentaLight{border-color:#e3008c}.ms-borderColor-purpleDark{border-color:#32145a}.ms-borderColor-purple{border-color:#5c2d91}.ms-borderColor-purpleLight{border-color:#b4a0ff}.ms-borderColor-blueDark{border-color:#002050}.ms-borderColor-blueMid{border-color:#00188f}.ms-borderColor-blue{border-color:#0078d7}.ms-borderColor-blueLight{border-color:#00bcf2}.ms-borderColor-tealDark{border-color:#004b50}.ms-borderColor-teal{border-color:#008272}.ms-borderColor-tealLight{border-color:#00b294}.ms-borderColor-greenDark{border-color:#004b1c}.ms-borderColor-green{border-color:#107c10}.ms-borderColor-greenLight{border-color:#bad80a}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Light'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.ttf) format('truetype');font-weight:100;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semibold'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.ttf) format('truetype');font-weight:600;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semilight'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.ttf) format('truetype');font-weight:200;font-style:normal}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l,.ms-font-xl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi,.ms-font-xs{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-mi{font-size:10px;font-weight:600}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-weight:100}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-weight:300}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-weight:400}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-weight:600}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2488d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#69afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#b3d6f2}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-neutralPrimaryAlt,.ms-fontColor-neutralPrimaryAlt--hover:hover{color:#3c3c3c}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#666}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#767676}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a6a6a6}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c8c8}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#eaeaea}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f4f4f4}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#f8f8f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d7}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-fontColor-info,.ms-fontColor-info--hover:hover{color:#767676}.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-warning,.ms-fontColor-warning--hover:hover{color:#767676}.ms-fontColor-severeWarning,.ms-fontColor-severeWarning--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}[lang=jpn] .ms-font-l,[lang=jpn] .ms-font-m,[lang=jpn] .ms-font-m-plus,[lang=jpn] .ms-font-mi,[lang=jpn] .ms-font-s,[lang=jpn] .ms-font-s-plus,[lang=jpn] .ms-font-su,[lang=jpn] .ms-font-xl,[lang=jpn] .ms-font-xs,[lang=jpn] .ms-font-xxl,[lang=jpn] .ms-fontWeight-light,[lang=jpn] .ms-fontWeight-light-hover:hover,[lang=jpn] .ms-fontWeight-regular,[lang=jpn] .ms-fontWeight-regular-hover:hover,[lang=jpn] .ms-fontWeight-semibold,[lang=jpn] .ms-fontWeight-semibold-hover:hover,[lang=jpn] .ms-fontWeight-semilight,[lang=jpn] .ms-fontWeight-semilight-hover:hover{font-family:Yu Gothic,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=kor] .ms-font-l,[lang=kor] .ms-font-m,[lang=kor] .ms-font-m-plus,[lang=kor] .ms-font-mi,[lang=kor] .ms-font-s,[lang=kor] .ms-font-s-plus,[lang=kor] .ms-font-su,[lang=kor] .ms-font-xl,[lang=kor] .ms-font-xs,[lang=kor] .ms-font-xxl,[lang=kor] .ms-fontWeight-light,[lang=kor] .ms-fontWeight-light-hover:hover,[lang=kor] .ms-fontWeight-regular,[lang=kor] .ms-fontWeight-regular-hover:hover,[lang=kor] .ms-fontWeight-semibold,[lang=kor] .ms-fontWeight-semibold-hover:hover,[lang=kor] .ms-fontWeight-semilight,[lang=kor] .ms-fontWeight-semilight-hover:hover{font-family:Malgun Gothic,Gulim,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=cmn] .ms-font-l,[lang=cmn] .ms-font-m,[lang=cmn] .ms-font-m-plus,[lang=cmn] .ms-font-mi,[lang=cmn] .ms-font-s,[lang=cmn] .ms-font-s-plus,[lang=cmn] .ms-font-su,[lang=cmn] .ms-font-xl,[lang=cmn] .ms-font-xs,[lang=cmn] .ms-font-xxl,[lang=cmn] .ms-fontWeight-light,[lang=cmn] .ms-fontWeight-light-hover:hover,[lang=cmn] .ms-fontWeight-regular,[lang=cmn] .ms-fontWeight-regular-hover:hover,[lang=cmn] .ms-fontWeight-semibold,[lang=cmn] .ms-fontWeight-semibold-hover:hover,[lang=cmn] .ms-fontWeight-semilight,[lang=cmn] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Yahei,Verdana,Simsun,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=yue] .ms-font-l,[lang=yue] .ms-font-m,[lang=yue] .ms-font-m-plus,[lang=yue] .ms-font-mi,[lang=yue] .ms-font-s,[lang=yue] .ms-font-s-plus,[lang=yue] .ms-font-su,[lang=yue] .ms-font-xl,[lang=yue] .ms-font-xs,[lang=yue] .ms-font-xxl,[lang=yue] .ms-fontWeight-light,[lang=yue] .ms-fontWeight-light-hover:hover,[lang=yue] .ms-fontWeight-regular,[lang=yue] .ms-fontWeight-regular-hover:hover,[lang=yue] .ms-fontWeight-semibold,[lang=yue] .ms-fontWeight-semibold-hover:hover,[lang=yue] .ms-fontWeight-semilight,[lang=yue] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Jhenghei,Pmingliu,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=hin] .ms-font-l,[lang=hin] .ms-font-m,[lang=hin] .ms-font-m-plus,[lang=hin] .ms-font-mi,[lang=hin] .ms-font-s,[lang=hin] .ms-font-s-plus,[lang=hin] .ms-font-su,[lang=hin] .ms-font-xl,[lang=hin] .ms-font-xs,[lang=hin] .ms-font-xxl,[lang=hin] .ms-fontWeight-light,[lang=hin] .ms-fontWeight-light-hover:hover,[lang=hin] .ms-fontWeight-regular,[lang=hin] .ms-fontWeight-regular-hover:hover,[lang=hin] .ms-fontWeight-semibold,[lang=hin] .ms-fontWeight-semibold-hover:hover,[lang=hin] .ms-fontWeight-semilight,[lang=hin] .ms-fontWeight-semilight-hover:hover{font-family:Nirmala UI,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=tha] .ms-font-l,[lang=tha] .ms-font-m,[lang=tha] .ms-font-m-plus,[lang=tha] .ms-font-mi,[lang=tha] .ms-font-s,[lang=tha] .ms-font-s-plus,[lang=tha] .ms-font-su,[lang=tha] .ms-font-xl,[lang=tha] .ms-font-xs,[lang=tha] .ms-font-xxl,[lang=tha] .ms-fontWeight-light,[lang=tha] .ms-fontWeight-light-hover:hover,[lang=tha] .ms-fontWeight-regular,[lang=tha] .ms-fontWeight-regular-hover:hover,[lang=tha] .ms-fontWeight-semibold,[lang=tha] .ms-fontWeight-semibold-hover:hover,[lang=tha] .ms-fontWeight-semilight,[lang=tha] .ms-fontWeight-semilight-hover:hover{font-family:Leelawadee UI,Kmer UI,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=ara] .ms-font-l,[lang=ara] .ms-font-m,[lang=ara] .ms-font-m-plus,[lang=ara] .ms-font-mi,[lang=ara] .ms-font-s,[lang=ara] .ms-font-s-plus,[lang=ara] .ms-font-su,[lang=ara] .ms-font-xl,[lang=ara] .ms-font-xs,[lang=ara] .ms-font-xxl,[lang=ara] .ms-fontWeight-light,[lang=ara] .ms-fontWeight-light-hover:hover,[lang=ara] .ms-fontWeight-regular,[lang=ara] .ms-fontWeight-regular-hover:hover,[lang=ara] .ms-fontWeight-semibold,[lang=ara] .ms-fontWeight-semibold-hover:hover,[lang=ara] .ms-fontWeight-semilight,[lang=ara] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Arabic,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=ces] .ms-font-l,[lang=ces] .ms-font-m,[lang=ces] .ms-font-m-plus,[lang=ces] .ms-font-mi,[lang=ces] .ms-font-s,[lang=ces] .ms-font-s-plus,[lang=ces] .ms-font-su,[lang=ces] .ms-font-xl,[lang=ces] .ms-font-xs,[lang=ces] .ms-font-xxl,[lang=ces] .ms-fontWeight-light,[lang=ces] .ms-fontWeight-light-hover:hover,[lang=ces] .ms-fontWeight-regular,[lang=ces] .ms-fontWeight-regular-hover:hover,[lang=ces] .ms-fontWeight-semibold,[lang=ces] .ms-fontWeight-semibold-hover:hover,[lang=ces] .ms-fontWeight-semilight,[lang=ces] .ms-fontWeight-semilight-hover:hover,[lang=est] .ms-font-l,[lang=est] .ms-font-m,[lang=est] .ms-font-m-plus,[lang=est] .ms-font-mi,[lang=est] .ms-font-s,[lang=est] .ms-font-s-plus,[lang=est] .ms-font-su,[lang=est] .ms-font-xl,[lang=est] .ms-font-xs,[lang=est] .ms-font-xxl,[lang=est] .ms-fontWeight-light,[lang=est] .ms-fontWeight-light-hover:hover,[lang=est] .ms-fontWeight-regular,[lang=est] .ms-fontWeight-regular-hover:hover,[lang=est] .ms-fontWeight-semibold,[lang=est] .ms-fontWeight-semibold-hover:hover,[lang=est] .ms-fontWeight-semilight,[lang=est] .ms-fontWeight-semilight-hover:hover,[lang=hrv] .ms-font-l,[lang=hrv] .ms-font-m,[lang=hrv] .ms-font-m-plus,[lang=hrv] .ms-font-mi,[lang=hrv] .ms-font-s,[lang=hrv] .ms-font-s-plus,[lang=hrv] .ms-font-su,[lang=hrv] .ms-font-xl,[lang=hrv] .ms-font-xs,[lang=hrv] .ms-font-xxl,[lang=hrv] .ms-fontWeight-light,[lang=hrv] .ms-fontWeight-light-hover:hover,[lang=hrv] .ms-fontWeight-regular,[lang=hrv] .ms-fontWeight-regular-hover:hover,[lang=hrv] .ms-fontWeight-semibold,[lang=hrv] .ms-fontWeight-semibold-hover:hover,[lang=hrv] .ms-fontWeight-semilight,[lang=hrv] .ms-fontWeight-semilight-hover:hover,[lang=hun] .ms-font-l,[lang=hun] .ms-font-m,[lang=hun] .ms-font-m-plus,[lang=hun] .ms-font-mi,[lang=hun] .ms-font-s,[lang=hun] .ms-font-s-plus,[lang=hun] .ms-font-su,[lang=hun] .ms-font-xl,[lang=hun] .ms-font-xs,[lang=hun] .ms-font-xxl,[lang=hun] .ms-fontWeight-light,[lang=hun] .ms-fontWeight-light-hover:hover,[lang=hun] .ms-fontWeight-regular,[lang=hun] .ms-fontWeight-regular-hover:hover,[lang=hun] .ms-fontWeight-semibold,[lang=hun] .ms-fontWeight-semibold-hover:hover,[lang=hun] .ms-fontWeight-semilight,[lang=hun] .ms-fontWeight-semilight-hover:hover,[lang=kaz] .ms-font-l,[lang=kaz] .ms-font-m,[lang=kaz] .ms-font-m-plus,[lang=kaz] .ms-font-mi,[lang=kaz] .ms-font-s,[lang=kaz] .ms-font-s-plus,[lang=kaz] .ms-font-su,[lang=kaz] .ms-font-xl,[lang=kaz] .ms-font-xs,[lang=kaz] .ms-font-xxl,[lang=kaz] .ms-fontWeight-light,[lang=kaz] .ms-fontWeight-light-hover:hover,[lang=kaz] .ms-fontWeight-regular,[lang=kaz] .ms-fontWeight-regular-hover:hover,[lang=kaz] .ms-fontWeight-semibold,[lang=kaz] .ms-fontWeight-semibold-hover:hover,[lang=kaz] .ms-fontWeight-semilight,[lang=kaz] .ms-fontWeight-semilight-hover:hover,[lang=lav] .ms-font-l,[lang=lav] .ms-font-m,[lang=lav] .ms-font-m-plus,[lang=lav] .ms-font-mi,[lang=lav] .ms-font-s,[lang=lav] .ms-font-s-plus,[lang=lav] .ms-font-su,[lang=lav] .ms-font-xl,[lang=lav] .ms-font-xs,[lang=lav] .ms-font-xxl,[lang=lav] .ms-fontWeight-light,[lang=lav] .ms-fontWeight-light-hover:hover,[lang=lav] .ms-fontWeight-regular,[lang=lav] .ms-fontWeight-regular-hover:hover,[lang=lav] .ms-fontWeight-semibold,[lang=lav] .ms-fontWeight-semibold-hover:hover,[lang=lav] .ms-fontWeight-semilight,[lang=lav] .ms-fontWeight-semilight-hover:hover,[lang=lit] .ms-font-l,[lang=lit] .ms-font-m,[lang=lit] .ms-font-m-plus,[lang=lit] .ms-font-mi,[lang=lit] .ms-font-s,[lang=lit] .ms-font-s-plus,[lang=lit] .ms-font-su,[lang=lit] .ms-font-xl,[lang=lit] .ms-font-xs,[lang=lit] .ms-font-xxl,[lang=lit] .ms-fontWeight-light,[lang=lit] .ms-fontWeight-light-hover:hover,[lang=lit] .ms-fontWeight-regular,[lang=lit] .ms-fontWeight-regular-hover:hover,[lang=lit] .ms-fontWeight-semibold,[lang=lit] .ms-fontWeight-semibold-hover:hover,[lang=lit] .ms-fontWeight-semilight,[lang=lit] .ms-fontWeight-semilight-hover:hover,[lang=pol] .ms-font-l,[lang=pol] .ms-font-m,[lang=pol] .ms-font-m-plus,[lang=pol] .ms-font-mi,[lang=pol] .ms-font-s,[lang=pol] .ms-font-s-plus,[lang=pol] .ms-font-su,[lang=pol] .ms-font-xl,[lang=pol] .ms-font-xs,[lang=pol] .ms-font-xxl,[lang=pol] .ms-fontWeight-light,[lang=pol] .ms-fontWeight-light-hover:hover,[lang=pol] .ms-fontWeight-regular,[lang=pol] .ms-fontWeight-regular-hover:hover,[lang=pol] .ms-fontWeight-semibold,[lang=pol] .ms-fontWeight-semibold-hover:hover,[lang=pol] .ms-fontWeight-semilight,[lang=pol] .ms-fontWeight-semilight-hover:hover,[lang=slk] .ms-font-l,[lang=slk] .ms-font-m,[lang=slk] .ms-font-m-plus,[lang=slk] .ms-font-mi,[lang=slk] .ms-font-s,[lang=slk] .ms-font-s-plus,[lang=slk] .ms-font-su,[lang=slk] .ms-font-xl,[lang=slk] .ms-font-xs,[lang=slk] .ms-font-xxl,[lang=slk] .ms-fontWeight-light,[lang=slk] .ms-fontWeight-light-hover:hover,[lang=slk] .ms-fontWeight-regular,[lang=slk] .ms-fontWeight-regular-hover:hover,[lang=slk] .ms-fontWeight-semibold,[lang=slk] .ms-fontWeight-semibold-hover:hover,[lang=slk] .ms-fontWeight-semilight,[lang=slk] .ms-fontWeight-semilight-hover:hover,[lang=tur] .ms-font-l,[lang=tur] .ms-font-m,[lang=tur] .ms-font-m-plus,[lang=tur] .ms-font-mi,[lang=tur] .ms-font-s,[lang=tur] .ms-font-s-plus,[lang=tur] .ms-font-su,[lang=tur] .ms-font-xl,[lang=tur] .ms-font-xs,[lang=tur] .ms-font-xxl,[lang=tur] .ms-fontWeight-light,[lang=tur] .ms-fontWeight-light-hover:hover,[lang=tur] .ms-fontWeight-regular,[lang=tur] .ms-fontWeight-regular-hover:hover,[lang=tur] .ms-fontWeight-semibold,[lang=tur] .ms-fontWeight-semibold-hover:hover,[lang=tur] .ms-fontWeight-semilight,[lang=tur] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI EastEuropean,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=rus] .ms-font-l,[lang=rus] .ms-font-m,[lang=rus] .ms-font-m-plus,[lang=rus] .ms-font-mi,[lang=rus] .ms-font-s,[lang=rus] .ms-font-s-plus,[lang=rus] .ms-font-su,[lang=rus] .ms-font-xl,[lang=rus] .ms-font-xs,[lang=rus] .ms-font-xxl,[lang=rus] .ms-fontWeight-light,[lang=rus] .ms-fontWeight-light-hover:hover,[lang=rus] .ms-fontWeight-regular,[lang=rus] .ms-fontWeight-regular-hover:hover,[lang=rus] .ms-fontWeight-semibold,[lang=rus] .ms-fontWeight-semibold-hover:hover,[lang=rus] .ms-fontWeight-semilight,[lang=rus] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Cyrillic,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=ell] .ms-font-l,[lang=ell] .ms-font-m,[lang=ell] .ms-font-m-plus,[lang=ell] .ms-font-mi,[lang=ell] .ms-font-s,[lang=ell] .ms-font-s-plus,[lang=ell] .ms-font-su,[lang=ell] .ms-font-xl,[lang=ell] .ms-font-xs,[lang=ell] .ms-font-xxl,[lang=ell] .ms-fontWeight-light,[lang=ell] .ms-fontWeight-light-hover:hover,[lang=ell] .ms-fontWeight-regular,[lang=ell] .ms-fontWeight-regular-hover:hover,[lang=ell] .ms-fontWeight-semibold,[lang=ell] .ms-fontWeight-semibold-hover:hover,[lang=ell] .ms-fontWeight-semilight,[lang=ell] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Greek,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=heb] .ms-font-l,[lang=heb] .ms-font-m,[lang=heb] .ms-font-m-plus,[lang=heb] .ms-font-mi,[lang=heb] .ms-font-s,[lang=heb] .ms-font-s-plus,[lang=heb] .ms-font-su,[lang=heb] .ms-font-xl,[lang=heb] .ms-font-xs,[lang=heb] .ms-font-xxl,[lang=heb] .ms-fontWeight-light,[lang=heb] .ms-fontWeight-light-hover:hover,[lang=heb] .ms-fontWeight-regular,[lang=heb] .ms-fontWeight-regular-hover:hover,[lang=heb] .ms-fontWeight-semibold,[lang=heb] .ms-fontWeight-semibold-hover:hover,[lang=heb] .ms-fontWeight-semilight,[lang=heb] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Hebrew,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=vie] .ms-font-l,[lang=vie] .ms-font-m,[lang=vie] .ms-font-m-plus,[lang=vie] .ms-font-mi,[lang=vie] .ms-font-s,[lang=vie] .ms-font-s-plus,[lang=vie] .ms-font-su,[lang=vie] .ms-font-xl,[lang=vie] .ms-font-xs,[lang=vie] .ms-font-xxl,[lang=vie] .ms-fontWeight-light,[lang=vie] .ms-fontWeight-light-hover:hover,[lang=vie] .ms-fontWeight-regular,[lang=vie] .ms-fontWeight-regular-hover:hover,[lang=vie] .ms-fontWeight-semibold,[lang=vie] .ms-fontWeight-semibold-hover:hover,[lang=vie] .ms-fontWeight-semilight,[lang=vie] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Vietnamese,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}@font-face{font-family:FabricMDL2Icons;src:url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.ttf) format('truetype');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none}.ms-Icon,.ms-Icon--circle{-webkit-font-smoothing:antialiased;display:inline-block}.ms-Icon--circle{position:relative;font-size:1rem;width:1em;height:1em;margin:0 0 0 .5em;padding:0;text-align:right}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;right:0;transform:scale(2);transform-origin:50% 50%;z-index:0}.ms-Icon--xs{font-size:10px}.ms-Icon--s{font-size:12px}.ms-Icon--m{font-size:16px}.ms-Icon--l{font-size:20px}.ms-Icon--CarotRightSolid8:before{content:'\EDDA'}.ms-Icon--DynamicsCRMLogo:before{content:'\EDCC'}.ms-Icon--DecreaseIndentLegacy:before{content:'\E290'}.ms-Icon--IncreaseIndentLegacy:before{content:'\E291'}.ms-Icon--GlobalNavButton:before{content:'\E700'}.ms-Icon--InternetSharing:before{content:'\E704'}.ms-Icon--Brightness:before{content:'\E706'}.ms-Icon--MapPin:before{content:'\E707'}.ms-Icon--Airplane:before{content:'\E709'}.ms-Icon--Tablet:before{content:'\E70A'}.ms-Icon--QuickNote:before{content:'\E70B'}.ms-Icon--ChevronDown:before{content:'\E70D'}.ms-Icon--ChevronUp:before{content:'\E70E'}.ms-Icon--Edit:before{content:'\E70F'}.ms-Icon--Add:before{content:'\E710'}.ms-Icon--Cancel:before{content:'\E711'}.ms-Icon--More:before{content:'\E712'}.ms-Icon--Settings:before{content:'\E713'}.ms-Icon--Video:before{content:'\E714'}.ms-Icon--Mail:before{content:'\E715'}.ms-Icon--People:before{content:'\E716'}.ms-Icon--Phone:before{content:'\E717'}.ms-Icon--Pin:before{content:'\E718'}.ms-Icon--Shop:before{content:'\E719'}.ms-Icon--Link:before{content:'\E71B'}.ms-Icon--Filter:before{content:'\E71C'}.ms-Icon--Zoom:before{content:'\E71E'}.ms-Icon--ZoomOut:before{content:'\E71F'}.ms-Icon--Microphone:before{content:'\E720'}.ms-Icon--Search:before{content:'\E721'}.ms-Icon--Camera:before{content:'\E722'}.ms-Icon--Attach:before{content:'\E723'}.ms-Icon--Send:before{content:'\E724'}.ms-Icon--FavoriteList:before{content:'\E728'}.ms-Icon--PageSolid:before{content:'\E729'}.ms-Icon--Forward:before{content:'\E72A'}.ms-Icon--Back:before{content:'\E72B'}.ms-Icon--Refresh:before{content:'\E72C'}.ms-Icon--Share:before{content:'\E72D'}.ms-Icon--Lock:before{content:'\E72E'}.ms-Icon--EMI:before{content:'\E731'}.ms-Icon--MiniLink:before{content:'\E732'}.ms-Icon--Blocked:before{content:'\E733'}.ms-Icon--FavoriteStar:before{content:'\E734'}.ms-Icon--FavoriteStarFill:before{content:'\E735'}.ms-Icon--ReadingMode:before{content:'\E736'}.ms-Icon--Remove:before{content:'\E738'}.ms-Icon--Checkbox:before{content:'\E739'}.ms-Icon--CheckboxComposite:before{content:'\E73A'}.ms-Icon--CheckboxIndeterminate:before{content:'\E73C'}.ms-Icon--CheckMark:before{content:'\E73E'}.ms-Icon--BackToWindow:before{content:'\E73F'}.ms-Icon--FullScreen:before{content:'\E740'}.ms-Icon--Print:before{content:'\E749'}.ms-Icon--Up:before{content:'\E74A'}.ms-Icon--Down:before{content:'\E74B'}.ms-Icon--Delete:before{content:'\E74D'}.ms-Icon--Save:before{content:'\E74E'}.ms-Icon--Sad:before{content:'\E757'}.ms-Icon--SIPMove:before{content:'\E759'}.ms-Icon--EraseTool:before{content:'\E75C'}.ms-Icon--GripperTool:before{content:'\E75E'}.ms-Icon--Dialpad:before{content:'\E75F'}.ms-Icon--PageLeft:before{content:'\E760'}.ms-Icon--PageRight:before{content:'\E761'}.ms-Icon--MultiSelect:before{content:'\E762'}.ms-Icon--Play:before{content:'\E768'}.ms-Icon--Pause:before{content:'\E769'}.ms-Icon--ChevronLeft:before{content:'\E76B'}.ms-Icon--ChevronRight:before{content:'\E76C'}.ms-Icon--Emoji2:before{content:'\E76E'}.ms-Icon--System:before{content:'\E770'}.ms-Icon--Globe:before{content:'\E774'}.ms-Icon--ContactInfo:before{content:'\E779'}.ms-Icon--Unpin:before{content:'\E77A'}.ms-Icon--Contact:before{content:'\E77B'}.ms-Icon--Memo:before{content:'\E77C'}.ms-Icon--WindowsLogo:before{content:'\E782'}.ms-Icon--Error:before{content:'\E783'}.ms-Icon--Unlock:before{content:'\E785'}.ms-Icon--Calendar:before{content:'\E787'}.ms-Icon--Megaphone:before{content:'\E789'}.ms-Icon--AutoEnhanceOn:before{content:'\E78D'}.ms-Icon--AutoEnhanceOff:before{content:'\E78E'}.ms-Icon--Color:before{content:'\E790'}.ms-Icon--SaveAs:before{content:'\E792'}.ms-Icon--Light:before{content:'\E793'}.ms-Icon--Filters:before{content:'\E795'}.ms-Icon--Contrast:before{content:'\E7A1'}.ms-Icon--Redo:before{content:'\E7A6'}.ms-Icon--Undo:before{content:'\E7A7'}.ms-Icon--PhotoCollection:before{content:'\E7AA'}.ms-Icon--Album:before{content:'\E7AB'}.ms-Icon--Rotate:before{content:'\E7AD'}.ms-Icon--PanoIndicator:before{content:'\E7B0'}.ms-Icon--RedEye:before{content:'\E7B3'}.ms-Icon--ThumbnailView:before{content:'\E7B6'}.ms-Icon--Package:before{content:'\E7B8'}.ms-Icon--Warning:before{content:'\E7BA'}.ms-Icon--Financial:before{content:'\E7BB'}.ms-Icon--ShoppingCart:before{content:'\E7BF'}.ms-Icon--Train:before{content:'\E7C0'}.ms-Icon--Flag:before{content:'\E7C1'}.ms-Icon--Move:before{content:'\E7C2'}.ms-Icon--Page:before{content:'\E7C3'}.ms-Icon--TouchPointer:before{content:'\E7C9'}.ms-Icon--Merge:before{content:'\E7D5'}.ms-Icon--TurnRight:before{content:'\E7DB'}.ms-Icon--Ferry:before{content:'\E7E3'}.ms-Icon--Tab:before{content:'\E7E9'}.ms-Icon--Admin:before{content:'\E7EF'}.ms-Icon--TVMonitor:before{content:'\E7F4'}.ms-Icon--Speakers:before{content:'\E7F5'}.ms-Icon--Nav2DMapView:before{content:'\E800'}.ms-Icon--Car:before{content:'\E804'}.ms-Icon--EatDrink:before{content:'\E807'}.ms-Icon--LocationCircle:before{content:'\E80E'}.ms-Icon--Home:before{content:'\E80F'}.ms-Icon--SwitcherStartEnd:before{content:'\E810'}.ms-Icon--IncidentTriangle:before{content:'\E814'}.ms-Icon--Touch:before{content:'\E815'}.ms-Icon--MapDirections:before{content:'\E816'}.ms-Icon--History:before{content:'\E81C'}.ms-Icon--Location:before{content:'\E81D'}.ms-Icon--Work:before{content:'\E821'}.ms-Icon--Recent:before{content:'\E823'}.ms-Icon--Hotel:before{content:'\E824'}.ms-Icon--LocationDot:before{content:'\E827'}.ms-Icon--News:before{content:'\E900'}.ms-Icon--Chat:before{content:'\E901'}.ms-Icon--Group:before{content:'\E902'}.ms-Icon--View:before{content:'\E890'}.ms-Icon--Clear:before{content:'\E894'}.ms-Icon--Sync:before{content:'\E895'}.ms-Icon--Download:before{content:'\E896'}.ms-Icon--Help:before{content:'\E897'}.ms-Icon--Upload:before{content:'\E898'}.ms-Icon--Emoji:before{content:'\E899'}.ms-Icon--MailForward:before{content:'\E89C'}.ms-Icon--ClosePane:before{content:'\E89F'}.ms-Icon--OpenPane:before{content:'\E8A0'}.ms-Icon--PreviewLink:before{content:'\E8A1'}.ms-Icon--ZoomIn:before{content:'\E8A3'}.ms-Icon--Bookmarks:before{content:'\E8A4'}.ms-Icon--Document:before{content:'\E8A5'}.ms-Icon--ProtectedDocument:before{content:'\E8A6'}.ms-Icon--OpenInNewWindow:before{content:'\E8A7'}.ms-Icon--MailFill:before{content:'\E8A8'}.ms-Icon--ViewAll:before{content:'\E8A9'}.ms-Icon--Switch:before{content:'\E8AB'}.ms-Icon--Rename:before{content:'\E8AC'}.ms-Icon--Folder:before{content:'\E8B7'}.ms-Icon--Picture:before{content:'\E8B9'}.ms-Icon--ShowResults:before{content:'\E8BC'}.ms-Icon--Message:before{content:'\E8BD'}.ms-Icon--CalendarDay:before{content:'\E8BF'}.ms-Icon--CalendarWeek:before{content:'\E8C0'}.ms-Icon--MailReplyAll:before{content:'\E8C2'}.ms-Icon--Read:before{content:'\E8C3'}.ms-Icon--PaymentCard:before{content:'\E8C7'}.ms-Icon--Copy:before{content:'\E8C8'}.ms-Icon--Important:before{content:'\E8C9'}.ms-Icon--MailReply:before{content:'\E8CA'}.ms-Icon--Sort:before{content:'\E8CB'}.ms-Icon--GotoToday:before{content:'\E8D1'}.ms-Icon--Font:before{content:'\E8D2'}.ms-Icon--FontColor:before{content:'\E8D3'}.ms-Icon--FolderFill:before{content:'\E8D5'}.ms-Icon--Permissions:before{content:'\E8D7'}.ms-Icon--DisableUpdates:before{content:'\E8D8'}.ms-Icon--Unfavorite:before{content:'\E8D9'}.ms-Icon--Italic:before{content:'\E8DB'}.ms-Icon--Underline:before{content:'\E8DC'}.ms-Icon--Bold:before{content:'\E8DD'}.ms-Icon--MoveToFolder:before{content:'\E8DE'}.ms-Icon--Dislike:before{content:'\E8E0'}.ms-Icon--Like:before{content:'\E8E1'}.ms-Icon--AlignRight:before{content:'\E8E2'}.ms-Icon--AlignCenter:before{content:'\E8E3'}.ms-Icon--AlignLeft:before{content:'\E8E4'}.ms-Icon--OpenFile:before{content:'\E8E5'}.ms-Icon--FontDecrease:before{content:'\E8E7'}.ms-Icon--FontIncrease:before{content:'\E8E8'}.ms-Icon--FontSize:before{content:'\E8E9'}.ms-Icon--CellPhone:before{content:'\E8EA'}.ms-Icon--Tag:before{content:'\E8EC'}.ms-Icon--Library:before{content:'\E8F1'}.ms-Icon--PostUpdate:before{content:'\E8F3'}.ms-Icon--NewFolder:before{content:'\E8F4'}.ms-Icon--CalendarReply:before{content:'\E8F5'}.ms-Icon--UnsyncFolder:before{content:'\E8F6'}.ms-Icon--SyncFolder:before{content:'\E8F7'}.ms-Icon--BlockContact:before{content:'\E8F8'}.ms-Icon--AddFriend:before{content:'\E8FA'}.ms-Icon--BulletedList:before{content:'\E8FD'}.ms-Icon--Preview:before{content:'\E8FF'}.ms-Icon--DockLeft:before{content:'\E90C'}.ms-Icon--DockRight:before{content:'\E90D'}.ms-Icon--Repair:before{content:'\E90F'}.ms-Icon--Accounts:before{content:'\E910'}.ms-Icon--RadioBullet:before{content:'\E915'}.ms-Icon--Stopwatch:before{content:'\E916'}.ms-Icon--Clock:before{content:'\E917'}.ms-Icon--WorldClock:before{content:'\E918'}.ms-Icon--AlarmClock:before{content:'\E919'}.ms-Icon--Hospital:before{content:'\E91D'}.ms-Icon--Timer:before{content:'\E91E'}.ms-Icon--FullCircleMask:before{content:'\E91F'}.ms-Icon--LocationFill:before{content:'\E920'}.ms-Icon--ChromeMinimize:before{content:'\E921'}.ms-Icon--Annotation:before{content:'\E924'}.ms-Icon--ChromeClose:before{content:'\E8BB'}.ms-Icon--Accept:before{content:'\E8FB'}.ms-Icon--Fingerprint:before{content:'\E928'}.ms-Icon--Handwriting:before{content:'\E929'}.ms-Icon--StackIndicator:before{content:'\E7FF'}.ms-Icon--Completed:before{content:'\E930'}.ms-Icon--Label:before{content:'\E932'}.ms-Icon--FlickDown:before{content:'\E935'}.ms-Icon--FlickUp:before{content:'\E936'}.ms-Icon--FlickLeft:before{content:'\E937'}.ms-Icon--FlickRight:before{content:'\E938'}.ms-Icon--MusicInCollection:before{content:'\E940'}.ms-Icon--OneDrive:before{content:'\E941'}.ms-Icon--CompassNW:before{content:'\E942'}.ms-Icon--Code:before{content:'\E943'}.ms-Icon--LightningBolt:before{content:'\E945'}.ms-Icon--Info:before{content:'\E946'}.ms-Icon--CalculatorAddition:before{content:'\E948'}.ms-Icon--CalculatorSubtract:before{content:'\E949'}.ms-Icon--PrintfaxPrinterFile:before{content:'\E956'}.ms-Icon--Headset:before{content:'\E95B'}.ms-Icon--Health:before{content:'\E95E'}.ms-Icon--ChevronUpSmall:before{content:'\E96D'}.ms-Icon--ChevronDownSmall:before{content:'\E96E'}.ms-Icon--ChevronLeftSmall:before{content:'\E96F'}.ms-Icon--ChevronRightSmall:before{content:'\E970'}.ms-Icon--ChevronUpMed:before{content:'\E971'}.ms-Icon--ChevronDownMed:before{content:'\E972'}.ms-Icon--ChevronLeftMed:before{content:'\E973'}.ms-Icon--ChevronRightMed:before{content:'\E974'}.ms-Icon--Dictionary:before{content:'\E82D'}.ms-Icon--ChromeBack:before{content:'\E830'}.ms-Icon--PC1:before{content:'\E977'}.ms-Icon--PresenceChickletVideo:before{content:'\E979'}.ms-Icon--Reply:before{content:'\E97A'}.ms-Icon--DoubleChevronLeftMed:before{content:'\E991'}.ms-Icon--Volume0:before{content:'\E992'}.ms-Icon--Volume1:before{content:'\E993'}.ms-Icon--Volume2:before{content:'\E994'}.ms-Icon--Volume3:before{content:'\E995'}.ms-Icon--CaretHollow:before{content:'\E817'}.ms-Icon--CaretSolid:before{content:'\E818'}.ms-Icon--FolderOpen:before{content:'\E838'}.ms-Icon--Pinned:before{content:'\E840'}.ms-Icon--PinnedFill:before{content:'\E842'}.ms-Icon--Chart:before{content:'\E999'}.ms-Icon--BidiLtr:before{content:'\E9AA'}.ms-Icon--BidiRtl:before{content:'\E9AB'}.ms-Icon--RevToggleKey:before{content:'\E845'}.ms-Icon--RightDoubleQuote:before{content:'\E9B1'}.ms-Icon--Sunny:before{content:'\E9BD'}.ms-Icon--CloudWeather:before{content:'\E9BE'}.ms-Icon--Cloudy:before{content:'\E9BF'}.ms-Icon--PartlyCloudyDay:before{content:'\E9C0'}.ms-Icon--PartlyCloudyNight:before{content:'\E9C1'}.ms-Icon--ClearNight:before{content:'\E9C2'}.ms-Icon--RainShowersDay:before{content:'\E9C3'}.ms-Icon--Rain:before{content:'\E9C4'}.ms-Icon--Thunderstorms:before{content:'\E9C6'}.ms-Icon--RainSnow:before{content:'\E9C7'}.ms-Icon--BlowingSnow:before{content:'\E9C9'}.ms-Icon--Frigid:before{content:'\E9CA'}.ms-Icon--Fog:before{content:'\E9CB'}.ms-Icon--Squalls:before{content:'\E9CC'}.ms-Icon--Duststorm:before{content:'\E9CD'}.ms-Icon--Precipitation:before{content:'\E9CF'}.ms-Icon--Ringer:before{content:'\EA8F'}.ms-Icon--PDF:before{content:'\EA90'}.ms-Icon--SortLines:before{content:'\E9D0'}.ms-Icon--Ribbon:before{content:'\E9D1'}.ms-Icon--CheckList:before{content:'\E9D5'}.ms-Icon--Generate:before{content:'\E9DA'}.ms-Icon--Equalizer:before{content:'\E9E9'}.ms-Icon--BarChartHorizontal:before{content:'\E9EB'}.ms-Icon--Freezing:before{content:'\E9EF'}.ms-Icon--SnowShowerDay:before{content:'\E9FD'}.ms-Icon--HailDay:before{content:'\EA00'}.ms-Icon--WorkFlow:before{content:'\EA01'}.ms-Icon--StoreLogoMed:before{content:'\EA04'}.ms-Icon--RainShowersNight:before{content:'\EA0F'}.ms-Icon--SnowShowerNight:before{content:'\EA11'}.ms-Icon--HailNight:before{content:'\EA13'}.ms-Icon--Info2:before{content:'\EA1F'}.ms-Icon--StoreLogo:before{content:'\EA96'}.ms-Icon--MultiSelectMirrored:before{content:'\EA98'}.ms-Icon--Broom:before{content:'\EA99'}.ms-Icon--MusicInCollectionFill:before{content:'\EA36'}.ms-Icon--List:before{content:'\EA37'}.ms-Icon--Asterisk:before{content:'\EA38'}.ms-Icon--ErrorBadge:before{content:'\EA39'}.ms-Icon--CircleRing:before{content:'\EA3A'}.ms-Icon--CircleFill:before{content:'\EA3B'}.ms-Icon--BookmarksMirrored:before{content:'\EA41'}.ms-Icon--BulletedListMirrored:before{content:'\EA42'}.ms-Icon--CaretHollowMirrored:before{content:'\EA45'}.ms-Icon--CaretSolidMirrored:before{content:'\EA46'}.ms-Icon--ChromeBackMirrored:before{content:'\EA47'}.ms-Icon--ClosePaneMirrored:before{content:'\EA49'}.ms-Icon--DockLeftMirrored:before{content:'\EA4C'}.ms-Icon--DoubleChevronLeftMedMirrored:before{content:'\EA4D'}.ms-Icon--HelpMirrored:before{content:'\EA51'}.ms-Icon--ListMirrored:before{content:'\EA55'}.ms-Icon--MailForwardMirrored:before{content:'\EA56'}.ms-Icon--MailReplyMirrored:before{content:'\EA57'}.ms-Icon--MailReplyAllMirrored:before{content:'\EA58'}.ms-Icon--OpenPaneMirrored:before{content:'\EA5B'}.ms-Icon--SendMirrored:before{content:'\EA63'}.ms-Icon--ShowResultsMirrored:before{content:'\EA65'}.ms-Icon--ThumbnailViewMirrored:before{content:'\EA67'}.ms-Icon--Devices3:before{content:'\EA6C'}.ms-Icon--Lightbulb:before{content:'\EA80'}.ms-Icon--StatusTriangle:before{content:'\EA82'}.ms-Icon--VolumeDisabled:before{content:'\EA85'}.ms-Icon--Puzzle:before{content:'\EA86'}.ms-Icon--EmojiNeutral:before{content:'\EA87'}.ms-Icon--EmojiDisappointed:before{content:'\EA88'}.ms-Icon--HomeSolid:before{content:'\EA8A'}.ms-Icon--Cocktails:before{content:'\EA9D'}.ms-Icon--Articles:before{content:'\EAC1'}.ms-Icon--Cycling:before{content:'\EAC7'}.ms-Icon--DietPlanNotebook:before{content:'\EAC8'}.ms-Icon--Pill:before{content:'\EACB'}.ms-Icon--Running:before{content:'\EADA'}.ms-Icon--Weights:before{content:'\EADB'}.ms-Icon--BarChart4:before{content:'\EAE7'}.ms-Icon--CirclePlus:before{content:'\EAEE'}.ms-Icon--Coffee:before{content:'\EAEF'}.ms-Icon--Cotton:before{content:'\EAF3'}.ms-Icon--Market:before{content:'\EAFC'}.ms-Icon--Money:before{content:'\EAFD'}.ms-Icon--PieDouble:before{content:'\EB04'}.ms-Icon--RemoveFilter:before{content:'\EB08'}.ms-Icon--StockDown:before{content:'\EB0F'}.ms-Icon--StockUp:before{content:'\EB11'}.ms-Icon--Cricket:before{content:'\EB1E'}.ms-Icon--Golf:before{content:'\EB1F'}.ms-Icon--Baseball:before{content:'\EB20'}.ms-Icon--Soccer:before{content:'\EB21'}.ms-Icon--MoreSports:before{content:'\EB22'}.ms-Icon--AutoRacing:before{content:'\EB24'}.ms-Icon--CollegeHoops:before{content:'\EB25'}.ms-Icon--CollegeFootball:before{content:'\EB26'}.ms-Icon--ProFootball:before{content:'\EB27'}.ms-Icon--ProHockey:before{content:'\EB28'}.ms-Icon--Rugby:before{content:'\EB2D'}.ms-Icon--Tennis:before{content:'\EB33'}.ms-Icon--Arrivals:before{content:'\EB34'}.ms-Icon--Design:before{content:'\EB3C'}.ms-Icon--Website:before{content:'\EB41'}.ms-Icon--Drop:before{content:'\EB42'}.ms-Icon--Snow:before{content:'\EB46'}.ms-Icon--BusSolid:before{content:'\EB47'}.ms-Icon--FerrySolid:before{content:'\EB48'}.ms-Icon--TrainSolid:before{content:'\EB4D'}.ms-Icon--Heart:before{content:'\EB51'}.ms-Icon--HeartFill:before{content:'\EB52'}.ms-Icon--Ticket:before{content:'\EB54'}.ms-Icon--Devices4:before{content:'\EB66'}.ms-Icon--AzureLogo:before{content:'\EB6A'}.ms-Icon--BingLogo:before{content:'\EB6B'}.ms-Icon--MSNLogo:before{content:'\EB6C'}.ms-Icon--OutlookLogo:before{content:'\EB6D'}.ms-Icon--OfficeLogo:before{content:'\EB6E'}.ms-Icon--SkypeLogo:before{content:'\EB6F'}.ms-Icon--Door:before{content:'\EB75'}.ms-Icon--EditMirrored:before{content:'\EB7E'}.ms-Icon--GiftCard:before{content:'\EB8E'}.ms-Icon--DoubleBookmark:before{content:'\EB8F'}.ms-Icon--StatusErrorFull:before{content:'\EB90'}.ms-Icon--Certificate:before{content:'\EB95'}.ms-Icon--Photo2:before{content:'\EB9F'}.ms-Icon--CloudDownload:before{content:'\EBD3'}.ms-Icon--WindDirection:before{content:'\EBE6'}.ms-Icon--Family:before{content:'\EBDA'}.ms-Icon--CSS:before{content:'\EBEF'}.ms-Icon--JS:before{content:'\EBF0'}.ms-Icon--ReminderGroup:before{content:'\EBF8'}.ms-Icon--Section:before{content:'\EC0C'}.ms-Icon--OneNoteLogo:before{content:'\EC0D'}.ms-Icon--ToggleFilled:before{content:'\EC11'}.ms-Icon--ToggleBorder:before{content:'\EC12'}.ms-Icon--SliderThumb:before{content:'\EC13'}.ms-Icon--ToggleThumb:before{content:'\EC14'}.ms-Icon--Documentation:before{content:'\EC17'}.ms-Icon--Badge:before{content:'\EC1B'}.ms-Icon--Giftbox:before{content:'\EC1F'}.ms-Icon--ExcelLogo:before{content:'\EC28'}.ms-Icon--WordLogo:before{content:'\EC29'}.ms-Icon--PowerPointLogo:before{content:'\EC2A'}.ms-Icon--Cafe:before{content:'\EC32'}.ms-Icon--SpeedHigh:before{content:'\EC4A'}.ms-Icon--MusicNote:before{content:'\EC4F'}.ms-Icon--EdgeLogo:before{content:'\EC60'}.ms-Icon--CompletedSolid:before{content:'\EC61'}.ms-Icon--AlbumRemove:before{content:'\EC62'}.ms-Icon--MessageFill:before{content:'\EC70'}.ms-Icon--TabletSelected:before{content:'\EC74'}.ms-Icon--MobileSelected:before{content:'\EC75'}.ms-Icon--LaptopSelected:before{content:'\EC76'}.ms-Icon--TVMonitorSelected:before{content:'\EC77'}.ms-Icon--DeveloperTools:before{content:'\EC7A'}.ms-Icon--InsertTextBox:before{content:'\EC7D'}.ms-Icon--LowerBrightness:before{content:'\EC8A'}.ms-Icon--CloudUpload:before{content:'\EC8E'}.ms-Icon--DateTime:before{content:'\EC92'}.ms-Icon--Event:before{content:'\ECA3'}.ms-Icon--Cake:before{content:'\ECA4'}.ms-Icon--Tiles:before{content:'\ECA5'}.ms-Icon--Org:before{content:'\ECA6'}.ms-Icon--PartyLeader:before{content:'\ECA7'}.ms-Icon--DRM:before{content:'\ECA8'}.ms-Icon--CloudAdd:before{content:'\ECA9'}.ms-Icon--AppIconDefault:before{content:'\ECAA'}.ms-Icon--Photo2Add:before{content:'\ECAB'}.ms-Icon--Photo2Remove:before{content:'\ECAC'}.ms-Icon--POI:before{content:'\ECAF'}.ms-Icon--FacebookLogo:before{content:'\ECB3'}.ms-Icon--AddTo:before{content:'\ECC8'}.ms-Icon--RadioBtnOn:before{content:'\ECCB'}.ms-Icon--Embed:before{content:'\ECCE'}.ms-Icon--VideoSolid:before{content:'\EA0C'}.ms-Icon--Teamwork:before{content:'\EA12'}.ms-Icon--PeopleAdd:before{content:'\EA15'}.ms-Icon--Glasses:before{content:'\EA16'}.ms-Icon--DateTime2:before{content:'\EA17'}.ms-Icon--Shield:before{content:'\EA18'}.ms-Icon--Header1:before{content:'\EA19'}.ms-Icon--PageAdd:before{content:'\EA1A'}.ms-Icon--NumberedList:before{content:'\EA1C'}.ms-Icon--PowerBILogo:before{content:'\EA1E'}.ms-Icon--Product:before{content:'\ECDC'}.ms-Icon--Blocked2:before{content:'\ECE4'}.ms-Icon--FangBody:before{content:'\ECEB'}.ms-Icon--Glimmer:before{content:'\ECF4'}.ms-Icon--ChatInviteFriend:before{content:'\ECFE'}.ms-Icon--SharepointLogo:before{content:'\ED18'}.ms-Icon--YammerLogo:before{content:'\ED19'}.ms-Icon--Hide:before{content:'\ED1A'}.ms-Icon--ReturnToSession:before{content:'\ED24'}.ms-Icon--OpenFolderHorizontal:before{content:'\ED25'}.ms-Icon--CalendarMirrored:before{content:'\ED28'}.ms-Icon--SwayLogo:before{content:'\ED29'}.ms-Icon--OutOfOffice:before{content:'\ED34'}.ms-Icon--Trophy:before{content:'\ED3F'}.ms-Icon--ReopenPages:before{content:'\ED50'}.ms-Icon--AADLogo:before{content:'\ED68'}.ms-Icon--AccessLogo:before{content:'\ED69'}.ms-Icon--AdminALogo:before{content:'\ED6A'}.ms-Icon--AdminCLogo:before{content:'\ED6B'}.ms-Icon--AdminDLogo:before{content:'\ED6C'}.ms-Icon--AdminELogo:before{content:'\ED6D'}.ms-Icon--AdminLLogo:before{content:'\ED6E'}.ms-Icon--AdminMLogo:before{content:'\ED6F'}.ms-Icon--AdminOLogo:before{content:'\ED70'}.ms-Icon--AdminPLogo:before{content:'\ED71'}.ms-Icon--AdminSLogo:before{content:'\ED72'}.ms-Icon--AdminYLogo:before{content:'\ED73'}.ms-Icon--AlchemyLogo:before{content:'\ED74'}.ms-Icon--BoxLogo:before{content:'\ED75'}.ms-Icon--DelveLogo:before{content:'\ED76'}.ms-Icon--DropboxLogo:before{content:'\ED77'}.ms-Icon--ExchangeLogo:before{content:'\ED78'}.ms-Icon--LyncLogo:before{content:'\ED79'}.ms-Icon--OfficeVideoLogo:before{content:'\ED7A'}.ms-Icon--ParatureLogo:before{content:'\ED7B'}.ms-Icon--SocialListeningLogo:before{content:'\ED7C'}.ms-Icon--VisioLogo:before{content:'\ED7D'}.ms-Icon--Balloons:before{content:'\ED7E'}.ms-Icon--Cat:before{content:'\ED7F'}.ms-Icon--MailAlert:before{content:'\ED80'}.ms-Icon--MailCheck:before{content:'\ED81'}.ms-Icon--MailLowImportance:before{content:'\ED82'}.ms-Icon--MailPause:before{content:'\ED83'}.ms-Icon--MailRepeat:before{content:'\ED84'}.ms-Icon--SecurityGroup:before{content:'\ED85'}.ms-Icon--Table:before{content:'\ED86'}.ms-Icon--VoicemailForward:before{content:'\ED87'}.ms-Icon--VoicemailReply:before{content:'\ED88'}.ms-Icon--Waffle:before{content:'\ED89'}.ms-Icon--RemoveEvent:before{content:'\ED8A'}.ms-Icon--EventInfo:before{content:'\ED8B'}.ms-Icon--ForwardEvent:before{content:'\ED8C'}.ms-Icon--WipePhone:before{content:'\ED8D'}.ms-Icon--AddOnlineMeeting:before{content:'\ED8E'}.ms-Icon--JoinOnlineMeeting:before{content:'\ED8F'}.ms-Icon--RemoveLink:before{content:'\ED90'}.ms-Icon--PeopleBlock:before{content:'\ED91'}.ms-Icon--PeopleRepeat:before{content:'\ED92'}.ms-Icon--PeopleAlert:before{content:'\ED93'}.ms-Icon--PeoplePause:before{content:'\ED94'}.ms-Icon--TransferCall:before{content:'\ED95'}.ms-Icon--AddPhone:before{content:'\ED96'}.ms-Icon--UnknownCall:before{content:'\ED97'}.ms-Icon--NoteReply:before{content:'\ED98'}.ms-Icon--NoteForward:before{content:'\ED99'}.ms-Icon--NotePinned:before{content:'\ED9A'}.ms-Icon--RemoveOccurrence:before{content:'\ED9B'}.ms-Icon--Timeline:before{content:'\ED9C'}.ms-Icon--EditNote:before{content:'\ED9D'}.ms-Icon--CircleHalfFull:before{content:'\ED9E'}.ms-Icon--Room:before{content:'\ED9F'}.ms-Icon--Unsubscribe:before{content:'\EDA0'}.ms-Icon--Subscribe:before{content:'\EDA1'}.ms-Icon--RecurringTask:before{content:'\EDB2'}.ms-Icon--TaskManager:before{content:'\EDB7'}.ms-Icon--TaskManagerMirrored:before{content:'\EDB8'}.ms-Icon--Combine:before{content:'\EDBB'}.ms-Icon--Split:before{content:'\EDBC'}.ms-Icon--DoubleChevronUp:before{content:'\EDBD'}.ms-Icon--DoubleChevronLeft:before{content:'\EDBE'}.ms-Icon--DoubleChevronRight:before{content:'\EDBF'}.ms-Icon--Ascending:before{content:'\EDC0'}.ms-Icon--Descending:before{content:'\EDC1'}.ms-Icon--TextBox:before{content:'\EDC2'}.ms-Icon--TextField:before{content:'\EDC3'}.ms-Icon--NumberField:before{content:'\EDC4'}.ms-Icon--Dropdown:before{content:'\EDC5'}.ms-Icon--BookingsLogo:before{content:'\EDC7'}.ms-Icon--ClassNotebookLogo:before{content:'\EDC8'}.ms-Icon--CollabsDBLogo:before{content:'\EDC9'}.ms-Icon--DelveAnalyticsLogo:before{content:'\EDCA'}.ms-Icon--DocsLogo:before{content:'\EDCB'}.ms-Icon--Dynamics365Logo:before{content:'\EDCC'}.ms-Icon--DynamicSMBLogo:before{content:'\EDCD'}.ms-Icon--OfficeAssistantLogo:before{content:'\EDCE'}.ms-Icon--OfficeStoreLogo:before{content:'\EDCF'}.ms-Icon--OneNoteEduLogo:before{content:'\EDD0'}.ms-Icon--Planner:before{content:'\EDD1'}.ms-Icon--PowerApps:before{content:'\EDD2'}.ms-Icon--Suitcase:before{content:'\EDD3'}.ms-Icon--ProjectLogo:before{content:'\EDD4'}.ms-Icon--CaretLeft8:before{content:'\EDD5'}.ms-Icon--CaretRight8:before{content:'\EDD6'}.ms-Icon--CaretUp8:before{content:'\EDD7'}.ms-Icon--CaretDown8:before{content:'\EDD8'}.ms-Icon--CaretLeftSolid8:before{content:'\EDD9'}.ms-Icon--CaretRightSolid8:before{content:'\EDDA'}.ms-Icon--CaretUpSolid8:before{content:'\EDDB'}.ms-Icon--CaretDownSolid8:before{content:'\EDDC'}.ms-Icon--ClearFormatting:before{content:'\EDDD'}.ms-Icon--Superscript:before{content:'\EDDE'}.ms-Icon--Subscript:before{content:'\EDDF'}.ms-Icon--Strikethrough:before{content:'\EDE0'}.ms-Icon--SingleBookmark:before{content:'\EDFF'}.ms-Icon--DoubleChevronDown:before{content:'\EE04'}.ms-Icon--ReplyAll:before{content:'\EE0A'}.ms-Icon--GoogleDriveLogo:before{content:'\EE0B'}.ms-Icon--Questionnaire:before{content:'\EE19'}.ms-Icon--ReplyMirrored:before{content:'\EE35'}.ms-Icon--ReplyAllMirrored:before{content:'\EE36'}.ms-Icon--AddGroup:before{content:'\EE3D'}.ms-Icon--QuestionnaireMirrored:before{content:'\EE4B'}.ms-Icon--TemporaryUser:before{content:'\EE58'}.ms-Icon--GroupedDescending:before{content:'\EE66'}.ms-Icon--GroupedAscending:before{content:'\EE67'}.ms-Icon--SortUp:before{content:'\EE68'}.ms-Icon--SortDown:before{content:'\EE69'}.ms-Icon--AwayStatus:before{content:'\EE6A'}.ms-Icon--SyncToPC:before{content:'\EE6E'}.ms-Icon--AustralianRules:before{content:'\EE70'}.ms-Icon--DateTimeMirrored:before{content:'\EE93'}.ms-Icon--DoubleChevronUp12:before{content:'\EE96'}.ms-Icon--DoubleChevronDown12:before{content:'\EE97'}.ms-Icon--DoubleChevronLeft12:before{content:'\EE98'}.ms-Icon--DoubleChevronRight12:before{content:'\EE99'}.ms-Icon--CalendarAgenda:before{content:'\EE9A'}.ms-Icon--AddEvent:before{content:'\EEB5'}.ms-Icon--AssetLibrary:before{content:'\EEB6'}.ms-Icon--DataConnectionLibrary:before{content:'\EEB7'}.ms-Icon--DocLibrary:before{content:'\EEB8'}.ms-Icon--FormLibrary:before{content:'\EEB9'}.ms-Icon--FormLibraryMirrored:before{content:'\EEBA'}.ms-Icon--ReportLibrary:before{content:'\EEBB'}.ms-Icon--ReportLibraryMirrored:before{content:'\EEBC'}.ms-Icon--ContactCard:before{content:'\EEBD'}.ms-Icon--CustomList:before{content:'\EEBE'}.ms-Icon--CustomListMirrored:before{content:'\EEBF'}.ms-Icon--IssueTracking:before{content:'\EEC0'}.ms-Icon--IssueTrackingMirrored:before{content:'\EEC1'}.ms-Icon--PictureLibrary:before{content:'\EEC2'}.ms-Icon--AppForOfficeLogo:before{content:'\EEC7'}.ms-Icon--OfflineOneDriveParachute:before{content:'\EEC8'}.ms-Icon--OfflineOneDriveParachuteDisabled:before{content:'\EEC9'}.ms-Icon--LargeGrid:before{content:'\EECB'}.ms-Icon--TriangleSolidUp12:before{content:'\EECC'}.ms-Icon--TriangleSolidDown12:before{content:'\EECD'}.ms-Icon--TriangleSolidLeft12:before{content:'\EECE'}.ms-Icon--TriangleSolidRight12:before{content:'\EECF'}.ms-Icon--TriangleUp12:before{content:'\EED0'}.ms-Icon--TriangleDown12:before{content:'\EED1'}.ms-Icon--TriangleLeft12:before{content:'\EED2'}.ms-Icon--TriangleRight12:before{content:'\EED3'}.ms-Icon--ArrowUpRight8:before{content:'\EED4'}.ms-Icon--ArrowDownRight8:before{content:'\EED5'}.ms-Icon--DocumentSet:before{content:'\EED6'}.ms-Icon--DelveAnalytics:before{content:'\EEEE'}.ms-Icon--ArrowUpRightMirrored8:before{content:'\EEEF'}.ms-Icon--ArrowDownRightMirrored8:before{content:'\EEF0'}.ms-Icon--OneDriveAdd:before{content:'\EF32'}.ms-Icon--Header2:before{content:'\EF36'}.ms-Icon--Header3:before{content:'\EF37'}.ms-Icon--Header4:before{content:'\EF38'}.ms-Icon--MarketDown:before{content:'\EF42'}.ms-Icon--CalendarWorkWeek:before{content:'\EF51'}.ms-Icon--SidePanel:before{content:'\EF52'}.ms-Icon--GlobeFavorite:before{content:'\EF53'}.ms-Icon--CaretTopLeftSolid8:before{content:'\EF54'}.ms-Icon--CaretTopRightSolid8:before{content:'\EF55'}.ms-Icon--ViewAll2:before{content:'\EF56'}.ms-Icon--DocumentReply:before{content:'\EF57'}.ms-Icon--PlayerSettings:before{content:'\EF58'}.ms-Icon--ReceiptForward:before{content:'\EF59'}.ms-Icon--ReceiptReply:before{content:'\EF5A'}.ms-Icon--ReceiptCheck:before{content:'\EF5B'}.ms-Icon--Fax:before{content:'\EF5C'}.ms-Icon--RecurringEvent:before{content:'\EF5D'}.ms-Icon--ReplyAlt:before{content:'\EF5E'}.ms-Icon--ReplyAllAlt:before{content:'\EF5F'}.ms-Icon--EditStyle:before{content:'\EF60'}.ms-Icon--EditMail:before{content:'\EF61'}.ms-Icon--Lifesaver:before{content:'\EF62'}.ms-Icon--LifesaverLock:before{content:'\EF63'}.ms-Icon--InboxCheck:before{content:'\EF64'}.ms-Icon--FolderSearch:before{content:'\EF65'}.ms-Icon--CollapseMenu:before{content:'\EF66'}.ms-Icon--ExpandMenu:before{content:'\EF67'}.ms-Icon--Boards:before{content:'\EF68'}.ms-Icon--SunAdd:before{content:'\EF69'}.ms-Icon--SunQuestionMark:before{content:'\EF6A'}.ms-Icon--LandscapeOrientation:before{content:'\EF6B'}.ms-Icon--DocumentSearch:before{content:'\EF6C'}.ms-Icon--PublicCalendar:before{content:'\EF6D'}.ms-Icon--PublicContactCard:before{content:'\EF6E'}.ms-Icon--PublicEmail:before{content:'\EF6F'}.ms-Icon--PublicFolder:before{content:'\EF70'}.ms-Icon--WordDocument:before{content:'\EF71'}.ms-Icon--PowerPointDocument:before{content:'\EF72'}.ms-Icon--ExcelDocument:before{content:'\EF73'}.ms-Icon--GroupedList:before{content:'\EF74'}.ms-Icon--ClassroomLogo:before{content:'\EF75'}.ms-Icon--Sections:before{content:'\EF76'}.ms-Icon--EditPhoto:before{content:'\EF77'}.ms-Icon--Starburst:before{content:'\EF78'}.ms-Icon--ShareiOS:before{content:'\EF79'}.ms-Icon--AirTickets:before{content:'\EF7A'}.ms-Icon--PencilReply:before{content:'\EF7B'}.ms-Icon--Tiles2:before{content:'\EF7C'}.ms-Icon--SkypeCircleCheck:before{content:'\EF7D'}.ms-Icon--SkypeCircleClock:before{content:'\EF7E'}.ms-Icon--SkypeCircleMinus:before{content:'\EF7F'}.ms-Icon--SkypeCheck:before{content:'\EF80'}.ms-Icon--SkypeClock:before{content:'\EF81'}.ms-Icon--SkypeMinus:before{content:'\EF82'}.ms-Icon--SkypeMessage:before{content:'\EF83'}.ms-Icon--ClosedCaption:before{content:'\EF84'}.ms-Icon--ATPLogo:before{content:'\EF85'}.ms-Icon--OfficeFormLogo:before{content:'\EF86'}.ms-Icon--RecycleBin:before{content:'\EF87'}.ms-Icon--EmptyRecycleBin:before{content:'\EF88'}.ms-Icon--Hide2:before{content:'\EF89'}.ms-Icon--iOSAppStoreLogo:before{content:'\EF8A'}.ms-Icon--AndroidLogo:before{content:'\EF8B'}.ms-Icon--Breadcrumb:before{content:'\EF8C'}.ms-Icon--ClearFilter:before{content:'\EF8F'}.ms-Icon--Flow:before{content:'\EF90'}.ms-Icon--PageCheckedOut:before{content:'\F02C'}.ms-Icon--SetAction:before{content:'\F071'}.ms-Icon--PowerAppsLogo:before{content:'\F091'}.ms-Icon--PowerApps2Logo:before{content:'\F092'}.ms-Icon--FabricAssetLibrary:before{content:'\F09C'}.ms-Icon--FabricDataConnectionLibrary:before{content:'\F09D'}.ms-Icon--FabricDocLibrary:before{content:'\F09E'}.ms-Icon--FabricFormLibrary:before{content:'\F09F'}.ms-Icon--FabricFormLibraryMirrored:before{content:'\F0A0'}.ms-Icon--FabricReportLibrary:before{content:'\F0A1'}.ms-Icon--FabricReportLibraryMirrored:before{content:'\F0A2'}.ms-Icon--FabricPublicFolder:before{content:'\F0A3'}.ms-Icon--FabricFolderSearch:before{content:'\F0A4'}.ms-Icon--FabricMovetoFolder:before{content:'\F0A5'}.ms-Icon--FabricUnsyncFolder:before{content:'\F0A6'}.ms-Icon--FabricSyncFolder:before{content:'\F0A7'}.ms-Icon--FabricOpenFolderHorizontal:before{content:'\F0A8'}.ms-Icon--FabricFolder:before{content:'\F0A9'}.ms-Icon--FabricFolderFill:before{content:'\F0AA'}.ms-Icon--FabricNewFolder:before{content:'\F0AB'}.ms-Icon--FabricPictureLibrary:before{content:'\F0AC'}.ms-Icon--AddFavorite:before{content:'\F0C8'}.ms-Icon--AddFavoriteFill:before{content:'\F0C9'}.ms-Icon--BufferTimeBefore:before{content:'\F0CF'}.ms-Icon--BufferTimeAfter:before{content:'\F0D0'}.ms-Icon--BufferTimeBoth:before{content:'\F0D1'}.ms-Icon--PageCheckedin:before{content:'\F104'}.ms-Icon--CaretBottomLeftSolid8:before{content:'\F121'}.ms-Icon--CaretBottomRightSolid8:before{content:'\F122'}.ms-Icon--FolderHorizontal:before{content:'\F12B'}.ms-Icon--MicrosoftStaffhubLogo:before{content:'\F130'}.ms-Icon--CaloriesAdd:before{content:'\F172'}.ms-Icon--BranchFork:before{content:'\F173'}.ms-Icon--ArrowDownRightMirrored8:before{content:'\EED5'}.ms-Icon--ArrowDownRight8:before{content:'\EEF0'}.ms-Icon--ArrowUpRightMirrored8:before{content:'\EED4'}.ms-Icon--ArrowUpRight8:before{content:'\EEEF'}.ms-Icon--BidiLtr:before{content:'\E9AB'}.ms-Icon--BidiRtl:before{content:'\E9AA'}.ms-Icon--BookmarksMirrored:before{content:'\E8A4'}.ms-Icon--Bookmarks:before{content:'\EA41'}.ms-Icon--BulletedListMirrored:before{content:'\E8FD'}.ms-Icon--BulletedList:before{content:'\EA42'}.ms-Icon--CalendarMirrored:before{content:'\E787'}.ms-Icon--Calendar:before{content:'\ED28'}.ms-Icon--CaretBottomLeftSolid8:before{content:'\F122'}.ms-Icon--CaretBottomRightSolid8:before{content:'\F121'}.ms-Icon--CaretHollowMirrored:before{content:'\E817'}.ms-Icon--CaretHollow:before{content:'\EA45'}.ms-Icon--CaretLeft8:before{content:'\EDD6'}.ms-Icon--CaretRight8:before{content:'\EDD5'}.ms-Icon--CaretLeftSolid8:before{content:'\EDDA'}.ms-Icon--CaretRightSolid8:before{content:'\EDD9'}.ms-Icon--CaretSolidMirrored:before{content:'\E818'}.ms-Icon--CaretSolid:before{content:'\EA46'}.ms-Icon--CaretTopLeftSolid8:before{content:'\EF55'}.ms-Icon--CaretTopRightSolid8:before{content:'\EF54'}.ms-Icon--ChevronLeft:before{content:'\E76C'}.ms-Icon--ChevronRight:before{content:'\E76B'}.ms-Icon--ChevronLeftMed:before{content:'\E974'}.ms-Icon--ChevronRightMed:before{content:'\E973'}.ms-Icon--ChevronLeftSmall:before{content:'\E970'}.ms-Icon--ChevronRightSmall:before{content:'\E96F'}.ms-Icon--ChromeBackMirrored:before{content:'\E830'}.ms-Icon--ChromeBack:before{content:'\EA47'}.ms-Icon--ClosePaneMirrored:before{content:'\E89F'}.ms-Icon--ClosePane:before{content:'\EA49'}.ms-Icon--CustomListMirrored:before{content:'\EEBE'}.ms-Icon--CustomList:before{content:'\EEBF'}.ms-Icon--DateTimeMirrored:before{content:'\EC92'}.ms-Icon--DateTime:before{content:'\EE93'}.ms-Icon--DockLeftMirrored:before{content:'\E90C'}.ms-Icon--DockLeft:before{content:'\EA4C'}.ms-Icon--DoubleChevronLeft:before{content:'\EDBF'}.ms-Icon--DoubleChevronRight:before{content:'\EDBE'}.ms-Icon--DoubleChevronLeft12:before{content:'\EE99'}.ms-Icon--DoubleChevronRight12:before{content:'\EE98'}.ms-Icon--DoubleChevronLeftMedMirrored:before{content:'\E991'}.ms-Icon--DoubleChevronLeftMed:before{content:'\EA4D'}.ms-Icon--EditMirrored:before{content:'\E70F'}.ms-Icon--Edit:before{content:'\EB7E'}.ms-Icon--FabricFormLibraryMirrored:before{content:'\F09F'}.ms-Icon--FabricFormLibrary:before{content:'\F0A0'}.ms-Icon--FabricReportLibraryMirrored:before{content:'\F0A1'}.ms-Icon--FabricReportLibrary:before{content:'\F0A2'}.ms-Icon--FlickLeft:before{content:'\E938'}.ms-Icon--FlickRight:before{content:'\E937'}.ms-Icon--FormLibraryMirrored:before{content:'\EEB9'}.ms-Icon--FormLibrary:before{content:'\EEBA'}.ms-Icon--Forward:before{content:'\E72B'}.ms-Icon--Back:before{content:'\E72A'}.ms-Icon--HelpMirrored:before{content:'\E897'}.ms-Icon--Help:before{content:'\EA51'}.ms-Icon--IssueTrackingMirrored:before{content:'\EEC0'}.ms-Icon--IssueTracking:before{content:'\EEC1'}.ms-Icon--ListMirrored:before{content:'\EA37'}.ms-Icon--List:before{content:'\EA55'}.ms-Icon--MailReplyAllMirrored:before{content:'\E8C2'}.ms-Icon--MailReplyAll:before{content:'\EA58'}.ms-Icon--MailReplyMirrored:before{content:'\E8CA'}.ms-Icon--MailReply:before{content:'\EA57'}.ms-Icon--MultiSelectMirrored:before{content:'\E762'}.ms-Icon--MultiSelect:before{content:'\EA98'}.ms-Icon--OpenPaneMirrored:before{content:'\E8A0'}.ms-Icon--OpenPane:before{content:'\EA5B'}.ms-Icon--PageLeft:before{content:'\E761'}.ms-Icon--PageRight:before{content:'\E760'}.ms-Icon--QuestionnaireMirrored:before{content:'\EE19'}.ms-Icon--Questionnaire:before{content:'\EE4B'}.ms-Icon--Redo:before{content:'\E7A7'}.ms-Icon--Undo:before{content:'\E7A6'}.ms-Icon--ReplyAllMirrored:before{content:'\EE0A'}.ms-Icon--ReplyAll:before{content:'\EE36'}.ms-Icon--ReplyMirrored:before{content:'\E97A'}.ms-Icon--Reply:before{content:'\EE35'}.ms-Icon--ReportLibraryMirrored:before{content:'\EEBB'}.ms-Icon--ReportLibrary:before{content:'\EEBC'}.ms-Icon--SendMirrored:before{content:'\E724'}.ms-Icon--Send:before{content:'\EA63'}.ms-Icon--ShowResultsMirrored:before{content:'\E8BC'}.ms-Icon--ShowResults:before{content:'\EA65'}.ms-Icon--TaskManagerMirrored:before{content:'\EDB7'}.ms-Icon--TaskManager:before{content:'\EDB8'}.ms-Icon--ThumbnailViewMirrored:before{content:'\E7B6'}.ms-Icon--ThumbnailView:before{content:'\EA67'}.ms-Icon--TriangleLeft12:before{content:'\EED3'}.ms-Icon--TriangleRight12:before{content:'\EED2'}.ms-Icon--TriangleSolidLeft12:before{content:'\EECF'}.ms-Icon--TriangleSolidRight12:before{content:'\EECE'}.ms-u-slideRightIn10{animation-name:fadeIn,slideRightIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn10{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn20{animation-name:fadeIn,slideRightIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn20{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn40{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn40{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn10{animation-name:fadeIn,slideLeftIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn10{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn20{animation-name:fadeIn,slideLeftIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn20{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn40{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn40{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn400{animation-name:fadeIn,slideRightIn400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn400{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn400{animation-name:fadeIn,slideLeft400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeft400{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn20{animation-name:fadeIn,slideUpIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideUpIn20{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn10{animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpIn10{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn20{animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideDownIn20{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn10{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownIn10{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}.ms-u-slideRightOut40{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut40{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut40{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{animation-name:fadeOut,slideRightOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut400{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{animation-name:fadeOut,slideLeftOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut400{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{animation-name:fadeOut,slideUpOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{animation-name:fadeOut,slideDownOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{animation-name:fadeOut,slideDownOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{animation-name:fadeIn,scaleUp100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleUp100{0%{transform:scale3d(.98,.98,1)}to{transform:scaleX(1)}}.ms-u-scaleDownIn100{animation-name:fadeIn,scaleDown100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleDown100{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleX(1)}}.ms-u-scaleUpOut103{animation-name:fadeOut,scaleUp103;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleUp103{0%{transform:scaleX(1)}to{transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{animation-name:fadeOut,scaleDown98;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleDown98{0%{transform:scaleX(1)}to{transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both}.ms-u-fadeIn100{animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeIn{0%{opacity:0;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both}.ms-u-fadeOut100{animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeOut{0%{opacity:1;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{animation-name:rotate90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotate90{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}.ms-u-rotateN90deg{animation-name:rotateN90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotateN90{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}.ms-u-expandCollapse400{transition:height .367s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height .167s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{animation-delay:.167s}.ms-u-delay200{animation-delay:.267s}.ms-u-slideRightIn10{animation-name:fadeIn,slideLeft10;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn10,.ms-u-slideRightIn20{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideRightIn20{animation-name:fadeIn,slideLeft20;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn40{animation-name:fadeIn,slideLeft40;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn10,.ms-u-slideRightIn40{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn10{animation-name:fadeIn,slideRight10;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn20{animation-name:fadeIn,slideRight20;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn20,.ms-u-slideLeftIn40{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn40{animation-name:fadeIn,slideRight40;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn400{animation-name:fadeIn,slideLeft400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn400,.ms-u-slideRightIn400{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn400{animation-name:fadeIn,slideRight400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightOut40{animation-name:fadeOut,slideLeftOut40;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideLeftOut40,.ms-u-slideRightOut40{-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s}.ms-u-slideLeftOut40{animation-name:fadeOut,slideRightOut40;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideRightOut400{animation-name:fadeOut,slideLeftOut400;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideLeftOut400,.ms-u-slideRightOut400{-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s}.ms-u-slideLeftOut400{animation-name:fadeOut,slideRightOut400;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotate90deg{animation-name:rotateN90;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotate90deg,.ms-u-rotateN90deg{-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s}.ms-u-rotateN90deg{animation-name:rotate90;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{left:100%}.ms-u-smPull11{left:91.66666666666666%}.ms-u-smPull10{left:83.33333333333334%}.ms-u-smPull9{left:75%}.ms-u-smPull8{left:66.66666666666666%}.ms-u-smPull7{left:58.333333333333336%}.ms-u-smPull6{left:50%}.ms-u-smPull5{left:41.66666666666667%}.ms-u-smPull4{left:33.33333333333333%}.ms-u-smPull3{left:25%}.ms-u-smPull2{left:16.666666666666664%}.ms-u-smPull1{left:8.333333333333332%}.ms-u-smPull0{left:auto}.ms-u-smPush12{right:100%}.ms-u-smPush11{right:91.66666666666666%}.ms-u-smPush10{right:83.33333333333334%}.ms-u-smPush9{right:75%}.ms-u-smPush8{right:66.66666666666666%}.ms-u-smPush7{right:58.333333333333336%}.ms-u-smPush6{right:50%}.ms-u-smPush5{right:41.66666666666667%}.ms-u-smPush4{right:33.33333333333333%}.ms-u-smPush3{right:25%}.ms-u-smPush2{right:16.666666666666664%}.ms-u-smPush1{right:8.333333333333332%}.ms-u-smPush0{right:auto}.ms-u-smOffset11{margin-right:91.66666666666666%}.ms-u-smOffset10{margin-right:83.33333333333334%}.ms-u-smOffset9{margin-right:75%}.ms-u-smOffset8{margin-right:66.66666666666666%}.ms-u-smOffset7{margin-right:58.333333333333336%}.ms-u-smOffset6{margin-right:50%}.ms-u-smOffset5{margin-right:41.66666666666667%}.ms-u-smOffset4{margin-right:33.33333333333333%}.ms-u-smOffset3{margin-right:25%}.ms-u-smOffset2{margin-right:16.666666666666664%}.ms-u-smOffset1{margin-right:8.333333333333332%}.ms-u-smOffset0{margin-right:0}@media (min-width:480px){.ms-u-md12{width:100%}}@media (min-width:480px){.ms-u-md11{width:91.66666666666666%}}@media (min-width:480px){.ms-u-md10{width:83.33333333333334%}}@media (min-width:480px){.ms-u-md9{width:75%}}@media (min-width:480px){.ms-u-md8{width:66.66666666666666%}}@media (min-width:480px){.ms-u-md7{width:58.333333333333336%}}@media (min-width:480px){.ms-u-md6{width:50%}}@media (min-width:480px){.ms-u-md5{width:41.66666666666667%}}@media (min-width:480px){.ms-u-md4{width:33.33333333333333%}}@media (min-width:480px){.ms-u-md3{width:25%}}@media (min-width:480px){.ms-u-md2{width:16.666666666666664%}}@media (min-width:480px){.ms-u-md1{width:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull12{left:100%}}@media (min-width:480px){.ms-u-mdPull11{left:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPull10{left:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPull9{left:75%}}@media (min-width:480px){.ms-u-mdPull8{left:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPull7{left:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPull6{left:50%}}@media (min-width:480px){.ms-u-mdPull5{left:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPull4{left:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPull3{left:25%}}@media (min-width:480px){.ms-u-mdPull2{left:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPull1{left:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull0{left:auto}}@media (min-width:480px){.ms-u-mdPush12{right:100%}}@media (min-width:480px){.ms-u-mdPush11{right:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPush10{right:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPush9{right:75%}}@media (min-width:480px){.ms-u-mdPush8{right:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPush7{right:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPush6{right:50%}}@media (min-width:480px){.ms-u-mdPush5{right:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPush4{right:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPush3{right:25%}}@media (min-width:480px){.ms-u-mdPush2{right:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPush1{right:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPush0{right:auto}}@media (min-width:480px){.ms-u-mdOffset11{margin-right:91.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset10{margin-right:83.33333333333334%}}@media (min-width:480px){.ms-u-mdOffset9{margin-right:75%}}@media (min-width:480px){.ms-u-mdOffset8{margin-right:66.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset7{margin-right:58.333333333333336%}}@media (min-width:480px){.ms-u-mdOffset6{margin-right:50%}}@media (min-width:480px){.ms-u-mdOffset5{margin-right:41.66666666666667%}}@media (min-width:480px){.ms-u-mdOffset4{margin-right:33.33333333333333%}}@media (min-width:480px){.ms-u-mdOffset3{margin-right:25%}}@media (min-width:480px){.ms-u-mdOffset2{margin-right:16.666666666666664%}}@media (min-width:480px){.ms-u-mdOffset1{margin-right:8.333333333333332%}}@media (min-width:480px){.ms-u-mdOffset0{margin-right:0}}@media (min-width:640px){.ms-u-lg12{width:100%}}@media (min-width:640px){.ms-u-lg11{width:91.66666666666666%}}@media (min-width:640px){.ms-u-lg10{width:83.33333333333334%}}@media (min-width:640px){.ms-u-lg9{width:75%}}@media (min-width:640px){.ms-u-lg8{width:66.66666666666666%}}@media (min-width:640px){.ms-u-lg7{width:58.333333333333336%}}@media (min-width:640px){.ms-u-lg6{width:50%}}@media (min-width:640px){.ms-u-lg5{width:41.66666666666667%}}@media (min-width:640px){.ms-u-lg4{width:33.33333333333333%}}@media (min-width:640px){.ms-u-lg3{width:25%}}@media (min-width:640px){.ms-u-lg2{width:16.666666666666664%}}@media (min-width:640px){.ms-u-lg1{width:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull12{left:100%}}@media (min-width:640px){.ms-u-lgPull11{left:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPull10{left:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPull9{left:75%}}@media (min-width:640px){.ms-u-lgPull8{left:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPull7{left:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPull6{left:50%}}@media (min-width:640px){.ms-u-lgPull5{left:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPull4{left:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPull3{left:25%}}@media (min-width:640px){.ms-u-lgPull2{left:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPull1{left:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull0{left:auto}}@media (min-width:640px){.ms-u-lgPush12{right:100%}}@media (min-width:640px){.ms-u-lgPush11{right:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPush10{right:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPush9{right:75%}}@media (min-width:640px){.ms-u-lgPush8{right:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPush7{right:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPush6{right:50%}}@media (min-width:640px){.ms-u-lgPush5{right:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPush4{right:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPush3{right:25%}}@media (min-width:640px){.ms-u-lgPush2{right:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPush1{right:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPush0{right:auto}}@media (min-width:640px){.ms-u-lgOffset11{margin-right:91.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset10{margin-right:83.33333333333334%}}@media (min-width:640px){.ms-u-lgOffset9{margin-right:75%}}@media (min-width:640px){.ms-u-lgOffset8{margin-right:66.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset7{margin-right:58.333333333333336%}}@media (min-width:640px){.ms-u-lgOffset6{margin-right:50%}}@media (min-width:640px){.ms-u-lgOffset5{margin-right:41.66666666666667%}}@media (min-width:640px){.ms-u-lgOffset4{margin-right:33.33333333333333%}}@media (min-width:640px){.ms-u-lgOffset3{margin-right:25%}}@media (min-width:640px){.ms-u-lgOffset2{margin-right:16.666666666666664%}}@media (min-width:640px){.ms-u-lgOffset1{margin-right:8.333333333333332%}}@media (min-width:640px){.ms-u-lgOffset0{margin-right:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}}@media (min-width:1024px){.ms-u-xl11{width:91.66666666666666%}}@media (min-width:1024px){.ms-u-xl10{width:83.33333333333334%}}@media (min-width:1024px){.ms-u-xl9{width:75%}}@media (min-width:1024px){.ms-u-xl8{width:66.66666666666666%}}@media (min-width:1024px){.ms-u-xl7{width:58.333333333333336%}}@media (min-width:1024px){.ms-u-xl6{width:50%}}@media (min-width:1024px){.ms-u-xl5{width:41.66666666666667%}}@media (min-width:1024px){.ms-u-xl4{width:33.33333333333333%}}@media (min-width:1024px){.ms-u-xl3{width:25%}}@media (min-width:1024px){.ms-u-xl2{width:16.666666666666664%}}@media (min-width:1024px){.ms-u-xl1{width:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull12{left:100%}}@media (min-width:1024px){.ms-u-xlPull11{left:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull10{left:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPull9{left:75%}}@media (min-width:1024px){.ms-u-xlPull8{left:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull7{left:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPull6{left:50%}}@media (min-width:1024px){.ms-u-xlPull5{left:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPull4{left:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPull3{left:25%}}@media (min-width:1024px){.ms-u-xlPull2{left:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPull1{left:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull0{left:auto}}@media (min-width:1024px){.ms-u-xlPush12{right:100%}}@media (min-width:1024px){.ms-u-xlPush11{right:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush10{right:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPush9{right:75%}}@media (min-width:1024px){.ms-u-xlPush8{right:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush7{right:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPush6{right:50%}}@media (min-width:1024px){.ms-u-xlPush5{right:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPush4{right:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPush3{right:25%}}@media (min-width:1024px){.ms-u-xlPush2{right:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPush1{right:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPush0{right:auto}}@media (min-width:1024px){.ms-u-xlOffset11{margin-right:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset10{margin-right:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlOffset9{margin-right:75%}}@media (min-width:1024px){.ms-u-xlOffset8{margin-right:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset7{margin-right:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlOffset6{margin-right:50%}}@media (min-width:1024px){.ms-u-xlOffset5{margin-right:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlOffset4{margin-right:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlOffset3{margin-right:25%}}@media (min-width:1024px){.ms-u-xlOffset2{margin-right:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlOffset1{margin-right:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlOffset0{margin-right:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}}@media (min-width:1366px){.ms-u-xxl11{width:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxl10{width:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxl9{width:75%}}@media (min-width:1366px){.ms-u-xxl8{width:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxl7{width:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxl6{width:50%}}@media (min-width:1366px){.ms-u-xxl5{width:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxl4{width:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxl3{width:25%}}@media (min-width:1366px){.ms-u-xxl2{width:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxl1{width:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull12{left:100%}}@media (min-width:1366px){.ms-u-xxlPull11{left:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull10{left:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPull9{left:75%}}@media (min-width:1366px){.ms-u-xxlPull8{left:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull7{left:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPull6{left:50%}}@media (min-width:1366px){.ms-u-xxlPull5{left:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPull4{left:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPull3{left:25%}}@media (min-width:1366px){.ms-u-xxlPull2{left:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPull1{left:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull0{left:auto}}@media (min-width:1366px){.ms-u-xxlPush12{right:100%}}@media (min-width:1366px){.ms-u-xxlPush11{right:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush10{right:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPush9{right:75%}}@media (min-width:1366px){.ms-u-xxlPush8{right:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush7{right:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPush6{right:50%}}@media (min-width:1366px){.ms-u-xxlPush5{right:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPush4{right:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPush3{right:25%}}@media (min-width:1366px){.ms-u-xxlPush2{right:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPush1{right:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPush0{right:auto}}@media (min-width:1366px){.ms-u-xxlOffset11{margin-right:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset10{margin-right:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlOffset9{margin-right:75%}}@media (min-width:1366px){.ms-u-xxlOffset8{margin-right:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset7{margin-right:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlOffset6{margin-right:50%}}@media (min-width:1366px){.ms-u-xxlOffset5{margin-right:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlOffset4{margin-right:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlOffset3{margin-right:25%}}@media (min-width:1366px){.ms-u-xxlOffset2{margin-right:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlOffset1{margin-right:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlOffset0{margin-right:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}}@media (min-width:1920px){.ms-u-xxxl11{width:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl10{width:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxl9{width:75%}}@media (min-width:1920px){.ms-u-xxxl8{width:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl7{width:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxl6{width:50%}}@media (min-width:1920px){.ms-u-xxxl5{width:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxl4{width:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxl3{width:25%}}@media (min-width:1920px){.ms-u-xxxl2{width:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxl1{width:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull12{left:100%}}@media (min-width:1920px){.ms-u-xxxlPull11{left:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull10{left:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPull9{left:75%}}@media (min-width:1920px){.ms-u-xxxlPull8{left:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull7{left:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPull6{left:50%}}@media (min-width:1920px){.ms-u-xxxlPull5{left:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPull4{left:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPull3{left:25%}}@media (min-width:1920px){.ms-u-xxxlPull2{left:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPull1{left:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull0{left:auto}}@media (min-width:1920px){.ms-u-xxxlPush12{right:100%}}@media (min-width:1920px){.ms-u-xxxlPush11{right:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush10{right:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPush9{right:75%}}@media (min-width:1920px){.ms-u-xxxlPush8{right:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush7{right:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPush6{right:50%}}@media (min-width:1920px){.ms-u-xxxlPush5{right:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPush4{right:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPush3{right:25%}}@media (min-width:1920px){.ms-u-xxxlPush2{right:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPush1{right:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPush0{right:auto}}@media (min-width:1920px){.ms-u-xxxlOffset11{margin-right:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset10{margin-right:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlOffset9{margin-right:75%}}@media (min-width:1920px){.ms-u-xxxlOffset8{margin-right:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset7{margin-right:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlOffset6{margin-right:50%}}@media (min-width:1920px){.ms-u-xxxlOffset5{margin-right:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlOffset4{margin-right:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlOffset3{margin-right:25%}}@media (min-width:1920px){.ms-u-xxxlOffset2{margin-right:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlOffset1{margin-right:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlOffset0{margin-right:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-right:8px;padding-left:8px;box-sizing:border-box;float:right}.ms-Grid-col .ms-Grid{padding:0}.ms-Fabric{color:#333} \ No newline at end of file diff --git a/dist/documentation/Components/Breadcrumb/index.html b/dist/documentation/Components/Breadcrumb/index.html new file mode 100644 index 00000000..7dd06979 --- /dev/null +++ b/dist/documentation/Components/Breadcrumb/index.html @@ -0,0 +1,184 @@ + + + + + + + + Breadcrumb + + + + + + + + + + +

    Breadcrumb

    +

    Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access + to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

    +

    Best Practices

    + + + + + + + + + + + + + +
    DoDon't
    Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page.Don't use Breadcrumbs as a primary way to navigate an app or site.
    +

    Variants

    +

    Default

    + +
    +
    +
    +
    +
      +
      +
      + +
      +

      States

      + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-overflow.ms-BreadcrumbUse 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-overflowMenuDisplays the overflow menu.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head> 
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ 
+<div class="ms-Breadcrumb ">
+  <div class="ms-Breadcrumb-overflow">
+    <div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More" tabindex="1"></div>
+    <div class="ms-Breadcrumb-overflowMenu">
+      <ul class="ms-ContextualMenu is-open"></ul>
+    </div>
+  </div>
+  <ul class="ms-Breadcrumb-list">
+      <li class="ms-Breadcrumb-listItem">
+        <a class="ms-Breadcrumb-itemLink" tabindex="0">Files</a>
+        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+      </li>
+      <li class="ms-Breadcrumb-listItem">
+        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 1</a>
+        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+      </li>
+      <li class="ms-Breadcrumb-listItem">
+        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 2</a>
+        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+      </li>
+      <li class="ms-Breadcrumb-listItem">
+        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 3</a>
+        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+      </li>
+      <li class="ms-Breadcrumb-listItem">
+        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 4</a>
+        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+      </li>
+      <li class="ms-Breadcrumb-listItem">
+        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 5</a>
+        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+      </li>
+      <li class="ms-Breadcrumb-listItem">
+        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 6</a>
+        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+      </li>
+      <li class="ms-Breadcrumb-listItem">
+        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 7</a>
+        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+      </li>
+  </ul>
+</div>
+ 
+
        +
        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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the .ms-Breadcrumb-listItem elements) with your content.
        6. +
      +

      Dependencies

      +

      ContextualMenu

      +

      Accessibility

      +

      The component's JavaScript will apply the correct tabindex values to ensure keyboard accessibility.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/Button/index.html b/dist/documentation/Components/Button/index.html new file mode 100644 index 00000000..9f5d12f5 --- /dev/null +++ b/dist/documentation/Components/Button/index.html @@ -0,0 +1,184 @@ + + + + + + + + Button + + + + + + + + + + +

      Button

      +

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog. When considering + their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button + should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements. While buttons can technically be used to navigate a user to another part of the experience, this is not recommended - unless that navigation + is part of an action or their flow.

      +

      Best Practices

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      DoDon't
      Make sure the label conveys a clear purpose of the button to the user.Don't use generic labels like "Ok," especially in the case of an error; errors are never "Ok."
      Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word.Don’t place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the "safe act" and retains the content (i.e. "Save") or cancels the action (i.e. "Cancel").
      Buttons should always include a noun if there is any room for interpretation about what the verb operates on.Don’t use a button to navigate to another place, use a link instead. The exception is in a wizard where "Back" and "Next" buttons may be used.
      Consider the affect localization will have on the button and what will happen to components around it.Don’t put too much text in a button - try to keep the length of your text to a minimum.
      If the button’s label content is dynamic, consider how the button will resize and what will happen to components around it.Don't put anything other than text in a button.
      Use only a single line of text in the label of the button.
      Expose only one or two buttons to the user at a time, for example, "Accept" and "Cancel". If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, + with a single command button to trigger those actions.
      Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds.
      "Submit", "OK", and "Apply" buttons should always be styled as primary buttons. When "Reset" or "Cancel" buttons appear alongside one of the above, they should be styled as secondary buttons.
      Default buttons should always perform safe operations. For example, a default button should never delete.
      Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a button may be used to open an interface area but should not be used to open an additional + set of components in the same interface.
      +

      Variants

      +

      Default

      + + +

      Primary

      +

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

      + + +

      Compound

      +

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

      + + +

      Hero

      +

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

      + + +

      States

      + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-disabled.ms-ButtonWhen using an <a> element, apply this class to disable the button. When using a <button>, the disabled attribute can be used instead.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+<button class="ms-Button 
+  
+  ">
+  <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 (such as the content of .ms-Button-label) with your content.
        5. +
      +

      Dependencies

      +

      This component has no dependencies.

      +

      Accessibility

      +

      Focus styles are included for keyboard navigation.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/Callout/index.html b/dist/documentation/Components/Callout/index.html new file mode 100644 index 00000000..59c23ad7 --- /dev/null +++ b/dist/documentation/Components/Callout/index.html @@ -0,0 +1,334 @@ + + + + + + + + Callout + + + + + + + + + + +

      Callout

      +

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

      +

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

      +

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

      +

      Best Practices

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      DoDon't
      Use Callouts to introduce new concepts in an experience where highlighting specific pieces of the UI is necessary.Don’t overuse Callout without putting the user in control. Too many Callouts which open automatically can be perceived as interrupting workflow and are a bad user experience.
      Do be concise with the information you provide inside of a Callout. Short sentences or sentence fragments are best.Don't use large, unformatted blocks of text in your Callout, they are difficult to read and overwhelming.
      Do be helpful with the tip text inside of your Callout.Don't put obvious tip text, or text that simply repeats what is already on the screen in your Callout.
      Do limit the information inside of a Callout to supplemental information that users don't have to read.Because the content inside of a Callout isn't always visible, don't put important or required information in a Callout.
      Callouts should be placed near the object being described, usually at the pointer's tail or head if possible.Don’t block important UI with the placement of your Callout, it is a poor user experience that will lead to frustration.
      When additional context - or more advanced description - is necessary, consider placing a link to "Learn more" at the bottom of the Callout and opening the additional content in a new window or Panel when clicked.Don’t open Callout from within another Callout.
      Don’t use Callout to ask the user to confirm an action, use a Dialog instead.
      Don’t show Callouts on hidden elements.
      +

      Variants

      +

      Default

      + +
      + + +
      +
      +
      +

      Close

      +

      Includes an icon to dismiss the callout.

      + +
      + + +
      +
      +
      +

      Action text

      +

      Includes buttons to take action.

      + +
      + + +
      +
      +
      +

      OOBE (Out Of the Box Experience)

      +

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

      + +
      + + +
      +
      +
      +

      Peek

      +

      A smaller callout with an action.

      + +
      + + +
      +
      +
      +

      States

      +

      This component has only the default state.

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ <div class="ms-CalloutExample">  
+  
+  
+  <div class="ms-Callout 
+       
+       is-hidden">
+    <div class="ms-Callout-main">
+      <div class="ms-Callout-header">
+        <p class="ms-Callout-title">All of your favorite people</p>
+      </div>
+      <div class="ms-Callout-inner">
+        <div class="ms-Callout-content">
+          <p class="ms-Callout-subText  ms-Callout-subText-- ">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
+        </div>
+        <div class="ms-Callout-actions">
+              
+  
+  <a class="ms-Link  " 
+     
+     
+    >Learn more</a>
+  
+  
+        </div>
+      </div>     
+    </div>
+  </div>
+  <div class="ms-CalloutExample-button">
+    
+    <button class="ms-Button 
+      
+      ">
+      <span class="ms-Button-label">Open Callout</span>
+    </button>  </div>
+</div>
+ 
+
        +
        3. +
      3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate a Callout component on the page: + 
        + 
+ <script type="text/javascript">
+  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
+  for(var i = 0; i < CalloutExamples.length; i++) {
+    var Example = CalloutExamples[i];
+    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
+    var CalloutElement = Example.querySelector(".ms-Callout");
+    new fabric['Callout'](
+          CalloutElement, 
+          ExampleButtonElement,
+          "right"
+    );
+  }
+</script>
+ 
+
        +
        4. +
      4. Replace the sample HTML content (such as the content of .ms-Callout-title) with your content.
        5. +
      +

      Dependencies

      +

      Button, Label, Link, ContextualHost, CommandButton

      +

      Accessibility

      +

      Focus styles are included for all of the actions (links and buttons) included within a Callout.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/CheckBox/index.html b/dist/documentation/Components/CheckBox/index.html new file mode 100644 index 00000000..a9615f4d --- /dev/null +++ b/dist/documentation/Components/CheckBox/index.html @@ -0,0 +1,123 @@ + + + + + + + + CheckBox + + + + + + + + + + +

      Check Box

      +

      Allows selection from one or more options.

      +

      Variants

      +

      Checkbox

      +

      Used to indicate a simple yes or no choice, typically as part of a form.

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

      States

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

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+<div class="ms-CheckBox"> 
+    <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+    <label role="checkbox"
+        class="ms-CheckBox-field "
+        tabindex="0"
+        aria-checked="false"
+        name="checkboxa"
+>
+        <span class="ms-Label">Checkbox</span>
+    </label>
+</div>
+
+ 
+
        +
        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 (such as the content of .ms-Label) with your content.
        5. +
      +

      Dependencies

      +

      Label

      +

      Accessibility

      +

      Focus styles are included for these fields. Ensure that you use descriptive labels.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/ChoiceFieldGroup/index.html b/dist/documentation/Components/ChoiceFieldGroup/index.html new file mode 100644 index 00000000..e8f037e4 --- /dev/null +++ b/dist/documentation/Components/ChoiceFieldGroup/index.html @@ -0,0 +1,159 @@ + + + + + + + + ChoiceFieldGroup + + + + + + + + + + +

      Choice Field Group

      +

      Allows selection from one or more options.

      +

      Variants

      +

      Default

      +

      Used to indicate a single choice from multiple options.

      + +
      +
      + +
      + +
      + + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head> 
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ 
+<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
+  <div class="ms-ChoiceFieldGroup-title">
+    <label class="ms-Label  is-required ">Unselected</label>
+  </div>
+  <ul class="ms-ChoiceFieldGroup-list">
+    
+
+<div class="ms-RadioButton"> 
+    <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+    <label role="radio"
+        class="ms-RadioButton-field "
+        tabindex="0"
+        aria-checked="false"
+        name="choicefieldgroup"
+>
+        <span class="ms-Label">Option 1</span>
+    </label>
+</div> 
+    
+
+<div class="ms-RadioButton"> 
+    <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+    <label role="radio"
+        class="ms-RadioButton-field "
+        tabindex="0"
+        aria-checked="false"
+        name="choicefieldgroup"
+>
+        <span class="ms-Label">Option 2</span>
+    </label>
+</div> 
+    
+
+<div class="ms-RadioButton"> 
+    <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+    <label role="radio"
+        class="ms-RadioButton-field  is-disabled "
+        tabindex="0"
+        aria-checked="false"
+        name="choicefieldgroup"
+        aria-disabled="true"
+        >
+        <span class="ms-Label">Option 3</span>
+    </label>
+</div> 
+    
+
+<div class="ms-RadioButton"> 
+    <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+    <label role="radio"
+        class="ms-RadioButton-field "
+        tabindex="0"
+        aria-checked="false"
+        name="choicefieldgroup"
+>
+        <span class="ms-Label">Option 4</span>
+    </label>
+</div> 
+  </ul>
+</div> 
+ 
+
        +
        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 (such as the .ms-Label elements) with your content.
        5. +
      +

      Dependencies

      +

      Label, CheckBox

      + + \ No newline at end of file diff --git a/dist/documentation/Components/CommandBar/index.html b/dist/documentation/Components/CommandBar/index.html new file mode 100644 index 00000000..6041055f --- /dev/null +++ b/dist/documentation/Components/CommandBar/index.html @@ -0,0 +1,527 @@ + + + + + + + + CommandBar + + + + + + + + + + +

      Command Bar

      +

      Commanding surface for panels, pages, and applications. When planning to use the surface for navigation only, consider the NavBar variant.

      +

      Variants

      +

      Default

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

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

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

      +

      States

      + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-hidden.ms-CommandBarItemHides a Command Bar item from view.
      .is-active.ms-CommandBarSearchExpands the search field for use.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ 
+<div class="ms-CommandBar ">
+    <div class="ms-CommandBar-sideCommands">
+        
+<div class="ms-CommandButton  ms-CommandButton--noLabel  ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label"></span>  </button>
+</div>
+    </div>
+  <div class="ms-CommandBar-mainArea">
+      
+
+<div class="ms-SearchBox  ms-SearchBox--commandBar  ">
+  <input class="ms-SearchBox-field" type="text" value="">
+  <label class="ms-SearchBox-label">
+    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+    <span class="ms-SearchBox-text">Search</span>
+  </label>
+  
+<div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel  ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--Cancel"></i></span><span class="ms-CommandButton-label"></span>  </button>
+</div>
+  
+<div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel  ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--ChromeBack"></i></span><span class="ms-CommandButton-label"></span>  </button>
+</div>
+  
+<div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel  ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--Filter"></i></span><span class="ms-CommandButton-label"></span>  </button>
+</div>
+</div>
+      
+<div class="ms-CommandButton    ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
+</div>
+      
+<div class="ms-CommandButton    ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">New</span><span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span>
+  </button>
+    
+<ul class="ms-ContextualMenu  is-opened ms-ContextualMenu--hasIcons">
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >Folder</a>
+        <i class="ms-Icon ms-Icon--Folder "></i>
+      </li>
+      <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >Plain Text Document</a>
+        <i class="ms-Icon ms-Icon--Page "></i>
+      </li>
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >A Coffee</a>
+        <i class="ms-Icon ms-Icon--Coffee "></i>
+      </li>
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >Picture</a>
+        <i class="ms-Icon ms-Icon--Picture "></i>
+      </li>
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >Money</a>
+        <i class="ms-Icon ms-Icon--Money "></i>
+      </li>
+</ul>
+</div>
+      
+<div class="ms-CommandButton    ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
+</div>
+      
+<div class="ms-CommandButton    ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
+</div>
+      
+<div class="ms-CommandButton    ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
+</div>
+      
+        
+<div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel  ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--More"></i></span><span class="ms-CommandButton-label"></span>  </button>
+    
+<ul class="ms-ContextualMenu  is-opened ms-ContextualMenu--hasIcons">
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >Folder</a>
+        <i class="ms-Icon ms-Icon--Folder "></i>
+      </li>
+      <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >Plain Text Document</a>
+        <i class="ms-Icon ms-Icon--Page "></i>
+      </li>
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >A Coffee</a>
+        <i class="ms-Icon ms-Icon--Coffee "></i>
+      </li>
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >Picture</a>
+        <i class="ms-Icon ms-Icon--Picture "></i>
+      </li>
+      <li class="ms-ContextualMenu-item ">
+        <a class="ms-ContextualMenu-link " tabindex="1" >Money</a>
+        <i class="ms-Icon ms-Icon--Money "></i>
+      </li>
+</ul>
+</div>
+      
+  </div>
+</div>
+ 
+
        +
        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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as .ms-CommandBarItem elements) with your content.
        6. +
      +

      Dependencies

      +

      This component has no dependencies.

      +

      Accessibility

      +

      Refer to the sample code to see how tabindex attributes should be set to support keyboard navigation.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/CommandButton/index.html b/dist/documentation/Components/CommandButton/index.html new file mode 100644 index 00000000..d1ed7866 --- /dev/null +++ b/dist/documentation/Components/CommandButton/index.html @@ -0,0 +1,221 @@ + + + + + + + + CommandButton + + + + + + + + + + +

      CommandButton

      +

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

      +

      Variants

      +

      Default

      + +
      + +
      +

      Action Button

      + +
      + +
      +

      Disabled

      + +
      + +
      + + +
      + + +
      +

      Inline

      + +
      + +
      +

      No Label

      + +
      + +
      +

      No Label Split

      + +
      + + + +
      +

      Pivot

      + +
      + +
      +

      Split

      + +
      + + + +
      +

      Text Only

      + +
      + +
      +

      States

      + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-disabled.ms-ButtonWhen using an <a> element, apply this class to disable the button. When using a <button>, the disabled attribute can be used instead.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+<div class="ms-CommandButton    ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
+</div>
+ 
+
        +
        3. +
      3. Replace the sample HTML content (such as the content of .ms-CommandButton-label) with your content.
        4. +
      4. If you are using any of CommandButton's variants that use a dropdown, the below JavaScript is required. + 
        + 
+ <script type="text/javascript">
+  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+  for(var i = 0; i < CommandButtonElements.length; i++) {
+    new fabric['CommandButton'](CommandButtonElements[i]);
+  }
+</script>
+
+ 
+
        + +
        5. +
      +

      Dependencies

      +

      ContextualMenu, ContextualHost

      +

      Accessibility

      +

      Focus styles are included for keyboard navigation.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/ContextualMenu/index.html b/dist/documentation/Components/ContextualMenu/index.html new file mode 100644 index 00000000..fccb013b --- /dev/null +++ b/dist/documentation/Components/ContextualMenu/index.html @@ -0,0 +1,330 @@ + + + + + + + + ContextualMenu + + + + + + + + + + +

      Contextual Menu

      +

      Presents options associated with an object. Often opened via a right-click or overflow button.

      +

      Variants

      +

      Default

      +

      A standard menu of commands. Should close when a command is invoked.

      + +
      + + +
      +

      Multiselect

      +

      Allows for multiple options to be set. Remains opened until the user clicks or taps outside of the menu.

      + +
      + + +
      + + +

      Optional functionality

      + +

      You can nest a ContextualMenu inside another ContextualMenu, resulting in a submenu.

      + +
      + + +
      + + +

      Dividers

      +

      Dividers can be added to create distinct sections of options or commands.

      + +
      + + +
      + + +

      States

      + + + + + + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-open.ms-ContextualMenuThe ContextualMenu is hidden by default. Toggle this class to show or hide it.
      .is-selected.ms-ContextualMenu-linkMarks that item as selected. Only available for the multiselect variant.
      .is-disabled.ms-ContextualMenu-linkDisables that item in the menu.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head> 
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ <div class="ms-ContextualMenu-basic">
+    
+    <button class="ms-Button 
+      ms-Button--primary
+      ">
+      <span class="ms-Button-label">Open Example</span>
+    </button>    
+    <ul class="ms-ContextualMenu  is-hidden ">
+          <li class="ms-ContextualMenu-item ">
+            <a class="ms-ContextualMenu-link " tabindex="1" >Animals</a>
+            
+          </li>
+          <li class="ms-ContextualMenu-item ">
+            <a class="ms-ContextualMenu-link " tabindex="1" >Books</a>
+            
+          </li>
+          <li class="ms-ContextualMenu-item ">
+            <a class="ms-ContextualMenu-link  is-selected " tabindex="1" >Education</a>
+            
+          </li>
+          <li class="ms-ContextualMenu-item ">
+            <a class="ms-ContextualMenu-link " tabindex="1" >Music</a>
+            
+          </li>
+          <li class="ms-ContextualMenu-item ">
+            <a class="ms-ContextualMenu-link  is-disabled " tabindex="1" >Sports</a>
+            
+          </li>
+    </ul></div>
+ 
+
        +
        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 ButtonElement = document.querySelector(".ms-ContextualMenu-basic .ms-Button");
+    var ContextualMenuElement = document.querySelector(".ms-ContextualMenu-basic .ms-ContextualMenu");
+    var contextualMenu = new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
+</script>
+ 
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the .ms-ContextualMenu-link elements) with your content.
        6. +
      +

      Dependencies

      +

      This component has no dependencies.

      +

      Accessibility

      +

      More details will be added here.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/DatePicker/index.html b/dist/documentation/Components/DatePicker/index.html new file mode 100644 index 00000000..2a84dae4 --- /dev/null +++ b/dist/documentation/Components/DatePicker/index.html @@ -0,0 +1,186 @@ + + + + + + + + DatePicker + + + + + + + + + + +

      Date Picker

      +

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

      +

      Variants

      +

      Default

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

      States

      + + + + + + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-highlighted.ms-DatePicker-monthOption, .ms-DatePicker-yearOptionMarks a month or year as selected.
      .is-pickingYears.ms-DatePickerDisplays a set of years to choose from.
      .is-pickingMonths.ms-DatePickerDisplays a set of months to choose from.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery and PickaDate.js library:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="jquery-2.2.1.min.js"></script>
+     <script src="fabric.min.js"></script>
+     <script src="PickaDate.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+
+<div class="ms-DatePicker">
+  <div class="ms-TextField">
+    <label class="ms-Label">Start date</label>
+    <i class="ms-DatePicker-event ms-Icon ms-Icon--Event"></i>
+    <input class="ms-TextField-field" type="text" placeholder="Select a date&hellip;">
+  </div>
+  <div class="ms-DatePicker-monthComponents">
+    <span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
+    <span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
+    <div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>
+  </div>
+  <span class="ms-DatePicker-goToday js-goToday">Go to today</span>
+  <div class="ms-DatePicker-monthPicker">
+    <div class="ms-DatePicker-header">
+      <div class="ms-DatePicker-yearComponents">
+        <span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
+        <span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
+      </div>
+      <div class="ms-DatePicker-currentYear js-showYearPicker"></div>
+    </div>
+    <div class="ms-DatePicker-optionGrid">
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="0">Jan</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="1">Feb</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="2">Mar</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="3">Apr</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="4">May</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="5">Jun</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="6">Jul</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="7">Aug</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="8">Sep</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="9">Oct</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="10">Nov</span>
+      <span class="ms-DatePicker-monthOption js-changeDate" data-month="11">Dec</span>
+    </div>
+  </div>
+  <div class="ms-DatePicker-yearPicker">
+    <div class="ms-DatePicker-decadeComponents">
+      <span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
+      <span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
+    </div>
+  </div>
+</div>
+
+ 
+
        +
        3. +
      3. Add the following <script> tag to your page, below the references to PickaDate and Fabric's JS, to instantiate all DatePicker components on the page: + 
        + 
+ <script type="text/javascript">
+  var DatePickerElements = document.querySelectorAll(".ms-DatePicker");
+  for(var i = 0; i < DatePickerElements.length; i++) {
+    new fabric['DatePicker'](DatePickerElements[i]);
+  }
+</script>
+
+ 
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      +

      Dependencies

      +

      This component has no dependencies on other components. It does, however, require pickadate.js 3.5.3. Once you have downloaded the ZIP, you'll find picker.js and picker.date.js in the lib folder.

      +

      Accessibility

      +

      More details will be added here.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/Dialog/index.html b/dist/documentation/Components/Dialog/index.html new file mode 100644 index 00000000..8270fd00 --- /dev/null +++ b/dist/documentation/Components/Dialog/index.html @@ -0,0 +1,521 @@ + + + + + + + + Dialog + + + + + + + + + + +

      Dialog

      +

      Displays content that temporarily blocks interactions with the application. It is primarily used for confirmation tasks, light-weight creation or edit tasks, and simple management tasks.

      +

      Variants

      +

      Default

      +

      Includes a content area and two buttons.

      + +
      +
      +
      All emails together
      +
      +

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

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

      Multiline

      +

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

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

      Large Header

      +

      Provides a large, styled header followed by a content area and two buttons.

      + +
      +
      +
      All emails together
      +
      +

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

      +
      +
      + + +
      +
      + + +
      + +

      Blocking

      +

      The overlay for this variant does not dismiss the Dialog.

      + +
      +
      +
      Unsaved changes
      +
      +

      Are you sure you want to discard these changes?.

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

      Close

      +

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

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

      States

      +

      This component has only the default state.

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+<div class="ms-Dialog ">
+    <div class="ms-Dialog-title">All emails together</div>
+    <div class="ms-Dialog-content">
+        <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
+          
+
+<div class="ms-CheckBox"> 
+    <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+    <label role="checkbox"
+        class="ms-CheckBox-field "
+        tabindex="0"
+        aria-checked="false"
+        name="checkboxa"
+>
+        <span class="ms-Label">Option1</span>
+    </label>
+</div>
+
+          
+
+<div class="ms-CheckBox"> 
+    <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+    <label role="checkbox"
+        class="ms-CheckBox-field "
+        tabindex="0"
+        aria-checked="false"
+        name="checkboxa"
+>
+        <span class="ms-Label">Option2</span>
+    </label>
+</div>
+
+    </div>
+      <div class="ms-Dialog-actions">
+          
+<button class="ms-Button ms-Dialog-action
+  ms-Button--primary
+  ">
+  <span class="ms-Button-label">Save</span>
+</button>
+          
+<button class="ms-Button ms-Dialog-action
+  
+  ">
+  <span class="ms-Button-label">Cancel</span>
+</button>
+      </div>
+</div>
+
+ 
+
        +
        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>
+ 
+
        + +

        or add the following <script> tag to your page, below the references to Fabric's JS, to instantiate a single Dialog component on the page:

        + + 
        +     
+  <script type="text/javascript">
+    var DialogElement = document.querySelector(".ms-Dialog");
+    var dialogComponent = new fabric['Dialog'](DialogElement);
+</script>
+     
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the content of .ms-Dialog-content) with your content.
        6. +
      +

      Dependencies

      +

      This component has no dependencies on other components.

      +

      Accessibility

      +

      More details will be added here.

      + + \ No newline at end of file diff --git a/dist/documentation/Components/Dropdown/index.html b/dist/documentation/Components/Dropdown/index.html new file mode 100644 index 00000000..69ad2057 --- /dev/null +++ b/dist/documentation/Components/Dropdown/index.html @@ -0,0 +1,125 @@ + + + + + + + + Dropdown + + + + + + + + + + +

      Dropdown

      +

      Allows for the selection of one option from a list.

      +

      Variants

      +

      Default

      + + + +
      + + + +
      +

      Disabled

      + + + +
      + + + +
      +

      States

      + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-disabled.ms-DropdownDisables the dropdown.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ 
+
+
+<div class="ms-Dropdown  " tabindex="0">
+  <label class="ms-Label">Dropdown label</label>
+  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--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 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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the options within .ms-Dropdown-select) with your content.
        6. +
      +

      Dependencies

      +

      This component depends on Panel for when it is rendered on mobile.

      +

      Accessibility

      +

      More details will be added here.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/FacePile/index.html b/dist/documentation/Components/FacePile/index.html new file mode 100644 index 00000000..b8f76f84 --- /dev/null +++ b/dist/documentation/Components/FacePile/index.html @@ -0,0 +1,1429 @@ + + + + + + + + FacePile + + + + + + + + + + +

      FacePile

      +

      Displays several people with the option to add additional people or view the details of a person. Although not baked into the component, adding new people to a FacePile (the listing of faces horizontally) should occur through a panel using the FacePile + PeoplePicker variant.

      +

      Variants

      +

      Default

      + + +
      + + + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
      +
        +
        • +
        • +
        • +
        • +
      • View profile
        • +
        • +
      +
      +
      +
      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
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      + +
      +
      +
      DF
      +
      +
      +
      +
      +
      Douglas Fielder
      +
      Accountant
      +
      +
      +
      + +
      +
      +
      DF
      +
      +
      +
      +
      +
      Douglas Fielder
      +
      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-PersonaCardMakes the PersonaCard for a person visible.
      .is-active.ms-FacePile-itemBtn--overflowMakes the overflow item for additional people visible.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ 
+
+<div class="ms-FacePile">
+  <button class="ms-FacePile-addButton ms-FacePile-addButton--addPerson">
+    <i class="ms-FacePile-addPersonIcon ms-Icon ms-Icon--AddFriend"></i>
+  </button>
+  
+      
+      
+      <div class="ms-Persona
+            ms-Persona--facePile
+        ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+        </div>
+        <div class="ms-Persona-presence">
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Alton Lafferty</div>
+            <div class="ms-Persona-secondaryText">Accountant</div>
+        </div>
+          
+          <div class="ms-PersonaCard ">
+            <div class="ms-PersonaCard-persona">
+              
+              
+              <div class="ms-Persona
+                    ms-Persona--lg
+                ">
+                <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+                    <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                </div>
+                <div class="ms-Persona-presence">
+                </div>
+                <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Alton Lafferty</div>
+                    <div class="ms-Persona-secondaryText">Accountant</div>
+                    <div class="ms-Persona-tertiaryText">In a meeting</div>
+                    <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+                </div>
+              </div>
+            </div>
+            <ul class="ms-PersonaCard-actions">
+              <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
+              <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
+              <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
+              <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
+              <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
+              <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
+            </ul>
+            <div class="ms-PersonaCard-actionDetailBox">
+              <div data-detail-id="mail" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
+              </div>
+              <div data-detail-id="chat" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
+              </div>
+              <div data-detail-id="phone" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailExpander"></div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
+              </div>
+              <div data-detail-id="video" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
+              </div>
+                
+              <div data-detail-id="org" class="ms-PersonaCard-details">
+                
+                
+                <div class="ms-OrgChart ">
+                    <div class="ms-OrgChart-group">
+                      
+                      <ul class="ms-OrgChart-list">
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Russel Miller</div>
+                      <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                      <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                      </ul>
+                    </div>
+                    <div class="ms-OrgChart-group">
+                      <div class="ms-OrgChart-groupTitle">Manager</div>
+                      <ul class="ms-OrgChart-list">
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Grant Steel</div>
+                      <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                      </ul>
+                    </div>
+                    <div class="ms-OrgChart-group">
+                      <div class="ms-OrgChart-groupTitle">Staff</div>
+                      <ul class="ms-OrgChart-list">
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                      <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                      <div class="ms-Persona-secondaryText">Technical Support</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Marcel Groce</div>
+                      <div class="ms-Persona-secondaryText">Delivery</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                      <div class="ms-Persona-secondaryText">Marketing</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                      </ul>
+                    </div>
+                </div>    </div>
+            </div>
+          </div>
+      </div>
+      
+      
+      <div class="ms-Persona
+            ms-Persona--facePile
+        ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
+        </div>
+        <div class="ms-Persona-presence">
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Marcus Lauer</div>
+            <div class="ms-Persona-secondaryText">Accountant</div>
+        </div>
+          
+          <div class="ms-PersonaCard ">
+            <div class="ms-PersonaCard-persona">
+              
+              
+              <div class="ms-Persona
+                    ms-Persona--lg
+                ">
+                <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
+                </div>
+                <div class="ms-Persona-presence">
+                </div>
+                <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                    <div class="ms-Persona-secondaryText">Accountant</div>
+                    <div class="ms-Persona-tertiaryText">In a meeting</div>
+                    <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+                </div>
+              </div>
+            </div>
+            <ul class="ms-PersonaCard-actions">
+              <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
+              <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
+              <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
+              <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
+              <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
+              <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
+            </ul>
+            <div class="ms-PersonaCard-actionDetailBox">
+              <div data-detail-id="mail" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
+              </div>
+              <div data-detail-id="chat" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
+              </div>
+              <div data-detail-id="phone" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailExpander"></div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
+              </div>
+              <div data-detail-id="video" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
+              </div>
+                
+              <div data-detail-id="org" class="ms-PersonaCard-details">
+                
+                
+                <div class="ms-OrgChart ">
+                    <div class="ms-OrgChart-group">
+                      
+                      <ul class="ms-OrgChart-list">
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Russel Miller</div>
+                      <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                      <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                      </ul>
+                    </div>
+                    <div class="ms-OrgChart-group">
+                      <div class="ms-OrgChart-groupTitle">Manager</div>
+                      <ul class="ms-OrgChart-list">
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Grant Steel</div>
+                      <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                      </ul>
+                    </div>
+                    <div class="ms-OrgChart-group">
+                      <div class="ms-OrgChart-groupTitle">Staff</div>
+                      <ul class="ms-OrgChart-list">
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                      <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                      <div class="ms-Persona-secondaryText">Technical Support</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Marcel Groce</div>
+                      <div class="ms-Persona-secondaryText">Delivery</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                      <div class="ms-Persona-secondaryText">Marketing</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                      </ul>
+                    </div>
+                </div>    </div>
+            </div>
+          </div>
+      </div>
+      
+      
+      <div class="ms-Persona
+            ms-Persona--facePile
+        ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
+        </div>
+        <div class="ms-Persona-presence">
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Douglas Fielder</div>
+            <div class="ms-Persona-secondaryText">Accountant</div>
+        </div>
+          
+          <div class="ms-PersonaCard ">
+            <div class="ms-PersonaCard-persona">
+              
+              
+              <div class="ms-Persona
+                    ms-Persona--lg
+                ">
+                <div class="ms-Persona-imageArea">
+                    <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
+                </div>
+                <div class="ms-Persona-presence">
+                </div>
+                <div class="ms-Persona-details">
+                    <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                    <div class="ms-Persona-secondaryText">Accountant</div>
+                    <div class="ms-Persona-tertiaryText">In a meeting</div>
+                    <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+                </div>
+              </div>
+            </div>
+            <ul class="ms-PersonaCard-actions">
+              <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
+              <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
+              <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
+              <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
+              <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
+              <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
+            </ul>
+            <div class="ms-PersonaCard-actionDetailBox">
+              <div data-detail-id="mail" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
+              </div>
+              <div data-detail-id="chat" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
+              </div>
+              <div data-detail-id="phone" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailExpander"></div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
+              </div>
+              <div data-detail-id="video" class="ms-PersonaCard-details">
+                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
+              </div>
+                
+              <div data-detail-id="org" class="ms-PersonaCard-details">
+                
+                
+                <div class="ms-OrgChart ">
+                    <div class="ms-OrgChart-group">
+                      
+                      <ul class="ms-OrgChart-list">
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Russel Miller</div>
+                      <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                      <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                      </ul>
+                    </div>
+                    <div class="ms-OrgChart-group">
+                      <div class="ms-OrgChart-groupTitle">Manager</div>
+                      <ul class="ms-OrgChart-list">
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Grant Steel</div>
+                      <div class="ms-Persona-secondaryText">Sales</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                      </ul>
+                    </div>
+                    <div class="ms-OrgChart-group">
+                      <div class="ms-OrgChart-groupTitle">Staff</div>
+                      <ul class="ms-OrgChart-list">
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                      <div class="ms-Persona-secondaryText">Public Relations</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Marcus Lauer</div>
+                      <div class="ms-Persona-secondaryText">Technical Support</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Marcel Groce</div>
+                      <div class="ms-Persona-secondaryText">Delivery</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                          <li class="ms-OrgChart-listItem">
+                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                              
+                
+                <div class="ms-Persona
+                ">
+                  <div class="ms-Persona-imageArea">
+                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+                  </div>
+                  <div class="ms-Persona-presence">
+                  </div>
+                  <div class="ms-Persona-details">
+                      <div class="ms-Persona-primaryText">Jessica Fischer</div>
+                      <div class="ms-Persona-secondaryText">Marketing</div>
+                  </div>
+                </div>
+                
+                            </button>
+                          </li>
+                      </ul>
+                    </div>
+                </div>    </div>
+            </div>
+          </div>
+      </div>
+  
+  <button class="ms-FacePile-addButton ms-FacePile-addButton--overflow">
+    <span class="ms-FacePile-overflowText">+3</span>
+  </button>
+</div>
+ 
+
        +
        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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content with your content.
        6. +
      +

      Dependencies

      +

      This component has dependencies on Overlay, Link, Panel, PeoplePicker, Persona, PersonaCard, and Spinner.

      +

      Accessibility

      +

      More details will be added here.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/Label/index.html b/dist/documentation/Components/Label/index.html new file mode 100644 index 00000000..0b894218 --- /dev/null +++ b/dist/documentation/Components/Label/index.html @@ -0,0 +1,79 @@ + + + + + + + + Label + + + + + + + + + + +

      Label

      +

      Used to label form elements such as TextField and Dropdown.

      +

      Variants

      +

      Default

      + + + +

      Required

      + +
      +
      +

      Disabled

      + +
      +
      +

      States

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

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+<label class="ms-Label  ">Name</label>
+
+ 
+
        +
        3. +
      3. Replace the sample HTML content (such as the content of .ms-Label) with your content.
        4. +
      +

      Dependencies

      +

      This component has no dependencies on other components.

      +

      Accessibility

      +

      When used with a form element, add a for attribute that matches the id attribute of the field.

      + + \ No newline at end of file diff --git a/dist/documentation/Components/Link/index.html b/dist/documentation/Components/Link/index.html new file mode 100644 index 00000000..11f492db --- /dev/null +++ b/dist/documentation/Components/Link/index.html @@ -0,0 +1,61 @@ + + + + + + + + Link + + + + + + + + + + +

      Link

      +

      Used to create a hyperlink to another location.

      +

      Variants

      +

      Default

      + + +Example Link + + +

      States

      +

      This component has only the default state.

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ <div class="ms-font-m">
+    
+    
+    <a class="ms-Link  " 
+       href="#"  
+       title="More info about Example Link"  
+      >Example Link</a>
+    
+</div>
+ 
+
        +
        3. +
      3. Replace the sample text with the text of your link.
        4. +
      +

      Dependencies

      +

      This component has no dependencies on other components.

      +

      Accessibility

      +

      Use the title attribute to provide additional text describing the link, if the link text itself is not descriptive enough.

      +

      Notes

      +

      The Link inherits the font family, size, and weight of its parent element. This is why we have placed it within .ms-font-m wrapper in the sample above.

      + + \ No newline at end of file diff --git a/dist/documentation/Components/List/index.html b/dist/documentation/Components/List/index.html new file mode 100644 index 00000000..b1d447d6 --- /dev/null +++ b/dist/documentation/Components/List/index.html @@ -0,0 +1,372 @@ + + + + + + + + List + + + + + + + + + + +

      List

      +

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

      +

      Variants

      +

      Default

      +

      A standard vertical list of items.

      + + + + +

      States

      +

      This component has only the default state.

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ 
+
+<ul class="ms-List ">
+    
+    
+    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
+      
+      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+      <span class="ms-ListItem-secondaryText">Meeting notes</span>
+      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+      <span class="ms-ListItem-metaText">2:42p</span>
+      
+      <div class="ms-ListItem-selectionTarget"></div>
+      <div class="ms-ListItem-actions">
+        
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+      </div>
+    </li>
+    
+    
+    
+    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
+      
+      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+      <span class="ms-ListItem-secondaryText">Meeting notes</span>
+      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+      <span class="ms-ListItem-metaText">2:42p</span>
+      
+      <div class="ms-ListItem-selectionTarget"></div>
+      <div class="ms-ListItem-actions">
+        
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+      </div>
+    </li>
+    
+    
+    
+    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
+      
+      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+      <span class="ms-ListItem-secondaryText">Meeting notes</span>
+      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+      <span class="ms-ListItem-metaText">2:42p</span>
+      
+      <div class="ms-ListItem-selectionTarget"></div>
+      <div class="ms-ListItem-actions">
+        
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+      </div>
+    </li>
+    
+    
+    
+    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
+      
+      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+      <span class="ms-ListItem-secondaryText">Meeting notes</span>
+      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+      <span class="ms-ListItem-metaText">2:42p</span>
+      
+      <div class="ms-ListItem-selectionTarget"></div>
+      <div class="ms-ListItem-actions">
+        
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+      </div>
+    </li>
+    
+    
+    
+    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
+      
+      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+      <span class="ms-ListItem-secondaryText">Meeting notes</span>
+      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+      <span class="ms-ListItem-metaText">2:42p</span>
+      
+      <div class="ms-ListItem-selectionTarget"></div>
+      <div class="ms-ListItem-actions">
+        
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+      </div>
+    </li>
+    
+    
+    
+    <li class="ms-ListItem  is-selectable" tabindex="0">
+      
+      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+      <span class="ms-ListItem-secondaryText">Meeting notes</span>
+      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+      <span class="ms-ListItem-metaText">2:42p</span>
+      
+      <div class="ms-ListItem-selectionTarget"></div>
+      <div class="ms-ListItem-actions">
+        
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+      </div>
+    </li>
+    
+    
+    
+    <li class="ms-ListItem  is-selectable" tabindex="0">
+      
+      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+      <span class="ms-ListItem-secondaryText">Meeting notes</span>
+      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+      <span class="ms-ListItem-metaText">2:42p</span>
+      
+      <div class="ms-ListItem-selectionTarget"></div>
+      <div class="ms-ListItem-actions">
+        
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+      </div>
+    </li>
+    
+    
+    
+    <li class="ms-ListItem  is-selectable" tabindex="0">
+      
+      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+      <span class="ms-ListItem-secondaryText">Meeting notes</span>
+      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+      <span class="ms-ListItem-metaText">2:42p</span>
+      
+      <div class="ms-ListItem-selectionTarget"></div>
+      <div class="ms-ListItem-actions">
+        
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+      </div>
+    </li>
+    
+</ul>
+
+ 
+
        +
        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 ListElements = document.querySelectorAll(".ms-List");
+    for(var i = 0; i < ListElements.length; i++) {
+        new fabric['List'](ListElements[i]);
+    }
+</script>
+ 
+
        +
        4. +
      4. Replace the content with whatever you'd like to display as a list. The samples use .ms-ListItem components, but you can place any content within .ms-List.
        5. +
      +

      Dependencies

      +

      This component has no dependencies on other components, although it does often contain ListItem components.

      +

      Accessibility

      +

      You can use a ul element if your content is unordered, or ol if the order of the content is important.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/ListItem/index.html b/dist/documentation/Components/ListItem/index.html new file mode 100644 index 00000000..9b07356c --- /dev/null +++ b/dist/documentation/Components/ListItem/index.html @@ -0,0 +1,237 @@ + + + + + + + + ListItem + + + + + + + + + + +

      List Item

      +

      Suitable for presenting a summary of an item with associated actions. Most often used within a List component. It was designed to represent an email message on desktop computers and is not currently touch friendly.

      +

      Variants

      +

      Default

      + + +
    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + + +

      Image

      +

      The same as the default variant, with a thumbnail image added.

      + + +
    • +
      + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + + +

      Document

      +

      Showcases a document by providing a thumbnail, title, and some metadata. + + +

    • + + Alton Lafferty + Meeting notes + + 2:42p +
      +
      +
      + +
      +
      +
      +
      +
      +
      • + +

      +

      States

      +

      Selectable

      +

      Apply the is-selectable class to make it possible to select the item. + + +

    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + +

      +

      Selected

      +

      When applied alongside the is-selectable class, is-selected will mark it as selected. + + +

    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + +

      +

      Unseen

      +

      Use is-unseen to indicate that the item has not been seen. + + +

    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + +

      +

      Unread

      +

      Use is-unread to indicate that the item has not been read. + + +

    • + + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p + +
      +
      + +
      +
      +
      +
      +
      +
      • + +

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+<li class="ms-ListItem  " tabindex="0">
+  
+  <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+  <span class="ms-ListItem-secondaryText">Meeting notes</span>
+  <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+  <span class="ms-ListItem-metaText">2:42p</span>
+  
+  <div class="ms-ListItem-selectionTarget"></div>
+  <div class="ms-ListItem-actions">
+    
+    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+  </div>
+</li>
+
+
+ 
+
        +
        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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the content of .ms-ListItem-primaryText) with your content.
        6. +
      +

      Dependencies

      +

      This component has no dependencies on other components, although it is most often used within a List component.

      +

      Accessibility

      +

      More details will be added here.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/MessageBanner/index.html b/dist/documentation/Components/MessageBanner/index.html new file mode 100644 index 00000000..607391f4 --- /dev/null +++ b/dist/documentation/Components/MessageBanner/index.html @@ -0,0 +1,145 @@ + + + + + + + + MessageBanner + + + + + + + + + + +

      Message Banner

      +

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

      +

      Variants

      +

      Default

      + +
      + +
      +
      +
      +
      + You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage. +
      +
      + +
      + +
      +
      + +
      + +
      +

      States

      +

      This component has only the default state.

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ <div class="docs-MessageBannerExample">
+  
+  
+  <div class="ms-MessageBanner">
+    <div class="ms-MessageBanner-content">
+      <div class="ms-MessageBanner-text">
+        <div class="ms-MessageBanner-clipper">
+          You&#x27;ve reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
+        </div>
+      </div>
+      <button class="ms-MessageBanner-expand">
+        <i class="ms-Icon ms-Icon--ChevronDown"></i>
+      </button>
+      <div class="ms-MessageBanner-action">
+        
+  <button class="ms-Button 
+    ms-Button--primary
+    ">
+    <span class="ms-Button-label">Get More Storage</span>
+  </button>
+      </div>
+    </div>
+    <button class="ms-MessageBanner-close">
+      <i class="ms-Icon ms-Icon--Clear"></i>
+    </button>
+  </div>
+  <button class="ms-Button docs-MessageBannerExample-button is-hidden">Show the banner</button>
+</div>
+ 
+
        +
        3. +
      3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate a MessageBanner component on the page: + 
        + 
+ <script type="text/javascript">
+  var MessageBannerExample = document.querySelector('.docs-MessageBannerExample');
+  var MessageBanner = new fabric['MessageBanner'](MessageBannerExample.querySelector('.ms-MessageBanner'));
+  var MessageBannerButton = MessageBannerExample.querySelector('.docs-MessageBannerExample-button');
+  var MessageBannerCloseButton = MessageBannerExample.querySelector('.ms-MessageBanner-close');
+
+  // When clicking the button, open the MessageBanner
+  MessageBannerButton.onclick = function() {
+    MessageBanner.showBanner();
+    this.classList.add("is-hidden");
+  };
+
+  // Hide "Show the Banner Button" when banner is active
+  MessageBannerCloseButton.addEventListener("click", function(){
+  	setTimeout(function() {
+  		MessageBannerButton.classList.remove("is-hidden");
+  	}, 500);
+  });
+</script>
+ 
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the text in .ms-MessageBanner-action) with your content.
        6. +
      +

      Dependencies

      +

      This component has a dependency on Button.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/MessageBar/index.html b/dist/documentation/Components/MessageBar/index.html new file mode 100644 index 00000000..dcde3106 --- /dev/null +++ b/dist/documentation/Components/MessageBar/index.html @@ -0,0 +1,151 @@ + + + + + + + + MessageBar + + + + + + + + + + +

      Message Bar

      +

      Variants

      +

      Default

      +

      Lowest level of caution. Use when you want to present timely, concise information that accelerates a workflow, or to provide key information or actions that avoid a dead end in the experience.

      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +

      Warning

      +

      Use in exceptional situations where the use should be mindful of some sort of temporary condition. Notably, yellow is the most visible color to the human eye.

      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +

      Severe Warning

      +

      Use for a situation that is not harmful or destructive yet but could easily turn into one. (e.g. You're about to run out of storage space).

      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +

      Error

      +

      Use when a serious failure or error has occured and information may have been lost or some actions are impossible.

      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +

      Blocked

      +

      Use when the user is explicitly forbidden from a particular action not because of an error, but because of security restrictions or policy enforcements.

      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +

      Success

      +

      Use sparingly when there's an exceptional need to tell the use that something went right. The preferred way to show success is to show, not tell (e.g. by navigating to show the result of the user action and letting users continue working on it or + elsewhere).

      + + +
      +
      +
      + +
      +
      + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
      + Hyperlink string +
      +
      +
      + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+<div class="ms-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. Verify that the component is working the same as in the sample above.
        4. +
      4. Replace the sample HTML content (such as the content of .ms-MessageBar-text) with your content.
        5. +
      +

      Dependencies

      +

      Link

      + + \ No newline at end of file diff --git a/dist/documentation/Components/OrgChart/index.html b/dist/documentation/Components/OrgChart/index.html new file mode 100644 index 00000000..a61c7f30 --- /dev/null +++ b/dist/documentation/Components/OrgChart/index.html @@ -0,0 +1,352 @@ + + + + + + + + OrgChart + + + + + + + + + + +

      Org Chart

      +

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

      +

      Variants

      +

      Default

      + + +
      +
      + +
        +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      Manager
      +
        +
      • + +
        • +
      +
      +
      +
      Staff
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
        2. +
      2. Copy the HTML from the samples above into your page. For example: + 
        + 
+ 
+
+<div class="ms-OrgChart ">
+    <div class="ms-OrgChart-group">
+      
+      <ul class="ms-OrgChart-list">
+          <li class="ms-OrgChart-listItem">
+            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+              
+
+<div class="ms-Persona
+">
+  <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Russel Miller</div>
+      <div class="ms-Persona-secondaryText">Sales</div>
+  </div>
+</div>
+
+            </button>
+          </li>
+          <li class="ms-OrgChart-listItem">
+            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+              
+
+<div class="ms-Persona
+">
+  <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Douglas Fielder</div>
+      <div class="ms-Persona-secondaryText">Public Relations</div>
+  </div>
+</div>
+
+            </button>
+          </li>
+      </ul>
+    </div>
+    <div class="ms-OrgChart-group">
+      <div class="ms-OrgChart-groupTitle">Manager</div>
+      <ul class="ms-OrgChart-list">
+          <li class="ms-OrgChart-listItem">
+            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+              
+
+<div class="ms-Persona
+">
+  <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Grant Steel</div>
+      <div class="ms-Persona-secondaryText">Sales</div>
+  </div>
+</div>
+
+            </button>
+          </li>
+      </ul>
+    </div>
+    <div class="ms-OrgChart-group">
+      <div class="ms-OrgChart-groupTitle">Staff</div>
+      <ul class="ms-OrgChart-list">
+          <li class="ms-OrgChart-listItem">
+            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+              
+
+<div class="ms-Persona
+">
+  <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Harvey Wallin</div>
+      <div class="ms-Persona-secondaryText">Public Relations</div>
+  </div>
+</div>
+
+            </button>
+          </li>
+          <li class="ms-OrgChart-listItem">
+            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+              
+
+<div class="ms-Persona
+">
+  <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Marcus Lauer</div>
+      <div class="ms-Persona-secondaryText">Technical Support</div>
+  </div>
+</div>
+
+            </button>
+          </li>
+          <li class="ms-OrgChart-listItem">
+            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+              
+
+<div class="ms-Persona
+">
+  <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Marcel Groce</div>
+      <div class="ms-Persona-secondaryText">Delivery</div>
+  </div>
+</div>
+
+            </button>
+          </li>
+          <li class="ms-OrgChart-listItem">
+            <button class="ms-OrgChart-listItemBtn" tabindex="1">
+              
+
+<div class="ms-Persona
+">
+  <div class="ms-Persona-imageArea">
+      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+  </div>
+  <div class="ms-Persona-presence">
+  </div>
+  <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Jessica Fischer</div>
+      <div class="ms-Persona-secondaryText">Marketing</div>
+  </div>
+</div>
+
+            </button>
+          </li>
+      </ul>
+    </div>
+</div>
+ 
+
        +
        3. +
      3. Replace the Persona components with your own.
        4. +
      +

      Dependencies

      +

      This component has a dependency on the Persona component.

      + + \ No newline at end of file diff --git a/dist/documentation/Components/Overlay/index.html b/dist/documentation/Components/Overlay/index.html new file mode 100644 index 00000000..cf65bb5b --- /dev/null +++ b/dist/documentation/Components/Overlay/index.html @@ -0,0 +1,85 @@ + + + + + + + + Overlay + + + + + + + + + + +

      Overlay

      +

      Partially obscures the page to create a modal experience and focus the user's attention. Typically used with a Dialog or Panel.

      +

      Variants

      +

      Default

      + +
      + +
      + +
      + + + +

      Dark

      + +
      + +
      + +
      + + + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example:
         <div class="ms-Overlay"></div>
+
        3. +
      3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate an Overlay component on the page: + 
        + 
+ <script type="text/javascript">
+    var OverlayElement = document.querySelector('.ms-Overlay');
+    var Overlay = new fabric['Overlay'](OverlayElement);
+</script>
+ 
+
        +
        4. +
      4. Replace the sample HTML content (such as the content of .ms-Button-label) with your content.
        5. +
      +

      Dependencies

      +

      This component has no dependencies.

      + + \ No newline at end of file diff --git a/dist/documentation/Components/Panel/index.html b/dist/documentation/Components/Panel/index.html new file mode 100644 index 00000000..37a3361a --- /dev/null +++ b/dist/documentation/Components/Panel/index.html @@ -0,0 +1,249 @@ + + + + + + + + Panel + + + + + + + + + + +

      Panel

      +

      Presents content by sliding over the rest of the application, which is covered by a partially-transparent overlay. Best used for experiences that do not require explicit context for heavy-weight creation/edit/management tasks such as settings, multi-field + forms, and permissions. For containers used for complex tasks that requires context, use a separate Pane alongside the existing experience such as a List/Details layout.

      +

      Variants

      +

      Default

      + +
      + +
      + +
      +

      Panel

      +
      + Content goes here +
      +
      +
      +
      +

      Medium

      + +
      + +
      + +
      +

      Medium Panel

      +
      + Content goes here +
      +
      +
      +
      +

      Large

      + +
      + +
      + +
      +

      Large panel

      +
      + Content goes here +
      +
      +
      +
      +

      Large, fixed

      + +
      + +
      + +
      +

      Large panel

      +
      + Content goes here +
      +
      +
      +
      +

      Extra Large

      + +
      + +
      + +
      +

      Extra large panel

      +
      + Content goes here +
      +
      +
      +
      +

      Extra extra large

      + +
      + +
      + +
      +

      Extra extra large panel

      +
      + Content goes here +
      +
      +
      +
      +

      Left aligned

      +

      You can add the ms-Panel--left modifier to any panel to attach it to the left side of the screen. + +

      + +
      + +
      +

      Left Panel

      +
      + Content goes here +
      +
      +
      +
      +

      +

      States

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

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ <div class="ms-PanelDefaultExample ms-PanelExample">
+    
+    <button class="ms-Button 
+      
+      ">
+      <span class="ms-Button-label">Open Panel</span>
+    </button>    
+    <div class="ms-Panel ">
+        <button class="ms-Panel-closeButton ms-PanelAction-close">
+            <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+        </button>
+        <div class="ms-Panel-contentInner">
+            <p class="ms-Panel-headerText">Panel</p>
+            <div class="ms-Panel-content">
+                <span class="ms-font-m">Content goes here</span>
+            </div>
+        </div>
+    </div></div>
+ 
+
        +
        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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the content of .ms-Panel-content) with your content.
        6. +
      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/PeoplePicker/PeoplePicker.Searching.png b/dist/documentation/Components/PeoplePicker/PeoplePicker.Searching.png new file mode 100644 index 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/index.html b/dist/documentation/Components/PeoplePicker/index.html new file mode 100644 index 00000000..3baa44ea --- /dev/null +++ b/dist/documentation/Components/PeoplePicker/index.html @@ -0,0 +1,513 @@ + + + + + + + + PeoplePicker + + + + + + + + + + +

      People Picker

      +

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

      +

      Variants

      +

      Default

      +

      Uses the standard sized Persona component. + + +

      +
      + +
      + + + + +
      +
      +
      +
      +
      + Contacts +
      +
      + +
      +
      +
      RM
      +
      +
      +
      +
      +
      Russel Miller
      +
      Sales
      +
      +
      + +
      +
      + +
      +
      +
      DF
      +
      +
      +
      +
      +
      Douglas Fielder
      +
      Public Relations
      +
      +
      + +
      +
      + +
      +
      +
      GS
      +
      +
      +
      +
      +
      Grant Steel
      +
      Sales
      +
      +
      + +
      +
      + +
      +
      +
      HW
      +
      +
      +
      +
      +
      Harvey Wallin
      +
      Public Relations
      +
      +
      + +
      +
      + +
      +
      +

      +

      Compact

      +

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

      +
      + +
      + + + + +
      +
      +
      +
      +
      + Contacts +
      +
      + +
      +
      +
      RM
      +
      +
      +
      +
      +
      Russel Miller
      +
      Sales
      +
      +
      + +
      +
      + +
      +
      +
      DF
      +
      +
      +
      +
      +
      Douglas Fielder
      +
      Public Relations
      +
      +
      + +
      +
      + +
      +
      +
      GS
      +
      +
      +
      +
      +
      Grant Steel
      +
      Sales
      +
      +
      + +
      +
      + +
      +
      +
      HW
      +
      +
      +
      +
      +
      Harvey Wallin
      +
      Public Relations
      +
      +
      + +
      +
      + +
      +
      +

      +

      Face pile

      +

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

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

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+<div class="ms-PeoplePicker
+">
+  <div class="ms-PeoplePicker-searchBox">
+    
+    
+    <div class="ms-TextField  ms-TextField--textFieldUnderlined ">
+      
+      <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option" >
+      
+      
+    </div>
+  </div>
+  <div class="ms-PeoplePicker-results
+  ">
+      <div class="ms-PeoplePicker-resultGroup">
+        <div class="ms-PeoplePicker-resultGroupTitle">
+          Contacts
+        </div>
+          <div class="ms-PeoplePicker-result " tabindex="1">
+            
+            
+            <div class="ms-Persona
+                  ms-Persona--sm
+              ">
+              <div class="ms-Persona-imageArea">
+                  <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+              </div>
+              <div class="ms-Persona-presence">
+              </div>
+              <div class="ms-Persona-details">
+                  <div class="ms-Persona-primaryText">Russel Miller</div>
+                  <div class="ms-Persona-secondaryText">Sales</div>
+              </div>
+            </div>
+              <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
+          </div>
+          <div class="ms-PeoplePicker-result " tabindex="1">
+            
+            
+            <div class="ms-Persona
+                  ms-Persona--sm
+              ">
+              <div class="ms-Persona-imageArea">
+                  <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
+              </div>
+              <div class="ms-Persona-presence">
+              </div>
+              <div class="ms-Persona-details">
+                  <div class="ms-Persona-primaryText">Douglas Fielder</div>
+                  <div class="ms-Persona-secondaryText">Public Relations</div>
+              </div>
+            </div>
+              <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
+          </div>
+          <div class="ms-PeoplePicker-result " tabindex="1">
+            
+            
+            <div class="ms-Persona
+                  ms-Persona--sm
+              ">
+              <div class="ms-Persona-imageArea">
+                  <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
+              </div>
+              <div class="ms-Persona-presence">
+              </div>
+              <div class="ms-Persona-details">
+                  <div class="ms-Persona-primaryText">Grant Steel</div>
+                  <div class="ms-Persona-secondaryText">Sales</div>
+              </div>
+            </div>
+              <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
+          </div>
+          <div class="ms-PeoplePicker-result " tabindex="1">
+            
+            
+            <div class="ms-Persona
+                  ms-Persona--sm
+              ">
+              <div class="ms-Persona-imageArea">
+                  <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
+              </div>
+              <div class="ms-Persona-presence">
+              </div>
+              <div class="ms-Persona-details">
+                  <div class="ms-Persona-primaryText">Harvey Wallin</div>
+                  <div class="ms-Persona-secondaryText">Public Relations</div>
+              </div>
+            </div>
+              <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
+          </div>
+      </div>
+      <button class="ms-PeoplePicker-searchMore">
+        <div class="ms-PeoplePicker-searchMoreIcon">
+          <i class="ms-Icon ms-Icon--Search"></i>
+        </div>
+        <div class="ms-PeoplePicker-searchMoreText">
+          Search my groups
+        </div>
+      </button>
+  </div>
+</div>
+ 
+
        +
        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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content with your content.
        6. +
      +

      Dependencies

      +

      This component uses Persona and PersonaCard to display people and Label for the Members List variant. It also uses a Spinner when searching for results.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/Persona/Persona.Person.jpg b/dist/documentation/Components/Persona/Persona.Person.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4d06e964d9edc210ad7646847e976009ebe99cc2 GIT binary patch literal 5650 zcmaJ=cRZY1*M0PsUi4sJj zB)UY8NDw7Ha@+gy+2z37}b0n?EpYilOG@l{=wNM08;g| zb@l}a0OIp$JpedcAmVqx;oRgzM9?0>)<}#EO4t_TD&k}9CIS@}6#;H4`M6ozI-_t9 z8p@g7SQJE3SW?JVR16A{mKBCd zO2|T?f)FuLsJIAJR76Zx2nv;xkd}i=LH-2$c{ME3P7a}Z`_EeEkplaloAUPd7WNhw z#$fG5pt7>EBBEjf=5ZZ&|F9lVUhb`984d;kKLoO7pZ7`lV1@?2N ze{8|k?Qhxtc~<|CsIC3~r@Fdc9KbJG4;%vZkKg|(>|yBZh7v)bJTRVEThw_v#|7C< zP6dmy#$m9A7>vtbr>N(E!C^ccFm4bP6$r11BN~bE_Tc-KuB|PniT1!*qis=|stWAq z0>X}tNI7X~8A&KiQdvbxS`-RZ6PJ}%fvVnyLS=7@!NkPGV1IE{F}9wrC^YUbF7h8P z>|ePTo#5(rURf1|b@W0ZZ(}j8kY78NbNqKNGXJXgCl~qeUS$83D{^i|SvQb;GdQA zb%G1iq-5l@z=a<|ViE#ka8#zw=*a`)U>poN&tAU4imO~f z*aR7Hs#2WSCcNMh5t5MnDo8*G5P{gh#871tYj!$)cd;D$z&9`s(zs_Y#mUa5flKG! z2th<3Kna*to^bRJQG{g4wx5Ex?F1S>oB`epkCXQf+vd8@08EJROIBQ%3A@%B5NojA zRQT%9NoeFnen$75)EB!3y9ZQ*95=L|x{O3n-V!W;vk4&dz+mMwAd$eZCDVemTrdrU){FrABPr>b?b1qCWU&6UMPVo#Dhr`9a5z=$+%T~U!!HCQb?e2s;W z;My2Gf#t1DiQWuC*_6!fIzC$JEkQ{P)m`yBp#$+jbPaiHJQfxMaluC_KW>N*1ienC z!kVE~?A>_X*wXk?=25lXL|G~HvHgyGid>E-2&>Q z%bY03>gdhQJ+?jXU)TK3)Z0iZo$S8JBhb}k6uzuyJMt=LkR&v}KIKhQH$JCB(WYoW z4zJ8Ae6xo+_NKI7IYl+4utnDALDrIoX@nn_$oUi|w$nl0as{sCGEcTQmss56SPtYR_ zC0gOD#%7VmEEybhZ&jUBbM|>XO_{zEG$*_cMgA>y=m%@>jqW|m7|rm4swRU-)KbAq zM0qU#@vEu)PahE(Rf@6Agu&{Y82hCHD&&i<>Yn}N%cngm4r#2Q3JcQLL+#7fKD2)N z-6QfzV;`T=-a1$on|Nm}|9Vjw5!Y2y3Rg#{kQGR~cP8A(Ms;L~9)_WK1g>xkwHrp< z<8!L!x_TpSuhf|yj~m@hIS%BW@p5KK>e+3$jHD$R7JZwh{4JlJMx(8s!OW`RNgV@A zlUG>%yRGPfXM99H#Fh_EO5RmDLZS>O%Hrc+KSd4M>4=Cll-`{D?bf~TD%oqc;}&nT@DIm1Rt@Qz z(9)=D30G@dOYzXoR9d5Hn)%EqB?H`*$*>~z`mIi6rk3IpoXCNMY`tybmke=VTSbV%6WE!;B*y|w4k zPVq`>j_IvD3s?2eJ>&^)w{YFg-8{Sy&8E>qjJs=Z`<*jMzjErYP-8@gC^lto|YUKE>BJ1!~Vo*b>KrnHE5 z4Xhyh{xiliKxpo^bKsXGHI$>jKpdQQ`qlwaRwoz5snL@01L|7Yl{0`&N<2*6gSFcy zMq%PU7J4X%bJS3zmS(CeW({Y5TfoB2*3QAD-2lip&2>gn%(%@ocLvjX4~x&b&CBYt z^uKnbS$4W74^9Rb@R_W6#!Hqu$E>~{+m+eUzy9rM)ClxJr8Ahr{mCVp^f*?Vy|%fA zO(dwQE-Ij)te|haLahbLL8O^ivQ9+2!LQ4u10x3bGVX9gH1w!LLE>Wg*RJ@LkN&-c^N zZz*y0XopGTHT&<)27#Hv`0j4Hfn&2=vZJQ%;aWrJEUd2;?M9wHcT%XLx;Yo!HKM(V zOy5vT*I`XTkMzPQ;}OZRw>TCH*9RkC__U7-)<9yglGWSWw8 zQr!~90{Y;t;gXocH!YQYomH-3VJ{^v7Mefoizl#;Hhi|X!|4PaXB}pk;f&V)UNRQR z*SNp6fKJqd6ZDIYa_q%y+1szA;QL!8M8nVv`{piNjusSrkbFYHr`=x}D`JN7zg-2t zJl2uRU8ZL`UX=7|Z4>YN(a!rRRjoJuwJFH0fxS%RZC3}oxhvuY-EDkz~H1^ zONMFfC8!{snEAfWzHoEeWf3ilfzPD2R)i)+Ws_Xn%6KYD5~yraHYZJm7UO@h@9CdL#LXk^5># zYjEV=8e{Kaa7)6=-kc>=Z(<4~P$JCM!@cCrg3-0WhjAOb#o;9`IajT5`bS%;6}OD1 zdxX1<4NG%@C0riVVqa874@k>>mz3`q?K2A>4a85Xo&lpbgDewA$v=ifu-*y8@299G z5!9d3S)0oaafCHQS$SpR^xze9nH(|bJLT^+V>02RQP6o8e1pq}0t*K4O;-TiDFYQcJto!#n1{DoSzYl61S?ZAPd-G1qW8$ZM{E=i#LaB3!bhP(6E=hdO=Q^WDh;uBR#teRs9Ek{?C-3nnvgO1Hwm zY9H97m2{)G^bc-6Eed4nH3TSg}qL|{< z8T=NhAqV&j+4M&QvjR1{Pp+z93OX0Fl=TTePB{=4&Rugzaj;ADUl5#xypFhf25|Rj z&7{-;8O=lcX>?;rL8Q-ki1P6(tBMnNcx0?%!k6N$Ndg7zn;4J4k=_PaT9Q!w*Wql5 z5QbulrKWN-?};nMhxHUgQc7wg8$u(FyDkfd+@$gjycW?FPAtOF%hLWwwQNm7#go^om<5Wg47? zZkoiQFE@v&NZc6Bk$xQ9f3VE1;vAcwe>pa-n~ z7wy2~qZ{*CEZnjybNTN- zd*(KVs+T)71NNHr;M(7OpI6^ZXKgK!o$}+SV(jyQO zFjv&W>Gt{Eo~Q)z8|tqOdZ?+rS&QY{Glx zFIEOmHK89!IQ^odKQFo8&Yb)0=4V*u;E~bS++m1tNf|D>*7UfchLL^!_va8+7ByBj z!$}>^HVz@nBzJx^^7pK!BHS(Z#)c%(Wg@CJ(O5w0G(@3!l1ms%oFgIf<}x)!(KO2-2S_#RFm?#Kc@?aoiwIPjo(@+8#w zdvJ0hJhZUT3tSA4l4-0wS2Tn~3M!QOSQL;OFf=en8Nv0y4sM5&&9};C#+hQr@dBaDbY|1-|)W%|H9~v=P0XJ z)fjQiod<{I{O06hDpNp0hY47_W7hM`Pc2QVw{d8NDRzJbp7a6>lUrNR%&&GU6t`p1 zOt^cM92=t*(_Jt+6(`9XyAwo99dHI1S-J6!KqN+dqw3vR9_BizYE*QqI=o5P>U|ts zKlr;KSjhax>%3fY;*Y@~6=z+ob!}$4sx=sSc^ct^;_x7>K}3BCrw=}aaU<0=o6ux< zwffpH`%8#ccv3kl0~(?EGje!uW6G}edj?%kbu+$5Kfhw?Q_=ig5%DHV`h;!CGXOn* zy=ecf%3zL#OGgCq081)Iqy=sb8)~IC<0qz}b!fBG=O}^sgE=Yv{ULH8GT%0?Z*g(5 zvN+WbVuW(Qt7)H&I%LG?Qg_Nl;EWkLa*r_UCG@RX6RIKo%T=zn;x`X?1`3X4s+TUw zC35v^X*W>`pcB_n#85A`Qo&|@x|LzMF%^h zZ?6xDDYNo#odJwPqU$xL``bE^#6d!%`9YV(c6FLpOqW?=gK|R_?fR_My1Wcmm(72w zaegZ{mf~<;d^=p|`)DdgKH9*bMsf4qxN8Zusnx4nB>c^6nU_7gl$g6zg3Lio(;w$x znyn!+pV)<)0%U0e2BU(Pw2)Jp?v%ubwAD`D(K63;%boj-zK$)84qffhkTosW3_TW) zt>e;Z>k6FUf@>fG4ZNReeS-KwG5P*a&~#X?7TC+fqGhqW<3#FVh`qan%@>y!MGjGi+9J1 literal 0 HcmV?d00001 diff --git a/dist/documentation/Components/Persona/Persona.Person2.png b/dist/documentation/Components/Persona/Persona.Person2.png new file mode 100644 index 0000000000000000000000000000000000000000..4ba5f7b0d6327863b6fdaa202eacb5af8ee240c9 GIT binary patch literal 15280 zcmaKTV{~TCwr-M+ZQEAIwr$&ZW7{3uwrzK8+fF*Rb^F`r>~rpqyYCuft-_ekQ?q8x z8l_d?3UcCb(AdyGKtOPk5+X`}LxX=_NRYo@+qYf2zX6uBsD`t$otd+np`$5~poyK4 zDWRmTp}DD&siBF7!?@V!+&Jx-EHmvqJe;T_}%Rdjjc_c z35`t6Edjj5*PXq@gq9|}#OkcFjI#E^rWTeGo{pxUkN%V4}i0wI~~A@`fVzOr7jp9F6}roEgbKMcH!+JDM6g+c~P(+1dQtiV7BX&UQ`~cJ_qA z%B+OymH-nwH>ZC|%gS;|0-T%;0mi11BD}_3IrL%#mWu?&BeVfd$6|F35Lch+Cu`6v26PWw0UKW=Xd`0MMA zf1O%z=mi@Hh=W{GL{PL<)$W=u!X^P*Dns@lJTP7HB8pe< zOD4;&9vI@+CBLS>3_8hcyx=aWfYFbDfDcF>fhbb3ICqu?(rJkXk#H@EiuPX@W{FeV zE1f%yD|buk$tRy@S!WB+39?fAeP}LM?JgB(Ugti!&mOI{YfnL)S@#8$xbH?$OV^dD zhy`!BVSBQgDen5~>W?0e2})`NYT|0w4%8nJ12<69#!=;85$Y}pXTgt_4hd^afqQV- zxs8*kF94UvH}{sC{@Nwp1&s9m;3;ws-t1hZJ*_{X(Mbr-)S zpWP7d%4N;&a=+?Bjq3YZA9cTK0Mf_|-`*x_$s4GCe|_;M!L)%CS1gmMi-`-=Thwhs zo)<;}sMao|*AJ!9GnGjB`i=tLs#&huV$IqX6C-jwHRhb3$iIBHW6DI7B`Xt@yU~#m zub_Hqif_CgXDiUuuoZbf&SdFEtZt{{)mB`tzwQwJ&RFSJd6=_}zcBz#smLUAp$QCBYIDHhM zF~V>kAXavI=XbW|$la1RqCi&eaW0F^I#F1Bh<=o^6uXXtu!knb891zi#c;Nr_t#Ej#vQ zNQQNq7bfb)@ z&G5eWoAZ62Q{;N8bui9sQjsS^T6Kn23*uSpR9>y~DY~Lc!LJ<47mRCI4VBMKpVVsEClgZ7sX*RA@^c2n>2O{E|*ouEKA9=CINaEIS#zOd|47) zTZJ>PjrJMgZC$ZCTDkW-?E6dq^|KdTVccc7l48V+-0n6fM+acgSFxOjEgaiX+WvL` zI~>tWTKfB>l4QUr7OJd622P+kQLCxEaAq$Kqf&(J{yb2aOL6w%`ubz$dx8J!c;&mQ zT%{JRZ#1I^hZ^f`9EFr{lT}9q5fs@il7J9$Gs{rt^*}_vglQ&nYtF)pXNfEWn?WmgnOZ@vWnkIEw`%(X4(Zhd6Us#_>q<#kl_mGsc#!*rnO%WYgB;`uiQl&f9u)rrTHK_fstUbk>Ap*ov9b z^eVdK29bc4cSK}e+aFuA2)kY-j}_>P>Lh%+Fb3obY#pn{ii;XojYxywndaqYpQTlm zas^B=yU&a2-fx1>Y@F-f#yP91P+#G4i5mru3R=)jKn@4_zz`}5?)LI7Tq+sHjR+Y` zvO?9MVf3hZ{5ku_QgZUbNJ_~w{Xa%!82R*B*`Alt&W6s%!qtI86~}0HKZ$%%2rqft zCrXgf*IxwF$x{mRJbDx^6V=P@HXBHGROONw{{zVYd%fBFn)@~KO^6ev##-jBbZ zst?NrxcI=Sg3$zdOIp>h2Ay=fZgiR_MrdfBA>+(J`*IGDc||MNlGrnLz86Xl7XJ zCJ+M!+b6@0o-aZ&)cGfpEc={S&-c|CyruyCWYRCT;lQ~6ovMPx&I?B&GoQr5n ziwsr&O38@{V!Z>i{gGZbszm3@)XycNdJbu1;L`*nmg!qODu4=7E%8XW`g03F)Kx|wi>GT*bBopRD?fTu9?RPixHKxS<00PDa z{D+KlRYLLiib4^kbS3RBAK{FYC#iLSv;rxZE(2W| z4J}J{_pfgLcPl-hfFigCE7t*d%Qx}fG*%iO$W@H**@IVNBfMx`tA)y;5e&W9q!ePw zE068omqh-xPM>F$(ycq5RH#{~9T(vlI05jG1CPUo;6Pb4^p;}BeD2BTVgd=V`m)~? zb=$d2ftvaMTZDfYxq< zVU9~F0VBv#02t4$qtkPp9;a+GT~Deg7Gvv?|TS( z+Z&sDR;=DTbagVKzkV3Fh6oqL#Tf;RqQC%HKz7vqao&HZga!&Ifjx{qf;vZhojcB8 z(8suq?fv1Ix>o_3mOV!0%#z-1$Elq9>c&~w>7Kku%n7Ty5awM$0a5?rXw~uN9WKIX zM33B4O@`vcK3&oxAFq;mjNEZYD%*VGA@?qJvd6^Vt&e zRvaHuMj%X}77nC@WsxMRaBKqCOxT5P2WJe|0jhxc&8N|xDJbHrhR(k2cm06js~cc~ zR$gzQO7&tCcdMA7H5usphp9mHL2#ao=OA~#nim;DX6io*KXJ+HxvpoFn1S)yZa|TV^U!7U}2wI)J?$sDHHXDKKKNn(Hz zKwyyl(s2S@u{YTzwfvjB&WD*sLfqasiJtY)VxS~F8-)jW{)c`$KI}Lg_B;a73ya~H zJ!bVIWkC=`Gq9&EI>A&BUy9_k$E*?htKy~URT2ErywxGS%{(GHKUNH$ZAP>Lr-v3P zSs>X8kLZ|MgYtc+3E+nIpuK3&zZ3wwc$N9s>NCD)kS-ul!xMnfFSak zE|#A$phGsE@mdHbEv@HOEu&IYFCUyyf5xyWPFxb8eIh#UoPP1qWh@!zBF-g(?;%@8 z2P(5C1r=O?^(zWg6QiO#V^^H}^A4Qu2KXbktD?8%DJ14_h{Vs(00<`yCLh?NE#jz+ z>bTtb5P{@=o$M1&xnfwA%kDXh7oc*DH7+^?<-!cT$cBj zgn%9uN=@&3+?vI~f=;M{{+WY~8fuG+KR@!_Jrs@7-wkojlAr)3b51*^|3!ca&&Y8w zYoz^m)+g8⁣cGfU9~;J~5A*B%w$ib%n^BT(EVv3rE~gwkBh6pc9~jqkqSPCz}}R z*7ir4{~(sNHFjT+lM|wXV|u@#;#fVTFxhko-Hnn;bw@CPG@=1X!ET5phmYYdP)0gl zZGX?43#@{;j%6%qw*)pVQabfFG7#2uE;*1fXbtHni|m27PC8E2q_W}=r(+!P4p^J| z8QzHUQJ7#M*gQ}Wt)qsknEE>?=vyL5d{LE4yn4EoAX&fw?3pm$x6!&yP5>#mjE50G znP470hN=a*eK`j@Ph;T}u>rEsA9UP1i&;`B3oozGHiuT0Ig4?ES+^*uk1~QWqGFz; z@(vPt`K2AY@vA%WHsZ&7e0 z@Fx%5IH6?HeBPbWxs$;f( z2FEzGKK!X%^9#1;S>TG1t8IYBw9}VHDMVYkKM@Fk;sCd6J>LZLRrhF&G0FyjbI}JC z2xJblxvDT--I(eg%Ma!|S`2~Jmz^3Dx{NhGvQOpDR_aciXs9Tc5q*>_Ham#XSA8%@ zNkAIduCfqV*~FQnpP`{XQ>SICiLn>MEEYyrBw};dQp3unatKvvl%F71xHn!k$-D|B z&sqR}uov+DtE~-|L(y~)gKe;mXQE^#99MxHsaHTC2jUzmd_1@NYKQF%q)<4f( zcj<{EscNYzG#ObOvg$H70x#XqwK|@sel8DNy&u<~11P{4O%2-YSq?fvSKa2yHh zryQl;w0jm4)Jag_%8kX=%y!C5HkA(3n{6M2AllQ)KUGD4T5(aEmeV(EI%#I5+&-c9 zrUO=EGI(ptf2))&{LleUE2i8J`^LB_E+mA7b3*Djf5n96z&xMY`l|NQw(IhHUtfk4 zy1D7yxI+}qbmW)PQUC9x^;Ja+@3yHzt;1r>uu(jbiN4HYh7`_ zx)^Q;#Evy!1;Y*AgGGid6eWVv6UW{TmmeiNQP}BqHhl)!eLwxwH>>!hg0x`b)kx<5 z+gHJaNx`VOlkfTH_B$GzPy>a;k{?x0qRmif9YFP$VSfl%jlF9+n0oPthqabY+jAux zx%N5A6VId4WIvTJ6-U>6Z>}9+aK1MD+L+>By3;JLCPTh&pH%x@+n(>|uV-pgRpZ4eA zZjolCm8FThC}HLDM)OO8k<;7d*so;|=PJ(2>8x#Ns>MiUppnX(;m`Qn-?!}YMQ#LL zJ|k_0m2>l`Mr=+8!KQDM5q@Vcx6R3DWc_{H_PxFD)63I+m~*8@2R*mg(o^K@iN1b~ zTL9_pMa>FnU3(~*)ac_@2Hnpq9QLm>^`4@gUSIPh`dkitdGg-p{LW=4p>#QNca6mEp)b-@AN&rM}I2S4-Y^`LH{P~3R6dH$`G8D5|K4ZY50uj~EJRK7O$o}XEy z#R0Xc!<=4clX84r4eVN0<(HSb(9eYThR1J!!cHFitDQH4dkB6{JC?=UWjP4??KG6Y zAT?g^lj0qY?#<6?b5%afiz_G1Gt@pUc-xo`3IxEGo+X{=M0Vfu04-;lIhC(vfy8DH zbG@dDphL2(+uF9oO(7T`=ee3AF5;I?+q2!~`g&~dU1u)0$MIsdFW0n(p^-XgcH)Gf z`1aPi_pO)R)_U&8W$!aVkHh^kxB9mA4I|dG-#0>!_v8HIwePq1Ijy6|_}Xt5isJCj z?wS*bTazlM*P);0@@5X+b%2HNmaPt

      baB6ag z;I?~QyN#!h7REYQa^=btTdU~P3T)qLZ1MW`LKBWlV)&`a3KpsQMUSd#s@lE=#yFNe z7p*$R{5LZuU5XZ+3+#5bwpPfaxV~0-&|Cq~@wZtH_kEey@K*r7=1uT?zO-Yj#vN+` zisGk8BplL02g`?$zkMjTbRlT3KKdv+u~a=py7pLZatfdOJKao?dG7b4K8JY=q-4X@-&L2c6@j%yHBclx4KxSCm3U#d zN#)KAyqIArOk%zQk7Q}kW|0{QY|q{642bja%8u3B(ay_-(oa}TU++zVnp*Mft98Nv z2x%u0!6eMo1(7hkzhg;e(TW>Hrs!3uFXaSCsaIRJLh>9HYq2uoa*!WmHWAQR7PC)=U3`?P_u{rC&NUM`Mi?U64J6znJVsOW_7Rz<5>4BOlI`c{N3<) zoxR;vY)T9s4h0IK1~NA%rG-irge=wKaQ%T|<)uH#@Y>T>*h&csif3XL_Zo+l!PX>X zdP+!OO+&-nc@?)c9AdvB{Ol8AH3p~f#h7jubk}5Lh9#R|T;y-imp{_ELMT#tC)H(C z$$zprrazKnWlMc+S}qiIFBCqj08eGmjY9`|al5!XAnHlb{T^*zDDj5_)p&7c^C^s-~?I}eKViLikVqwzvgE zj3jfE{H2sRqbQA|c{=el>T*$#5s?9mC^41N60RPBi(?4H zPHjP8x77uPE<{fqHXOOdJjOI1YMFH@n|j;)x5?v~GWnh&Px5Bz<#KUH?>LPbEsE)y zT<*`l=vKD(PX?aerqn1gtyXM9DEk0pcSER8V5U(+M?yNzrLG8KXVH`lQaRe~17i_b zL=pxiUc4Bv<`SwGagJG^#N}wTWIub`TSx-;9`W#-wNY5I-r|JpZRY0ijQMBc%y3G6 zC|F*opk45anw|<~Rub;U9ODYQ1f}-&F^(R&?XZXewqD}BQC`vHWl}+ZManZH5;-kQMrMA7wdxIa z9K%IGYXRYCliWg8Q+75fVIbAtrDBKO2%e2LHr>PCWoADNTY-zB!opaozaR^+35r>u z)~-bK?Pl9$2&yYcIEX6=?linxi%{txqC6Lm1Hkg~5<`oEp~vmpiGc^@%Df&}iLz=y zF2G^NHlchy1G#@57KG-vW=7ke<1HVF{7(2XvuH7GPl4pRR&P&_?&saB>`wNY2^5OX zt(r;~M1g}6xp-(O)kFhJ)g3H#KA}I87GR+nCILo$^9@?OrW{9ggW~L8AGlbejxtUU z=`PjkLw&Dl@s}@-XX|^k(wC@S&-HFP*d8t3Bd_v24OAiBN43ungRZ4weMbI$_fN7u%R6wf; zBeY*_+YnjIjAO;)4YBm*)7{y4cwXml>dc=6rW574yb2AgWDo^K;RFNktJBvmw$If( z5CDwZ`1qziU%T%fd%|U|p8M6QFSCSZm?-<@t(Op+m@+joEIot+)RtX4cdb7P<_j-tm;N zeCib0r6;4FDTE&%5jgK&nkJP8o2+@KLmD1)Wh7RyDeub*9r70(lo#u9kL_wjtxT#vKWb|;*%riVkR(#}l_R_*HP zr{gF7x5Do|Zoe<#nMaC+FMAHm*pY=(Qb}d+;6Nl>`my~DZ$rD`(xwrIy z;FILBSTE14`t#3DY9+`g$t8yu+?g?>l3Y!3y-)PN|BP>__qCKArXI!Qd{pTpe4> zX^r<)! z6ax50MD1a&P~;m|^m{LFv`-jpNRPg}u6zBA4xFLkkgkT)Q8qRRPX^|17lQw8S7M3A zqZh}mgTbW9_639;D=C&50e<9p^EtdgMV}vlsoWk9iR}#W<%RUvluCK06;yd{LavzW zJ5YKIX3&)SEg3G%Uw@v}&**)vEg5#9hzP2p7J<}fFN3G2$&m-`kxDuSXOO9{M?H&6 z?uAcPf0}5$`2Li2w%X^IAUx;DQ3=`*nQEsVEk}_^)!}fGC9MYW9^^wnKDlwW3(V`+08g7#HV}gz{v5sTG!U6E2z7R zzu^r$x)HzWa>zgkGX}L*ASU{Wc1OEXcpF@>vIr^&(i(R-fD6zbF<2Lsi%NghQ{r$) zcoTFeSekf9nw6!pm*-ex&g`g>ug-C$&e?>KMMk?gu`zj(K&doQnaNhOGuxFKSXg8* zh?F6F{Jx1GNRDdsScog7qEq@ce}bh7V9W7%I?LRd6;)LdTcwxDky(gmv*KWOu#)1GrD2FvH!TqHfh-VVwhfEoqS{gMi_z$l z$IYMF`*JXy@j_4&^G2vm=2a5idY~jchIOKfSSl7c_QF4959*JrY=tVSb#-3j zW>7@`PBT$%UVdQcb=VpUdd|4}@%}`}4~pGgT+#Ft4x4mEvWQJ?QBid1SaNDUZ>^6p zI`>FAvB*qG6}j#D`u8ZTH8B;VZGVI@m}6RiwV{i`!m2;prky*0dn{DO9UK>)Kzb(L zQp+M19MV!Is;vmNEGp%^L|V36fE*mriY>ObTBN$fQ0@vyA7~(&Bk@|dqh%4%+FZU- zz=FaJ&&!f}GPy0s;^B|plrSA%dvm92gVKfg-1la4oJ2huSeEG3&X~(4dRctx;A>kU5MdW* zMOjAf3#fae+#0?--ezmZ^L%RJ;52w1 zI9l#!(&k)_J&v!1krl~#bq$Lal0tjqB3+vA*`c!G07Nyh`8ZnhA7xN|wR~9J0+z=1 z6HTACrad6<5=soNEWf_2hq<+!4jESq35zcpCWMW~5zC9fLDx_DO0_KC&cBFlj|4oz0}JTL(K|=1rYfZImUh$e zbZN*cv3G`|OgHQ-E25aK%v`(jJgP>U!xL8pA=OyA$X(LShl=<`WnA}F+_y5ZDE z6N+FfQYqDmDS5S zG6(YGt46{oeSysxBB{d#XQEAV7#^5$O*IdBC&mF(CWV&dVJB=1{Z--vx>Phn1z5KD~#%myhxR}A<@l)om5gO3NMRj;iyajgK=CrswG4dcrj zW==Srs#po0CP~mJSh5;LVy$Xwyi07NF|&p|;|t8W$5i)8`RnMb269f2`OY9I4wpdV z<@kX|Fn{!smEpIi9GUPdaifF=L!o&?%QxdW6UD$SCF8RtLtnJ?iikI8cvEHU48L3* zxXXk)EpX3PKhrD;0KmQLMSF-rZ*dN4%v|<~5%f^Jy{?uhMpEF;7V)?ZBIGT~s7mumO!}nzMq(E^E z_VWv#xU*)%X!=+7$DCQD;8Y>rU1>1fusv=Ut=%#v%`M|&#S(wtBN`memwp`MZK z<3S>-({&#wuP}7KRX=~Nec#1u_K-z^x->mcptDPJuV42c;~o`?aa?X2{H)G`I+}fg zCg4M~RVF}<;c1D-CPEDqXNc-~Yp(qsdhUs(oY-T5yr!xt4`FJQL8%9DNj7wMH|^wJ zUEy9_;@Q|<%8EIFC!kOig}NF?(9ZN#k4Un~{v`4Nht^v4G|WHfqvtUwIk5Uwu{b8h z{kE+C@tS=8Oi1f!v>Vm_dKi2I#T(JoFmxM)9fVGCAW6A-MKfF}YZOtqVT!0YbmyJ1=#kTHSaG5N}EZDm^2Kl@QqZRk4;}HgYe1< zsdlyKFzcaH#f#B`()wAD5}37m(bcaQM~y9)C^_xU{ISm7W9J-NMj}0II(IZV)6jnl zy~k~-6g7fUMhj9-h#C?YbeEC80a>Q1(YKS@6e2(&^pHywl@HaGWXgzzMr!Yy7_V$0 z=MWCn?awA#?~!6S9F*td*qna$Fy5S9a-Pi_3K@5?!Z&YeT zmOX?uIKL@M}iUOn)bmg2KpVHqQuoS%a*C zazc&(Ex+Dzg zLgLb#DEC-Nd#eJ>V3mZv^EtMW(NQ5;8Fg$~5kej0PtM}q2Xc3DqpF!OXus(XaoP#k z4L}DM97qOEj=~cK##lpDNS7Thbly~7BcwDQe^D~>_tZ6ORq5Z}3XJ6D)_zalxTuya zd3sKqV8<6~_$}j|Z?aZ3ZT^!e(nIRG`j1<80Harf3)<<6Mw~vJDT-p1#LPx6>B=MWrJ< zh2P^Olw#}tB!yQWB;V#TDyC?}!({eK@-=V0@ZPGFmd50F?Y>bw&9WDr+V$;sAc*cr z5!UQ-T`09N?aMj8FZUEoY==jtTubheG1&1RHs_Ride|5mR69t{^gmg1QJr(A&Md3r z^Jb0Vj0G9~%?|RCBhpxJ0e8HPaQ1QV50l%;D*mW)Eyh?-G>zR~=ltC+cblmhH3BR@ z@Uo<%XK;bGax4%{R6`JM3bi2p)uR!OU zajQ{L(?)iw{0iV1Ts`yRcRzSr>U1rf65Dlayw&5M64zX(6DBVopqExgK;nwS5VX!9 zu5z|8hem2s1D-&w(NV*pZ(CA>g^m~I8>=(Z&PjHeN|>P5Xql5&>v}t0+W7HlZB8#B zOKxdY7M1$!be+w9)$=<2+55WUd-9-ly{grUg!V}Kyia*AekpxRX((o0(&udMP?f&9}uI&o~QxZ zod3Xily3Tg;aNe|UW^nQ!h$y<+*|%Tm4^U969(eiB9=Y~XvklnozFwzMQpvVp9^3w zmH9!%c5UZ-;DvGYRvQv+Tw-q|3$;B-b%3O=spWAAvBTNyd4_YlF_WYH_YA=}m$$K} zY4bN13*0r@aw(FDnoB`!RivuZh+MV%Vb2dpjx}gAgsxFB7TgS&S zg73qnI(@7~ZtyH1EW==orjp`%Cnax!JLo}!8>$?I52xbX%XTV^yGWY?pz^~2sg6|1|YN2z2%1gzYQ z-}h3U|9kUw=RKPthjU4}rfy*;ut8GXoYhKTWjBJA?Y<%?0tv3jQfT_`X25YDf`0es zaPs*^<}-QFYN4)wStjyumL)Vo`E3Bs8W4$x)pOrewnCG|Ro!g)Ep?bUKU66KXG3%;qtI==+LHkMBB&rSBJ z$0sF3$>Y=vw3c*A68&6rdKyI91=o7`=Xn*5*W&@(V)x1gOV)ncUtd$jnHc=;*CFO? zzR%LVZx8LtIqGm2JnLkl%U)oZR;WeY4HqvB%?!q>*>4BI=V{eGpNSLK-4ElLi7Lel zeP#S0{*k|Pt=!o~0TIw5FW`Zs?!UWQJL;V;9*%?Dt{%chGN@rS_^wifm~ycROj(oD z=lF{0UrB2$4#)&T@nghV{Gv{<$WD=XSJyl_1gCh?Nwx`O-`^9%v_CJa_qw}%uQxGP zR^-6wt0V;(MYU#AG#oN0%8eTcFSud~j`>Dz%Loudcgfq^8kg)Co~2SRZ4r9Ew%8f; z*S?ZZa^CLjczupFDz~iGvP&%`l3{)udj>8qCb5he$$q%W4YQ) z)~HmjT|B>QV6G*dzXLym98u;nW=Ja7Vv^+lxGWAT1G53i*U6Bj@X{Xm{G98){KV1T zxCuPT_4IA_NpNNI=Su-(nYfbFMz!#u%{QrqA8vR&49-sf5TnTNWs|(C-q42A?>DH= zvi{|8aQAj>PiDdAlpzRBN*QX(gCRh`Nr^0=clpqw~6G0H>Os_<=SX-uTl%r6r@CJvzwMq_cGN zr+`e7bRGyiPq(&hdyxT&y)D?|CY3tyNF&t{H25@C%sa%uWstj@pZBwYyD_8g>tt>7 zdMS}XC@8@P!jfr{Au~*Cw=KQh#PG9SXpcTDN?@KY6OXwV|7z)DB zCdx9(G+SVP>cmASi+jHHc!k-R>6q{UqZ;$fOkGfoYD=DMD|2(JlsA+eh61+79ZTY@ zCHQkky*iefJUn@ut+pyN(R&^B9@b_i09!ij+rU=P7{Kq&o{?G6%i|!uZY`XPnaLsN zEdg1OcIa~LvZn$Q*(^SA0wohdBaX}8Z9FfaaySvnwsIy-n?ose%(;PoGi2uUS^WEX zrRVvqxUzx8IIY(df!@@SOh?f9pzlzezuWaONIQ|kNn|j=l4tv%IJ;-MRD<<56&oiZ z={Y|w4qgdYLsNoFMfFITkaEc{>MhsnLHiRv_dCWJ!a@Un>o5NZA?f2udynVQ5vc%N+!$YGlHvY*r#F#X9jN6{((I2hMun7^SV?=9ex{U zHU(QPM2U$rcqkYLsFq3bRw&%=ltnFe9R7i%cu2!&1P=~J)1&GkIy9)CpLtvnR9fzd z=(SEqSeU#d#u;IrT)ku3O{#wH)A*3}JH&gywHe|gX>-0ppG~sfY6=-8%w;0WR06Fk zKJ0WWPGs6^Z;fDfBcLhh3Rz$=|0!Cbk-Kt?X zs0GE6kZ1VgX(c_6wCU@zN2oGUvLiL;#Vt9)(dUX7YK(lV*6vftqlKhK##e{T=2*6G zBrnSr?w@?Wj+>tWyo)A18VWkBuKVpE)wb6@W;oK)9QrxdwzvCOAq@JnYAxg%ggL$bA|QGW>40f@$p z%z!KpE?J~i0rsgu%NIDZ4;?f>B}xAUstEu78>*D>c(Fa#+(>p18X)PgufZNznYeM5*Bi^hod9eW#VZmeI+HatIAd4U$S}Cs$iWGNgQTt&uQA55 z#8jRhfqfesizwaU!i(Js$r>a!C^o>rW>Ko8`PRLC$7$}og<<-O5H)}tgG9n4uE|pp z(*g*Q*WSWF>PDkS1a}C%#c}2&%HaoT8fN#C5jrJtQF6WR$ zUTWx;C8W(!N?`35@;d!qgT;u3RuRP~<>b$7_$T*J#?FH_S@%3*{2``Ibt-lQ*O6gB zbFR_l`jw#h_ZFNUD-gGH<^k1Z+ZFYXUxHnUt19qeI5&M#Kdq#u(dy6-2Mmcs2~-?_ z|Bl|xsH|I0N;6bX43{a3kwzIk{cB=kk@4!vXtx@3ft;s0Lsv1=)e;rM*Oh^7yo!|y7}(*vir8;D#j z@M>m{Gze^0+TdO1V1ipkc>(^FwQ}JM_js%%otpPS;a1@{0$DbDmc{#;Zq()Tyscer zteZtlaNX`|C%S3_qRZ5UHb0z&%G>9JcFPhYZp=u_hm9{&dTYTV7?nNb=@-}Ib#CAV zg1pM@b>%ek^+cfO{ho=@dppB^y`=(d2WlvhNlTbP)}fV*MwwCny+3cG)0cMZzVF4N zBgV}s)X762P(Vyj1oHwy$tag5D^|RnbLgr!3TSI!J^I)7!)sfan4E!f(M%Qev2`(5kzHlM5C z{n0RziIMX;UyZPR2?Pv=Dys~Xb)S+jW#+HHXU2RGRl0`Q0Rpi7O|UC29qewIrMn#k zVN~Aj+2XT5`G(Q^u#C|A`StuQ6SVEQ#eLo5_gNiDk1{0(V}q%2yo&UvOX3E%KBoT- z`%EPinZ@U7Y&P-_f!BW1oYrB;EIkj#S%*aaG`DHIX!L>MDzjxj%l9`JCJ@$U>abXK SH~l|%XeCAEL~4W#0{;( + + + + + + + Persona + + + + + + + + + + +

      Persona

      +

      Represents a person, complete with a profile image and additional details. Where a profile image is not available, the user's initials can be shown instead.

      +

      Variants

      +

      Circle (default)

      +

      Six sizes are available: tiny, extraSmall, small, default, large, and extraLarge + + +

      +
      +
      +
      + +
      +
      +
      Alton Lafferty
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +

      +

      Initials

      +

      Don't have a profile image for the user? Provide the person's initials as an alternative. + + +

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

      +

      Presence indicators

      +

      A persona can have one of seven presences: available, away, blocked, busy, do not disturb, and offline. + + +

      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      + +
      +
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      + +
      +
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      + +
      +
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +

      +

      Token

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

      FacePile

      + + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      +
      +
      + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
      +
        +
        • +
        • +
        • +
        • +
      • 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
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      + +
      +
      +
      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
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      + +
      +
      +
      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
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+<div class="ms-Persona
+">
+  <div class="ms-Persona-imageArea">
+      <img class="ms-Persona-image" src="Persona.Person2.png">
+  </div>
+  <div class="ms-Persona-presence">
+      <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+  </div>
+  <div class="ms-Persona-details">
+      <div class="ms-Persona-primaryText">Alton Lafferty</div>
+      <div class="ms-Persona-secondaryText">Accountant</div>
+  </div>
+</div>
+
+ 
+
        +
        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 (such as the name within .ms-Persona-primaryText) with your content.
        5. +
      +

      Dependencies

      +

      This component has no dependencies.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/PersonaCard/index.html b/dist/documentation/Components/PersonaCard/index.html new file mode 100644 index 00000000..b0e3826f --- /dev/null +++ b/dist/documentation/Components/PersonaCard/index.html @@ -0,0 +1,492 @@ + + + + + + + + PersonaCard + + + + + + + + + + +

      Persona Card

      +

      The visualization of details of an individual including Skype contact details, email, location information, and location within the hierarchy of an organization. Within Office 365, PersonaCards often appear when a user hovers, taps, or clicks on a Persona.

      +

      Variants

      +

      Default

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

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+<div class="ms-PersonaCard ">
+  <div class="ms-PersonaCard-persona">
+    
+    
+    <div class="ms-Persona
+          ms-Persona--lg
+      ">
+      <div class="ms-Persona-imageArea">
+          <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+      </div>
+      <div class="ms-Persona-presence">
+          <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+      </div>
+      <div class="ms-Persona-details">
+          <div class="ms-Persona-primaryText">Alton Lafferty</div>
+          <div class="ms-Persona-secondaryText">Accountant</div>
+          <div class="ms-Persona-tertiaryText">In a meeting</div>
+          <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+      </div>
+    </div>
+  </div>
+  <ul class="ms-PersonaCard-actions">
+    <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
+    <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
+    <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
+    <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
+    <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
+    <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
+  </ul>
+  <div class="ms-PersonaCard-actionDetailBox">
+    <div data-detail-id="mail" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
+    </div>
+    <div data-detail-id="chat" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
+    </div>
+    <div data-detail-id="phone" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailExpander"></div>
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
+    </div>
+    <div data-detail-id="video" class="ms-PersonaCard-details">
+      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
+    </div>
+      
+    <div data-detail-id="org" class="ms-PersonaCard-details">
+      
+      
+      <div class="ms-OrgChart ">
+          <div class="ms-OrgChart-group">
+            
+            <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    
+      
+      <div class="ms-Persona
+      ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+        </div>
+        <div class="ms-Persona-presence">
+            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Russel Miller</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+        </div>
+      </div>
+      
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    
+      
+      <div class="ms-Persona
+      ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+        </div>
+        <div class="ms-Persona-presence">
+            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Douglas Fielder</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+        </div>
+      </div>
+      
+                  </button>
+                </li>
+            </ul>
+          </div>
+          <div class="ms-OrgChart-group">
+            <div class="ms-OrgChart-groupTitle">Manager</div>
+            <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    
+      
+      <div class="ms-Persona
+      ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+        </div>
+        <div class="ms-Persona-presence">
+            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Grant Steel</div>
+            <div class="ms-Persona-secondaryText">Sales</div>
+        </div>
+      </div>
+      
+                  </button>
+                </li>
+            </ul>
+          </div>
+          <div class="ms-OrgChart-group">
+            <div class="ms-OrgChart-groupTitle">Staff</div>
+            <ul class="ms-OrgChart-list">
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    
+      
+      <div class="ms-Persona
+      ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+        </div>
+        <div class="ms-Persona-presence">
+            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Harvey Wallin</div>
+            <div class="ms-Persona-secondaryText">Public Relations</div>
+        </div>
+      </div>
+      
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    
+      
+      <div class="ms-Persona
+      ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+        </div>
+        <div class="ms-Persona-presence">
+            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Marcus Lauer</div>
+            <div class="ms-Persona-secondaryText">Technical Support</div>
+        </div>
+      </div>
+      
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    
+      
+      <div class="ms-Persona
+      ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+        </div>
+        <div class="ms-Persona-presence">
+            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Marcel Groce</div>
+            <div class="ms-Persona-secondaryText">Delivery</div>
+        </div>
+      </div>
+      
+                  </button>
+                </li>
+                <li class="ms-OrgChart-listItem">
+                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
+                    
+      
+      <div class="ms-Persona
+      ">
+        <div class="ms-Persona-imageArea">
+            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+        </div>
+        <div class="ms-Persona-presence">
+            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+        </div>
+        <div class="ms-Persona-details">
+            <div class="ms-Persona-primaryText">Jessica Fischer</div>
+            <div class="ms-Persona-secondaryText">Marketing</div>
+        </div>
+      </div>
+      
+                  </button>
+                </li>
+            </ul>
+          </div>
+      </div>    </div>
+  </div>
+</div>
+
+ 
+
        +
        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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content with your content.
        6. +
      +

      Dependencies

      +

      This component uses a Persona component to present the person, an OrgChart to present the persona's position within the organization, and a Link for navigation.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/Pivot/index.html b/dist/documentation/Components/Pivot/index.html new file mode 100644 index 00000000..b6ce707f --- /dev/null +++ b/dist/documentation/Components/Pivot/index.html @@ -0,0 +1,207 @@ + + + + + + + + Pivot + + + + + + + + + + +

      Pivot

      +

      A layout component that allows a user to switch between different sets of content or filters on the content currently visible. This is in contrast to a purely navigational UI element such as NavBar or a commanding element such as CommandBar. An example + would be Read vs. Unread items in the Outlook Web App.

      +

      Variants

      +

      Default

      + + +
      +
        +
      • + My files +
        • +
      • + Recent +
        • +
      • + Shared with me +
        • +
      • + +
        • +
      +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      + +

      Large

      + + +
      +
        +
      • + My files +
        • +
      • + Recent +
        • +
      • + Shared with me +
        • +
      • + +
        • +
      +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      + +

      Tabs

      + + +
      +
        +
      • + My files +
        • +
      • + Recent +
        • +
      • + Shared with me +
        • +
      • + +
        • +
      +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      + +

      Large tabs

      + + +
      +
        +
      • + My files +
        • +
      • + Recent +
        • +
      • + Shared with me +
        • +
      • + +
        • +
      +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+<div class="ms-Pivot ">
+  <ul class="ms-Pivot-links">
+      <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
+        My files
+      </li>
+      <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
+        Recent
+      </li>
+      <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
+        Shared with me
+      </li>
+      <li class="ms-Pivot-link" tabindex="1">
+        <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
+      </li>
+  </ul>
+    <div class="ms-Pivot-content" data-content="files">
+      This is the my files tab.
+    </div>
+    <div class="ms-Pivot-content" data-content="recent">
+      This is the recent tab.
+    </div>
+    <div class="ms-Pivot-content" data-content="shared">
+      This is the shared with me tab.
+    </div>
+</div>
+
+ 
+
        +
        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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the name within .ms-Pivot-link) with your content.
        6. +
      +

      Dependencies

      +

      This component has no dependency on other components.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/ProgressIndicator/index.html b/dist/documentation/Components/ProgressIndicator/index.html new file mode 100644 index 00000000..4baa9b94 --- /dev/null +++ b/dist/documentation/Components/ProgressIndicator/index.html @@ -0,0 +1,139 @@ + + + + + + + + ProgressIndicator + + + + + + + + + + +

      Progress Indicator

      +

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

      +

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

      +

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

      +

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

      +

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

      +

      Best Practices

      + + + + + + + + + + + + + + + + + + + + + + + + + +
      DoDon't
      Use a Progress indicator when the total units to completion is knownUse a Progress indicator when the total units to completion is indeterminate
      Display operation descriptionUse only a single word description
      Show text above and/or below the barShow text to the right or left of the bar
      Combine steps of a single operation into one barCause progress to “rewind” to show new steps
      +

      Variants

      +

      Default

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

      States

      +

      Active Error +

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ 
+
+<div class="ms-ProgressIndicator">
+  <div class="ms-ProgressIndicator-itemName"></div>
+  <div class="ms-ProgressIndicator-itemProgress">
+    <div class="ms-ProgressIndicator-progressTrack"></div>
+    <div class="ms-ProgressIndicator-progressBar"></div>
+  </div>
+  <div class="ms-ProgressIndicator-itemDescription"></div>
+</div>
+
+ 
+
        +
        3. +
      3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all ProgressIndicators on the page: + 
        + 
+ <script type="text/javascript">
+  var ProgressIndicatorElements = document.querySelectorAll(".ms-ProgressIndicator");
+  for(var i = 0; i < ProgressIndicatorElements.length; i++) {
+    let ProgressIndicator = new fabric['ProgressIndicator'](ProgressIndicatorElements[i]);
+
+    setTimeout(
+      function() {
+        ProgressIndicator.setProgressPercent(1);
+      },
+      2000);
+  }
+</script>
+
+ 
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      +

      Dependencies

      +

      This component has no dependency on other components.

      +

      Accessibility

      +

      Focus styles are included for all of the actions included within a Progress Indicator.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/SearchBox/index.html b/dist/documentation/Components/SearchBox/index.html new file mode 100644 index 00000000..d49449cc --- /dev/null +++ b/dist/documentation/Components/SearchBox/index.html @@ -0,0 +1,140 @@ + + + + + + + + SearchBox + + + + + + + + + + +

      Search Box

      +

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

      +

      Variants

      +

      Default

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

      ---->

      +

      Collapsed

      + + + +

      ---->

      +

      Command bar

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

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+<div class="ms-SearchBox  ">
+  <input class="ms-SearchBox-field" type="text" value="">
+  <label class="ms-SearchBox-label">
+    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+    <span class="ms-SearchBox-text">Search</span>
+  </label>
+  
+<div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel  ">
+  <button class="ms-CommandButton-button"  >
+      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--Clear"></i></span><span class="ms-CommandButton-label"></span>  </button>
+</div>
+  
+  
+</div>
+ 
+
        +
        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. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the name within .ms-SearchBox-text) with your content.
        6. +
      +

      Dependencies

      +

      This component has a dependency on the Label component.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/Spinner/index.html b/dist/documentation/Components/Spinner/index.html new file mode 100644 index 00000000..11548ff4 --- /dev/null +++ b/dist/documentation/Components/Spinner/index.html @@ -0,0 +1,110 @@ + + + + + + + + Spinner + + + + + + + + + + +

      Spinner

      +

      Displays the progress of an operation when the percentage complete can not be determined. Do you know how much of the operation is complete? Use a ProgressIndicator instead.

      +

      Variants

      +

      Default

      + + +
      +
      + +

      Large

      + +
      + +
      +
      +
      +

      Default with label

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

      Large with label

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

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above 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>
+    if (typeof fabric !== "undefined") {
+        if ('Spinner' in fabric) {
+            var elements = document.querySelectorAll('.ms-Spinner');
+            var i = elements.length;
+            var component;
+            while(i--) {
+                component = new fabric['Spinner'](elements[i]);
+            }
+        }
+    }
+</script>
+ 
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      +

      Dependencies

      +

      This component has no dependency on other components.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/Table/index.html b/dist/documentation/Components/Table/index.html new file mode 100644 index 00000000..44c25501 --- /dev/null +++ b/dist/documentation/Components/Table/index.html @@ -0,0 +1,303 @@ + + + + + + + + Table + + + + + + + + + + +

      Table

      +

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

      +

      Variants

      +

      Default

      +

      The column widths are determined by the content. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      +

      +

      Fixed

      +

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

      +

      Selectable

      +

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

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from the sample above into your page. For example: + 
        + 
+ 
+
+<table class="ms-Table ">
+  <thead>
+    <tr>
+        <th>Location</th>
+        <th>Modified</th>
+        <th>Type</th>
+        <th>File Name</th>
+    </tr>
+  </thead>
+  <tbody>
+      <tr>
+          <td>Location</td>
+          <td>Modified</td>
+          <td>Type</td>
+          <td>File Name</td>
+      </tr>
+      <tr>
+          <td>Location</td>
+          <td>Modified</td>
+          <td>Type</td>
+          <td>File Name</td>
+      </tr>
+      <tr>
+          <td>Location</td>
+          <td>Modified</td>
+          <td>Type</td>
+          <td>File Name</td>
+      </tr>
+      <tr>
+          <td>Location</td>
+          <td>Modified</td>
+          <td>Type</td>
+          <td>File Name</td>
+      </tr>
+      <tr>
+          <td>Location</td>
+          <td>Modified</td>
+          <td>Type</td>
+          <td>File Name</td>
+      </tr>
+      <tr>
+          <td>Location</td>
+          <td>Modified</td>
+          <td>Type</td>
+          <td>File Name</td>
+      </tr>
+      <tr>
+          <td>Location</td>
+          <td>Modified</td>
+          <td>Type</td>
+          <td>File Name</td>
+      </tr>
+  </tbody>
+</table>
+
+ 
+
        +
        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 content with your own data. You can add more rows or columns.
        5. +
      +

      Dependencies

      +

      This component has no dependency on other components.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Components/TextField/index.html b/dist/documentation/Components/TextField/index.html new file mode 100644 index 00000000..16f1fb23 --- /dev/null +++ b/dist/documentation/Components/TextField/index.html @@ -0,0 +1,121 @@ + + + + + + + + TextField + + + + + + + + + + +

      Text Field

      +

      Allows for the input of text. Can be a single line or multiple lines. Typically used to accept user input within a form.

      +

      Variants

      +

      Default

      + + +
      + + + + +
      + +

      Multiline

      + + +
      + + + + +
      + +

      Placeholder text

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

      Underlined

      + + +
      + + + + +
      + +

      States

      +

      Disabled

      + + +
      + + + + +
      + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+<div class="ms-TextField  ">
+  <label class="ms-Label">Name</label>
+  <input class="ms-TextField-field" type="text" value="" placeholder="" >
+  
+  
+</div>
+
+ 
+
        +
        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. Update the .ms-Label to contain your label text.
        5. +
      +

      Dependencies

      +

      This component has a dependency on the Label component.

      + + \ No newline at end of file diff --git a/dist/documentation/Components/Toggle/index.html b/dist/documentation/Components/Toggle/index.html new file mode 100644 index 00000000..ae7b6e42 --- /dev/null +++ b/dist/documentation/Components/Toggle/index.html @@ -0,0 +1,108 @@ + + + + + + + + Toggle + + + + + + + + + + +

      Toggle

      +

      Allows for turning on or off a setting. This is best suited for simple, singular configuration (e.g. application level settings) whereas the ChoiceField is better suited when there is a longer list of individual choices or in a form (e.g. signing up for + different newsletters during registration for an event).

      +

      Variants

      +

      Label above (default)

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

      Label on left

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

      Disabled

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

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+     <script src="fabric.min.js"></script>
+ </head>
+
        2. +
      2. Copy the HTML from one of the samples above into your page. For example: + 
        + 
+ 
+
+<div class="ms-Toggle  ">
+  <span class="ms-Toggle-description">Let apps use my location</span>
+  <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
+  <label for="demo-toggle-3" class="ms-Toggle-field"  tabindex="0" >
+    <span class="ms-Label ms-Label--off">Off</span>
+    <span class="ms-Label ms-Label--on">On</span>
+  </label>
+</div>
+
+ 
+
        +
        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. Update the .ms-Label to contain your label text.
        5. +
      +

      Dependencies

      +

      This component has a dependency on the Label component.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Getting Started/BUILDING.html b/dist/documentation/Getting Started/BUILDING.html new file mode 100644 index 00000000..326c7ba6 --- /dev/null +++ b/dist/documentation/Getting Started/BUILDING.html @@ -0,0 +1,98 @@ + + + + + + + + Getting Started Page + + + + + + + + +

      Building Fabric, gulp tasks, bundling, and the starter template

      +

      Office UI Fabric JS uses gulp to compile its styling, build and serve demos, and generate or watch other parts of the framework for changes. Use it to customize Fabric JS for your project, or to test changes you make to specific aspects of the components.

      +

      It's also valuable for seeing the locally hosted docs site.

      +

      Contents

      + +

      Building Fabric

      +

      Before you get started, make sure you have node.js, gulp, and git installed. To build Fabric:

      +
        +
      1. Clone the repo.
        2. +
      2. Navigate to the folder that contains the gulpfile.js file (Fabric JS's root).
        3. +
      3. npm install
        4. +
      4. gulp
        5. +
      +

      The built files will be in the /dist/ folder.

      +

      Gulp tasks

      +

      You can test and work with Fabric JS locally using the tasks below.

      +

      gulp

      +

      Builds everything incrementally. This will run slowly the first time and very quickly on subsequent runs. This task will build all parts of Fabric JS and move all changed files into /dist/. Every time you make changes, re-run this task.

      +

      gulp watch and the local docs site

      +

      Builds and watches everything. After running this once, your builds will be a lot faster. Now if you make a change anything anywhere in Fabric JS, only that area/section/file will get built/changed/moved.

      +

      Once Fabric JS is built, you can view the localhost docs site by pointing your favorite browser at http://localhost:2020. This docs site allows you to view a list of the components, customize them (while watch runs), and see their responsive behavior.

      +

      gulp watch-debug

      +

      This task is similar to gulp watch except you can now get a readout of what files are in the pipe. This will be helpful to make sure that the build is working properly.

      +

      gulp watch-sass

      +

      Builds and watches everything but builds only Sass versions of our library files.

      +

      gulp watch-sass-debug

      +

      Builds and watches everything but uses the Sass versions of the files and gives a readout of files in the pipe.

      +

      gulp Bundles

      +

      Builds all bundles specified in gulp/modules/Config.js. View more details in the Bundling

      +

      Starter template

      +

      The following starter template represents the minimum recommended HTML structure for an app or add-in that uses Fabric. Copy the code into your project to start working with a basic Fabric document.

      +
      <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Application Name</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Optionally include jQuery to use Fabric's Component jQuery plugins -->
+    <script type="text/javascript" src="js/jquery.js"></script>
+
+    <!-- Fabric core -->
+    <link rel="stylesheet" href="css/fabric.min.css">
+    <link rel="stylesheet" href="css/fabric.components.min.css">
+
+    <!-- Application-specific CSS -->
+    <link rel="stylesheet" href="/css/app.css">
+  </head>
+  <body>
+    <!-- Application content goes here -->
+    <h1 class="ms-font-su">Why, hello, world.</h1>
+
+    <!-- Optionally include Fabric's Component jQuery plugins -->
+    <script type="text/javascript" src="js/jquery.fabric.min.js"></script>
+  </body>
+</html>
+
      + + + + \ No newline at end of file diff --git a/dist/documentation/Getting Started/BUNDLING.html b/dist/documentation/Getting Started/BUNDLING.html new file mode 100644 index 00000000..0934baf4 --- /dev/null +++ b/dist/documentation/Getting Started/BUNDLING.html @@ -0,0 +1,126 @@ + + + + + + + + Getting Started Page + + + + + + + + +

      Custom Bundling

      +

      What are bundles and why are they useful?

      +

      "Bundles" are simply preconfigured CSS files that are made up of only the pieces of Fabric you specify. This allows you to tailor Fabric to the needs of your app and reduce the impact of including all of Fabric or Fabric's components. The end result is similar to the output of something like src/sass/Fabric.Components.scss

      +

      For example, if your web app or add-in uses only the Button and Dropdown components, you can configure a bundle that includes only the styles for those elements, and nothing more. However, if a component depends on other components to render properly, those would also be included in the bundle. For example, the HTML for PersonaCard depends on the Persona, OrgChart, and Link components, so a bundle including the PersonaCard would also include the styles for those components.

      +

      Usage

      +

      Bundling is a build process that depends on Fabric's gulp build tools to work, so first, make sure you've followed the instructions for Building Fabric to set up a local clone of Fabric that is ready for compiling.

      +

      Then, configure your bundle in gulp/modules/Config.js in the bundlesConfig property. A bundle is simply a JavaScript object with a name, description, and list of file names to include or exclude from the final output.

      +

      Exclude vs include

      +

      excludes

      +

      If you list your files in "excludes", the bundle will be comprised of each .scss file in src/sass and src/components except for the files specified. For now, component dependencies are not included when in "exclude" mode. Partial .scss files, whose filenames begin with '_' (minus the quotes), are always excluded from bundles, since they produce no output.

      +

      Here's an example "excludes" bundle that excludes the Language Overrides styles:

      +
      "bundles": [
+  {
+    "name": "excludes-bundle", // Becomes excludes-bundle.css/.min.css
+    "description": "A custom bundle including a handful of modules.",
+    "excludes": [
+      "Button"
+    ]
+  } 
+]
+
      +

      This will produce the following:

      +
      //
+// Office UI Fabric
+// --------------------------------------------------
+// SCSS template for building a bundle of Fabric and Fabric Components CSS.
+
+@import '../../../node_modules/dist/sass/_Fabric.Common.scss';
+
+@import '../../../src/components/Breadcrumb/Breadcrumb.scss';
+@import '../../../src/components/Callout/Callout.scss';
+@import '../../../src/components/CheckBox/CheckBox.scss';
+@import '../../../src/components/CommandBar/CommandBar.scss';
+@import '../../../src/components/ContextualMenu/ContextualMenu.scss';
+@import '../../../src/components/DatePicker/DatePicker.scss';
+@import '../../../src/components/Dialog/Dialog.scss';
+@import '../../../src/components/Dropdown/Dropdown.scss';
+@import '../../../src/components/Facepile/Facepile.scss';
+@import '../../../src/components/Label/Label.scss';
+@import '../../../src/components/Link/Link.scss';
+@import '../../../src/components/List/List.scss';
+@import '../../../src/components/ListItem/ListItem.scss';
+@import '../../../src/components/MessageBanner/MessageBanner.scss';
+@import '../../../src/components/NavBar/NavBar.scss';
+@import '../../../src/components/OrgChart/OrgChart.scss';
+@import '../../../src/components/Overlay/Overlay.scss';
+@import '../../../src/components/Panel/Panel.scss';
+@import '../../../src/components/PeoplePicker/PeoplePicker.scss';
+@import '../../../src/components/Persona/Persona.scss';
+@import '../../../src/components/PersonaCard/PersonaCard.scss';
+@import '../../../src/components/Pivot/Pivot.scss';
+@import '../../../src/components/ProgressIndicator/ProgressIndicator.scss';
+@import '../../../src/components/SearchBox/SearchBox.scss';
+@import '../../../src/components/Spinner/Spinner.scss';
+@import '../../../src/components/Table/Table.scss';
+@import '../../../src/components/TextField/TextField.scss';
+@import '../../../src/components/Toggle/Toggle.scss';
+
      +

      includes

      +

      If instead you use "includes", the bundle will include only the files specified. If the file is a component that has dependencies, like mentioned above, those will also be included. If you aren't sure what a component's dependencies are, look for the "dependencies" property in that component's JSON file in src/{ComponentName}/{ComponentName}.json. Note that the build looks for dependencies two children deep, or in other words, dependencies of dependencies. Also, as noted in exludes above, partial .scss files beginning with '_' will not be included in bundles, even if they are explicitly listed.

      +

      Here's an example "include" bundle that includes only the Button and PersonaCard components:

      +
      "bundles": [
+  {
+    "name": "includes-bundle", // Becomes includes-bundle.css/.min.css
+    "description": "A custom bundle including a handful of modules.",
+    "includes": [
+      "Button",
+      "PersonaCard" // Will also include Link, OrgChart, and Persona components as dependencies
+    ]
+  } 
+]
+
      +

      This will produce the following:

      +
      //
+// Office UI Fabric
+// --------------------------------------------------
+// SCSS template for building a bundle of Fabric and Fabric Components CSS.
+
+@import '../../../node_modules/dist/sass/_Fabric.Common.scss';
+
+@import '../../../src/components/Button/Button.scss';
+@import '../../../src/components/Link/Link.scss';
+@import '../../../src/components/OrgChart/OrgChart.scss';
+@import '../../../src/components/Persona/Persona.scss';
+@import '../../../src/components/PersonaCard/PersonaCard.scss';
+
      +

      Neither excludes nor includes

      +

      If neither "excludes" nor "includes" are specified, the bundle will include all of Fabric's Components CSS.

      +

      gulp Bundles

      +

      Then, open a Command Prompt or Terminal window and navigate to the root of your cloned Fabric folder, then run gulp Bundles. Each bundle object will build into a full and minified CSS file in dist/bundles/{name}. To see the .scss file that makes up the bundle, check dist/bundles/{name}.scss.

      + + + + \ No newline at end of file diff --git a/dist/documentation/Getting Started/COMPONENTSLIST.html b/dist/documentation/Getting Started/COMPONENTSLIST.html new file mode 100644 index 00000000..c0117e2f --- /dev/null +++ b/dist/documentation/Getting Started/COMPONENTSLIST.html @@ -0,0 +1,73 @@ + + + + + + + + Getting Started Page + + + + + + + + +

      Components included in Fabric JS

      +

      Fabric JS contains a variety of components that are a part of the Office / Office 365 design language. These components are highly focused on the styling (CSS) rather than the functionality (JavaScript), so you can feel free to reimplemnet the component in the framework of your choice. If you're not seeing a component here that you'd like, first check out the Fabric JS Requests Trello board and upvote it there (if it exists), or file an issue on Fabric JS's issue tracker to kick off a new request.

      +

      The Office UI Fabric React project contains more components with greater functionality, so we often recommend checking out this project as well.

      +

      Components

      + + + + + \ No newline at end of file diff --git a/dist/documentation/Getting Started/CONTRIBUTING.html b/dist/documentation/Getting Started/CONTRIBUTING.html new file mode 100644 index 00000000..6703f966 --- /dev/null +++ b/dist/documentation/Getting Started/CONTRIBUTING.html @@ -0,0 +1,73 @@ + + + + + + + + Getting Started Page + + + + + + + + +

      Contributing

      +

      Office UI Fabric JS is an evolving snapshot of the Office 365 Design Language's components, provided by the OneDrive and SharePoint Design Studio.

      +

      Currently, the Fabric team is focusing on other control sets, but we are still open to contributions that help improve the stability or usability of the components.

      +

      This project has a few key tenets that are worth noting:

      +
        +
      • No use of jQuery, please! (only the DatePicker uses jQuery)
        • +
      • TypeScript is used for the components' included functionality
        • +
      +

      Pull requests

      +

      We gladly welcome PRs regarding…

      +
        +
      • Bug fixes (of course!)
        • +
      • Variants on components
        • +
      • Documentation updates
        • +
      • Things we haven't thought of yet :-)
        • +
      +

      When creating a pull request, please describe in detail the problem you are solving and reference an open issue if possible. Screenshots or a demonstration on CodePen are also appreciated.

      +

      Feature requests

      +

      Please be sure to open an issue before starting a hefty PR so we can let you know if we're likely to consider your request--and to make sure we aren't already planning on doing the work.

      +

      Contribution license agreement

      +

      For pull requests affecting fewer than 15 lines of code, you will need to sign a Contribution License Agreement (CLA) before your contribution can be incorporated. To complete the CLA, you will need to submit the request via the form and then electronically sign the CLA when you receive the email containing the link to the document.

      +

      This needs to only be done once for any Microsoft open source project.

      +

      Issue tracker labels

      +

      We track community issues via GitHub's issue tracker. To help us keep track of the different areas, please use the following labels:

      +
        +
      • accessibility - Issues or PRs that pertain to keyboard support, high contrast mode, screen reader support, etc.
        • +
      • bug - Issues or PRs that address unexpected behavior or broken components.
        • +
      • build-system - Issues and PRs related to the build process.
        • +
      • documentation - Issues and PRs that pertain to the documentation included with the repository.
        • +
      • enhancement - Issues or PRs that address potential improvements to components.
        • +
      • needs-design - Issues or PRs that need Design guidance.
        • +
      • needs-discussion - Issues or PRs that need discussion among the Fabric team.
        • +
      • question - Issues that don't necessarily require code and usually consist of clarifications.
        • +
      • waiting-for-author - Issues or PRs that are awaiting a repsonse from the original author.
        • +
      • waiting-for-details - Issues or PRs that need more details before they can be acted upon.
        • +
      • waiting-to-merge - PRs that are close to being merged in but are stalled.
        • +
      + + + + \ No newline at end of file diff --git a/dist/documentation/Getting Started/PACKAGES.html b/dist/documentation/Getting Started/PACKAGES.html new file mode 100644 index 00000000..3e44bbd1 --- /dev/null +++ b/dist/documentation/Getting Started/PACKAGES.html @@ -0,0 +1,48 @@ + + + + + + + + Getting Started Page + + + + + + + + +

      Package managers

      +

      Fabric JS is also available from a variety of package managers, including Bower, npm, and the NuGet Package Manager. You can quickly add Fabric JS as a package and stay up to date with the latest version.

      +

      For information on accessing the previous versions of Fabric that included the components via package managers, check out the 2.6.1 get started docs.

      +

      Install with Bower

      +

      To install Fabric using Bower, run the following command:

      +
      $ bower install office-ui-fabric-js
+

      Install with NPM

      +

      To install Fabric Core's NPM package, run the following command:

      +
      $ npm install office-ui-fabric-js
+

      Install with NuGet Package Manager

      +

      To install Fabric Core's NuGet package, run the following command in the package manager console:

      +
      PM> Install-Package OfficeUIFabricJS
+
      + + + \ No newline at end of file diff --git a/dist/documentation/Getting Started/RESOURCES.html b/dist/documentation/Getting Started/RESOURCES.html new file mode 100644 index 00000000..fbf0d94f --- /dev/null +++ b/dist/documentation/Getting Started/RESOURCES.html @@ -0,0 +1,39 @@ + + + + + + + + Getting Started Page + + + + + + + + +

      Resources

      +

      Samples using Fabric

      +

      Office 365 API - Groups Explorer

      + + + + \ No newline at end of file diff --git a/dist/documentation/Getting Started/ROADMAP.html b/dist/documentation/Getting Started/ROADMAP.html new file mode 100644 index 00000000..47b6eabf --- /dev/null +++ b/dist/documentation/Getting Started/ROADMAP.html @@ -0,0 +1,39 @@ + + + + + + + + Getting Started Page + + + + + + + + +

      Fabric Roadmap

      +

      Our roadmap used to be contained in a single markdown file, but has since been transferred to a nifty Trello board where you can view requests, add comments, or even vote so we know what folks need.

      +

      To view the Trello board (that includes old requests that used to be in this file) please see the Office UI Fabric JS Requests board. If you'd like to make a new request, please file an issue in the Fabric JS's issue tracker so we can add it to the Trello board.

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

      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..9845f1a5 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/css/VideoPortal.css @@ -0,0 +1,6648 @@ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Breadcrumb { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 12px; + color: #666666; + vertical-align: top; + margin: 11px 7px; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + display: inline-block; + color: #0078d7; + padding: 8px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; + margin-right: -2px; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu::before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: #ffffff; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: 0; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + font-weight: 100; + font-size: 21px; + color: #333333; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 10px; + margin: 8px 5px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 16px; + padding: 5px 4px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 14px; + font-weight: 400; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button.is-hidden { + display: none; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Button:hover { + color: #1aebff; + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Button:hover { + color: #37006e; + border-color: #37006e; + } +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button-label { + color: #333333; + font-weight: 600; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border: 0; + display: -ms-flexbox; + display: flex; + padding: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + margin-right: 4px; + position: relative; + top: 1px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + font-size: 12px; + height: 18px; + line-height: 18px; + width: 18px; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-size: 21px; + font-weight: 100; + position: relative; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + border: 1px solid #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + border: 1px solid #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + border: 1px solid #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + display: block; + height: auto; + max-width: 280px; + min-height: 72px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-weight: 600; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-weight: 400; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Callout { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + width: 288px; +} + +.ms-Callout.is-hidden { + display: none; +} + +.ms-Callout-header { + z-index: 105; + padding-top: 24px; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-title { + margin: 0; + font-weight: 300; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-weight: 300; + color: #333333; + font-size: 12px; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-link { + font-size: 14px; +} + +.ms-Callout-inner { + height: 100%; + padding-top: 0; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + height: 27px; + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon { + line-height: 27px; +} + +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button, +.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button { + color: #0078d7; +} + +.ms-Callout-actions .ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-weight: 100; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + padding-top: 12px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-inner { + padding-bottom: 12px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +.ms-CheckBox { + box-sizing: border-box; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-CheckBox .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +.ms-CheckBox-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +.ms-CheckBox-field::after { + content: '\E73E'; + font-family: 'FabricMDL2Icons'; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: 13px; + top: 0; + color: #ffffff; + line-height: 20px; + width: 20px; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field::after { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field::after { + color: #ffffff; + } +} + +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-CheckBox-field:hover::before, +.ms-CheckBox-field:focus::before { + border-color: #767676; +} + +.ms-CheckBox-field:hover .ms-Label, +.ms-CheckBox-field:focus .ms-Label { + color: #000000; +} + +.ms-CheckBox-field.is-disabled { + cursor: default; +} + +.ms-CheckBox-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-CheckBox-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-CheckBox-field.in-focus::before { + border-color: #767676; +} + +.ms-CheckBox-field.in-focus.is-disabled::before { + border-color: #c8c8c8; +} + +.ms-CheckBox-field.in-focus.is-checked::before { + border-color: #106ebe; +} + +.ms-CheckBox-field.is-checked::before { + border: 10px solid #0078d7; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CheckBox-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CheckBox-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-CheckBox-field.is-checked::after { + display: block; +} + +.ms-CheckBox-field.is-checked:hover::before, +.ms-CheckBox-field.is-checked:focus::before { + border-color: #106ebe; +} + +.ms-RadioButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + color: #333333; + font-size: 14px; + font-weight: 400; + min-height: 36px; + position: relative; +} + +.ms-RadioButton .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; +} + +.ms-RadioButton-input { + position: absolute; + opacity: 0; +} + +.ms-RadioButton-field::before { + content: ''; + display: inline-block; + border: 2px solid #a6a6a6; + width: 20px; + height: 20px; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: border-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + border-radius: 50%; +} + +.ms-RadioButton-field::after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; + position: absolute; + top: 8px; + left: 8px; + bottom: 0; + right: 0; + transition-property: top, left, width, height; + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field::after { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field::after { + color: #600000; + } +} + +.ms-RadioButton-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; +} + +.ms-RadioButton-field:hover::before, +.ms-RadioButton-field:focus::before { + border-color: #767676; +} + +.ms-RadioButton-field:hover .ms-Label, +.ms-RadioButton-field:focus .ms-Label { + color: #000000; +} + +.ms-RadioButton-field.is-disabled { + cursor: default; +} + +.ms-RadioButton-field.is-disabled::before { + background-color: #c8c8c8; + border-color: #c8c8c8; + color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled::before { + border-color: #600000; + } +} + +.ms-RadioButton-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-RadioButton-field.is-disabled:hover::before, +.ms-RadioButton-field.is-disabled:focus::before { + border-color: #c8c8c8; +} + +.ms-RadioButton-field.in-focus::before { + border-color: #767676; +} + +.ms-RadioButton-field.is-checked::before { + border: 2px solid #0078d7; + background-color: transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::before { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::before { + border-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked::after { + background-color: #0078d7; + top: 5px; + left: 5px; + width: 10px; + height: 10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-RadioButton-field.is-checked::after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-RadioButton-field.is-checked::after { + background-color: #37006e; + } +} + +.ms-RadioButton-field.is-checked:hover::before, +.ms-RadioButton-field.is-checked:focus::before { + border-color: #0078d7; +} + +.ms-RadioButton-field.is-checked.in-focus::before { + border-color: #0078d7; +} + +.ms-ChoiceFieldGroup { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + margin-bottom: 4px; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; +} + +.ms-CommandBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #f4f4f4; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar .ms-CommandButton--actionButton { + border-right: 1px solid #eaeaea; +} + +.ms-CommandBar .ms-Button { + height: 100%; +} + +.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon { + padding-right: 0; +} + +.ms-CommandBar .ms-Button.is-hidden { + display: none; +} + +.ms-CommandBar .ms-SearchBox, +.ms-CommandBar .ms-SearchBox-field, +.ms-CommandBar .ms-SearchBox-label { + height: 100%; +} + +.ms-CommandBar .ms-SearchBox { + display: inline-block; + vertical-align: top; + transition: margin-right 0.267s; +} + +.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 220px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: 10; + } +} + +.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button { + font-size: 18px; + padding: 0 11px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar .ms-SearchBox { + margin-right: 24px; + } +} + +@media only screen and (max-width: 639px) { + .ms-CommandBar { + height: 44px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar.search-expanded .ms-SearchBox { + margin-right: 8px; + } + + .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + transition: none; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 4px; + height: 100%; +} + +.ms-CommandBar-sideCommands .ms-Button:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 20px; + } +} + +.ms-CommandButton { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: inline-block; + position: relative; + vertical-align: top; +} + +.ms-CommandButton.is-hidden { + display: none; +} + +.ms-CommandButton:disabled .ms-CommandButton-button, +.ms-CommandButton.is-disabled .ms-CommandButton-button { + cursor: default; +} + +.ms-CommandButton:disabled .ms-CommandButton-button:hover, +.ms-CommandButton.is-disabled .ms-CommandButton-button:hover { + background-color: #eff6fc; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label { + color: #a6a6a6; +} + +.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon, +.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-CommandButton .ms-ContextualMenu { + display: none; +} + +.ms-CommandButton-button, +.ms-CommandButton-splitIcon { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + cursor: pointer; + display: inline-block; + height: 40px; + line-height: 40px; + outline: 1px solid transparent; + padding: 0 8px; + position: relative; + vertical-align: top; + background: transparent; +} + +.ms-CommandButton-button:hover, +.ms-CommandButton-splitIcon:hover { + background-color: #eaeaea; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.ms-CommandButton-button:active, +.ms-CommandButton-splitIcon:active { + background-color: #eaeaea; +} + +.ms-CommandButton-button:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-button:focus, +.ms-CommandButton-splitIcon:focus { + outline: 0; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-button, + .ms-CommandButton-splitIcon { + height: 44px; + } + + .ms-CommandButton-button .ms-CommandButton-icon, + .ms-CommandButton-splitIcon .ms-CommandButton-icon { + font-size: 20px; + } + + .ms-CommandButton-button .ms-CommandButton-label, + .ms-CommandButton-splitIcon .ms-CommandButton-label { + line-height: 44px; + } +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton + .ms-CommandButton { + margin-left: 4px; + } +} + +.ms-CommandButton-icon { + display: inline-block; + margin-right: 8px; + position: relative; + font-size: 16px; + min-width: 16px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.ms-CommandButton-label { + font-size: 14px; + font-weight: 400; + color: #333333; + line-height: 40px; + height: 100%; + display: inline-block; + vertical-align: top; +} + +.ms-CommandButton-label:hover { + color: #212121; +} + +.ms-CommandButton-dropdownIcon, +.ms-CommandButton-splitIcon { + display: inline-block; + position: relative; + color: #333333; + font-size: 12px; + font-weight: 300; + min-width: 12px; + height: 100%; + vertical-align: top; + margin-left: 8px; +} + +.ms-CommandButton-dropdownIcon .ms-Icon, +.ms-CommandButton-splitIcon .ms-Icon { + line-height: normal; + padding-top: 16px; +} + +.ms-CommandButton-dropdownIcon:focus::before, +.ms-CommandButton-splitIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +@media only screen and (max-width: 639px) { + .ms-CommandButton-dropdownIcon, + .ms-CommandButton-splitIcon { + display: none; + } +} + +.ms-CommandButton-splitIcon { + margin-left: -2px; + width: 27px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + margin-left: -1px; + position: relative; + padding-top: 16px; +} + +.ms-CommandButton-splitIcon .ms-Icon::after { + position: absolute; + content: ' '; + width: 1px; + height: 16px; + top: 12px; + left: -8px; + border-left: 1px solid #c8c8c8; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + margin-right: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button { + padding: 0 12px; +} + +.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button { + background: none; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button { + width: 50px; + height: 40px; +} + +.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + padding-right: 0; +} + +.ms-CommandButton.ms-CommandButton--pivot.is-active::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--pivot:hover::before { + content: ''; + height: 2px; + position: absolute; + left: 0; + right: 0; + background-color: #0078d7; + bottom: 0; + z-index: 5; +} + +.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, +.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + display: inline-block; +} + +@media only screen and (max-width: 479px) { + .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label, + .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label { + font-size: 16px; + } +} + +.ms-ContextualMenu { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + max-width: 220px; + list-style-type: none; + position: relative; + background-color: #ffffff; +} + +.ms-ContextualMenu.is-hidden { + display: none; +} + +.ms-ContextualMenu-item { + position: relative; +} + +.ms-ContextualMenu-link { + box-sizing: border-box; + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 36px; + overflow: hidden; + line-height: 34px; + padding: 0 16px 0 25px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #f4f4f4; + color: #212121; +} + +.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon { + color: #212121; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; + border: 1px solid #666666; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #dadada; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon { + color: #000000; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #d0d0d0; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +.ms-ContextualMenu-link.is-disabled .ms-Icon { + color: #a6a6a6; + pointer-events: none; + cursor: default; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 36px; + line-height: 36px; + padding: 0 18px; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #333333; + font-size: 8px; + font-weight: 600; + width: 24px; + height: 36px; + line-height: 36px; + position: absolute; + text-align: center; + top: 0; + right: 0; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 16px 0 26px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; + font-weight: 600; + color: #333333; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + color: #333333; + content: '\E73E'; + font-size: 10px; + font-weight: 800; + height: 36px; + line-height: 36px; + position: absolute; + left: 7px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus { + color: #212121; + background-color: #f4f4f4; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover::after, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus::after { + color: #212121; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active { + color: #000000; + background-color: #d0d0d0; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active::after { + color: #000000; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link { + padding-left: 40px; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon, +.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + width: 40px; + text-align: center; +} + +.ms-ContextualMenu.ms-ContextualMenu--hasIcons { + width: 220px; +} + +.ms-DatePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-weight: 100; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-weight: 400; + font-size: 15px; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #b3d6f2; +} + +.ms-DatePicker-day--disabled::before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-weight: 400; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0; + position: absolute; + top: 0; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: 300; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: 400; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-weight: 300; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-weight: 300; + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-weight: 600; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-DetailsList { + position: relative; +} + +.ms-DetailsList.is-horizontalConstrained { + overflow-x: auto; + overflow-y: inherit; +} + +.ms-DetailsList-cell { + word-break: break-word; +} + +.ms-DetailsHeader { + display: inline-block; + min-width: 100%; + height: 36px; + line-height: 36px; + white-space: nowrap; + padding-bottom: 1px; + border-bottom: 1px solid #eaeaea; + margin-bottom: 1px; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-DetailsHeader.is-singleSelect { + padding-left: 40px; +} + +.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover { + background: transparent; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 99; + cursor: col-resize; +} + +.ms-DetailsHeader-cell.is-check .ms-Check-circle { + visibility: hidden; +} + +.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, +.ms-DetailsHeader.is-allSelected .ms-Check-circle { + visibility: visible; +} + +.ms-DetailsHeader-cellWrapper { + display: inline-block; + position: relative; +} + +.ms-DetailsHeader-cellSizeWrapper { + display: inline-block; + vertical-align: top; + margin-right: 16px; +} + +.ms-DetailsHeader-cellSizeWrapper:last-child { + margin-right: 0; +} + +.ms-DetailsHeader-filterChevron.ms-Icon { + color: #a6a6a6; + padding-left: 4px; + vertical-align: middle; +} + +.ms-DetailsHeader-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + color: #a6a6a6; + border: 0; + background: none; + line-height: inherit; + margin: 0; + font-size: inherit; + font-family: inherit; + text-align: left; + height: 36px; + vertical-align: top; +} + +.ms-DetailsHeader-cell.is-check { + position: relative; + padding: 8px 10px; + margin: 0; +} + +.ms-DetailsHeader-cell:focus { + outline: transparent; +} + +.ms-DetailsHeader-cell.is-sortable { + color: #000000; + cursor: default; +} + +.ms-DetailsHeader-cell.is-sortable:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter { + position: absolute; + right: 0; + width: 20px; + top: 0; + bottom: 0; + padding: 0; + text-align: center; + color: #000000; +} + +.ms-DetailsHeader-cell.is-filter:hover { + background-color: #eaeaea; +} + +.ms-DetailsHeader-cell.is-filter::before { + content: ''; + position: absolute; + border-left: 1px solid #a6a6a6; + top: 10px; + bottom: 10px; + left: 0; +} + +.ms-DetailsHeader-cell.is-sizer { + position: absolute; + width: 16px; + cursor: col-resize; + bottom: 0; + top: 0; + height: inherit; + z-index: 99; +} + +.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow { + display: inline; +} + +.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-DetailsHeader-cell.is-resizing.is-sizer::after, +.ms-DetailsHeader-cell.is-sizer:hover::after { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 1px; + background: #eaeaea; + border: 1px solid #ffffff; +} + +.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before, +.ms-DetailsHeader-cell:focus::before { + content: ''; + pointer-events: none; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsHeader-sortArrow.ms-Icon { + font-size: 12px; + margin-right: 4px; + display: none; + color: #a6a6a6; +} + +.ms-DetailsRow { + position: relative; + display: inline-block; + min-width: 100%; + min-height: 36px; + vertical-align: top; + white-space: nowrap; + padding: 10px 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; +} + +.ms-DetailsRow:focus { + outline: transparent; +} + +.ms-DetailsRow.ms-DetailsRow.is-selected { + background: #deecf9; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover, +.ms-DetailsRow:hover { + background: #eff6fc; +} + +.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover, +.ms-DetailsRow.is-selected:hover { + background: #b3d6f2; +} + +.ms-DetailsRow-cell { + display: inline-block; + box-sizing: border-box; + padding: 0 8px; + vertical-align: top; + white-space: normal; + word-break: break-word; + margin-right: 16px; +} + +.ms-DetailsRow-cell.is-clipped { + overflow: hidden; +} + +.ms-DetailsRow-cell:last-child { + margin-right: 0; +} + +.ms-DetailsRow-cellIcon { + display: inline-block; + margin-right: 6px; + position: relative; + bottom: -2px; +} + +.ms-DetailsRow-check { + display: inline-block; + cursor: default; + padding: 10px; + margin: -10px 0; + box-sizing: border-box; + vertical-align: top; + background: none; + border: 0; + visibility: hidden; +} + +.ms-DetailsRow-check:focus { + outline: transparent; +} + +.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow:hover .ms-DetailsRow-check, +.ms-DetailsRow.is-selected .ms-DetailsRow-check { + visibility: visible; +} + +.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox, +.ms-DetailsRow:focus .ms-DetailsRow-focusBox { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border: 1px solid #a6a6a6; +} + +.ms-DetailsRow-cellMeasurer { + position: absolute; + visibility: hidden; + white-space: nowrap; + top: -1000000000; +} + +.ms-Check { + display: inline-block; + cursor: default; + line-height: 0; + vertical-align: top; +} + +.ms-Check.is-checked .ms-Check-circle { + fill: #0078d7; + stroke: #ffffff; + stroke-width: 1px; +} + +.ms-Check.is-checked .ms-Check-check { + stroke: #ffffff; +} + +.ms-Check-circle { + fill: #ffffff; + stroke: #c8c8c8; +} + +.ms-Check-check { + stroke: #c8c8c8; +} + +.ms-Dialog { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: fixed; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + left: 50%; + top: 50%; +} + +.ms-Dialog.is-open { + display: block; +} + +.ms-Dialog-title { + font-size: 21px; + font-weight: 100; + margin-bottom: 24px; +} + +.ms-Dialog-content { + position: relative; +} + +.ms-Dialog-subText { + color: #333333; + font-size: 12px; + font-weight: 300; + line-height: 1.5; +} + +.ms-Dialog-actions { + margin-top: 24px; + text-align: right; +} + +.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + background-color: #0078d7; + color: #ffffff; + font-size: 28px; + font-weight: 100; + padding: 28px 24px; + margin-top: -28px; + margin-left: -24px; + margin-right: -24px; +} + +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + right: 12px; + top: 12px; + z-index: 10; +} + +.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel { + color: #666666; + font-size: 16px; +} + +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: absolute; +} + +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; +} + +.ms-Panel .ms-Dropdown-items .ms-Dropdown-item { + padding: 7px 16px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Panel .ms-Dropdown-items::before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #212121; + font-size: 12px; + position: absolute; + right: 13px; + bottom: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + padding: 5px 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-title.ms-Dropdown-truncator { + height: auto; + display: block; + position: absolute; + visibility: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + z-index: 400; + overflow-y: scroll; + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; +} + +.ms-Dropdown-items::before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 36px; + padding: 7px 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #b3d6f2; + color: #000000; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #b3d6f2; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-FacePile { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 32px; + width: auto; +} + +.ms-FacePile .ms-FacePile-personaCardHost { + display: none; +} + +.ms-FacePile-addButton { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-FacePile-addButton .ms-Persona-presence, +.ms-FacePile-addButton .ms-Persona-details { + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover, +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus { + background-color: #005a9e; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active { + background-color: #004578; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active { + display: block; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover { + color: #212121; +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled { + color: #c8c8c8; +} + +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: 14px; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results, +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-weight: 100; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Link { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-List { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + list-style-type: none; +} + +.ms-ListItem { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + color: #333333; + font-size: 14px; + font-weight: 400; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem::before, +.ms-ListItem::after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem::after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-weight: 300; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-weight: 400; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-weight: 300; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-weight: 300; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; + background-color: #333333; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-weight: 600; +} + +.ms-ListItem.is-unseen::after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + position: absolute; + top: 14px; + left: 7px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected::before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected::before, +.ms-ListItem.is-selected:hover::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\e73A'; + font-size: 17px; + color: #767676; + position: absolute; + top: 23px; + left: 7px; + border: 0; +} + +.ms-ListItem.is-selected:hover { + background-color: #b3d6f2; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-weight: 400; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #333333; + font-size: 12px; + font-weight: 400; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: 0; + background-color: transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + display: inline-block; + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-ContextualHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + background-color: #ffffff; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-ContextualHost.is-positioned { + position: absolute; + margin: 0; +} + +.ms-ContextualHost.is-open { + display: inline-block; +} + +.ms-ContextualHost-beak { + box-shadow: 0 0 15px -5px #3c3c3c; + position: absolute; + width: 28px; + height: 28px; + background: #ffffff; + border: 1px solid #eaeaea; + box-sizing: border-box; + top: -6px; + display: none; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 0; + outline: 1px solid transparent; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak, +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + top: 40px; + display: none; +} + +.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + left: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak { + right: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak { + display: block; + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + display: block; + bottom: -10px; +} + +.ms-ContextualHost-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + min-height: 10px; +} + +.ms-ContextualHost-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 10; +} + +.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title { + margin-right: 20px; +} + +.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak { + background-color: #0078d7; +} + +@media (min-width: 480px) { + .ms-ContextualHost { + margin: 16px; + } + + .ms-ContextualHost.is-positioned { + margin: 0; + } + + .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak, + .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak { + display: block; + } +} + +.ms-MessageBar { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.ms-MessageBar .ms-Link { + font-size: 12px; +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-right: 8px; + font-size: 16px; + color: #767676; +} + +.ms-MessageBar-text { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 12px; + font-weight: 400; +} + +.ms-MessageBar.ms-MessageBar--warning { + background-color: #fff4ce; +} + +.ms-MessageBar.ms-MessageBar--severeWarning { + background-color: #fed9cc; +} + +.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon { + color: #d83b01; +} + +.ms-MessageBar.ms-MessageBar--error { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--blocked { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-OrgChart { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; +} + +.ms-Overlay { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: rgba(255, 255, 255, 0.4); + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 0; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-u-overflowHidden { + overflow: hidden; +} + +.ms-Panel { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + background-color: #ffffff; + width: 100%; + max-width: 340px; + box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2); + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: 10; + display: none; + height: 100%; +} + +.ms-Panel.animate-in { + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel.animate-out { + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel .ms-CommandBar { + padding-right: 0; + padding-left: 8px; +} + +.ms-Panel.ms-Panel--md { + max-width: 340px; +} + +.ms-Panel.ms-Panel--lg { + max-width: 644px; +} + +.ms-Panel.ms-Panel--xl { + max-width: 940px; +} + +.ms-Panel.ms-Panel--xxl { + max-width: 1192px; +} + +.ms-Panel--left { + box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2); + left: 0; + right: auto; +} + +.ms-Panel--left.animate-in { + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +.ms-Panel--left.animate-out { + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 6px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 16px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-closeButton .ms-Icon--Cancel { + margin-top: 2px; +} + +@media (max-width: 639px) { + .ms-Panel-closeButton { + font-size: 20px; + line-height: 20px; + height: 44px; + right: 4px; + } +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; + height: 100%; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-weight: 100; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +.ms-PanelHost { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 10; +} + +.ms-PanelHost .ms-Overlay { + cursor: pointer; +} + +.ms-PeoplePicker { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 1px solid #c8c8c8; + cursor: text; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker-searchBox.is-active, +.ms-PeoplePicker-searchBox:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-PeoplePicker-searchBox:hover, + .ms-PeoplePicker-searchBox:focus { + border-color: #37006e; + } +} + +.ms-PeoplePicker-searchBox::-webkit-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox::-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-moz-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox:-ms-input-placeholder { + color: #666666; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: 100%; + -ms-flex: 1; + flex: 1; +} + +.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.ms-PeoplePicker-persona { + cursor: pointer; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + background-color: #ffffff; + border: 1px solid #c8c8c8; + margin-bottom: -1px; + padding-top: 9px; + width: 100%; + padding-left: 0; + box-sizing: border-box; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-weight: 300; + font-size: 12px; + padding-top: 8px; + padding-bottom: 8px; + text-transform: uppercase; + padding-left: 16px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-left: 16px; + cursor: pointer; + outline: 0; +} + +.ms-PeoplePicker-result:hover, +.ms-PeoplePicker-result:focus { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result:focus { + box-shadow: 0 0 0 1px #0078d7 inset; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #b3d6f2; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #69afe5; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active { + background-color: #69afe5; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 100%; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 40px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #a6a6a6; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + background: none; + border: 0; + cursor: pointer; + height: 40px; + position: relative; + width: 100%; +} + +.ms-PeoplePicker-searchMore:hover { + background-color: #f4f4f4; +} + +.ms-PeoplePicker-searchMoreIcon { + font-size: 21px; + height: 40px; + left: 16px; + line-height: 40px; + position: absolute; + text-align: center; + top: 0; + width: 40px; +} + +.ms-PeoplePicker-searchMoreText { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + height: 40px; + left: 64px; + line-height: 40px; + position: absolute; + top: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction { + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder, + .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials, + .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence, + .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details, + .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn { + height: 40px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction, + .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction { + height: 40px; + } +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active, +.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-weight: 400; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 1; + position: relative; + width: 100%; + height: 48px; + display: table; + table-layout: fixed; + border-collapse: separate; +} + +.ms-Persona .ms-ContextualHost { + display: none; +} + +.ms-Persona-imageArea { + position: absolute; + overflow: hidden; + text-align: center; + max-width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; + width: 100%; + top: 0; + left: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; + z-index: 5; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-weight: 100; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--blueLight { + background-color: #00bcf2; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #0078d7; +} + +.ms-Persona-initials.ms-Persona-initials--blueDark { + background-color: #002050; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #008272; +} + +.ms-Persona-initials.ms-Persona-initials--greenLight { + background-color: #bad80a; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #107c10; +} + +.ms-Persona-initials.ms-Persona-initials--greenDark { + background-color: #004b1c; +} + +.ms-Persona-initials.ms-Persona-initials--magentaLight { + background-color: #e3008c; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #b4009e; +} + +.ms-Persona-initials.ms-Persona-initials--purpleLight { + background-color: #b4a0ff; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #5c2d91; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #000000; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #d83b01; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #e81123; +} + +.ms-Persona-initials.ms-Persona-initials--redDark { + background-color: #a80000; +} + +.ms-Persona-image { + position: absolute; + top: 0; + left: 0; + height: 48px; + z-index: 10; + width: 100%; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #7fba00; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; + text-align: center; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-presence { + border-color: #000000; + box-shadow: 0 0 0 1px #1aebff inset; + color: #000000; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-presence { + border-color: #ffffff; + box-shadow: 0 0 0 1px #37006e inset; + color: #ffffff; + background-color: #000000; + } +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 8px; + line-height: 12px; + vertical-align: top; +} + +.ms-Persona-details { + padding: 0 12px; + vertical-align: middle; + overflow: hidden; + text-align: left; + padding-left: 60px; + display: table-cell; + width: 100%; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-weight: 400; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-weight: 400; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + display: none; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText::after { + content: ';'; +} + +.ms-Persona.ms-Persona--xs, +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token { + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image, +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea, +.ms-Persona.ms-Persona--facePile .ms-Persona-image, +.ms-Persona.ms-Persona--token .ms-Persona-imageArea, +.ms-Persona.ms-Persona--token .ms-Persona-image { + max-width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder, +.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder, +.ms-Persona.ms-Persona--token .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials, +.ms-Persona.ms-Persona--facePile .ms-Persona-initials, +.ms-Persona.ms-Persona--token .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence, +.ms-Persona.ms-Persona--facePile .ms-Persona-presence, +.ms-Persona.ms-Persona--token .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details, +.ms-Persona.ms-Persona--facePile .ms-Persona-details, +.ms-Persona.ms-Persona--token .ms-Persona-details { + padding-left: 40px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText, +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--token .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--sm { + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + max-width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 48px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--lg { + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + max-width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; + height: 20px; + width: 20px; + border-width: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon { + line-height: 20px; + font-size: 14px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-details { + padding-left: 84px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--xl { + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + max-width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 28px; + width: 28px; + left: 71px; + border-width: 4px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon { + line-height: 28px; + font-size: 21px; + position: relative; + top: 1px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 120px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-weight: 300; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #7fba00; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #fcd116; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon { + position: relative; + left: 1px; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #ffffff; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 0 0 2px #d93b3b inset; + border-radius: 50%; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence::after { + content: ''; + width: 100%; + height: 2px; + background-color: #d93b3b; + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + position: absolute; + top: 5px; + left: 0; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence::after { + top: 9px; +} + +.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence::after { + top: 13px; +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #37006e; + } +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #000000; + box-shadow: 0 0 0 1px #ffffff inset; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #ffffff; + box-shadow: 0 0 0 1px #000000 inset; + } +} + +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; +} + +.ms-Persona.ms-Persona--facePile:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-initials { + position: relative; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-details { + display: none; +} + +.ms-Persona.ms-Persona--facePile .ms-Persona-presence { + display: none; +} + +.ms-Persona.ms-Persona--token { + display: -ms-inline-flexbox; + display: inline-flex; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin: 4px; +} + +.ms-Persona.ms-Persona--token:hover { + cursor: pointer; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: 32px; + height: 32px; + padding: 0; + line-height: 30px; + transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + text-align: center; +} + +.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover { + background-color: #eaeaea; +} + +.ms-Persona.ms-Persona--token .ms-Persona-imageArea { + width: 100%; + min-width: 32px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-right: 8px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; + color: #333333; + font-size: 14px; + font-weight: 400; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 20px; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + position: relative; + list-style: none; + margin: 0; + padding: 0 10px; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-actions::before { + content: ''; + position: absolute; + top: 47px; + left: 0; + width: 100%; + border-top: 1px solid #c8c8c8; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + outline: transparent; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action::before, +.ms-PersonaCard-overflow::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: transparent; + top: 0; + left: 0; + z-index: 100; +} + +.ms-PersonaCard-action.is-active, +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active::after, +.ms-PersonaCard-overflow.is-active::after { + box-sizing: border-box; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 13px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: -95px; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-details { + display: none; + width: 100%; + margin: 0; + max-height: 300px; + min-height: 48px; + color: #666666; + padding: 9px 20px; + box-sizing: border-box; +} + +.ms-PersonaCard-details.is-active { + display: block; +} + +.ms-PersonaCard-details.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander::after { + content: '\E70D'; +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 16px; + height: 30px; + line-height: 30px; + margin-top: 2px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E70E'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart::after { + display: none; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } + + .ms-ContextualHost .ms-PersonaCard { + box-shadow: none; + } +} + +.ms-Pivot { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + font-size: 0; + height: 40px; + list-style-type: none; + padding: 0; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-size: 14px; + font-weight: 400; + line-height: 40px; + margin-right: 8px; + padding: 0 8px; + text-align: center; + vertical-align: top; +} + +.ms-Pivot-link:hover { + cursor: pointer; +} + +.ms-Pivot-link::before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + left: 8px; + position: absolute; + right: 8px; + transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-Pivot-link::after { + color: transparent; + content: attr(title); + display: block; + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; +} + +.ms-Pivot-link.is-selected { + font-weight: 600; + position: relative; +} + +.ms-Pivot-link.is-selected::before { + background-color: #0078d7; +} + +.ms-Pivot-link.is-disabled { + color: #a6a6a6; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow::after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff; + background-color: #0078d7; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-weight: 300; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-weight: 600; + } +} + +.ms-ProgressIndicator { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-weight: 400; +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + background-color: #0078d7; + height: 2px; + position: absolute; + transition: width 0.3s ease; + width: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 36px; + color: #333333; + font-size: 14px; + font-weight: 400; + position: relative; + margin-bottom: 10px; + display: inline-block; + overflow: hidden; + background-color: #ffffff; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-SearchBox-clear { + display: block; +} + +.ms-SearchBox:hover { + background-color: #deecf9; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled { + background-color: #f4f4f4; + pointer-events: none; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + color: #a6a6a6; + background-color: transparent; + border-color: #f4f4f4; + cursor: default; +} + +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + right: 0; + z-index: 10; +} + +.ms-SearchBox-clear .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 36px; +} + +.ms-SearchBox-clear .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-icon { + position: relative; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + margin-left: 12px; + margin-right: 6px; + color: #0078d7; + vertical-align: top; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #69afe5; + outline: transparent 1px solid; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 36px; + padding: 6px 3px 7px 45px; + width: 208px; + background-color: transparent; + z-index: 5; + transition: padding-left 0.167s; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + height: 36px; + line-height: 36px; + color: #666666; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + width: 208px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 40px; + line-height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + transition: none; + border: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus { + background-color: transparent; + padding: 6px 3px 7px 45px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit { + display: none; + position: absolute; + top: 0; + z-index: 10; + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button { + height: 40px; + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter { + right: 8px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar::before { + position: absolute; + content: ' '; + right: 0; + bottom: 0; + left: 0; + margin: 0 8px; + border-bottom: 1px solid #eaeaea; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label { + color: #212121; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:focus { + background-color: transparent; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit, +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed { + width: 50px; + min-height: 40px; + z-index: 0; + background-color: #f4f4f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed::before { + visibility: hidden; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field { + display: block; + cursor: text; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text { + display: inline-block; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active { + width: 100%; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear { + display: inline-block; + right: 58px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated { + transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active::before { + visibility: visible; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear { + display: inline-block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon { + color: #a6a6a6; +} + +.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active { + color: #0078d7; +} + +@media only screen and (min-width: 1024px) { + .ms-SearchBox.ms-SearchBox--commandBar { + background-color: #ffffff; + border-right: 1px solid #eaeaea; + } +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + height: 44px; + line-height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear { + font-size: 20px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button { + height: 44px; + } + + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field, + .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + font-size: 16px; + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #ffffff; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active::before { + visibility: visible; +} + +@media only screen and (max-width: 639px) { + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field { + width: 100%; + padding-right: 100px; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit { + display: inline-block; + } + + .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon { + color: #a6a6a6; + } +} + +.ms-Spinner { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + position: relative; + font-size: 12px; + font-weight: 400; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-weight: 300; + font-size: 12px; + color: #333333; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #b3d6f2; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::before, +.ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck::after, +.ms-Table-row.is-selected .ms-Table-rowCheck::after { + content: '\E73A'; + color: #ffffff; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'FabricMDL2Icons'; + font-style: normal; + font-weight: normal; + speak: none; + content: '\E739'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 1px; +} + +.ms-Table--selectable tr:hover, +.ms-Table--selectable .ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck::before { + display: block; + } +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-TextField { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.ms-TextField .ms-Label { + font-size: 14px; + font-weight: 600; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled::-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-moz-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-moz-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-ms-input-placeholder::after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #333333; + height: 32px; + padding: 6px 12px 7px; + width: 100%; + min-width: 180px; + outline: 0; + text-overflow: ellipsis; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field[disabled] { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField-field::-webkit-input-placeholder { + color: #666666; +} + +.ms-TextField-field::-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-moz-placeholder { + color: #666666; +} + +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; + background-color: #ffffff; +} + +.ms-TextField.ms-TextField--placeholder .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: 5; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 14px; + color: #666666; + padding: 6px 12px 7px; + pointer-events: none; + z-index: 0; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 14px; + margin-right: 8px; + display: table-cell; + vertical-align: top; + padding-left: 12px; + padding-top: 9px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 3px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + color: #666666; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-size: 12px; + font-weight: 400; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required::after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +.ms-Toggle { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + top: -2px; + padding: 0 0 0 50px; +} + +.ms-Toggle .ms-Toggle-field::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + left: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field::before { + right: auto; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + position: absolute; + top: 3px; + width: 10px; + height: 10px; + border-radius: 10px; + content: ''; + right: 4px; + background-color: #666666; + outline: 1px solid transparent; + transition-property: background, left; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected::before { + border-color: #000000; + } +} + +.ms-Toggle .ms-Toggle-field.is-selected::before { + background-color: #ffffff; + left: 28px; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off { + display: none; +} + +.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle .ms-Toggle-field.is-selected { + background-color: #000000; + } +} + +.ms-Toggle:focus + .ms-Toggle-field, +.ms-Toggle:hover + .ms-Toggle-field { + border-color: #666666; +} + +.ms-Toggle:focus + .ms-Toggle-field::before, +.ms-Toggle:hover + .ms-Toggle-field::before { + background-color: #333333; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field, +.ms-Toggle:hover:checked + .ms-Toggle-field { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle:focus:checked + .ms-Toggle-field::before, +.ms-Toggle:hover:checked + .ms-Toggle-field::before { + background-color: #ffffff; +} + +.ms-Toggle:active:checked + .ms-Toggle-field { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Toggle .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + border-color: #333333; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #106ebe; + border-color: #106ebe; +} + +.ms-Toggle .ms-Toggle-field .ms-Label { + color: #000000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Toggle .ms-Toggle-field:hover .ms-Label { + color: #000000; +} + +.ms-Toggle .ms-Toggle-field:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff; + border-color: #c8c8c8; + pointer-events: none; + cursor: default; +} + +.ms-Toggle.is-disabled .ms-Toggle-field::before { + background-color: #c8c8c8; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field::before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 14px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 45px; + height: 20px; + box-sizing: border-box; + border: 2px solid #a6a6a6; + border-radius: 20px; + cursor: pointer; + transition-property: background, left, border-color; + transition-duration: 250ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); + outline: 0; +} + +.ms-Toggle-field:hover, +.ms-Toggle-field:focus { + border-color: #666666; +} + +.ms-Toggle-input { + display: none; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} + +.u-contentCenter { + position: relative; + margin: 0 auto; + max-width: 100%; + transition: 0.167s all cubic-bezier(0.1, 0.9, 0.2, 1); +} + +@media (min-width: 640px) { + .u-contentCenter { + max-width: 960px; + } +} + +@media (min-width: 1366px) { + .HomePage .u-contentCenter, + .ChannelPage .u-contentCenter { + max-width: 1200px; + } +} + +* { + box-sizing: border-box; +} + +html, +body { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + padding: 0; + margin: 0; +} + +a { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; + color: #0078d7; + text-decoration: none; + cursor: pointer; + outline: none; + font-size: inherit; + text-decoration: none; +} + +a:hover, +a:focus { + color: #004578; +} + +a:active { + color: #0078d7; +} + +.VideoPortal-content { + position: relative; +} + +.VideoPortal-navBar { + display: block; + top: 0; + width: 100%; + z-index: 101; + height: 40px; +} + +.VideoPortal-page { + overflow: visible; + position: relative; + padding-bottom: 50px; +} + +.ms-CommandBar--navBar { + background-color: #f4f4f4; +} + +.VideoList-item.ms-Grid-col { + margin-bottom: 16px; + float: none; + display: inline-block; + vertical-align: top; + padding-left: 8px; + padding-right: 12px; +} + +.VideoList-thumbLink { + display: block; + position: relative; + width: 100%; + padding-bottom: 56.25%; +} + +.VideoList-thumbImg { + max-width: 100%; + min-width: 100%; + position: absolute; +} + +.VideoList-thumbCaption { + position: absolute; + right: 5px; + bottom: 5px; + padding: 3px; + color: #ffffff; + font-size: 12px; + background-color: rgba(0, 0, 0, 0.4); +} + +.VideoList-text { + padding-top: 5px; + margin: 0; +} + +.VideoList-title, +.VideoList-channel, +.VideoList-viewCount { + display: block; +} + +.VideoList-title { + display: block; + top: 0; + left: 10px; + bottom: 50%; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.VideoList-channel { + bottom: 1.2em; +} + +.VideoList-viewCount { + bottom: 0; +} + +@media (min-width: 480px) { + .VideoList-item { + margin-right: -4px; + } +} + +.SpotLight-container { + background-color: #212121; +} + +.SpotLightList { + white-space: nowrap; + overflow-x: scroll; + overflow-y: hidden; + position: relative; +} + +.SpotLight-title { + text-indent: 16px; +} + +.SpotLight-item { + position: relative; + display: inline-block; + float: none; + margin: 0; +} + +.SpotLight-thumb { + padding: 10px; +} + +.SpotLight-thumbImg { + max-width: 100%; + min-width: 100%; +} + +.SpotLight-text { + position: absolute; + right: 10px; + bottom: 13px; + left: 10px; + overflow: hidden; + color: #ffffff; + background: rgba(0, 0, 0, 0.4); + padding: 5px; +} + +.SpotLight-videoTitle, +.SpotLight-videoLength { + color: #ffffff; + display: block; +} + +@media (min-width: 640px) { + .SpotLightList { + overflow: hidden; + } + + .SpotLight-container { + padding: 10px 0; + } +} + +@media (min-width: 1024px) { + .SpotLight-title { + text-indent: 8px; + } +} + +.HomePage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelList-title { + padding-left: 10px; + border-width: 4px; + border-left-style: solid; +} + +.ChannelList-titleText { + margin-right: 7px; +} + +.PlayerPage-theater { + background-color: #212121; +} + +.VideoPlayer-player { + max-width: 100%; + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; +} + +.VideoPlayer-player iframe, +.VideoPlayer-player video, +.VideoPlayer-player .VideoPlayer-iframe { + background-color: #666666; + position: absolute; + top: 0; + left: 0; + width: 1px; + min-width: 100%; + *width: 100%; + height: 100%; + min-height: 100%; + cursor: pointer; +} + +.VideoPlayer-player iframe::after, +.VideoPlayer-player video::after, +.VideoPlayer-player .VideoPlayer-iframe::after { + position: absolute; + content: ''; + display: block; + width: 0; + height: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-left: 90px solid rgba(0, 0, 0, 0.4); + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + transition: 0.167s border-color cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.VideoPlayer-player iframe:hover::after, +.VideoPlayer-player video:hover::after, +.VideoPlayer-player .VideoPlayer-iframe:hover::after { + border-left-color: rgba(0, 0, 0, 0.75); +} + +.PlayerPage-content { + padding: 0 10px; +} + +.PlayerPage-info { + margin-bottom: 20px; + padding-right: 32px; +} + +.PlayerPage-header { + margin-bottom: 20px; +} + +.PlayerPage-titleArea { + margin-top: 17px; + margin-bottom: 8px; +} + +.PlayerPage-title { + margin-bottom: 5px; + margin-top: 0; + display: inline-block; +} + +.PlayerPage-titleSeparator { + display: inline-block; + margin: 0 10px; + position: relative; + bottom: 2px; +} + +.PlayerPage-channelLink { + font-size: 17px; + padding-left: 10px; + border-width: 4px; + border-left-style: solid; +} + +.PlayerPage-channelLink:hover { + color: #000000; +} + +.PlayerPage-channelText { + position: relative; + bottom: 2px; +} + +.PlayerPage-metaData { + margin-bottom: 10px; +} + +.PlayerPage-descriptionArea { + margin-bottom: 10px; +} + +.PlayerPage-description { + display: inline; + word-wrap: break-word; +} + +.PlayerPage-descriptionField { + position: relative; + margin-top: 17px; +} + +.PlayerPage-viewCountText { + margin-right: 5px; +} + +.SampleVideo-content { + background-color: #333333; + height: 120px; +} + +@media (min-width: 320px) { + .PlayerPage-content { + padding: 0 10px 0 16px; + } + + .PlayerPage-grid { + padding: 0; + } +} + +@media (min-width: 480px) { + .PlayerPage-relatedList .VideoList-title { + font-size: 15px; + margin-bottom: 5px; + } + + .PlayerPage-relatedList .VideoList-channel, + .PlayerPage-relatedList .VideoList-viewCount { + font-size: 14px; + } +} + +@media (min-width: 640px) { + .PlayerPage-header { + margin-bottom: 25px; + } + + .PlayerPage-titleArea { + margin-top: 35px; + } + + .PlayerPage-description { + font-size: 14px; + } + + .PlayerPage-title { + font-size: 28px; + } + + .PlayerPage-metaData { + font-size: 17px; + } + + .PlayerPage-channelLink { + font-size: 21px; + } +} + +@media (min-width: 1024px) { + .PlayerPage-content { + padding: 0; + } + + .PlayerPage-relatedTitle { + margin-top: 42px; + } + + .PlayerPage-relatedList .VideoList-text { + padding-top: 0; + } + + .PlayerPage-relatedList .VideoList-title { + margin-bottom: 5px; + line-height: 1.2em; + max-height: 3.6em; + overflow: hidden; + white-space: normal; + } +} + +.ChannelPage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelPage-pivots { + margin-bottom: 20px; +} + +.ChannelPage-pivots .ms-Pivot-link { + font-size: 21px; +} + +.ChannelsPage { + padding: 10px; +} + +.ChannelGroup-title { + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +.ChannelGroup-channel { + padding: 10px 0 10px 10px; + border-width: 4px; + border-left-style: solid; + margin-bottom: 10px; + display: block; +} + +.ChannelGroup-channel:hover { + color: #000000; +} + +@media (min-width: 480px) { + .ChannelsPage { + padding: 20px; + } +} diff --git a/dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css b/dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css new file mode 100644 index 00000000..939eb65e --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css @@ -0,0 +1 @@ +.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:11px 7px}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute;margin-right:-2px}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:8px 5px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:5px 4px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-ms-flexbox;display:flex;padding:0}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-right:4px;position:relative;top:1px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:'\E73E';font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:'';width:0;height:0;border-radius:50%;position:absolute;top:8px;left:8px;bottom:0;right:0;transition-property:top,left,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;left:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-right:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-right:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-right:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-left:4px}}.ms-CommandButton-icon{display:inline-block;margin-right:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-left:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-left:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-left:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:' ';width:1px;height:16px;top:12px;left:-8px;border-left:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-right:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:'';height:2px;position:absolute;left:0;right:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 16px 0 25px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;right:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 16px 0 26px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:'\E73E';font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;left:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-left:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-left:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;left:0;top:0;right:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-right:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-right:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-left:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:left;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;right:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:'';position:absolute;border-left:1px solid #a6a6a6;top:10px;bottom:10px;left:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:'';pointer-events:none;position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-right:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-right:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-right:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-right:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);left:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:right}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-left:-24px;margin-right:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;right:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;right:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;left:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\e73A';font-size:17px;color:#767676;position:absolute;top:23px;left:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-right:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-right:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;left:0;right:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;right:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-right:0;padding-left:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:-30px 0 30px 30px rgba(0,0,0,.2);left:0;right:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;right:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-left:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-left:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-left:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;left:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;left:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;left:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;left:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:left;padding-left:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-left:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;left:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;left:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:'';width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:'';width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;left:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-right:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-left:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:'';position:absolute;top:47px;left:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:'';position:absolute;width:100%;height:100%;background-color:transparent;top:0;left:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\E70D'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E70E'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-right:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:'';height:2px;left:8px;position:absolute;right:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;right:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-left:12px;margin-right:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 3px 7px 45px;width:208px;background-color:transparent;z-index:5;transition:padding-left .167s}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;left:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px;line-height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 3px 7px 45px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{right:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:' ';right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;right:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-right:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-right:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:'\E73A';color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E739';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-right:8px;display:table-cell;vertical-align:top;padding-left:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 0 0 50px}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{right:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;left:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,left,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}.u-contentCenter{position:relative;margin:0 auto;max-width:100%;transition:all .167s cubic-bezier(.1,.9,.2,1)}@media (min-width:640px){.u-contentCenter{max-width:960px}}@media (min-width:1366px){.ChannelPage .u-contentCenter,.HomePage .u-contentCenter{max-width:1200px}}*{box-sizing:border-box}body,html{padding:0;margin:0}a,body,html{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400}a{color:#0078d7;cursor:pointer;outline:none;font-size:inherit;text-decoration:none}a:focus,a:hover{color:#004578}a:active{color:#0078d7}.VideoPortal-content{position:relative}.VideoPortal-navBar{display:block;top:0;width:100%;z-index:101;height:40px}.VideoPortal-page{overflow:visible;position:relative;padding-bottom:50px}.ms-CommandBar--navBar{background-color:#f4f4f4}.VideoList-item.ms-Grid-col{margin-bottom:16px;float:none;display:inline-block;vertical-align:top;padding-left:8px;padding-right:12px}.VideoList-thumbLink{display:block;position:relative;width:100%;padding-bottom:56.25%}.VideoList-thumbImg{max-width:100%;min-width:100%;position:absolute}.VideoList-thumbCaption{position:absolute;right:5px;bottom:5px;padding:3px;color:#fff;font-size:12px;background-color:rgba(0,0,0,.4)}.VideoList-text{padding-top:5px;margin:0}.VideoList-channel,.VideoList-title,.VideoList-viewCount{display:block}.VideoList-title{display:block;top:0;left:10px;bottom:50%;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.VideoList-channel{bottom:1.2em}.VideoList-viewCount{bottom:0}@media (min-width:480px){.VideoList-item{margin-right:-4px}}.SpotLight-container{background-color:#212121}.SpotLightList{white-space:nowrap;overflow-x:scroll;overflow-y:hidden;position:relative}.SpotLight-title{text-indent:16px}.SpotLight-item{position:relative;display:inline-block;float:none;margin:0}.SpotLight-thumb{padding:10px}.SpotLight-thumbImg{max-width:100%;min-width:100%}.SpotLight-text{position:absolute;right:10px;bottom:13px;left:10px;overflow:hidden;color:#fff;background:rgba(0,0,0,.4);padding:5px}.SpotLight-videoLength,.SpotLight-videoTitle{color:#fff;display:block}@media (min-width:640px){.SpotLightList{overflow:hidden}.SpotLight-container{padding:10px 0}}@media (min-width:1024px){.SpotLight-title{text-indent:8px}}.HomePage-content{padding:10px;padding-top:20px}.ChannelList-title{padding-left:10px;border-width:4px;border-left-style:solid}.ChannelList-titleText{margin-right:7px}.PlayerPage-theater{background-color:#212121}.VideoPlayer-player{max-width:100%;position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.VideoPlayer-player .VideoPlayer-iframe,.VideoPlayer-player iframe,.VideoPlayer-player video{background-color:#666;position:absolute;top:0;left:0;width:1px;min-width:100%;*width:100%;height:100%;min-height:100%;cursor:pointer}.VideoPlayer-player .VideoPlayer-iframe:after,.VideoPlayer-player iframe:after,.VideoPlayer-player video:after{position:absolute;content:'';display:block;width:0;height:0;border-top:60px solid transparent;border-bottom:60px solid transparent;border-left:90px solid rgba(0,0,0,.4);top:50%;left:50%;transform:translate(-50%,-50%);transition:border-color .167s cubic-bezier(.1,.25,.75,.9)}.VideoPlayer-player .VideoPlayer-iframe:hover:after,.VideoPlayer-player iframe:hover:after,.VideoPlayer-player video:hover:after{border-left-color:rgba(0,0,0,.75)}.PlayerPage-content{padding:0 10px}.PlayerPage-info{padding-right:32px}.PlayerPage-header,.PlayerPage-info{margin-bottom:20px}.PlayerPage-titleArea{margin-top:17px;margin-bottom:8px}.PlayerPage-title{margin-bottom:5px;margin-top:0;display:inline-block}.PlayerPage-titleSeparator{display:inline-block;margin:0 10px;position:relative;bottom:2px}.PlayerPage-channelLink{font-size:17px;padding-left:10px;border-width:4px;border-left-style:solid}.PlayerPage-channelLink:hover{color:#000}.PlayerPage-channelText{position:relative;bottom:2px}.PlayerPage-descriptionArea,.PlayerPage-metaData{margin-bottom:10px}.PlayerPage-description{display:inline;word-wrap:break-word}.PlayerPage-descriptionField{position:relative;margin-top:17px}.PlayerPage-viewCountText{margin-right:5px}.SampleVideo-content{background-color:#333;height:120px}@media (min-width:320px){.PlayerPage-content{padding:0 10px 0 16px}.PlayerPage-grid{padding:0}}@media (min-width:480px){.PlayerPage-relatedList .VideoList-title{font-size:15px;margin-bottom:5px}.PlayerPage-relatedList .VideoList-channel,.PlayerPage-relatedList .VideoList-viewCount{font-size:14px}}@media (min-width:640px){.PlayerPage-header{margin-bottom:25px}.PlayerPage-titleArea{margin-top:35px}.PlayerPage-description{font-size:14px}.PlayerPage-title{font-size:28px}.PlayerPage-metaData{font-size:17px}.PlayerPage-channelLink{font-size:21px}}@media (min-width:1024px){.PlayerPage-content{padding:0}.PlayerPage-relatedTitle{margin-top:42px}.PlayerPage-relatedList .VideoList-text{padding-top:0}.PlayerPage-relatedList .VideoList-title{margin-bottom:5px;line-height:1.2em;max-height:3.6em;overflow:hidden;white-space:normal}}.ChannelPage-content{padding:10px;padding-top:20px}.ChannelPage-pivots{margin-bottom:20px}.ChannelPage-pivots .ms-Pivot-link{font-size:21px}.ChannelsPage{padding:10px}.ChannelGroup-title{padding-bottom:10px;border-bottom:1px solid #eaeaea}.ChannelGroup-channel{padding:10px 0 10px 10px;border-width:4px;border-left-style:solid;margin-bottom:10px;display:block}.ChannelGroup-channel:hover{color:#000}@media (min-width:480px){.ChannelsPage{padding:20px}} \ No newline at end of file diff --git a/dist/documentation/Samples/VideoPortal/index.html b/dist/documentation/Samples/VideoPortal/index.html new file mode 100644 index 00000000..2e30a6c3 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/index.html @@ -0,0 +1,302 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + + +
      +
      + +
      + +
      +
      +
      +
      + + + 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/demo.css b/dist/documentation/demo.css new file mode 100644 index 00000000..9466e81b --- /dev/null +++ b/dist/documentation/demo.css @@ -0,0 +1,291 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +/*Variables*/ +/* DOCUMENTATION SPECIFIC STYLING */ +html, +body { + margin: 0; + padding: 0; + height: 100%; +} + +body { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + font-weight: 400; +} + +h1 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 28px; + font-weight: 100; +} + +h2 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 21px; + font-weight: 100; +} + +h3 { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 17px; + font-weight: 300; +} + +.componentDemo { + padding: 0 20px; +} + +#componentWrapper { + width: calc(100% - 56px); + height: 100%; + padding: 0 28px; +} + +.sample-wrapper { + margin: 28px 0; +} + +.sample-wrapper > .ms-Overlay { + display: block; + position: relative; + height: 300px; + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3); +} + +.ms-NavBar-item .ms-ContextualMenu { + position: absolute; +} + +.ms-CommandBar .ms-ContextualMenu { + position: absolute; +} + +pre { + white-space: pre-wrap; +} + +#Header { + position: absolute; + top: 0; + height: 47px; + left: 0; + right: 0; + line-height: 47px; + padding: 0 20px; + overflow: hidden; + white-space: no-wrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#Header .Header-Title { + display: inline-block; +} + +#Header .Header-Title:hover { + cursor: default; +} + +#Header .Header-buttons { + -webkit-font-smoothing: auto; +} + +#Header .Header-button { + position: relative; + text-decoration: none; + background: 0 0; + color: #ffffff; + border: none; + padding: 0; + padding: 0 10px; + min-width: 50px; + height: 50px; + line-height: 50px; + margin: 0 5px; + text-transform: uppercase; + display: inline-block; + vertical-align: top; + box-sizing: border-box; +} + +#Header .Header-button:hover { + background-color: #0078d7; +} + +html[dir=ltr] #ContentContainer { + left: 300px; + right: 0; +} + +html[dir=ltr] .ms-Nav-groupButton { + text-align: left; +} + +html[dir=ltr] .ms-Nav-groupChevron.ms-Icon { + left: 15px; +} + +html[dir=ltr] #Header .HeaderTitle { + padding: 5px 0px 5px 20px; +} + +html[dir=ltr] #Header .Header-buttons { + float: right; +} + +html[dir=ltr] #SidebarContainer { + border-right: 1px solid #eeeeee; + left: 0; +} + +html[dir=rtl] #ContentContainer { + left: 0; + right: 300px; +} + +html[dir=rtl] .ms-Nav-groupChevron.ms-Icon { + right: 15px; +} + +html[dir=rtl] .ms-Nav-groupButton { + text-align: right; +} + +html[dir=rtl] #Header .HeaderTitle { + padding: 5px 20px 5px 0px; +} + +html[dir=rtl] #Header .Header-buttons { + float: left; +} + +html[dir=rtl] #SidebarContainer { + border-left: 1px solid #eeeeee; + right: 0; +} + +html[dir=rtl] .LinkContainer a.is-selected:after { + border-right: 2px solid black; + border-left: 0px; +} + +#SidebarContainer { + position: absolute; + width: 300px; + top: 47px; + bottom: 0; + background: #ffffff; + box-sizing: border-box; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +#SidebarContainer h1 { + padding-left: 25px; +} + +.ms-Nav-groupChevron.ms-Icon { + position: absolute; + height: 40px; + line-height: 40px; + font-size: 13px; + transition: transform 0.1s linear; + transition: transform 0.1s linear,-webkit-transform 0.1s linear; +} + +.ms-Nav-group.is-expanded .ms-Nav-groupChevron { + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); +} + +.ms-Nav-groupButton { + display: block; + width: 100%; + height: 40px; + font-family: 'Segoe UI Regular WestEuropean','Segoe UI',Tahoma,Arial,sans-serif; + font-size: 12px; + line-height: 40px; + margin: 5px 0; + padding: 0 40px; + background: 0 0; + border: none; + border-bottom: 1px solid #eaeaea; + text-transform: uppercase; + cursor: pointer; + color: #333333; + background: #ffffff; + outline: transparent; +} + +.ms-Nav-groupButton:hover { + background: #f8f8f8; +} + +.ms-Nav-groupContent { + display: none; + margin-bottom: 20px; +} + +.ms-Nav-group.is-expanded .ms-Nav-groupContent { + display: block; +} + +.ms-u-slideDownIn20 { + animation-name: fade,slideDownIn20; + -webkit-animation-duration: 367ms; + -moz-animation-duration: 367ms; + -ms-animation-duration: 367ms; + -o-animation-duration: 367ms; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + +#ContentContainer { + position: absolute; + top: 47px; + bottom: 0; + overflow-x: auto; + overflow-y: hidden; + transform: translateZ(0); + -webkit-overflow-scrolling: touch; +} + +.LinkContainer { + margin-bottom: 20px; +} + +.LinkContainer a { + display: block; + padding: 10px 40px; +} + +.LinkContainer a.is-selected { + background-color: #f4f4f4; + position: relative; + color: #333333; +} + +.LinkContainer a.is-selected:after { + content: ''; + position: absolute; + border-left: 2px solid black; + top: 0; + left: 0; + right: 0; + bottom: 0; +} diff --git a/dist/documentation/demo.min.css b/dist/documentation/demo.min.css new file mode 100644 index 00000000..00c84157 --- /dev/null +++ b/dist/documentation/demo.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +body,html{margin:0;padding:0;height:100%}body{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400}h1{font-size:28px}h1,h2{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100}h2{font-size:21px}h3{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300}.componentDemo{padding:0 20px}#componentWrapper{width:calc(100% - 56px);height:100%;padding:0 28px}.sample-wrapper{margin:28px 0}.sample-wrapper>.ms-Overlay{display:block;position:relative;height:300px;box-shadow:0 0 8px 0 rgba(0,0,0,.3)}.ms-CommandBar .ms-ContextualMenu,.ms-NavBar-item .ms-ContextualMenu{position:absolute}pre{white-space:pre-wrap}#Header{position:absolute;top:0;height:47px;left:0;right:0;line-height:47px;padding:0 20px;overflow:hidden;white-space:no-wrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#Header .Header-Title{display:inline-block}#Header .Header-Title:hover{cursor:default}#Header .Header-buttons{-webkit-font-smoothing:auto}#Header .Header-button{position:relative;text-decoration:none;background:0 0;color:#fff;border:none;padding:0;padding:0 10px;min-width:50px;height:50px;line-height:50px;margin:0 5px;text-transform:uppercase;display:inline-block;vertical-align:top;box-sizing:border-box}#Header .Header-button:hover{background-color:#0078d7}html[dir=ltr] #ContentContainer{left:300px;right:0}html[dir=ltr] .ms-Nav-groupButton{text-align:left}html[dir=ltr] .ms-Nav-groupChevron.ms-Icon{left:15px}html[dir=ltr] #Header .HeaderTitle{padding:5px 0 5px 20px}html[dir=ltr] #Header .Header-buttons{float:right}html[dir=ltr] #SidebarContainer{border-right:1px solid #eee;left:0}html[dir=rtl] #ContentContainer{left:0;right:300px}html[dir=rtl] .ms-Nav-groupChevron.ms-Icon{right:15px}html[dir=rtl] .ms-Nav-groupButton{text-align:right}html[dir=rtl] #Header .HeaderTitle{padding:5px 20px 5px 0}html[dir=rtl] #Header .Header-buttons{float:left}html[dir=rtl] #SidebarContainer{border-left:1px solid #eee;right:0}html[dir=rtl] .LinkContainer a.is-selected:after{border-right:2px solid #000;border-left:0}#SidebarContainer{position:absolute;width:300px;top:47px;bottom:0;background:#fff;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}#SidebarContainer h1{padding-left:25px}.ms-Nav-groupChevron.ms-Icon{position:absolute;height:40px;line-height:40px;font-size:13px;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}.ms-Nav-group.is-expanded .ms-Nav-groupChevron{transform:rotate(-180deg)}.ms-Nav-groupButton{display:block;width:100%;height:40px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;line-height:40px;margin:5px 0;padding:0 40px;background:0 0;border:none;border-bottom:1px solid #eaeaea;text-transform:uppercase;cursor:pointer;color:#333;background:#fff;outline:transparent}.ms-Nav-groupButton:hover{background:#f8f8f8}.ms-Nav-groupContent{display:none;margin-bottom:20px}.ms-Nav-group.is-expanded .ms-Nav-groupContent{display:block}.ms-u-slideDownIn20{animation-name:fade,slideDownIn20;-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}#ContentContainer{position:absolute;top:47px;bottom:0;overflow-x:auto;overflow-y:hidden;transform:translateZ(0);-webkit-overflow-scrolling:touch}.LinkContainer{margin-bottom:20px}.LinkContainer a{display:block;padding:10px 40px}.LinkContainer a.is-selected{background-color:#f4f4f4;position:relative;color:#333}.LinkContainer a.is-selected:after{content:'';position:absolute;border-left:2px solid #000;top:0;left:0;right:0;bottom:0} \ No newline at end of file diff --git a/dist/documentation/index.html b/dist/documentation/index.html new file mode 100644 index 00000000..23e011ae --- /dev/null +++ b/dist/documentation/index.html @@ -0,0 +1,276 @@ + + + + + + Fabric Samples Index + + + + + +
      + +
      + +
      + +
      + + + Building + + + + Bundling + + + + Componentslist + + + + Contributing + + + + Packages + + + + Resources + + + + Roadmap + + +
      +
      + +
      + +
      + + + Breadcrumb + + + + Button + + + + Callout + + + + CheckBox + + + + ChoiceFieldGroup + + + + CommandBar + + + + CommandButton + + + + ContextualMenu + + + + DatePicker + + + + Dialog + + + + Dropdown + + + + FacePile + + + + Label + + + + Link + + + + List + + + + ListItem + + + + MessageBanner + + + + MessageBar + + + + OrgChart + + + + Overlay + + + + Panel + + + + PeoplePicker + + + + Persona + + + + PersonaCard + + + + Pivot + + + + ProgressIndicator + + + + SearchBox + + + + Spinner + + + + Table + + + + TextField + + + + Toggle + + +
      +
      + +
      + +
      + + + Form + + + + Languages + + + + VideoPortal + + +
      +
      + +
      +
      + +
      +
      + + + \ No newline at end of file diff --git a/dist/js/fabric.js b/dist/js/fabric.js new file mode 100644 index 00000000..16169e91 --- /dev/null +++ b/dist/js/fabric.js @@ -0,0 +1,3615 @@ +/** + * Office UI Fabric JS 1.3.0 + * The JavaScript front-end framework for building experiences for Office 365. + **/ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// "use strict"; +var fabric; +(function (fabric) { + var SCROLL_FRAME_RATE = 33; + var Animate = (function () { + function Animate() { + } + /** + * @param {HTMLElement} element + * @param {object} props Transition properties + * @param {number} props.duration The duration of the transition in seconds + * @param {number} props.delay A delay in seconds that occurs before the transition starts + * @param {string} props.ease An easing equation applied to the transition + * @param {function} props.onEnd A function that is called when the transition ends + * @param {array} props.onEndArgs An array of parameters applied to the onEnd function + * @param {number} props.x props.y props.left, props.opacity etc... CSS values to transition to + */ + Animate.transition = function (element, props) { + var obj = { element: element, props: props, transformations: {} }; + Animate._animationObjects.push(obj); + Animate._parseProperties(obj); + Animate._createTransition(obj); + setTimeout(Animate._setProperties, 0, obj); + Animate._setCallback(obj); + }; + /** + * @param {HTMLElement} element + * @param {string} keyframes A name of a keyframe animation + * @param {object} props Animation properties + * @param {number} props.duration The duration of the animation in seconds + * @param {number} props.delay A delay in seconds that occurs before the animation starts + * @param {string} props.ease An easing equation applied to the animation + * @param {function} props.onEnd A function that is called when the animation ends + * @param {array} props.onEndArgs An array of parameters applied to the onEnd function + */ + Animate.animation = function (element, keyframes, props) { + var obj = { element: element, keyframes: keyframes, props: props }; + Animate._animationObjects.push(obj); + Animate._parseProperties(obj); + Animate._createAnimation(obj); + Animate._setCallback(obj); + }; + /** + * @param {HTMLElement} element + * @param {object} props Scroll animation properties + * @param {number} props.duration The duration of the transition in seconds + * @param {number} props.top The end scroll position of the element + * @param {number} props.delay A delay in seconds that occurs before the scroll starts + * @param {function} props.onEnd A function that is called when the scrolling animation ends + * @param {array} props.onEndArgs An array of parameters applied to the onEnd function + */ + Animate.scrollTo = function (element, props) { + var obj = { element: element, props: props, step: 0 }; + Animate._setScrollProperties(obj); + if (obj.props.delay) { + setTimeout(Animate._animationObjects, obj.props.delay * 1000, obj); + } + else { + Animate._animateScroll(obj); + } + Animate._animationObjects.push(obj); + }; + Animate._setScrollProperties = function (obj) { + obj.beginTop = obj.element.scrollTop; + obj.change = obj.props.top - obj.beginTop; + obj.props.duration = obj.props.duration * 1000; + }; + Animate._parseProperties = function (obj) { + var nonTweenProps = Animate._timeProps.concat(Animate._callbackProps); + obj.tweenObj = {}; + for (var key in obj.props) { + if (Animate._contains(nonTweenProps, key)) { + obj[key] = obj.props[key]; + } + else { + obj.tweenObj[key] = obj.props[key]; + } + } + }; + Animate._animateScroll = function (obj) { + var totalSteps = obj.props.duration / SCROLL_FRAME_RATE; + var top = Animate._easeOutExpo(obj.step++, obj.beginTop, obj.change, totalSteps); + obj.element.scrollTop = top; + if (obj.step >= totalSteps) { + obj.element.scrollTop = obj.props.top; + Animate._executeCallback(obj.props); + Animate._removeAnimationObject(obj); + } + else { + setTimeout(function () { + requestAnimationFrame(function () { + Animate._animateScroll(obj); + }); + }, SCROLL_FRAME_RATE); + } + }; + Animate._createTransition = function (obj) { + var duration = obj.duration || 0; + var delay = obj.delay || 0; + obj.element.style.transitionProperty = Animate._getTransitionProperties(obj.tweenObj); + obj.element.style.transitionDuration = duration.toString() + "s"; + obj.element.style.transitionTimingFunction = obj.ease || "linear"; + obj.element.style.transitionDelay = delay.toString() + "s"; + }; + Animate._createAnimation = function (obj) { + var duration = obj.duration || 0; + var delay = obj.delay || 0; + obj.element.style.animationName = obj.keyframes; + obj.element.style.animationDuration = duration.toString() + "s"; + obj.element.style.animationTimingFunction = obj.ease || "linear"; + obj.element.style.animationDelay = delay.toString() + "s"; + obj.element.style.animationFillMode = "both"; + }; + Animate._getTransitionProperties = function (obj) { + var hasTransform = false; + var hasFilter = false; + var properties = []; + for (var key in obj) { + if (Animate._contains(Animate._transformProps, key)) { + hasTransform = true; + } + else if (Animate._contains(Animate._filters, key)) { + hasFilter = true; + } + else { + properties.push(Animate._camelCaseToDash(key)); + } + } + if (hasTransform) { + properties.push("transform"); + } + if (hasFilter) { + properties.push("-webkit-filter"); + properties.push("filter"); + } + return properties.join(", "); + }; + Animate._setProperties = function (obj) { + for (var key in obj.tweenObj) { + if (Animate._contains(Animate._transformProps, key)) { + Animate._setTransformValues(obj, key); + } + else if (Animate._contains(Animate._filters, key)) { + Animate._setFilterValues(obj, key); + } + else { + Animate._setRegularValues(obj, key); + } + } + if (obj.transformations) { + Animate._setTransformations(obj); + } + }; + Animate._setRegularValues = function (obj, key) { + var value = obj.tweenObj[key]; + if (value.toString().indexOf("%") === -1) { + value += (key !== "opacity") && (key !== "backgroundColor") && (key !== "boxShadow") ? "px" : ""; + } + obj.element.style[key] = value; + }; + Animate._setFilterValues = function (obj, key) { + var value = obj.tweenObj[key]; + if (key === "hueRotate") { + value = "(" + value + "deg)"; + } + else { + value = key === "blur" ? "(" + value + "px)" : "(" + value + "%)"; + } + key = Animate._camelCaseToDash(key); + obj.element.style.webkitFilter = key + value; + obj.element.style.filter = key + value; + }; + Animate._setTransformValues = function (obj, key) { + if (/x|y|z|scaleX|scaleY|scaleZ|rotate|rotateX|rotateY|rotateZ|skewX|skewY/.test(key)) { + obj.transformations[key] = obj.tweenObj[key]; + } + }; + Animate._setTransformations = function (obj) { + var rotate = "", scale = "", skew = "", translate = ""; + var trans = obj.transformations; + translate += trans.x !== undefined && trans.x ? "translateX(" + trans.x + "px) " : ""; + translate += trans.y !== undefined && trans.y ? "translateY(" + trans.y + "px) " : ""; + translate += trans.z !== undefined && trans.z ? "translateZ(" + trans.z + "px) " : ""; + rotate += trans.rotate !== undefined && trans.rotate ? "rotate(" + trans.rotate + "deg) " : ""; + rotate += trans.rotateX !== undefined && trans.rotateX ? "rotateX(" + trans.rotateX + "deg) " : ""; + rotate += trans.rotateY !== undefined && trans.rotateY ? "rotate(" + trans.rotateY + "deg) " : ""; + rotate += trans.rotateZ !== undefined && trans.rotateZ ? "rotate(" + trans.rotateZ + "deg) " : ""; + scale += trans.scaleX !== undefined && trans.scaleX ? "scaleX(" + trans.scaleX + ") " : ""; + scale += trans.scaleY !== undefined && trans.scaleY ? "scaleY(" + trans.scaleY + ") " : ""; + scale += trans.scaleZ !== undefined && trans.scaleZ ? "scaleZ(" + trans.scaleZ + ") " : ""; + skew += trans.skewX !== undefined && trans.skewX ? "skewX(" + trans.skewX + "deg) " : ""; + skew += trans.skewY !== undefined && trans.skewY ? "skewY(" + trans.skewY + "deg) " : ""; + obj.element.style.transform = translate + rotate + scale + skew; + }; + Animate._setCallback = function (obj) { + obj.element.addEventListener("webkitTransitionEnd", Animate._complete, false); + obj.element.addEventListener("transitionend", Animate._complete, false); + obj.element.addEventListener("webkitAnimationEnd", Animate._complete, false); + obj.element.addEventListener("animationend", Animate._complete, false); + }; + Animate._complete = function (event) { + event.target.removeEventListener("webkitTransitionEnd", Animate._complete); + event.target.removeEventListener("transitionend", Animate._complete); + event.target.removeEventListener("webkitAnimationEnd", Animate._complete); + event.target.removeEventListener("animationend", Animate._complete); + var obj = Animate._getAnimationObjByElement(event.target); + Animate._executeCallback(obj); + Animate._removeAnimationObject(obj); + }; + Animate._getAnimationObjByElement = function (element) { + var i = Animate._animationObjects.length; + while (i--) { + if (Animate._animationObjects[i].element === element) { + return Animate._animationObjects[i]; + } + } + return null; + }; + Animate._removeAnimationObject = function (obj) { + var i = Animate._animationObjects.length; + while (i--) { + if (Animate._animationObjects[i] === obj) { + Animate._animationObjects.splice(i, 1); + } + } + }; + Animate._executeCallback = function (obj) { + if (obj.onEnd) { + var endArgs = obj.onEndArgs || []; + obj.onEnd.apply(null, endArgs); + } + }; + Animate._contains = function (array, value) { + var i = array.length; + while (i--) { + if (value === array[i]) { + return true; + } + } + return false; + }; + Animate._camelCaseToDash = function (value) { + return value.replace(/\W+/g, "-").replace(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase(); + }; + Animate._easeOutExpo = function (time, begin, change, duration) { + return (time === duration) ? begin + change : change * (-Math.pow(2, -10 * time / duration) + 1) + begin; + }; + Animate._transformProps = [ + "x", + "y", + "z", + "scaleX", + "scaleY", + "scaleZ", + "rotate", + "rotateX", + "rotateY", + "rotateZ", + "skewX", + "skewY" + ]; + Animate._filters = [ + "blur", + "brightness", + "contrast", + "dropShadow", + "grayscale", + "hueRotate", + "invert", + "saturate", + "sepia" + ]; + Animate._timeProps = ["duration", "ease", "delay"]; + Animate._callbackProps = ["onEnd", "onEndArgs"]; + Animate._animationObjects = []; + return Animate; + }()); + fabric.Animate = Animate; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// "use strict"; +var fabric; +(function (fabric) { + var Ease = (function () { + function Ease() { + } + Ease.QUAD_EASE_IN = Ease.CB + "(0.550, 0.085, 0.680, 0.530)"; + Ease.CUBIC_EASE_IN = Ease.CB + "(0.550, 0.055, 0.675, 0.190)"; + Ease.QUART_EASE_IN = Ease.CB + "(0.895, 0.030, 0.685, 0.220)"; + Ease.QUINT_EASE_IN = Ease.CB + "(0.755, 0.050, 0.855, 0.060)"; + Ease.SINE_EASE_IN = Ease.CB + "(0.470, 0, 0.745, 0.715)"; + Ease.EXPO_EASE_IN = Ease.CB + "(0.950, 0.050, 0.795, 0.035)"; + Ease.CIRC_EASE_IN = Ease.CB + "(0.600, 0.040, 0.980, 0.335)"; + Ease.BACK_EASE_IN = Ease.CB + "(0.600, 0.040, 0.980, 0.335)"; + Ease.QUAD_EASE_OUT = Ease.CB + "(0.250, 0.460, 0.450, 0.940)"; + Ease.CUBIC_EASE_OUT = Ease.CB + "(0.215, 0.610, 0.355, 1)"; + Ease.QUART_EASE_OUT = Ease.CB + "(0.165, 0.840, 0.440, 1)"; + Ease.QUINT_EASE_OUT = Ease.CB + "(0.230, 1, 0.320, 1)"; + Ease.SINE_EASE_OUT = Ease.CB + "(0.390, 0.575, 0.565, 1)"; + Ease.EXPO_EASE_OUT = Ease.CB + "(0.190, 1, 0.220, 1)"; + Ease.CIRC_EASE_OUT = Ease.CB + "(0.075, 0.820, 0.165, 1)"; + Ease.BACK_EASE_OUT = Ease.CB + "(0.175, 0.885, 0.320, 1.275)"; + Ease.QUAD_EASE_IN_OUT = Ease.CB + "(0.455, 0.030, 0.515, 0.955)"; + Ease.CUBIC_EASE_IN_OUT = Ease.CB + "(0.645, 0.045, 0.355, 1)"; + Ease.QUART_EASE_IN_OUT = Ease.CB + "(0.770, 0, 0.175, 1)"; + Ease.QUINT_EASE_IN_OUT = Ease.CB + "(0.860, 0, 0.070, 1)"; + Ease.SINE_EASE_IN_OUT = Ease.CB + "(0.445, 0.050, 0.550, 0.950)"; + Ease.EXPO_EASE_IN_OUT = Ease.CB + "(1, 0, 0, 1)"; + Ease.CIRC_EASE_IN_OUT = Ease.CB + "(0.785, 0.135, 0.150, 0.860)"; + Ease.BACK_EASE_IN_OUT = Ease.CB + "(0.680, -0.550, 0.265, 1.550)"; + Ease.CB = "cubic-bezier"; + return Ease; + }()); + fabric.Ease = Ease; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// "use strict"; +// CustomEvent Polyfill to support IE +(function () { + function CustomEvent(event, params) { + params = params || { bubbles: false, cancelable: false, detail: undefined }; + var evt = document.createEvent("CustomEvent"); + evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); + return evt; + } + ; + CustomEvent.prototype = Event.prototype; + window.CustomEvent = CustomEvent; +})(); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * @namespace fabric + */ +var fabric; +(function (fabric) { + "use strict"; + /** + * Breadcrumb component + * + * Shows the user"s current location in a hierarchy and provides a means of navigating upward. + * + */ + var Breadcrumb = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of Breadcrumb + * @constructor + * + * If dynamically populating a list run the constructor after the list has been populated + * in the DOM. + */ + function Breadcrumb(container) { + this._currentMaxItems = 0; + this._itemCollection = []; + this._tabIndex = 2; + this.container = container; + this._onResize = this._onResize.bind(this); + this._openOverflow = this._openOverflow.bind(this); + this._overflowKeyPress = this._overflowKeyPress.bind(this); + this._closeOverflow = this._closeOverflow.bind(this); + this.removeOutlinesOnClick = this.removeOutlinesOnClick.bind(this); + this.init(); + } + /** + * removes focus outlines so they don"t linger after click + */ + Breadcrumb.prototype.removeOutlinesOnClick = function () { + this._breadcrumbList.blur(); + }; + /** + * Adds a breadcrumb item to a breadcrumb + * @param itemLabel {String} the item's text label + * @param itemLink {String} the item's href link + */ + Breadcrumb.prototype.addItem = function (itemLabel, itemLink) { + this._itemCollection.push({ text: itemLabel, link: itemLink }); + this._updateBreadcrumbs(); + }; + /** + * Removes a breadcrumb item by item label in the breadcrumbs list + * @param itemLabel {String} the item's text label + */ + Breadcrumb.prototype.removeItemByLabel = function (itemLabel) { + var i = this._itemCollection.length; + while (i--) { + if (this._itemCollection[i].text === itemLabel) { + this._itemCollection.splice(i, 1); + } + } + this._updateBreadcrumbs(); + }; + ; + /** + * removes a breadcrumb item by position in the breadcrumb's list + * index starts at 0 + * @param value {number} the item's index + */ + Breadcrumb.prototype.removeItemByPosition = function (value) { + this._itemCollection.splice(value, 1); + this._updateBreadcrumbs(); + }; + /** + * initializes component + */ + Breadcrumb.prototype.init = function () { + this._cacheDOM(); + this._setListeners(); + this._createItemCollection(); + this._onResize(); + }; + /** + * create internal model of list items from DOM + */ + Breadcrumb.prototype._createItemCollection = function () { + var length = this._listItems.length; + var i = 0; + var item; + var text; + var link; + var tabIndex; + for (i; i < length; i++) { + item = this._listItems[i].querySelector(".ms-Breadcrumb-itemLink"); + text = item.textContent; + link = item.getAttribute("href"); + tabIndex = parseInt(item.getAttribute("tabindex"), 10); + this._itemCollection.push({ link: link, tabIndex: tabIndex, text: text }); + } + }; + /** + * Re-render lists on resize + * + */ + Breadcrumb.prototype._onResize = function () { + this._closeOverflow(null); + this._renderList(); + }; + /** + * render breadcrumbs and overflow menus + */ + Breadcrumb.prototype._renderList = function () { + var maxItems = window.innerWidth > Breadcrumb.MEDIUM ? 4 : 2; + if (maxItems !== this._currentMaxItems) { + this._updateBreadcrumbs(); + } + this._currentMaxItems = maxItems; + }; + /** + * updates the breadcrumbs and overflow menu + */ + Breadcrumb.prototype._updateBreadcrumbs = function () { + this._tabIndex = 2; + var maxItems = window.innerWidth > Breadcrumb.MEDIUM ? 4 : 2; + if (this._itemCollection.length > maxItems) { + this._breadcrumb.classList.add("is-overflow"); + } + else { + this._breadcrumb.classList.remove("is-overflow"); + } + this._addItemsToOverflow(maxItems); + this._addBreadcrumbItems(maxItems); + }; + ; + /** + * creates the overflow menu + */ + Breadcrumb.prototype._addItemsToOverflow = function (maxItems) { + var _this = this; + this._resetList(this._contextMenu); + var end = this._itemCollection.length - maxItems; + var overflowItems = this._itemCollection.slice(0, end); + overflowItems.forEach(function (item) { + var li = document.createElement("li"); + li.className = "ms-ContextualMenu-item"; + var a = document.createElement("a"); + a.className = "ms-ContextualMenu-link"; + if (item.link !== null) { + a.setAttribute("href", item.link); + } + a.setAttribute("tabindex", (_this._tabIndex++).toString()); + a.textContent = item.text; + li.appendChild(a); + _this._contextMenu.appendChild(li); + }); + }; + /** + * creates the breadcrumbs + */ + Breadcrumb.prototype._addBreadcrumbItems = function (maxItems) { + this._resetList(this._breadcrumbList); + var i = this._itemCollection.length - maxItems; + i = i < 0 ? 0 : i; + if (i >= 0) { + for (i; i < this._itemCollection.length; i++) { + var listItem = document.createElement("li"); + var item = this._itemCollection[i]; + var a = document.createElement("a"); + var chevron = document.createElement("i"); + listItem.className = "ms-Breadcrumb-listItem"; + a.className = "ms-Breadcrumb-itemLink"; + if (item.link !== null) { + a.setAttribute("href", item.link); + } + a.setAttribute("tabindex", (this._tabIndex++).toString()); + a.textContent = item.text; + chevron.className = "ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"; + listItem.appendChild(a); + listItem.appendChild(chevron); + this._breadcrumbList.appendChild(listItem); + } + } + }; + /** + * resets a list by removing its children + */ + Breadcrumb.prototype._resetList = function (list) { + while (list.firstChild) { + list.removeChild(list.firstChild); + } + }; + /** + * opens the overflow menu + */ + Breadcrumb.prototype._openOverflow = function (event) { + if (this._overflowMenu.className.indexOf(" is-open") === -1) { + this._overflowMenu.classList.add("is-open"); + this.removeOutlinesOnClick(); + // force focus rect onto overflow button + this._overflowButton.focus(); + } + }; + Breadcrumb.prototype._overflowKeyPress = function (event) { + if (event.keyCode === 13) { + this._openOverflow(event); + } + }; + /** + * closes the overflow menu + */ + Breadcrumb.prototype._closeOverflow = function (event) { + if (!event || event.target !== this._overflowButton) { + this._overflowMenu.classList.remove("is-open"); + } + }; + /** + * caches elements and values of the component + */ + Breadcrumb.prototype._cacheDOM = function () { + this._breadcrumb = this.container; + this._breadcrumbList = this._breadcrumb.querySelector(".ms-Breadcrumb-list"); + this._listItems = this._breadcrumb.querySelectorAll(".ms-Breadcrumb-listItem"); + this._contextMenu = this._breadcrumb.querySelector(".ms-ContextualMenu"); + this._overflowButton = this._breadcrumb.querySelector(".ms-Breadcrumb-overflowButton"); + this._overflowMenu = this._breadcrumb.querySelector(".ms-Breadcrumb-overflowMenu"); + }; + /** + * sets handlers for resize and button click events + */ + Breadcrumb.prototype._setListeners = function () { + window.addEventListener("resize", this._onResize, false); + this._overflowButton.addEventListener("click", this._openOverflow, false); + this._overflowButton.addEventListener("keypress", this._overflowKeyPress, false); + document.addEventListener("click", this._closeOverflow, false); + this._breadcrumbList.addEventListener("click", this.removeOutlinesOnClick, false); + }; + // medium breakpoint + Breadcrumb.MEDIUM = 639; + return Breadcrumb; + }()); + fabric.Breadcrumb = Breadcrumb; +})(fabric || (fabric = {})); // end fabric namespace + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * Button + * + * Mostly just a click handler + * + */ +var fabric; +(function (fabric) { + "use strict"; + var Button = (function () { + function Button(container, clickHandler) { + this._container = container; + if (clickHandler) { + this._clickHandler = clickHandler; + this._setClick(); + } + } + Button.prototype.disposeEvents = function () { + this._container.removeEventListener("click", this._clickHandler, false); + }; + Button.prototype._setClick = function () { + this._container.addEventListener("click", this._clickHandler, false); + }; + return Button; + }()); + fabric.Button = Button; +})(fabric || (fabric = {})); + + + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * ContextualHost + * + * Hosts contextual menus and callouts + * NOTE: Position bottom only works if html is set to max-height 100%, overflow hidden + * and body is set to overflow scroll, body is set to height 100% + * + */ +/** + * @namespace fabric + */ +var fabric; +(function (fabric) { + /** + * + * @constructor + */ + var CONTEXT_STATE_CLASS = "is-open"; + var MODAL_STATE_POSITIONED = "is-positioned"; + var CONTEXT_HOST_MAIN_CLASS = "ms-ContextualHost-main"; + var CONTEXT_HOST_BEAK_CLASS = "ms-ContextualHost-beak"; + var ARROW_LEFT_CLASS = "ms-ContextualHost--arrowLeft"; + var ARROW_TOP_CLASS = "ms-ContextualHost--arrowTop"; + var ARROW_BOTTOM_CLASS = "ms-ContextualHost--arrowBottom"; + var ARROW_RIGHT_CLASS = "ms-ContextualHost--arrowRight"; + var MODIFIER_BASE = "ms-ContextualHost--"; + var ARROW_SIZE = 28; + var ARROW_OFFSET = 8; + var ContextualHost = (function () { + function ContextualHost(content, direction, targetElement, hasArrow, modifiers, matchTargetWidth, disposalCallback) { + if (hasArrow === void 0) { hasArrow = true; } + this._resizeAction = this._resizeAction.bind(this); + this._dismissAction = this._dismissAction.bind(this); + this._handleKeyUpDismiss = this._handleKeyUpDismiss.bind(this); + this._matchTargetWidth = matchTargetWidth || false; + this._direction = direction; + this._container = this.createContainer(); + this._contextualHost = this._container; + this._contextualHostMain = this._contextualHost.getElementsByClassName(CONTEXT_HOST_MAIN_CLASS)[0]; + this._contextualHostMain.appendChild(content); + this._hasArrow = hasArrow; + this._arrow = this._container.getElementsByClassName(CONTEXT_HOST_BEAK_CLASS)[0]; + this._targetElement = targetElement; + this._openModal(); + this._setResizeDisposal(); + if (disposalCallback) { + this._disposalCallback = disposalCallback; + } + if (modifiers) { + for (var i = 0; i < modifiers.length; i++) { + this._container.classList.add(MODIFIER_BASE + modifiers[i]); + } + } + if (!ContextualHost.hosts) { + ContextualHost.hosts = []; + } + ContextualHost.hosts.push(this); + } + ContextualHost.prototype.disposeModal = function () { + if (ContextualHost.hosts.length > 0) { + window.removeEventListener("resize", this._resizeAction, false); + document.removeEventListener("click", this._dismissAction, true); + document.removeEventListener("keyup", this._handleKeyUpDismiss, true); + this._container.parentNode.removeChild(this._container); + if (this._disposalCallback) { + this._disposalCallback(); + } + // Dispose of all ContextualHosts + var index = ContextualHost.hosts.indexOf(this); + ContextualHost.hosts.splice(index, 1); + var i = ContextualHost.hosts.length; + while (i--) { + ContextualHost.hosts[i].disposeModal(); + ContextualHost.hosts.splice(i, 1); + } + } + }; + ContextualHost.prototype.setChildren = function (value) { + if (!this._children) { + this._children = []; + } + this._children.push(value); + }; + ContextualHost.prototype.contains = function (value) { + return this._container.contains(value); + }; + ContextualHost.prototype.createContainer = function () { + var ContextualHost0 = document.createElement("div"); + ContextualHost0.setAttribute("class", "ms-ContextualHost"); + ContextualHost0.innerHTML += " "; + var ContextualHost0c1 = document.createElement("div"); + ContextualHost0c1.setAttribute("class", CONTEXT_HOST_MAIN_CLASS); + ContextualHost0c1.innerHTML += " "; + ContextualHost0.appendChild(ContextualHost0c1); + ContextualHost0.innerHTML += " "; + var ContextualHost0c3 = document.createElement("div"); + ContextualHost0c3.setAttribute("class", CONTEXT_HOST_BEAK_CLASS); + ContextualHost0.appendChild(ContextualHost0c3); + ContextualHost0.innerHTML += ""; + return ContextualHost0; + }; + ContextualHost.prototype._openModal = function () { + var _this = this; + this._copyModalToBody(); + this._saveModalSize(); + this._findAvailablePosition(); + this._showModal(); + // Delay the click setting + setTimeout(function () { _this._setDismissClick(); }, 100); + }; + ContextualHost.prototype._findAvailablePosition = function () { + var _posOk; + switch (this._direction) { + case "left": + // Try the right side + _posOk = this._positionOk(this._tryPosModalLeft.bind(this), this._tryPosModalRight.bind(this), this._tryPosModalBottom.bind(this), this._tryPosModalTop.bind(this)); + this._setPosition(_posOk); + break; + case "right": + _posOk = this._positionOk(this._tryPosModalRight.bind(this), this._tryPosModalLeft.bind(this), this._tryPosModalBottom.bind(this), this._tryPosModalTop.bind(this)); + this._setPosition(_posOk); + break; + case "top": + _posOk = this._positionOk(this._tryPosModalTop.bind(this), this._tryPosModalBottom.bind(this)); + this._setPosition(_posOk); + break; + case "bottom": + _posOk = this._positionOk(this._tryPosModalBottom.bind(this), this._tryPosModalTop.bind(this)); + this._setPosition(_posOk); + break; + default: + this._setPosition(); + } + }; + ContextualHost.prototype._showModal = function () { + this._container.classList.add(CONTEXT_STATE_CLASS); + }; + ContextualHost.prototype._positionOk = function (pos1, pos2, pos3, pos4) { + var _posOk; + _posOk = pos1(); + if (!_posOk) { + _posOk = pos2(); + if (!_posOk && pos3) { + _posOk = pos3(); + if (!_posOk && pos4) { + _posOk = pos4(); + } + } + } + return _posOk; + }; + ContextualHost.prototype._calcLeft = function (mWidth, teWidth, teLeft) { + var mHalfWidth = mWidth / 2; + var teHalf = teWidth / 2; + var mHLeft = (teLeft + teHalf) - mHalfWidth; + mHLeft = (mHLeft < mHalfWidth) ? teLeft : mHLeft; + return mHLeft; + }; + ContextualHost.prototype._calcTop = function (mHeight, teHeight, teTop) { + var mHalfWidth = mHeight / 2; + var teHalf = teHeight / 2; + var mHLeft = (teTop + teHalf) - mHalfWidth; + mHLeft = (mHLeft < mHalfWidth) ? teTop : mHLeft; + return mHLeft; + }; + ContextualHost.prototype._setPosition = function (curDirection) { + var teBR = this._targetElement.getBoundingClientRect(); + var teLeft = teBR.left; + var teRight = teBR.right; + var teTop = teBR.top; + var teWidth = teBR.width; + var teHeight = teBR.height; + var mHLeft; + var mHTop; + var mWidth = ""; + var arrowTop; + var arrowLeft; + var windowX = window.scrollX ? window.scrollX : 0; + var windowY = window.scrollY ? window.scrollY : 0; + var arrowSpace = (this._hasArrow) ? ARROW_SIZE : 0; + if (this._matchTargetWidth) { + mWidth = "width: " + this._modalWidth + "px;"; + } + switch (curDirection) { + case "left": + mHLeft = teLeft - this._modalWidth - arrowSpace; + mHTop = this._calcTop(this._modalHeight, teHeight, teTop); + mHTop += window.scrollY ? window.scrollY : 0; + this._container.setAttribute("style", "top: " + mHTop + "px; left: " + mHLeft + "px;" + mWidth); + this._container.classList.add(MODAL_STATE_POSITIONED); + if (this._hasArrow) { + this._container.classList.add(ARROW_RIGHT_CLASS); + arrowTop = ((teTop + windowY) - mHTop) + ARROW_OFFSET; + this._arrow.setAttribute("style", "top: " + arrowTop + "px;"); + } + break; + case "right": + mHTop = this._calcTop(this._modalHeight, teHeight, teTop); + mHTop += windowY; + mHLeft = teRight + arrowSpace; + this._container.setAttribute("style", "top: " + mHTop + "px; left: " + mHLeft + "px;" + mWidth); + this._container.classList.add(MODAL_STATE_POSITIONED); + if (this._hasArrow) { + arrowTop = ((windowY + teTop) - mHTop) + ARROW_OFFSET; + this._arrow.setAttribute("style", "top: " + arrowTop + "px;"); + this._container.classList.add(ARROW_LEFT_CLASS); + } + break; + case "top": + mHLeft = this._calcLeft(this._modalWidth, this._teWidth, teLeft); + mHTop = teTop - this._modalHeight - arrowSpace; + mHTop += windowY; + this._container.setAttribute("style", "top: " + mHTop + "px; left: " + mHLeft + "px;" + mWidth); + this._container.classList.add(MODAL_STATE_POSITIONED); + if (this._hasArrow) { + arrowTop = this._modalHeight - (arrowSpace / 2); + arrowLeft = Math.max(windowX + teLeft - mHLeft + ((teWidth - arrowSpace) / 2), ARROW_OFFSET); + this._arrow.setAttribute("style", "top: " + arrowTop + "px; left: " + arrowLeft + "px;"); + this._container.classList.add(ARROW_BOTTOM_CLASS); + } + break; + case "bottom": + mHLeft = mHLeft = this._calcLeft(this._modalWidth, this._teWidth, teLeft); + mHTop = teTop + teHeight + arrowSpace; + mHTop += window.scrollY ? window.scrollY : 0; + this._container.setAttribute("style", "top: " + mHTop + "px; left: " + mHLeft + "px;" + mWidth); + this._container.classList.add(MODAL_STATE_POSITIONED); + if (this._hasArrow) { + arrowLeft = Math.max(windowX + teLeft - mHLeft + ((teWidth - arrowSpace) / 2), ARROW_OFFSET); + this._arrow.setAttribute("style", "left: " + arrowLeft + "px;"); + this._container.classList.add(ARROW_TOP_CLASS); + } + break; + default: + this._container.setAttribute("style", "top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"); + } + }; + ContextualHost.prototype._tryPosModalLeft = function () { + var teLeft = this._targetElement.getBoundingClientRect().left; + if (teLeft < this._modalWidth) { + return false; + } + else { + return "left"; + } + }; + ContextualHost.prototype._tryPosModalRight = function () { + var teRight = this._targetElement.getBoundingClientRect().right; + var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); + if ((w - teRight) < this._modalWidth) { + return false; + } + else { + return "right"; + } + }; + ContextualHost.prototype._tryPosModalBottom = function () { + var teBottom = window.innerHeight - this._targetElement.getBoundingClientRect().bottom; + if (teBottom < this._modalHeight) { + return false; + } + else { + return "bottom"; + } + }; + ContextualHost.prototype._tryPosModalTop = function () { + var teTop = this._targetElement.getBoundingClientRect().top; + if (teTop < this._modalHeight) { + return false; + } + else { + return "top"; + } + }; + ContextualHost.prototype._copyModalToBody = function () { + document.body.appendChild(this._container); + }; + ContextualHost.prototype._saveModalSize = function () { + var _modalStyles = window.getComputedStyle(this._container); + this._container.setAttribute("style", "opacity: 0; z-index: -1"); + this._container.classList.add(MODAL_STATE_POSITIONED); + this._container.classList.add(CONTEXT_STATE_CLASS); + if (this._matchTargetWidth) { + var teStyles = window.getComputedStyle(this._targetElement); + this._modalWidth = this._targetElement.getBoundingClientRect().width + + (parseInt(teStyles.marginLeft, 10) + + parseInt(teStyles.marginLeft, 10)); + } + else { + this._modalWidth = this._container.getBoundingClientRect().width + + (parseInt(_modalStyles.marginLeft, 10) + + parseInt(_modalStyles.marginRight, 10)); + this._container.setAttribute("style", ""); + } + this._modalHeight = this._container.getBoundingClientRect().height + + (parseInt(_modalStyles.marginTop, 10) + + parseInt(_modalStyles.marginBottom, 10)); + this._container.classList.remove(MODAL_STATE_POSITIONED); + this._container.classList.remove(CONTEXT_STATE_CLASS); + this._teWidth = this._targetElement.getBoundingClientRect().width; + this._teHeight = this._targetElement.getBoundingClientRect().height; + }; + ContextualHost.prototype._dismissAction = function (e) { + // If the element clicked is not INSIDE of contextualHost then close contextualHost + if (!this._container.contains(e.target) && e.target !== this._container) { + if (this._children !== undefined) { + var isChild_1 = false; + this._children.map(function (child) { + if (child !== undefined) { + isChild_1 = child.contains(e.target); + } + }); + if (!isChild_1) { + this.disposeModal(); + } + } + else { + this.disposeModal(); + } + } + }; + ContextualHost.prototype._setDismissClick = function () { + document.addEventListener("click", this._dismissAction, true); + document.addEventListener("keyup", this._handleKeyUpDismiss, true); + }; + ContextualHost.prototype._handleKeyUpDismiss = function (e) { + if (e.keyCode === 32 || e.keyCode === 27) { + this._dismissAction(e); + } + }; + ContextualHost.prototype._resizeAction = function () { + this.disposeModal(); + }; + ContextualHost.prototype._setResizeDisposal = function () { + window.addEventListener("resize", this._resizeAction, false); + }; + return ContextualHost; + }()); + fabric.ContextualHost = ContextualHost; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +/// +/** + * Callout + * + * Add callouts to things and stuff + * + */ +/// +var STATE_HIDDEN = "is-hidden"; +var CLOSE_BUTTON_CLASS = ".ms-Callout-close"; +var MODIFIER_OOBE_CLASS = "ms-Callout--OOBE"; +var fabric; +(function (fabric) { + "use strict"; + var Callout = (function () { + function Callout(container, addTarget, position) { + this._container = container; + this._addTarget = addTarget; + this._position = position; + this._closeButton = document.querySelector(CLOSE_BUTTON_CLASS); + this._setOpener(); + } + Callout.prototype._setOpener = function () { + this._addTarget.addEventListener("click", this._clickHandler.bind(this), true); + }; + Callout.prototype._openContextMenu = function () { + var modifiers = []; + if (this._hasModifier(MODIFIER_OOBE_CLASS)) { + modifiers.push("primaryArrow"); + } + this._container.classList.remove(STATE_HIDDEN); + this._contextualHost = new fabric.ContextualHost(this._container, this._position, this._addTarget, true, modifiers); + if (this._closeButton) { + this._closeButton.addEventListener("click", this._closeHandler.bind(this), false); + } + }; + Callout.prototype._hasModifier = function (modifierClass) { + return this._container.classList.contains(modifierClass); + }; + Callout.prototype._closeHandler = function (e) { + this._contextualHost.disposeModal(); + this._closeButton.removeEventListener("click", this._closeHandler.bind(this), false); + this._addTarget.removeEventListener("click", this._clickHandler.bind(this), true); + }; + Callout.prototype._clickHandler = function (e) { + this._openContextMenu(); + }; + return Callout; + }()); + fabric.Callout = Callout; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +"use strict"; +var fabric; +(function (fabric) { + /** + * CheckBox Plugin + * + * Adds basic demonstration functionality to .ms-CheckBox components. + * + */ + var CheckBox = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of CheckBox + * @constructor + */ + function CheckBox(container) { + this._container = container; + this._choiceField = this._container.querySelector(".ms-CheckBox-field"); + this._choiceInput = this._container.querySelector(".ms-CheckBox-input"); + if (this._choiceInput.checked) { + this._choiceField.setAttribute("aria-checked", "true"); + } + if (this._choiceField.getAttribute("aria-checked") === "true") { + this._choiceField.classList.add("is-checked"); + } + this._addListeners(); + } + CheckBox.prototype.getValue = function () { + return this._choiceField.getAttribute("aria-checked") === "true" ? true : false; + }; + CheckBox.prototype.toggle = function () { + if (this.getValue()) { + this.unCheck(); + } + else { + this.check(); + } + this._choiceInput.click(); + }; + CheckBox.prototype.check = function () { + this._choiceField.setAttribute("aria-checked", "true"); + this._choiceField.classList.add("is-checked"); + }; + CheckBox.prototype.unCheck = function () { + this._choiceField.setAttribute("aria-checked", "false"); + this._choiceField.classList.remove("is-checked"); + }; + CheckBox.prototype.removeListeners = function () { + this._choiceField.removeEventListener("focus", this._FocusHandler.bind(this)); + this._choiceField.removeEventListener("blur", this._BlurHandler.bind(this)); + this._choiceField.removeEventListener("click", this._ClickHandler.bind(this)); + this._choiceField.removeEventListener("keydown", this._KeydownHandler.bind(this)); + }; + CheckBox.prototype._addListeners = function (events) { + var ignore = events && events.ignore; + if (!ignore || !(ignore.indexOf("focus") > -1)) { + this._choiceField.addEventListener("focus", this._FocusHandler.bind(this), false); + } + if (!ignore || !(ignore.indexOf("blur") > -1)) { + this._choiceField.addEventListener("blur", this._BlurHandler.bind(this), false); + } + if (!ignore || !(ignore.indexOf("click") > -1)) { + this._choiceField.addEventListener("click", this._ClickHandler.bind(this), false); + } + if (!ignore || !(ignore.indexOf("keydown") > -1)) { + this._choiceField.addEventListener("keydown", this._KeydownHandler.bind(this), false); + } + }; + CheckBox.prototype._FocusHandler = function () { + this._choiceField.classList.add("in-focus"); + }; + CheckBox.prototype._BlurHandler = function () { + this._choiceField.classList.remove("in-focus"); + }; + CheckBox.prototype._ClickHandler = function (event) { + event.stopPropagation(); + event.preventDefault(); + if (!this._choiceField.classList.contains("is-disabled")) { + this.toggle(); + } + }; + CheckBox.prototype._KeydownHandler = function (event) { + if (event.keyCode === 32) { + event.stopPropagation(); + event.preventDefault(); + if (!this._choiceField.classList.contains("is-disabled")) { + this.toggle(); + } + } + }; + return CheckBox; + }()); + fabric.CheckBox = CheckBox; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/** + * SearchBox component + * + * Allows you to search the world. + * + */ +/** + * @namespace fabric + */ +var fabric; +(function (fabric) { + /** + * + * @param {HTMLElement} container - the target container for an instance of SearchBox + * @constructor + * + */ + var SB_FIELD = ".ms-SearchBox-field"; + var SB_CLEAR_BUTTON = ".ms-SearchBox-clear"; + var SB_EXIT_BUTTON = ".ms-SearchBox-exit"; + var SB_HAS_TEXT = "has-text"; + var SB_IS_ACTIVE = "is-active"; + var SB_IS_ANIMATED = "is-animated"; + var SearchBox = (function () { + function SearchBox(container) { + var _this = this; + this._container = container; + this._saveDOMRefs(this._container); + this._boundExpandSearchHandler = this._expandSearchHandler.bind(this); + this._boundEnableClose = this._enableClose.bind(this); + this._boundCollapseSearchBox = this._collapseSearchBox.bind(this); + this._boundClearSearchBox = this._clearSearchBox.bind(this); + this._boundHandleBlur = this._handleBlur.bind(this); + this._boundExitSearchBox = this._exitSearchBox.bind(this); + this._setHasText(); + this._setFocusAction(this._container); + this._setClearButtonAction(); + this._setBlurAction(); + this._clearOnly = false; + setTimeout(function () { + _this._checkState(); + _this._addAnimation(); + }, 10); + } + SearchBox.prototype.setCollapsedListeners = function () { + this._disposeListeners(); + this._searchBox.addEventListener("click", this._boundExpandSearchHandler, false); + this._searchBoxField.addEventListener("focus", this._boundExpandSearchHandler, true); + }; + SearchBox.prototype.getInputField = function () { + return this._searchBoxField; + }; + SearchBox.prototype._saveDOMRefs = function (context) { + this._searchBox = context; + this._searchBoxField = this._searchBox.querySelector(SB_FIELD); + this._searchBoxClearButton = this._searchBox.querySelector(SB_CLEAR_BUTTON); + this._searchBoxExitButton = this._searchBox.querySelector(SB_EXIT_BUTTON); + }; + SearchBox.prototype._disposeListeners = function () { + this._searchBox.removeEventListener("click", this._boundExpandSearchHandler); + this._searchBoxField.removeEventListener("focus", this._boundExpandSearchHandler); + }; + SearchBox.prototype._exitSearchBox = function (event) { + event.stopPropagation(); + event.target.blur(); + this._clearSearchBox(); + this._collapseSearchBox(); + this._searchBox.removeEventListener("keyup", this._boundEnableClose); + this.setCollapsedListeners(); + }; + SearchBox.prototype._collapseSearchBox = function () { + this._searchBox.classList.remove("is-active"); + var event = document.createEvent("Event"); + event.initEvent("searchCollapse", true, true); + this._searchBoxField.dispatchEvent(event); + }; + SearchBox.prototype._expandSearchHandler = function () { + this._disposeListeners(); + this._searchBox.classList.add("is-active"); + this._searchBoxField.focus(); + }; + SearchBox.prototype._enableClose = function () { + this._setHasText(); + }; + SearchBox.prototype._setHasText = function () { + if (this._searchBoxField.value.length > 0) { + this._searchBox.classList.add(SB_HAS_TEXT); + } + else { + this._searchBox.classList.remove(SB_HAS_TEXT); + } + }; + SearchBox.prototype._setFocusAction = function (context) { + var _this = this; + this._searchBoxField.addEventListener("focus", function () { + _this._setHasText(); + _this._searchBox.addEventListener("keyup", _this._boundEnableClose, false); + _this._searchBox.classList.add(SB_IS_ACTIVE); + _this._searchBox.classList.add(SB_IS_ACTIVE); + }, true); + }; + SearchBox.prototype._clearSearchBox = function (event) { + var _this = this; + this._clearOnly = true; + this._searchBoxField.value = ""; + this._setHasText(); + setTimeout(function () { + _this._clearOnly = false; + }, 10); + }; + SearchBox.prototype._setClearButtonAction = function () { + var _this = this; + if (this._searchBoxExitButton) { + this._searchBoxExitButton.addEventListener("click", this._boundExitSearchBox, false); + } + this._searchBoxClearButton.addEventListener("mousedown", this._boundClearSearchBox, false); + this._searchBoxClearButton.addEventListener("keydown", function (e) { + var keyCode = e.keyCode; + if (keyCode === 13) { + _this._clearSearchBox(e); + } + }, false); + }; + SearchBox.prototype._handleBlur = function (event) { + var _this = this; + if (!this._clearOnly) { + this._searchBox.removeEventListener("keyup", this._boundEnableClose); + setTimeout(function () { + if (!_this._searchBox.contains(document.activeElement)) { + _this._clearSearchBox(); + _this._collapseSearchBox(); + _this.setCollapsedListeners(); + } + }, 10); + } + else { + this._searchBoxField.focus(); + } + this._clearOnly = false; + }; + SearchBox.prototype._setBlurAction = function () { + this._searchBoxField.addEventListener("blur", this._boundHandleBlur, true); + this._searchBoxClearButton.addEventListener("blur", this._boundHandleBlur, true); + }; + SearchBox.prototype._checkState = function () { + if (this._searchBox.classList.contains("is-collapsed")) { + this.setCollapsedListeners(); + } + }; + SearchBox.prototype._addAnimation = function () { + this._container.classList.add(SB_IS_ANIMATED); + }; + return SearchBox; + }()); + fabric.SearchBox = SearchBox; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +/** + * CommandButton + * + * Buttons used primarily in the command bar + * + */ +/** + * @namespace fabric + */ +var fabric; +(function (fabric) { + /** + * + * @constructor + */ + var CONTEXT_CLASS = ".ms-ContextualMenu"; + var CB_SPLIT_CLASS = ".ms-CommandButton-splitIcon"; + var CB_BUTTON_CLASS = ".ms-CommandButton-button"; + var MODAL_POSITION = "bottom"; + var CommandButton = (function () { + function CommandButton(container, contextMenu) { + this._container = container; + this._command = this._container; + this._commandButton = this._command.querySelector(CB_BUTTON_CLASS); + this._splitButton = this._command.querySelector(CB_SPLIT_CLASS); + if (contextMenu) { + this._contextualMenu = contextMenu; + } + else { + this._contextualMenu = this._container.querySelector(CONTEXT_CLASS); + } + this._checkForMenu(); + } + CommandButton.prototype._createModalHostView = function () { + this._modalHostView = new fabric.ContextualHost(this._contextualMenu, MODAL_POSITION, this._command, false); + }; + CommandButton.prototype._setClick = function () { + if (this._splitButton) { + this._splitButton.addEventListener("click", this._createModalHostView.bind(this), false); + } + else { + this._commandButton.addEventListener("click", this._createModalHostView.bind(this), false); + } + }; + CommandButton.prototype._checkForMenu = function () { + if (this._contextualMenu) { + this._setClick(); + } + }; + return CommandButton; + }()); + fabric.CommandButton = CommandButton; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +/// +/// +/** + * CommandBar + * + * Commanding and navigational surface + * + */ +var fabric; +(function (fabric) { + "use strict"; + var CONTEXTUAL_MENU = ".ms-ContextualMenu"; + var CONTEXTUAL_MENU_ITEM = ".ms-ContextualMenu-item"; + var CONTEXTUAL_MENU_LINK = ".ms-ContextualMenu-link"; + var CB_SEARCH_BOX = ".ms-SearchBox"; + var CB_MAIN_AREA = ".ms-CommandBar-mainArea"; + var CB_SIDE_COMMAND_AREA = ".ms-CommandBar-sideCommands"; + var CB_ITEM_OVERFLOW = ".ms-CommandBar-overflowButton"; + var CB_NO_LABEL_CLASS = "ms-CommandButton--noLabel"; + var SEARCH_BOX_CLOSE = ".ms-SearchBox-closeField"; + var COMMAND_BUTTON = ".ms-CommandButton"; + var COMMAND_BUTTON_LABEL = ".ms-CommandButton-label"; + var ICON = ".ms-Icon"; + var OVERFLOW_WIDTH = 40; + var OVERFLOW_LEFT_RIGHT_PADDING = 30; + var CommandBar = (function () { + function CommandBar(container) { + this.responsiveSizes = { + "sm-min": 320, + "md-min": 480, + "lg-min": 640, + "xl-min": 1024, + "xxl-min": 1366, + "xxxl-min": 1920 + }; + this.visibleCommands = []; + this.commandWidths = []; + this.overflowCommands = []; + this.itemCollection = []; + this._sideAreaCollection = []; + this.breakpoint = "sm"; + this._container = container; + this.responsiveSizes["sm-max"] = this.responsiveSizes["md-min"] - 1; + this.responsiveSizes["md-max"] = this.responsiveSizes["lg-min"] - 1; + this.responsiveSizes["lg-max"] = this.responsiveSizes["xl-min"] - 1; + this.responsiveSizes["xl-max"] = this.responsiveSizes["xxl-min"] - 1; + this.responsiveSizes["xxl-max"] = this.responsiveSizes["xxxl-min"] - 1; + this._setElements(); + this._setBreakpoint(); + // If the overflow exists then run the overflow resizing + if (this._elements.overflowCommand) { + this._initOverflow(); + } + this._setUIState(); + } + CommandBar.prototype._runsSearchBox = function (state) { + if (state === void 0) { state = "add"; } + this._changeSearchState("is-collapsed", state); + }; + CommandBar.prototype._runOverflow = function () { + if (this._elements.overflowCommand) { + this._saveCommandWidths(); + this._redrawMenu(); + this._updateCommands(); + this._drawCommands(); + this._checkOverflow(); + } + }; + CommandBar.prototype._initOverflow = function () { + this._createContextualRef(); + this._createItemCollection(this.itemCollection, CB_MAIN_AREA); + this._createItemCollection(this._sideAreaCollection, CB_SIDE_COMMAND_AREA); + this._saveCommandWidths(); + this._updateCommands(); + this._drawCommands(); + this._setWindowEvent(); + this._checkOverflow(); + }; + CommandBar.prototype._hasClass = function (element, cls) { + return (" " + element.className + " ").indexOf(" " + cls + " ") > -1; + }; + CommandBar.prototype._onSearchExpand = function () { + if (this.breakpoint === "lg") { + this._container.classList.add("search-expanded"); + this._doResize(); + } + }; + CommandBar.prototype._onSearchCollapse = function () { + if (this.breakpoint === "lg") { + this._container.classList.remove("search-expanded"); + this._doResize(); + } + }; + CommandBar.prototype._getScreenSize = function () { + // First we need to set what the screen is doing, check screen size + var w = window; + var wSize = { + x: 0, + y: 0 + }; + var d = document, e = d.documentElement, g = d.getElementsByTagName("body")[0]; + wSize.x = w.innerWidth || e.clientWidth || g.clientWidth; + wSize.y = w.innerHeight || e.clientHeight || g.clientHeight; + return wSize; + }; + CommandBar.prototype._setBreakpoint = function () { + var screenSize = this._getScreenSize().x; + switch (true) { + case (screenSize <= this.responsiveSizes["sm-max"]): + this.breakpoint = "sm"; + break; + case (screenSize >= this.responsiveSizes["md-min"] && screenSize <= this.responsiveSizes["md-max"]): + this.breakpoint = "md"; + break; + case (screenSize >= this.responsiveSizes["lg-min"] && screenSize <= this.responsiveSizes["lg-max"]): + this.breakpoint = "lg"; + break; + case (screenSize >= this.responsiveSizes["xl-min"] && screenSize <= this.responsiveSizes["xl-max"]): + this.breakpoint = "xl"; + break; + case (screenSize >= this.responsiveSizes["xxl-min"] && screenSize <= this.responsiveSizes["xxl-max"]): + this.breakpoint = "xxl"; + break; + case (screenSize >= this.responsiveSizes["xxxl-min"]): + this.breakpoint = "xxxl"; + break; + } + }; + CommandBar.prototype._createSearchInstance = function () { + if (this._elements.searchBox) { + return new fabric.SearchBox(this._elements.searchBox); + } + else { + return false; + } + }; + CommandBar.prototype._changeSearchState = function (state, action) { + if (this._elements.searchBox) { + switch (action) { + case "remove": + this._elements.searchBox.classList.remove(state); + break; + case "add": + this._elements.searchBox.classList.add(state); + break; + default: + break; + } + } + }; + CommandBar.prototype._setElements = function () { + var _this = this; + this._elements = { + mainArea: this._container.querySelector(CB_MAIN_AREA) + }; + if (this._container.querySelector(CB_SIDE_COMMAND_AREA)) { + this._elements.sideCommandArea = this._container.querySelector(CB_SIDE_COMMAND_AREA); + } + if (this._container.querySelector(CB_ITEM_OVERFLOW)) { + this._elements.overflowCommand = this._container.querySelector(CB_ITEM_OVERFLOW); + this._elements.contextMenu = this._container.querySelector(CB_ITEM_OVERFLOW).querySelector(CONTEXTUAL_MENU); + } + if (this._container.querySelector(CB_MAIN_AREA + " " + CB_SEARCH_BOX)) { + this._elements.searchBox = this._container.querySelector(CB_MAIN_AREA + " " + CB_SEARCH_BOX); + this._elements.searchBoxClose = this._container.querySelector(SEARCH_BOX_CLOSE); + this.searchBoxInstance = this._createSearchInstance(); + this.searchBoxInstance.getInputField().addEventListener("focus", function () { _this._onSearchExpand(); }, false); + this.searchBoxInstance.getInputField().addEventListener("searchCollapse", function () { _this._onSearchCollapse(); }, false); + } + }; + CommandBar.prototype._createItemCollection = function (iCollection, areaClass) { + var item, label, iconClasses, splitClasses, items = this._container.querySelectorAll(areaClass + " > " + COMMAND_BUTTON + ":not(" + CB_ITEM_OVERFLOW + ")"); + // Initiate the overflow command + this._commandButtonInstance = new fabric.CommandButton(this._elements.overflowCommand); + for (var i = 0; i < items.length; i++) { + item = items[i]; + label = item.querySelector(COMMAND_BUTTON_LABEL).textContent; + var icon = item.querySelector(ICON); + if (icon) { + iconClasses = icon.className; + splitClasses = iconClasses.split(" "); + for (var o = 0; o < splitClasses.length; o++) { + if (splitClasses[o].indexOf(ICON.replace(".", "") + "--") > -1) { + icon = splitClasses[o]; + break; + } + } + } + iCollection.push({ + item: item, + label: label, + icon: icon, + isCollapsed: (item.classList.contains(CB_NO_LABEL_CLASS)) ? true : false, + commandButtonRef: new fabric.CommandButton(item) + }); + } + return; + }; + CommandBar.prototype._createContextualRef = function () { + this.contextualItemContainerRef = this._elements.contextMenu.querySelector(CONTEXTUAL_MENU_ITEM).cloneNode(true); + this.contextualItemLink = this._elements.contextMenu.querySelector(CONTEXTUAL_MENU_LINK).cloneNode(false); + this.contextualItemIcon = this._elements.contextMenu.querySelector(".ms-Icon").cloneNode(false); + this._elements.contextMenu.innerHTML = ""; + }; + CommandBar.prototype._getElementWidth = function (element) { + var width, styles; + if (element.offsetParent === null) { + element.setAttribute("style", "position: absolute; opacity: 0; display: block;"); + } + width = element.getBoundingClientRect().width; + styles = window.getComputedStyle(element); + width += parseInt(styles.marginLeft, 10) + parseInt(styles.marginRight, 10); + element.setAttribute("style", ""); + return width; + }; + CommandBar.prototype._saveCommandWidths = function () { + for (var i = 0; i < this.itemCollection.length; i++) { + var item = this.itemCollection[i].item; + var width = this._getElementWidth(item); + this.commandWidths[i] = width; + } + }; + CommandBar.prototype._updateCommands = function () { + var searchCommandWidth = 0; + var mainAreaWidth = this._elements.mainArea.getBoundingClientRect().width; + if (this._elements.searchBox) { + searchCommandWidth = this._getElementWidth(this._elements.searchBox); + } + var offset = searchCommandWidth + OVERFLOW_WIDTH + OVERFLOW_LEFT_RIGHT_PADDING; + var totalAreaWidth = mainAreaWidth - offset; // Start with searchbox width + // Reset overflow and visible + this.visibleCommands = []; + this.overflowCommands = []; + var totalWidths = 0; + for (var i = 0; i < this.itemCollection.length; i++) { + totalWidths += this.commandWidths[i]; + if (totalWidths < totalAreaWidth) { + this.visibleCommands.push(this.itemCollection[i]); + } + else { + this.overflowCommands.push(this.itemCollection[i]); + } + } + }; + CommandBar.prototype._drawCommands = function () { + // Remove existing commands + this._elements.contextMenu.innerHTML = ""; + for (var i = 0; i < this.overflowCommands.length; i++) { + this.overflowCommands[i].item.classList.add("is-hidden"); + // Add all items to contextual menu. + var newCItem = this.contextualItemContainerRef.cloneNode(false); + var newClink = this.contextualItemLink.cloneNode(false); + var iconClass = this.overflowCommands[i].icon; + newClink.innerText = this.overflowCommands[i].label; + newCItem.appendChild(newClink); + if (iconClass) { + var newIcon = this.contextualItemIcon.cloneNode(false); + newIcon.className = ICON.replace(".", "") + " " + iconClass; + newCItem.appendChild(newIcon); + } + this._elements.contextMenu.appendChild(newCItem); + } + // Show visible commands + for (var x = 0; x < this.visibleCommands.length; x++) { + this.visibleCommands[x].item.classList.remove("is-hidden"); + } + }; + CommandBar.prototype._setWindowEvent = function () { + var _this = this; + window.addEventListener("resize", function () { + _this._doResize(); + }, false); + }; + CommandBar.prototype._processCollapsedClasses = function (type) { + for (var i = 0; i < this.itemCollection.length; i++) { + var thisItem = this.itemCollection[i]; + if (!thisItem.isCollapsed) { + if (type === "add") { + thisItem.item.classList.add(CB_NO_LABEL_CLASS); + } + else { + thisItem.item.classList.remove(CB_NO_LABEL_CLASS); + } + } + } + for (var i = 0; i < this._sideAreaCollection.length; i++) { + var thisItem = this._sideAreaCollection[i]; + if (!thisItem.isCollapsed) { + if (type === "add") { + thisItem.item.classList.add(CB_NO_LABEL_CLASS); + } + else { + thisItem.item.classList.remove(CB_NO_LABEL_CLASS); + } + } + } + }; + CommandBar.prototype._setUIState = function () { + switch (this.breakpoint) { + case "sm": + this._runsSearchBox(); + this._processCollapsedClasses("add"); + this._runOverflow(); + break; + case "md": + this._runsSearchBox(); + // Add collapsed classes to commands + this._processCollapsedClasses("add"); + this._runOverflow(); + break; + case "lg": + this._runsSearchBox(); + this._processCollapsedClasses("remove"); + this._runOverflow(); + break; + case "xl": + this._runsSearchBox("remove"); + this._processCollapsedClasses("remove"); + this._runOverflow(); + break; + default: + this._runsSearchBox("remove"); + this._processCollapsedClasses("remove"); + this._runOverflow(); + break; + } + }; + CommandBar.prototype._checkOverflow = function () { + if (this.overflowCommands.length > 0) { + this._elements.overflowCommand.classList.remove("is-hidden"); + } + else { + this._elements.overflowCommand.classList.add("is-hidden"); + if (this.activeCommand === this._elements.overflowCommand) { + this._elements.contextMenu.classList.remove("is-open"); + } + } + }; + CommandBar.prototype._redrawMenu = function () { + var left; + if (this._hasClass(this._elements.contextMenu, "is-open")) { + left = this.activeCommand.getBoundingClientRect().left; + this._drawOverflowMenu(left); + } + }; + CommandBar.prototype._drawOverflowMenu = function (left) { + this._elements.contextMenu.setAttribute("style", "left: " + left + "px; transform: translateX(-50%)"); + }; + CommandBar.prototype._doResize = function () { + this._setBreakpoint(); + this._setUIState(); + }; + return CommandBar; + }()); + fabric.CommandBar = CommandBar; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +"use strict"; +var fabric; +(function (fabric) { + /** + * RadioButton Plugin + * + * Adds basic demonstration functionality to .ms-RadioButton components. + * + */ + var RadioButton = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of RadioButton + * @constructor + */ + function RadioButton(container) { + this._container = container; + this._choiceField = this._container.querySelector(".ms-RadioButton-field"); + this._choiceInput = this._container.querySelector(".ms-RadioButton-input"); + if (this._choiceField.getAttribute("aria-checked") === "true") { + this._choiceField.classList.add("is-checked"); + } + this._addListeners(); + } + RadioButton.prototype.getValue = function () { + return this._choiceField.getAttribute("aria-checked") === "true" ? true : false; + }; + RadioButton.prototype.toggle = function () { + if (this.getValue()) { + this.unCheck(); + } + else { + this.check(); + } + }; + RadioButton.prototype.check = function () { + this._choiceField.setAttribute("aria-checked", "true"); + this._choiceField.classList.add("is-checked"); + this._choiceInput.checked = true; + }; + RadioButton.prototype.unCheck = function () { + this._choiceField.setAttribute("aria-checked", "false"); + this._choiceField.classList.remove("is-checked"); + this._choiceInput.checked = false; + }; + RadioButton.prototype.removeListeners = function () { + this._choiceField.removeEventListener("focus", this._FocusHandler.bind(this)); + this._choiceField.removeEventListener("blur", this._BlurHandler.bind(this)); + this._choiceField.removeEventListener("click", this._RadioClickHandler.bind(this)); + this._choiceField.addEventListener("keydown", this._RadioKeydownHandler.bind(this)); + }; + RadioButton.prototype._addListeners = function () { + this._choiceField.addEventListener("focus", this._FocusHandler.bind(this), false); + this._choiceField.addEventListener("blur", this._BlurHandler.bind(this), false); + this._choiceField.addEventListener("click", this._RadioClickHandler.bind(this), false); + this._choiceField.addEventListener("keydown", this._RadioKeydownHandler.bind(this), false); + }; + RadioButton.prototype._RadioClickHandler = function (event) { + event.stopPropagation(); + event.preventDefault(); + if (!this._choiceField.classList.contains("is-disabled")) { + this._dispatchSelectEvent(); + } + }; + RadioButton.prototype._dispatchSelectEvent = function () { + var objDict = { + bubbles: true, + cancelable: true, + detail: { + name: this._choiceField.getAttribute("name"), + item: this + } + }; + this._choiceField.dispatchEvent(new CustomEvent("msChoicefield", objDict)); + }; + RadioButton.prototype._RadioKeydownHandler = function (event) { + if (event.keyCode === 32) { + event.stopPropagation(); + event.preventDefault(); + if (!this._choiceField.classList.contains("is-disabled")) { + this._dispatchSelectEvent(); + } + } + }; + RadioButton.prototype._FocusHandler = function () { + this._choiceField.classList.add("in-focus"); + }; + RadioButton.prototype._BlurHandler = function () { + this._choiceField.classList.remove("in-focus"); + }; + return RadioButton; + }()); + fabric.RadioButton = RadioButton; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +"use strict"; +var fabric; +(function (fabric) { + /** + * ChoiceFieldGroup Plugin + * + * Adds basic demonstration functionality to .ms-ChoiceFieldGroup components. + * + */ + var ChoiceFieldGroup = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of ChoiceFieldGroup + * @constructor + */ + function ChoiceFieldGroup(container) { + this._choiceFieldGroup = container; + this._choiceFieldComponents = []; + this._initalSetup(); + this._addListeners(); + } + ChoiceFieldGroup.prototype.removeListeners = function () { + this._choiceFieldGroup.removeEventListener("msChoicefield", this._ChoiceFieldHandler.bind(this)); + }; + ChoiceFieldGroup.prototype._initalSetup = function () { + var choiceFieldElements = this._choiceFieldGroup.querySelectorAll(".ms-RadioButton"); + for (var i = 0; i < choiceFieldElements.length; i++) { + this._choiceFieldComponents[i] = new fabric.RadioButton(choiceFieldElements[i]); + } + }; + ChoiceFieldGroup.prototype._addListeners = function () { + document.addEventListener("msChoicefield", this._ChoiceFieldHandler.bind(this), false); + }; + ChoiceFieldGroup.prototype._ChoiceFieldHandler = function (event) { + var name = event.detail.name; + var selectedChoice = event.detail.item; + if (this._choiceFieldGroup.id === name) { + for (var i = 0; i < this._choiceFieldComponents.length; i++) { + this._choiceFieldComponents[i].unCheck(); + } + selectedChoice.check(); + } + }; + return ChoiceFieldGroup; + }()); + fabric.ChoiceFieldGroup = ChoiceFieldGroup; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +/// +var fabric; +(function (fabric) { + var MODAL_POSITION = "bottom"; + var SUBMENU_POSITION = "right"; + var ContextualMenu = (function () { + function ContextualMenu(container, hostTarget, position) { + this._container = container; + this._hostTarget = hostTarget; + this._position = position ? position : MODAL_POSITION; + this._isOpen = false; + this._setOpener(hostTarget); + this._init(); + } + ContextualMenu.prototype.getHost = function () { + return this._host; + }; + ContextualMenu.prototype._init = function () { + this._container.addEventListener("click", this._onContextualMenuClick.bind(this), true); + document.addEventListener("click", this._onDocumentClick.bind(this), false); + }; + ContextualMenu.prototype._onDocumentClick = function (event) { + var target = event.target; + var classList = target.classList; + if (!this._hostTarget.contains(target) && !classList.contains("ms-ContextualMenu-link")) { + this._isOpen = false; + } + }; + ContextualMenu.prototype._onContextualMenuClick = function (event) { + var target = event.target; + var classList = target.classList; + if (classList.contains("ms-ContextualMenu-link") && !classList.contains("is-disabled")) { + if (this._container.classList.contains("ms-ContextualMenu--multiselect")) { + this._multiSelect(target); + } + else { + this._singleSelect(target); + if (!target.parentElement.classList.contains("ms-ContextualMenu-item--hasMenu")) { + this._host.disposeModal(); + this._isOpen = false; + } + } + } + }; + ContextualMenu.prototype._multiSelect = function (target) { + if (target.classList.contains("is-selected")) { + target.classList.remove("is-selected"); + } + else { + target.classList.add("is-selected"); + } + }; + ContextualMenu.prototype._singleSelect = function (target) { + var selecteds = this._container.querySelectorAll(".is-selected"); + var i = selecteds.length; + while (i--) { + selecteds[i].classList.remove("is-selected"); + } + target.classList.add("is-selected"); + }; + ContextualMenu.prototype._toggleMenu = function (event) { + (!this._isOpen) ? this._openContextMenu(event) : this._host.disposeModal(); + this._isOpen = !this._isOpen; + }; + ContextualMenu.prototype._setOpener = function (hostTarget) { + var _this = this; + hostTarget.addEventListener("click", function (event) { + event.preventDefault(); + _this._toggleMenu(event); + }); + }; + ContextualMenu.prototype._openContextMenu = function (event) { + this._createModalHostView(this._container, this._position, this._hostTarget); + this._checkForSubmenus(this._container); + }; + ContextualMenu.prototype._checkForSubmenus = function (container) { + var _this = this; + var submenus = container.querySelectorAll(".ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu"); + var i = submenus.length; + if (submenus.length) { + var _loop_1 = function() { + var button = submenus[i].querySelector(".ms-ContextualMenu-link"); + var menu = submenus[i].querySelector(".ms-ContextualMenu"); + if (menu) { + var contextualMenu_1 = new fabric.ContextualMenu(menu, button, SUBMENU_POSITION); + menu.addEventListener("hostAdded", function () { + _this._host.setChildren(contextualMenu_1.getHost()); + }); + } + }; + while (i--) { + _loop_1(); + } + } + }; + ContextualMenu.prototype._createModalHostView = function (container, position, hostTarget) { + container.classList.remove("is-hidden"); + this._host = new fabric.ContextualHost(container, position, hostTarget, false); + var event = document.createEvent("Event"); + event.initEvent("hostAdded", true, true); + container.dispatchEvent(event); + }; + return ContextualMenu; + }()); + fabric.ContextualMenu = ContextualMenu; +})(fabric || (fabric = {})); + +"use strict"; + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// @TODO - we can add this once jquery is removed +// "use strict"; +/// +/// +var fabric; +(function (fabric) { + /** + * DatePicker Plugin + */ + var DatePicker = (function () { + function DatePicker(container, options) { + var _this = this; + /** Set up letiables and run the Pickadate plugin. */ + var $datePicker = $(container); + var $dateField = $datePicker.find(".ms-TextField-field").pickadate($.extend({ + // Strings and translations. + weekdaysShort: ["S", "M", "T", "W", "T", "F", "S"], + // Don't render the buttons + clear: "", + close: "", + today: "", + // Events + onStart: function () { + _this.initCustomView($datePicker); + }, + // Classes + klass: { + // The element states + input: "ms-DatePicker-input", + active: "ms-DatePicker-input--active", + // The root picker and states + picker: "ms-DatePicker-picker", + opened: "ms-DatePicker-picker--opened", + focused: "ms-DatePicker-picker--focused", + // The picker holder + holder: "ms-DatePicker-holder", + // The picker frame, wrapper, and box + frame: "ms-DatePicker-frame", + wrap: "ms-DatePicker-wrap", + box: "ms-DatePicker-dayPicker", + // The picker header + header: "ms-DatePicker-header", + // Month & year labels + month: "ms-DatePicker-month", + year: "ms-DatePicker-year", + // Table of dates + table: "ms-DatePicker-table", + // Weekday labels + weekdays: "ms-DatePicker-weekday", + // Day states + day: "ms-DatePicker-day", + disabled: "ms-DatePicker-day--disabled", + selected: "ms-DatePicker-day--selected", + highlighted: "ms-DatePicker-day--highlighted", + now: "ms-DatePicker-day--today", + infocus: "ms-DatePicker-day--infocus", + outfocus: "ms-DatePicker-day--outfocus" + } + }, options || {})); + var $picker = $dateField.pickadate("picker"); + this.picker = $picker; + /** Respond to built-in picker events. */ + $picker.on({ + render: function () { + _this.updateCustomView($datePicker); + }, + open: function () { + _this.scrollUp($datePicker); + } + }); + } + /** + * After the Pickadate plugin starts, this function + * adds additional controls to the picker view. + */ + DatePicker.prototype.initCustomView = function ($datePicker) { + var _this = this; + /** Get some letiables ready. */ + var $monthControls = $datePicker.find(".ms-DatePicker-monthComponents"); + var $goToday = $datePicker.find(".ms-DatePicker-goToday"); + var $monthPicker = $datePicker.find(".ms-DatePicker-monthPicker"); + var $yearPicker = $datePicker.find(".ms-DatePicker-yearPicker"); + var $pickerWrapper = $datePicker.find(".ms-DatePicker-wrap"); + var $picker = $datePicker.find(".ms-TextField-field").pickadate("picker"); + /** Move the month picker into position. */ + $monthControls.appendTo($pickerWrapper); + $goToday.appendTo($pickerWrapper); + $monthPicker.appendTo($pickerWrapper); + $yearPicker.appendTo($pickerWrapper); + /** Update the custom view. */ + this.updateCustomView($datePicker); + /** dispatch click on document so anything listening can be notified */ + $picker.on("open", function (e) { + var evt = document.createEvent("MouseEvents"); + evt.initEvent("click", true, true); + document.dispatchEvent(evt); + }); + /** Move back one month. */ + $monthControls.on("click", ".js-prevMonth", function (event) { + event.preventDefault(); + var newMonth = $picker.get("highlight").month - 1; + _this.changeHighlightedDate([null, newMonth, null]); + }); + /** Move ahead one month. */ + $monthControls.on("click", ".js-nextMonth", function (event) { + event.preventDefault(); + var newMonth = $picker.get("highlight").month + 1; + _this.changeHighlightedDate([null, newMonth, null]); + }); + /** Move back one year. */ + $monthPicker.on("click", ".js-prevYear", function (event) { + event.preventDefault(); + var newYear = $picker.get("highlight").year - 1; + _this.changeHighlightedDate([newYear, null, null]); + }); + /** Move ahead one year. */ + $monthPicker.on("click", ".js-nextYear", function (event) { + event.preventDefault(); + var newYear = $picker.get("highlight").year + 1; + _this.changeHighlightedDate([newYear, null, null]); + }); + /** Move back one decade. */ + $yearPicker.on("click", ".js-prevDecade", function (event) { + event.preventDefault(); + var newYear = $picker.get("highlight").year - 10; + _this.changeHighlightedDate([newYear, null, null]); + }); + /** Move ahead one decade. */ + $yearPicker.on("click", ".js-nextDecade", function (event) { + event.preventDefault(); + var newYear = $picker.get("highlight").year + 10; + _this.changeHighlightedDate([newYear, null, null]); + }); + /** Go to the current date, shown in the day picking view. */ + $goToday.click(function (event) { + event.preventDefault(); + /** Select the current date, while keeping the picker open. */ + var now = new Date(); + $picker.set("select", [now.getFullYear(), now.getMonth(), now.getDate()]); + /** Switch to the default (calendar) view. */ + $datePicker.removeClass("is-pickingMonths").removeClass("is-pickingYears"); + }); + /** Change the highlighted month. */ + $monthPicker.on("click", ".js-changeDate", function (event) { + event.preventDefault(); + var $changeDate = $(event.target); + /** Get the requested date from the data attributes. */ + var newYear = $changeDate.attr("data-year"); + var newMonth = $changeDate.attr("data-month"); + var newDay = $changeDate.attr("data-day"); + /** Update the date. */ + _this.changeHighlightedDate([newYear, newMonth, newDay]); + /** If we"ve been in the "picking months" state on mobile, remove that state so we show the calendar again. */ + if ($datePicker.hasClass("is-pickingMonths")) { + $datePicker.removeClass("is-pickingMonths"); + } + }); + /** Change the highlighted year. */ + $yearPicker.on("click", ".js-changeDate", function (event) { + event.preventDefault(); + var $changeDate = $(event.target); + /** Get the requested date from the data attributes. */ + var newYear = $changeDate.attr("data-year"); + var newMonth = $changeDate.attr("data-month"); + var newDay = $changeDate.attr("data-day"); + /** Update the date. */ + _this.changeHighlightedDate([newYear, newMonth, newDay]); + /** If we"ve been in the "picking years" state on mobile, remove that state so we show the calendar again. */ + if ($datePicker.hasClass("is-pickingYears")) { + $datePicker.removeClass("is-pickingYears"); + } + }); + /** Switch to the default state. */ + $monthPicker.on("click", ".js-showDayPicker", function () { + $datePicker.removeClass("is-pickingMonths"); + $datePicker.removeClass("is-pickingYears"); + }); + /** Switch to the is-pickingMonths state. */ + $monthControls.on("click", ".js-showMonthPicker", function () { + $datePicker.toggleClass("is-pickingMonths"); + }); + /** Switch to the is-pickingYears state. */ + $monthPicker.on("click", ".js-showYearPicker", function () { + $datePicker.toggleClass("is-pickingYears"); + }); + }; + /** Change the highlighted date. */ + DatePicker.prototype.changeHighlightedDate = function (dateArr) { + var newDateArr = this.setDateAttributes(dateArr); + /** Update it. */ + this.picker.set("highlight", newDateArr); + }; + /** Whenever the picker renders, do our own rendering on the custom controls. */ + DatePicker.prototype.updateCustomView = function ($datePicker) { + /** Get some letiables ready. */ + var $monthPicker = $datePicker.find(".ms-DatePicker-monthPicker"); + var $yearPicker = $datePicker.find(".ms-DatePicker-yearPicker"); + var $picker = $datePicker.find(".ms-TextField-field").pickadate("picker"); + /** Set the correct year. */ + $monthPicker.find(".ms-DatePicker-currentYear").text($picker.get("view").year); + /** Highlight the current month. */ + $monthPicker.find(".ms-DatePicker-monthOption").removeClass("is-highlighted"); + $monthPicker.find(".ms-DatePicker-monthOption[data-month='" + $picker.get("highlight").month + "']").addClass("is-highlighted"); + /** Generate the grid of years for the year picker view. */ + // Start by removing any existing generated output. */ + $yearPicker.find(".ms-DatePicker-currentDecade").remove(); + $yearPicker.find(".ms-DatePicker-optionGrid").remove(); + // Generate the output by going through the years. + var startingYear = $picker.get("highlight").year - 11; + var decadeText = startingYear + " - " + (startingYear + 11); + var output = "
      " + decadeText + "
      "; + output += "
      "; + for (var year = startingYear; year < (startingYear + 12); year++) { + output += "" + year + ""; + } + output += "
      "; + // Output the title and grid of years generated above. + $yearPicker.append(output); + /** Highlight the current year. */ + $yearPicker.find(".ms-DatePicker-yearOption").removeClass("is-highlighted"); + $yearPicker.find(".ms-DatePicker-yearOption[data-year='" + $picker.get("highlight").year + "']").addClass("is-highlighted"); + }; + /** Scroll the page up so that the field the date picker is attached to is at the top. */ + DatePicker.prototype.scrollUp = function ($datePicker) { + $("html, body").animate({ + scrollTop: $datePicker.offset().top + }, 367); + }; + DatePicker.prototype.setDateAttributes = function (dateArr) { + var newYear = dateArr[0], newMonth = dateArr[1], newDay = dateArr[2]; + /** All letiables are optional. If not provided, default to the current value. */ + if (typeof newYear === "undefined" || newYear === null) { + newYear = this.picker.get("highlight").year; + } + if (typeof newMonth === "undefined" || newMonth === null) { + newMonth = this.picker.get("highlight").month; + } + if (typeof newDay === "undefined" || newDay === null) { + newDay = this.picker.get("highlight").date; + } + return [newYear, newMonth, newDay]; + }; + return DatePicker; + }()); + fabric.DatePicker = DatePicker; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +var fabric; +(function (fabric) { + var Overlay = (function () { + function Overlay(overlayElement) { + if (overlayElement) { + this.overlayElement = overlayElement; + } + else { + var overlayContainer = document.createElement("div"); + overlayContainer.setAttribute("class", "ms-Overlay"); + this.overlayElement = overlayContainer; + } + this.overlayElement.addEventListener("click", this.hide.bind(this), false); + } + Overlay.prototype.remove = function () { + this.overlayElement.parentElement.removeChild(this.overlayElement); + }; + Overlay.prototype.show = function () { + this.overlayElement.classList.add("is-visible"); + document.body.classList.add("ms-u-overflowHidden"); + }; + Overlay.prototype.hide = function () { + this.overlayElement.classList.remove("is-visible"); + document.body.classList.remove("ms-u-overflowHidden"); + }; + return Overlay; + }()); + fabric.Overlay = Overlay; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// @TODO - we can add this once jquery is removed +/// +var fabric; +(function (fabric) { + var Dialog = (function () { + function Dialog(dialog) { + this._dialog = dialog; + this._closeButtonElement = this._dialog.querySelector(".ms-Dialog-buttonClose"); + this._actionButtonElements = this._dialog.querySelectorAll(".ms-Dialog-action"); + if (this._closeButtonElement) { + this._closeButtonElement.addEventListener("click", this.close.bind(this), false); + } + for (var i = 0; i < this._actionButtonElements.length; i++) { + this._actionButtonElements[i].addEventListener("click", this.close.bind(this), false); + } + } + Dialog.prototype.close = function () { + this._overlay.remove(); + this._dialog.classList.remove("is-open"); + document.body.classList.remove("ms-u-overflowHidden"); + this._overlay.overlayElement.removeEventListener("click", this.close.bind(this)); + }; + Dialog.prototype.open = function () { + this._dialog.classList.add("is-open"); + this._overlay = new fabric.Overlay(); + if (!this._dialog.classList.contains("ms-Dialog--blocking")) { + this._overlay.overlayElement.addEventListener("click", this.close.bind(this), false); + this._overlay.show(); + document.body.classList.add("ms-u-overflowHidden"); + } + this._dialog.parentElement.appendChild(this._overlay.overlayElement); + }; + return Dialog; + }()); + fabric.Dialog = Dialog; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// "use strict"; +var fabric; +(function (fabric) { + /** + * DialogHost class + */ + var DialogHost = (function () { + function DialogHost() { + } + return DialogHost; + }()); + fabric.DialogHost = DialogHost; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +var fabric; +(function (fabric) { + /** + * Panel Host + * + * A host for the panel control + * + */ + var PANEL_HOST_CLASS = "ms-PanelHost"; + var PanelHost = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of Panel + * @constructor + */ + function PanelHost(layer, callBack) { + this._layer = layer; + this._callBack = callBack; + this._createElements(); + this._renderElements(); + } + PanelHost.prototype.dismiss = function () { + this.overlay.hide(); + document.body.removeChild(this.panelHost); + }; + PanelHost.prototype.update = function (layer, callBack) { + this.panelHost.replaceChild(layer, this._layer); + if (callBack) { + callBack(); + } + }; + PanelHost.prototype._renderElements = function () { + document.body.appendChild(this.panelHost); + if (this._callBack) { + this._callBack(this._layer); + } + }; + PanelHost.prototype._createElements = function () { + this.panelHost = document.createElement("div"); + this.panelHost.classList.add(PANEL_HOST_CLASS); + this.panelHost.appendChild(this._layer); + this.overlay = new fabric.Overlay(this._overlayContainer); + this.overlay.show(); + // Append Elements + this.panelHost.appendChild(this.overlay.overlayElement); + }; + return PanelHost; + }()); + fabric.PanelHost = PanelHost; +})(fabric || (fabric = {})); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +/// +var fabric; +(function (fabric) { + /** + * Panel Host + * + * A host for the panel control + * + */ + var ANIMATE_IN_STATE = "animate-in"; + var ANIMATE_OUT_STATE = "animate-out"; + var ANIMATION_END = 400; + var Panel = (function () { + /** + * + * @param {HTMLElement} container - the target container for an instance of Panel + * @constructor + */ + function Panel(panel, direction, animateOverlay) { + this._panel = panel; + this._direction = direction || "right"; + this._animateOverlay = animateOverlay || true; + this.panelHost = new fabric.PanelHost(this._panel, this._animateInPanel); + this._closeButton = this._panel.querySelector(".ms-PanelAction-close"); + this._clickHandler = this.dismiss.bind(this, null); + this._setEvents(); + // Set body height to 100% and overflow hidden while panel is open + document.body.setAttribute("style", "height: 100%; overflow: hidden;"); + } + Panel.prototype.dismiss = function (callBack) { + var _this = this; + this._panel.classList.add(ANIMATE_OUT_STATE); + setTimeout(function () { + _this._panel.classList.remove(ANIMATE_OUT_STATE); + _this._panel.classList.remove("is-open"); + _this.panelHost.dismiss(); + if (callBack) { + callBack(); + } + // Remove temporary body styles + document.body.setAttribute("style", ""); + }, ANIMATION_END); + if (this._closeButton !== null) { + this._closeButton.removeEventListener("click", this._clickHandler); + } + }; + Panel.prototype._setEvents = function () { + this.panelHost.overlay.overlayElement.addEventListener("click", this._clickHandler); + if (this._closeButton !== null) { + this._closeButton.addEventListener("click", this._clickHandler); + } + }; + Panel.prototype._animateInPanel = function (layer) { + layer.classList.add(ANIMATE_IN_STATE); + layer.classList.add("is-open"); + setTimeout(function () { + layer.classList.remove(ANIMATE_IN_STATE); + }, ANIMATION_END); + }; + return Panel; + }()); + fabric.Panel = Panel; +})(fabric || (fabric = {})); + +/// +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +"use strict"; +var fabric; +(function (fabric) { + var DROPDOWN_CLASS = "ms-Dropdown"; + var DROPDOWN_TITLE_CLASS = "ms-Dropdown-title"; + var DROPDOWN_LABEL_HELPER = "ms-Dropdown-truncator"; + var DROPDOWN_ITEMS_CLASS = "ms-Dropdown-items"; + var DROPDOWN_ITEM_CLASS = "ms-Dropdown-item"; + var DROPDOWN_SELECT_CLASS_SELECTOR = ".ms-Dropdown-select"; + var PANEL_CLASS = "ms-Panel"; + var IS_OPEN_CLASS = "is-open"; + var IS_DISABLED_CLASS = "is-disabled"; + var IS_SELECTED_CLASS = "is-selected"; + var ANIMATE_IN_CLASS = "animate-in"; + var SMALL_MAX_WIDTH = 479; + /** + * Dropdown Plugin + * + * Given .ms-Dropdown containers with generic ")[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)});