diff --git a/.gitignore b/.gitignore
index cb742fce1..d5d9fff45 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,6 @@ npm-debug.log
# Fabric files
*.sublime-workspace
docs.css
-dist
# Docs files
docs/app
diff --git a/dist/components/Breadcrumb/Breadcrumb.css b/dist/components/Breadcrumb/Breadcrumb.css
new file mode 100644
index 000000000..852a22130
--- /dev/null
+++ b/dist/components/Breadcrumb/Breadcrumb.css
@@ -0,0 +1,429 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
+
+.ms-Breadcrumb {
+ margin: 23px 0 1px 0;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 17px;
+ color: #666666;
+ vertical-align: top;
+ margin: 10px 0;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+ margin-right: -4px;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 12px;
+ display: inline-block;
+ color: #0078d7;
+ margin-right: -4px;
+ padding: 12px 8px 3px 8px;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu:before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: white;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: none;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ font-weight: normal;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media screen and (max-width: 639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 14px;
+ margin-top: 7px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 8px;
+ padding-bottom: 3px;
+ }
+}
+
+@media screen and (max-width: 479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin-top: 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 5px;
+ padding-bottom: 3px;
+ }
+}
diff --git a/dist/components/Breadcrumb/Breadcrumb.html b/dist/components/Breadcrumb/Breadcrumb.html
new file mode 100644
index 000000000..88854c893
--- /dev/null
+++ b/dist/components/Breadcrumb/Breadcrumb.html
@@ -0,0 +1,37 @@
+
+
+
diff --git a/dist/components/Breadcrumb/Breadcrumb.json b/dist/components/Breadcrumb/Breadcrumb.json
new file mode 100644
index 000000000..9355715b0
--- /dev/null
+++ b/dist/components/Breadcrumb/Breadcrumb.json
@@ -0,0 +1,10 @@
+{
+ "name": "Breadcrumb",
+ "notes": "A component that shows the user's current location in a hierarchy and provides a means of navigating up or down it.",
+ "description": "Shows the user's current location in a hierarchy and provides a means of navigating upward.",
+ "template": "Breadcrumb.html",
+ "class": "ms-Breadcrumb",
+ "dependencies": [
+ "ContextualMenu"
+ ]
+}
diff --git a/dist/components/Breadcrumb/Breadcrumb.min.css b/dist/components/Breadcrumb/Breadcrumb.min.css
new file mode 100644
index 000000000..c368e982c
--- /dev/null
+++ b/dist/components/Breadcrumb/Breadcrumb.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:2}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:2}.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;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;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{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}
\ No newline at end of file
diff --git a/dist/components/Breadcrumb/Breadcrumb.scss b/dist/components/Breadcrumb/Breadcrumb.scss
new file mode 100644
index 000000000..e23a021d2
--- /dev/null
+++ b/dist/components/Breadcrumb/Breadcrumb.scss
@@ -0,0 +1,170 @@
+// 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 {
+ margin: 23px 0 1px 0;
+
+ &.is-overflow {
+ .ms-Breadcrumb-overflow {
+ display: inline;
+ }
+ }
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: $ms-font-size-l;
+ color: $ms-color-neutralSecondary;
+ vertical-align: top;
+ margin: 10px 0;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+
+ .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+
+ &:last-of-type {
+ .ms-Breadcrumb-chevron {
+ display: none;
+ }
+ }
+ }
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+ margin-right: -4px;
+
+ .ms-Breadcrumb-overflowButton {
+ font-size: $ms-font-size-s;
+ display: inline-block;
+ color:$ms-color-themePrimary;
+ margin-right: -4px;
+ padding: 12px 8px 3px 8px;
+ cursor: pointer;
+ }
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+
+ &.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ @include drop-shadow;
+ background-color: $ms-color-white;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle);
+ }
+
+ &:before {
+ position: absolute;
+ @include drop-shadow;
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ transform: rotate(45deg);
+ background-color: white;
+ }
+
+ .ms-ContextualMenu {
+ border: none;
+ 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 {
+ @include ms-font-xl();
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+
+@media screen and (max-width: $ms-screen-md-max) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: $ms-font-size-l;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: $ms-font-size-m;
+ margin-top: 7px;
+ }
+
+ .ms-Breadcrumb-overflow {
+ .ms-Breadcrumb-overflowButton {
+ padding-top: 8px;
+ padding-bottom: 3px;
+ }
+ }
+}
+
+@media screen and (max-width: $ms-screen-sm-max) {
+ .ms-Breadcrumb-itemLink {
+ font-size: $ms-font-size-m;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin-top: 4px;
+ }
+
+ .ms-Breadcrumb-overflow {
+ .ms-Breadcrumb-overflowButton {
+ padding-top: 5px;
+ padding-bottom: 3px;
+ }
+ }
+}
diff --git a/dist/components/Button/Button.Command.html b/dist/components/Button/Button.Command.html
new file mode 100644
index 000000000..0df351821
--- /dev/null
+++ b/dist/components/Button/Button.Command.html
@@ -0,0 +1,7 @@
+
+
+
+
+ Create account
+ Description of the action this button takes
+
diff --git a/dist/components/Button/Button.Compound.html b/dist/components/Button/Button.Compound.html
new file mode 100644
index 000000000..5879bd702
--- /dev/null
+++ b/dist/components/Button/Button.Compound.html
@@ -0,0 +1,7 @@
+
+
+
+
+ Create account
+ Description of the action this button takes
+
diff --git a/dist/components/Button/Button.Hero.html b/dist/components/Button/Button.Hero.html
new file mode 100644
index 000000000..857ca08bc
--- /dev/null
+++ b/dist/components/Button/Button.Hero.html
@@ -0,0 +1,7 @@
+
+
+
+
+ Create account
+ Description of the action this button takes
+
diff --git a/dist/components/Button/Button.Primary.html b/dist/components/Button/Button.Primary.html
new file mode 100644
index 000000000..2f216c0ff
--- /dev/null
+++ b/dist/components/Button/Button.Primary.html
@@ -0,0 +1,7 @@
+
+
+
+
+ Create account
+ Description of the action this button takes
+
diff --git a/dist/components/Button/Button.css b/dist/components/Button/Button.css
new file mode 100644
index 000000000..0c474b100
--- /dev/null
+++ b/dist/components/Button/Button.css
@@ -0,0 +1,315 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
diff --git a/dist/components/Button/Button.html b/dist/components/Button/Button.html
new file mode 100644
index 000000000..6cbeb316e
--- /dev/null
+++ b/dist/components/Button/Button.html
@@ -0,0 +1,7 @@
+
+
+
+
+ Create account
+ Description of the action this button takes
+
diff --git a/dist/components/Button/Button.json b/dist/components/Button/Button.json
new file mode 100644
index 000000000..a307283b5
--- /dev/null
+++ b/dist/components/Button/Button.json
@@ -0,0 +1,93 @@
+{
+ "name": "Button",
+ "notes": "",
+ "description": "A simple button that contains multiple variants and can be used for action-oriented screens or dialogs.",
+ "template": "Button.html",
+ "class": "ms-Button",
+ "wrapBranches": true,
+ "fileOrder": [
+ "Button.html",
+ "Button.Primary.html",
+ "Button.Hero.html",
+ "Button.Compound.html",
+ "Button.Command.html"
+ ],
+ "branches": [
+ {
+ "name": "Action",
+ "default": true,
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true,
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ },
+ {
+ "name": "Primary",
+ "class": "ms-Button--primary",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "Hero",
+ "class": "ms-Button--hero",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ },
+ {
+ "name": "Compound",
+ "class": "ms-Button--compound",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ },
+ {
+ "name": "Command",
+ "class": "ms-Button--command",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ }
+ ]
+}
diff --git a/dist/components/Button/Button.min.css b/dist/components/Button/Button.min.css
new file mode 100644
index 000000000..3063585db
--- /dev/null
+++ b/dist/components/Button/Button.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}
\ No newline at end of file
diff --git a/dist/components/Button/Button.scss b/dist/components/Button/Button.scss
new file mode 100644
index 000000000..c42153908
--- /dev/null
+++ b/dist/components/Button/Button.scss
@@ -0,0 +1,327 @@
+// 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-font-m;
+ @include ms-u-normalize;
+ background-color: $ms-color-neutralLighter;
+ border: 1px solid $ms-color-neutralLighter;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ border-color: $ms-color-neutralLight;
+ outline: 1px solid transparent;
+
+ .ms-Button-label {
+ color: $ms-color-black;
+ }
+ }
+
+ &: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;
+ }
+ }
+}
+
+// Add space between adjacent buttons.
+.ms-Button + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-semibold;
+ font-size: $ms-font-size-m;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+
+//== Modifier: Primary action button
+//
+.ms-Button.ms-Button--primary {
+ background-color: $ms-color-themePrimary;
+ border-color: $ms-color-themePrimary;
+
+ .ms-Button-label {
+ color: $ms-color-white;
+ }
+
+ &:hover {
+ background-color: $ms-color-themeDark;
+ border-color: $ms-color-themeDark;
+ }
+
+ &:focus {
+ background-color: $ms-color-themeDark;
+ border-color: $ms-color-themeDarker;
+ }
+
+ &:active {
+ background-color: $ms-color-themePrimary;
+ border-color: $ms-color-themePrimary;
+ }
+
+ &:disabled,
+ &.is-disabled {
+ background-color: $ms-color-neutralLighter;
+ border-color: $ms-color-neutralLighter;
+
+ .ms-Button-label {
+ color: $ms-color-neutralTertiary;
+ }
+ }
+}
+
+
+//== Modifier: Hero button
+//
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+
+ .ms-Button-icon {
+ color: $ms-color-themePrimary;
+ display: inline-block;
+ font-size: $ms-font-size-s;
+ position: relative;
+ top: -8px;
+ text-align: center;
+
+ .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid $ms-color-themePrimary;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: $ms-font-size-s;
+ margin: 0;
+ }
+ }
+
+ .ms-Button-label {
+ color: $ms-color-themePrimary;
+ font-family: $ms-font-family-light;
+ font-size: $ms-font-size-xl;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+ }
+
+ &:hover,
+ &:focus {
+ .ms-Button-icon {
+ .ms-Icon {
+ color: $ms-color-themeDark;
+ }
+ }
+
+ .ms-Button-label {
+ color: $ms-color-themeDarker;
+ }
+ }
+
+ &:active {
+ .ms-Button-icon {
+ .ms-Icon {
+ color: $ms-color-themePrimary;
+ }
+ }
+
+ .ms-Button-label {
+ color: $ms-color-themePrimary;
+ }
+ }
+
+ &:disabled,
+ &.is-disabled {
+ .ms-Button-icon {
+ .ms-Icon {
+ color: $ms-color-neutralTertiaryAlt;
+ }
+ }
+
+ .ms-Button-label {
+ color: $ms-color-neutralTertiary;
+ }
+ }
+}
+
+
+//== Modifier: Compound button
+//
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+
+ .ms-Button-label {
+ display: block;
+ font-family: $ms-font-family-semibold;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+ }
+
+ .ms-Button-description {
+ color: $ms-color-neutralSecondary;
+ display: block;
+ font-family: $ms-font-family-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;
+ }
+ }
+ }
+}
+
+
+//== Modifier: Command button
+//
+.ms-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: $ms-font-size-m;
+
+ .ms-Button-icon {
+ color: $ms-color-neutralSecondary;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+ }
+
+ .ms-Button-label {
+ font-family: $ms-font-family-regular;
+ }
+
+ &:hover,
+ &:focus {
+ .ms-Button-icon {
+ color: $ms-color-neutralDark;
+ }
+
+ .ms-Button-label {
+ color: $ms-color-black;
+ }
+ }
+
+ &:active {
+ .ms-Button-icon,
+ .ms-Button-label {
+ color: $ms-color-themePrimary;
+ }
+ }
+
+ &:disabled,
+ &.is-disabled {
+ .ms-Button-icon {
+ color: $ms-color-neutralTertiaryAlt;
+ }
+
+ .ms-Button-label {
+ color: $ms-color-neutralTertiary;
+ }
+ }
+}
+
+// Add space between adjacent command buttons.
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
diff --git a/dist/components/Callout/Callout.ActionText.html b/dist/components/Callout/Callout.ActionText.html
new file mode 100644
index 000000000..5058d8f27
--- /dev/null
+++ b/dist/components/Callout/Callout.ActionText.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
People automatically puts together all of the people you care most about in one place.
+
+
+
+
+ Save
+
+
+
+ Cancel
+
+
+
+
+
diff --git a/dist/components/Callout/Callout.Close.html b/dist/components/Callout/Callout.Close.html
new file mode 100644
index 000000000..9f4d6808c
--- /dev/null
+++ b/dist/components/Callout/Callout.Close.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
+
+
+
+
+
diff --git a/dist/components/Callout/Callout.Oobe.html b/dist/components/Callout/Callout.Oobe.html
new file mode 100644
index 000000000..8a11d1a28
--- /dev/null
+++ b/dist/components/Callout/Callout.Oobe.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
People automatically puts together all of the people you care most about in one place.
+
+
+
+ More
+ Description of the action this button takes
+
+
+ Got it
+ Description of the action this button takes
+
+
+
+
+
diff --git a/dist/components/Callout/Callout.Peek.html b/dist/components/Callout/Callout.Peek.html
new file mode 100644
index 000000000..9de0f98d9
--- /dev/null
+++ b/dist/components/Callout/Callout.Peek.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+ More
+ Description of the action this button takes
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/components/Callout/Callout.css b/dist/components/Callout/Callout.css
new file mode 100644
index 000000000..ab58cf8d6
--- /dev/null
+++ b/dist/components/Callout/Callout.css
@@ -0,0 +1,677 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-Callout {
+ z-index: 100;
+ margin: 16px auto;
+ position: relative;
+ width: 288px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ content: '';
+ position: absolute;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ height: 0;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowTop:before {
+ z-index: 0;
+ outline: 1px solid transparent;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:after {
+ z-index: 10;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ top: 40px;
+ display: none;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid #ffffff;
+ left: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid transparent;
+ right: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid transparent;
+ top: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid #ffffff;
+ bottom: -10px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ background-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ background-color: #ffffff;
+ }
+}
+
+.ms-Callout-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.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-inner {
+ height: 100%;
+ padding: 0 24px 20px;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding: 18px 24px 12px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-actions .ms-Link.ms-Link--hero {
+ position: relative;
+ left: -8px;
+}
+
+.ms-Callout-action {
+ position: relative;
+ top: 4px;
+ left: -8px;
+ margin-left: 0 !important;
+}
+
+.ms-Callout-action:hover .ms-Callout-actionIcon,
+.ms-Callout-action:focus .ms-Callout-actionIcon {
+ color: #0078d7;
+}
+
+.ms-Callout-button {
+ margin-right: 12px;
+}
+
+.ms-Callout.ms-Callout--close .ms-Callout-title {
+ margin-right: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after {
+ border-color: #0078d7;
+ background-color: transparent;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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;
+ margin-bottom: -8px;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after {
+ left: 40px;
+ right: auto;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after {
+ top: calc('50% - 10px');
+}
+
+.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;
+}
+
+@media (min-width: 480px) {
+ .ms-Callout {
+ width: 300px;
+ margin: 16px;
+ }
+
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after {
+ display: block;
+ }
+}
diff --git a/dist/components/Callout/Callout.html b/dist/components/Callout/Callout.html
new file mode 100644
index 000000000..9a8e15918
--- /dev/null
+++ b/dist/components/Callout/Callout.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
+
+
+
+
+
diff --git a/dist/components/Callout/Callout.json b/dist/components/Callout/Callout.json
new file mode 100644
index 000000000..054b14b91
--- /dev/null
+++ b/dist/components/Callout/Callout.json
@@ -0,0 +1,140 @@
+{
+ "name": "Callout",
+ "notes": "Callouts & Peeks.",
+ "description": "A pop-out out notification area with several variants to allow a more detailed description or set of actions on an object or item.",
+ "class": "ms-Callout",
+ "dependencies": [
+ "Button",
+ "Label",
+ "Link"
+ ],
+ "fileOrder": [
+ "Callout.html",
+ "Callout.Close.html",
+ "Callout.ActionText.html",
+ "Callout.Oobe.html",
+ "Callout.Peek.html"
+ ],
+ "branches": [
+ {
+ "name": "Default",
+ "default": true,
+ "template": "Callout.Default.html",
+ "branches": [
+ {
+ "name": "Left Arrow",
+ "default": true,
+ "class": "ms-Callout--arrowLeft"
+ },
+ {
+ "name": "Right Arrow",
+ "class": "ms-Callout--arrowRight"
+ },
+ {
+ "name": "Top Arrow",
+ "class": "ms-Callout--arrowTop"
+ },
+ {
+ "name": "Bottom Arrow",
+ "class": "ms-Callout--arrowBottom"
+ }
+ ]
+ },
+ {
+ "name": "Close Button",
+ "class": "ms-Callout--close",
+ "template": "Callout.Close.html",
+ "branches": [
+ {
+ "name": "Left Arrow",
+ "default": true,
+ "class": "ms-Callout--arrowLeft"
+ },
+ {
+ "name": "Right Arrow",
+ "class": "ms-Callout--arrowRight"
+ },
+ {
+ "name": "Top Arrow",
+ "class": "ms-Callout--arrowTop"
+ },
+ {
+ "name": "Bottom Arrow",
+ "class": "ms-Callout--arrowBottom"
+ }
+ ]
+ },
+ {
+ "name": "ActionText",
+ "class": "ms-Callout--actionText",
+ "template": "Callout.ActionText.html",
+ "branches": [
+ {
+ "name": "Left Arrow",
+ "default": true,
+ "class": "ms-Callout--arrowLeft"
+ },
+ {
+ "name": "Right Arrow",
+ "class": "ms-Callout--arrowRight"
+ },
+ {
+ "name": "Top Arrow",
+ "class": "ms-Callout--arrowTop"
+ },
+ {
+ "name": "Bottom Arrow",
+ "class": "ms-Callout--arrowBottom"
+ }
+ ]
+ },
+ {
+ "name": "OOBE",
+ "class": "ms-Callout--OOBE",
+ "template": "Callout.Oobe.html",
+ "branches": [
+ {
+ "name": "Left Arrow",
+ "default": true,
+ "class": "ms-Callout--arrowLeft"
+ },
+ {
+ "name": "Right Arrow",
+ "class": "ms-Callout--arrowRight"
+ },
+ {
+ "name": "Top Arrow",
+ "class": "ms-Callout--arrowTop"
+ },
+ {
+ "name": "Bottom Arrow",
+ "class": "ms-Callout--arrowBottom"
+ }
+ ]
+ },
+ {
+ "name": "Peek",
+ "class": "ms-Callout--peek",
+ "template": "Callout.peek.html",
+ "branches": [
+ {
+ "name": "Left Arrow",
+ "default": true,
+ "class": "ms-Callout--arrowLeft"
+ },
+ {
+ "name": "Right Arrow",
+ "class": "ms-Callout--arrowRight"
+ },
+ {
+ "name": "Top Arrow",
+ "class": "ms-Callout--arrowTop"
+ },
+ {
+ "name": "Bottom Arrow",
+ "class": "ms-Callout--arrowBottom"
+ }
+ ]
+ }
+ ]
+}
diff --git a/dist/components/Callout/Callout.min.css b/dist/components/Callout/Callout.min.css
new file mode 100644
index 000000000..b382fe0a8
--- /dev/null
+++ b/dist/components/Callout/Callout.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-Callout{z-index:3;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:2}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:1;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.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:5}.ms-Callout-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:4;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.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}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}
\ No newline at end of file
diff --git a/dist/components/Callout/Callout.scss b/dist/components/Callout/Callout.scss
new file mode 100644
index 000000000..a3f4c9bda
--- /dev/null
+++ b/dist/components/Callout/Callout.scss
@@ -0,0 +1,315 @@
+// 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 {
+ z-index: $ms-zIndex-Callout;
+ margin: 16px auto;
+ position: relative;
+ width: 288px;
+}
+
+// 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;
+}
+
+
+//= Modifier: Base styling for all callout arrows
+//
+.ms-Callout.ms-Callout--arrowRight,
+.ms-Callout.ms-Callout--arrowLeft,
+.ms-Callout.ms-Callout--arrowBottom,
+.ms-Callout.ms-Callout--arrowTop {
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ transform: rotate(-45deg);
+ height: 0;
+ width: 0;
+ }
+
+ &:before {
+ z-index: $ms-zIndex-back;
+ outline: 1px solid transparent;
+ @include drop-shadow;
+ }
+
+ &:after {
+ z-index: $ms-zIndex-front;
+ }
+}
+
+
+//= Modifier: Callout with left and right arrows
+//
+.ms-Callout.ms-Callout--arrowLeft,
+.ms-Callout.ms-Callout--arrowRight {
+ &:before,
+ &:after {
+ top: 40px;
+ display: none; // Hide left and right arrows on sm screens
+ }
+}
+
+.ms-Callout.ms-Callout--arrowLeft {
+ &:before,
+ &:after {
+ @include arrowBorders($ms-color-white, transparent, transparent, $ms-color-white);
+ left: -10px;
+ }
+}
+
+.ms-Callout.ms-Callout--arrowRight {
+ &:before,
+ &:after {
+ @include arrowBorders(transparent, $ms-color-white, $ms-color-white, transparent);
+ right: -10px;
+ }
+}
+
+
+//= Modifier: Callout with top and bottom arrows
+//
+.ms-Callout.ms-Callout--arrowTop,
+.ms-Callout.ms-Callout--arrowBottom {
+ &:before,
+ &:after {
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 0;
+ }
+}
+
+.ms-Callout.ms-Callout--arrowTop {
+ &:before,
+ &:after {
+ @include arrowBorders($ms-color-white, $ms-color-white, transparent, transparent);
+ top: -10px;
+ }
+}
+
+.ms-Callout.ms-Callout--arrowBottom {
+ &:before,
+ &:after {
+ @include arrowBorders(transparent, transparent, $ms-color-white, $ms-color-white);
+ bottom: -10px;
+ }
+}
+
+// High contrast mode styling for callout arrows
+.ms-Callout.ms-Callout--arrowRight,
+.ms-Callout.ms-Callout--arrowLeft,
+.ms-Callout.ms-Callout--arrowBottom,
+.ms-Callout.ms-Callout--arrowTop {
+ &:before,
+ &:after {
+ @media screen and (-ms-high-contrast: active) {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ background-color: $ms-color-black;
+ }
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-white;
+ }
+ }
+}
+
+// The actual callout element
+.ms-Callout-main {
+ position: relative;
+ background-color: $ms-color-white;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: $ms-zIndex-middle;
+ @include drop-shadow;
+}
+
+.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: $ms-font-size-m;
+ color: $ms-color-neutralSecondary;
+ z-index: ($ms-zIndex-Callout + $ms-zIndex-front);
+}
+
+.ms-Callout-inner {
+ height: 100%;
+ padding: 0 24px 20px;
+}
+
+.ms-Callout-header {
+ z-index: ($ms-zIndex-Callout + $ms-zIndex-middle);
+ padding: 18px 24px 12px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-xl;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-family: $ms-font-family-semilight;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-s;
+}
+
+.ms-Callout-link {
+ font-size: $ms-font-size-m;
+ font-family: $ms-font-family-semilight;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+
+ .ms-Link.ms-Link--hero {
+ position: relative;
+ left: -8px; // Move link inline with body text
+ }
+}
+
+.ms-Callout-action {
+ position: relative;
+ top: 4px;
+ left: -8px;
+ margin-left: 0 !important;
+
+ &:hover .ms-Callout-actionIcon,
+ &:focus .ms-Callout-actionIcon {
+ color: $ms-color-themePrimary;
+ }
+}
+
+.ms-Callout-button {
+ margin-right: 12px;
+}
+
+
+//= Modifier: Close button callout
+//
+.ms-Callout.ms-Callout--close {
+ .ms-Callout-title {
+ margin-right: 20px; // Avoid overlap with close button
+ }
+}
+
+
+//= Modifier: OOBE (Out of box experience) callout
+//
+.ms-Callout.ms-Callout--OOBE {
+ &.ms-Callout--arrowRight,
+ &.ms-Callout--arrowLeft,
+ &.ms-Callout--arrowTop {
+ &:before,
+ &:after {
+ border-color: $ms-color-themePrimary;
+ background-color: transparent;
+ }
+ }
+
+ .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: $ms-color-themePrimary;
+ }
+
+ .ms-Callout-title {
+ font-family: $ms-font-family-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;
+ margin-bottom: -8px;
+ }
+}
+
+
+//= Modifier: Peek callout
+//
+.ms-Callout.ms-Callout--peek {
+ &.ms-Callout--arrowTop,
+ &.ms-Callout--arrowBottom {
+ &:before,
+ &:after {
+ left: 40px;
+ right: auto;
+ }
+ }
+
+ &.ms-Callout--arrowRight,
+ &.ms-Callout--arrowLeft {
+ &:before,
+ &:after {
+ top: calc('50% - 10px');
+ }
+ }
+
+ .ms-Callout-header {
+ padding-bottom: 0;
+ }
+
+ .ms-Callout-title {
+ font-size: $ms-font-size-m;
+ }
+
+ .ms-Callout-actions {
+ margin-top: 12px;
+ margin-bottom: -4px;
+ }
+}
+
+
+
+@media (min-width: $ms-screen-md-min) {
+ // Make width larger and remove centering on md+ screens
+ .ms-Callout {
+ width: 300px;
+ margin: 16px;
+ }
+
+ // Show arrows right and left
+ .ms-Callout.ms-Callout--arrowRight,
+ .ms-Callout.ms-Callout--arrowLeft {
+ &:before,
+ &:after {
+ display: block;
+ }
+ }
+}
diff --git a/dist/components/ChoiceField/ChoiceField.Checkbox.Disabled.html b/dist/components/ChoiceField/ChoiceField.Checkbox.Disabled.html
new file mode 100644
index 000000000..4caf32d48
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.Checkbox.Disabled.html
@@ -0,0 +1,6 @@
+
+
+
+
+ Selected
+
diff --git a/dist/components/ChoiceField/ChoiceField.Checkbox.Selected.html b/dist/components/ChoiceField/ChoiceField.Checkbox.Selected.html
new file mode 100644
index 000000000..de6588afd
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.Checkbox.Selected.html
@@ -0,0 +1,6 @@
+
+
+
+
+ Selected
+
diff --git a/dist/components/ChoiceField/ChoiceField.Checkbox.html b/dist/components/ChoiceField/ChoiceField.Checkbox.html
new file mode 100644
index 000000000..425608fb4
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.Checkbox.html
@@ -0,0 +1,6 @@
+
+
+
+
+ Selected
+
diff --git a/dist/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html b/dist/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html
new file mode 100644
index 000000000..aae38e254
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html
@@ -0,0 +1,23 @@
+
+
+
diff --git a/dist/components/ChoiceField/ChoiceField.Disabled.html b/dist/components/ChoiceField/ChoiceField.Disabled.html
new file mode 100644
index 000000000..8e1fa8fda
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.Disabled.html
@@ -0,0 +1,6 @@
+
+
+
+
+ Unselected
+
diff --git a/dist/components/ChoiceField/ChoiceField.Selected.html b/dist/components/ChoiceField/ChoiceField.Selected.html
new file mode 100644
index 000000000..4ce0fa154
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.Selected.html
@@ -0,0 +1,6 @@
+
+
+
+
+ Selected
+
diff --git a/dist/components/ChoiceField/ChoiceField.css b/dist/components/ChoiceField/ChoiceField.css
new file mode 100644
index 000000000..67bbd040f
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.css
@@ -0,0 +1,242 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-ChoiceField .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field {
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #eaeaea;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #00ff00;
+ color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #600000;
+ color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField-input {
+ position: absolute;
+ opacity: 0;
+ top: 8px;
+}
+
+.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+}
+
+.ms-ChoiceField-field:after {
+ content: '';
+ display: inline-block;
+ border: 1px #c8c8c8 solid;
+ width: 19px;
+ height: 19px;
+ cursor: pointer;
+ position: relative;
+ font-weight: normal;
+ left: -1px;
+ top: -1px;
+ border-radius: 50%;
+ position: absolute;
+}
+
+.ms-ChoiceField-field:hover:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ background-color: #666666;
+ border-color: #666666;
+ color: #666666;
+ border-radius: 50%;
+ content: '\00a0';
+ display: inline-block;
+ position: absolute;
+ top: 4px;
+ right: 0;
+ bottom: 0;
+ left: 4px;
+ width: 11px;
+ height: 11px;
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #ffffff;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #000000;
+ background-color: #000000;
+ }
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
+ background-color: #212121;
+ color: #212121;
+}
+
+.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after {
+ border-radius: 0;
+}
+
+.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ background-color: transparent;
+ border-radius: 0;
+ font-size: 13px;
+ top: 3px;
+ left: 3px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #ffffff;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #000000;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.ms-ChoiceFieldGroup {
+ margin-bottom: 4px;
+}
diff --git a/dist/components/ChoiceField/ChoiceField.html b/dist/components/ChoiceField/ChoiceField.html
new file mode 100644
index 000000000..d109d5843
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.html
@@ -0,0 +1,6 @@
+
+
+
+
+ Unselected
+
diff --git a/dist/components/ChoiceField/ChoiceField.json b/dist/components/ChoiceField/ChoiceField.json
new file mode 100644
index 000000000..cd5451a05
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.json
@@ -0,0 +1,96 @@
+{
+ "name": "ChoiceField",
+ "notes": "Radio buttons and checkboxes.",
+ "description": "A set of components that allows users to select one or many of a set number of choices. This takes the form of a Radio button for selection of only 1 choice among many or Checkboxes for multiple selections.",
+ "class": "ms-ChoiceField",
+ "dependencies": [
+ "Label"
+ ],
+ "fileOrder": [
+ "ChoiceField.html",
+ "ChoiceField.Selected.html",
+ "ChoiceField.Disabled.html",
+ "ChoiceField.Checkbox.html",
+ "ChoiceField.Checkbox.Selected.html",
+ "ChoiceField.Checkbox.Disabled.html",
+ "ChoiceField.ChoiceFieldGroup.html"
+ ],
+ "branches": [
+ {
+ "name": "Radio button",
+ "default": true,
+ "branches": [
+ {
+ "name": "Unselected",
+ "default": true,
+ "template": "ChoiceField.Radio.Unselected.html",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ },
+ {
+ "name": "Selected",
+ "class": "ms-TextField--underlined",
+ "template": "ChoiceField.Radio.Selected.html",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "Checkbox",
+ "branches": [
+ {
+ "name": "Unselected",
+ "default": true,
+ "template": "ChoiceField.Checkbox.Unselected.html",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ },
+ {
+ "name": "Selected",
+ "template": "ChoiceField.Checkbox.Selected.html",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "Group",
+ "notes": "Wrap individual ChoiceField components in a ChoiceFieldGroup to create a list.",
+ "template": "Choicefield.ChoiceFieldGroup.html",
+ "class": "ms-ChoiceFieldGroup"
+ }
+ ]
+}
diff --git a/dist/components/ChoiceField/ChoiceField.min.css b/dist/components/ChoiceField/ChoiceField.min.css
new file mode 100644
index 000000000..1105dfb27
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}
\ No newline at end of file
diff --git a/dist/components/ChoiceField/ChoiceField.scss b/dist/components/ChoiceField/ChoiceField.scss
new file mode 100644
index 000000000..3635c0a6b
--- /dev/null
+++ b/dist/components/ChoiceField/ChoiceField.scss
@@ -0,0 +1,198 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Choice fields (radio buttons and checkboxes) styles
+
+
+// Unselected, radio button (default)
+.ms-ChoiceField {
+ @include ms-font-m;
+ @include ms-u-normalize;
+ min-height: 36px;
+ position: relative;
+
+ .ms-Label {
+ font-size: $ms-font-size-m;
+ padding: 0 0 0 26px;
+ }
+}
+
+//== State: Disabled choicefield
+.ms-ChoiceField-input:disabled {
+ + .ms-ChoiceField-field {
+ pointer-events: none;
+ cursor: default;
+
+ &:before {
+ background-color: $ms-color-neutralTertiaryAlt;
+ color: $ms-color-neutralTertiaryAlt;
+ }
+
+ &:after {
+ border-color: $ms-color-neutralLight;
+ }
+
+ .ms-Label {
+ color: $ms-color-neutralTertiary;
+ }
+
+ @media screen and (-ms-high-contrast: active) {
+ &:before {
+ background-color: $ms-color-contrastBlackDisabled;
+ color: $ms-color-contrastBlackDisabled;
+ }
+
+ &:after {
+ border-color: $ms-color-contrastBlackDisabled;
+ }
+
+ .ms-Label {
+ color: $ms-color-contrastBlackDisabled;
+ }
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ &:before {
+ background-color: $ms-color-contrastWhiteDisabled;
+ color: $ms-color-contrastWhiteDisabled;
+ }
+
+ &:after {
+ border-color: $ms-color-contrastWhiteDisabled;
+ }
+
+ .ms-Label {
+ color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+ }
+}
+
+// The original unstyled input element
+.ms-ChoiceField-input {
+ position: absolute;
+ opacity: 0;
+ top: 8px;
+
+ &:focus:not(:disabled) {
+ + .ms-ChoiceField-field:after {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+ }
+}
+
+// The choicefield radio button or checkbox
+.ms-ChoiceField-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+
+ // The actual styled choicefield element - radio button by default
+ &:after {
+ content: '';
+ display: inline-block;
+ border: 1px $ms-color-neutralTertiaryAlt solid;
+ width: 19px;
+ height: 19px;
+ cursor: pointer;
+ position: relative;
+ font-weight: normal;
+ left: -1px;
+ top: -1px;
+ border-radius: 50%;
+ position: absolute;
+ }
+
+ &:hover {
+ &:after {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+
+ .ms-Label {
+ color: $ms-color-black;
+ }
+ }
+}
+
+// A selected radio button
+.ms-ChoiceField-input:checked {
+ + .ms-ChoiceField-field {
+ // Circle indicating a checked radio button
+ &:before {
+ background-color: $ms-color-neutralSecondary;
+ border-color: $ms-color-neutralSecondary;
+ color: $ms-color-neutralSecondary;
+ border-radius: 50%;
+ content: '\00a0';
+ display: inline-block;
+ position: absolute;
+ top: 4px;
+ right: 0;
+ bottom: 0;
+ left: 4px;
+ width: 11px;
+ height: 11px;
+ box-sizing: border-box;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-white;
+ background-color: $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-black;
+ background-color: $ms-color-black;
+ }
+ }
+
+ &:hover:before {
+ background-color: $ms-color-neutralDark;
+ color: $ms-color-neutralDark;
+ }
+ }
+}
+
+// Checkbox
+.ms-ChoiceField-input[type="checkbox"] {
+ + .ms-ChoiceField-field:after {
+ border-radius: 0;
+ }
+}
+
+// A selected checkbox
+.ms-ChoiceField-input[type="checkbox"]:checked {
+ + .ms-ChoiceField-field {
+ &:before {
+ @include ms-Icon;
+ content: '\e041';
+ background-color: transparent;
+ border-radius: 0;
+ font-size: $ms-font-size-s-plus;
+ top: 3px;
+ left: 3px;
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-white;
+ border-color: transparent;
+ background-color: transparent;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-black;
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+ }
+}
+
+
+//== Component: Choicefield group
+//
+// Choice field groups contain multiple radio buttons or checkboxes
+.ms-ChoiceFieldGroup {
+ margin-bottom: 4px;
+}
diff --git a/dist/components/CommandBar/CommandBar.css b/dist/components/CommandBar/CommandBar.css
new file mode 100644
index 000000000..781de3c3f
--- /dev/null
+++ b/dist/components/CommandBar/CommandBar.css
@@ -0,0 +1,664 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
+
+.ms-CommandBar {
+ background-color: #eff6fc;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ padding-left: 58px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-mainArea {
+ padding-left: 24px;
+ }
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 12px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 16px;
+ }
+}
+
+.ms-CommandBarItem {
+ display: inline-block;
+ color: #0078d7;
+ height: 40px;
+ outline: none;
+ vertical-align: top;
+ margin-right: -4px;
+}
+
+.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ height: 38px;
+ outline: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ height: 38px;
+ outline: none;
+ }
+}
+
+.ms-CommandBarItem:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBarItem {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline;
+ }
+}
+
+.ms-CommandBarItem.is-hidden {
+ width: 0;
+ overflow: hidden;
+}
+
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown {
+ display: inline;
+}
+
+.ms-CommandBarItem-overflow {
+ display: none;
+}
+
+.ms-CommandBarItem-overflow.is-visible {
+ display: inline-block;
+}
+
+.ms-CommandBarItem-overflow .ms-Icon {
+ font-size: 14px;
+ color: #666666;
+}
+
+.ms-CommandBarItem-link {
+ line-height: 39px;
+ padding: 0 6px;
+ cursor: pointer;
+ height: 40px;
+ min-width: 20px;
+ text-align: center;
+ position: relative;
+ padding: 0 8px;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+}
+
+.ms-CommandBarItem-link:focus {
+ outline: none;
+}
+
+.ms-CommandBarItem-link:focus:before {
+ position: absolute;
+ left: 2px;
+ right: 2px;
+ top: 2px;
+ bottom: 2px;
+ border: 1px solid #a6a6a6;
+ content: '';
+}
+
+.ms-CommandBarItem-icon {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-CommandBarItem-chevronDown {
+ vertical-align: middle;
+ padding-bottom: 3px;
+ margin-top: 13px;
+ font-size: 1.1em;
+ line-height: 1em;
+ color: #666666;
+}
+
+.ms-CommandBarItem-chevronDown:before {
+ height: 10px;
+ line-height: 16px;
+}
+
+.ms-CommandBarSearch {
+ float: left;
+ width: 208px;
+ max-width: 208px;
+ background-color: #deecf9;
+ color: #333333;
+ height: 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-color: transparent;
+ transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ transition-property: width, background-color;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch {
+ overflow: hidden;
+ width: 50px;
+ position: absolute;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #ffffff;
+ z-index: 10;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch .ms-Icon--search {
+ margin-left: 2px;
+ margin-top: 12px;
+ vertical-align: top;
+}
+
+.ms-CommandBarSearch-input {
+ height: 40px;
+ padding: 8px 8px 8px 0;
+ border: none;
+ border-left: 42px solid transparent;
+ background-color: transparent;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+ cursor: pointer;
+ font-size: 14px;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #ffffff;
+ }
+}
+
+.ms-CommandBarSearch-input::-ms-clear {
+ display: none;
+}
+
+.ms-CommandBarSearch-input::-webkit-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::-moz-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:-ms-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper {
+ display: block;
+ padding-left: 15px;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper,
+.ms-CommandBarSearch-iconArrowWrapper {
+ top: 0;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.ms-CommandBarSearch-iconClearWrapper {
+ display: none;
+ top: 1px;
+ right: 0px;
+ z-index: 10;
+}
+
+.ms-CommandBarSearch.is-active {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch.is-active {
+ width: 100%;
+ position: absolute;
+ z-index: 10;
+ max-width: 100%;
+ }
+}
+
+.ms-CommandBarSearch.is-active:hover {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ cursor: text;
+ padding-right: 40px;
+ border-left-width: 8px;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
+ border-left-width: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ padding-right: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch-iconWrapper {
+ height: 40px;
+ line-height: 40px;
+ cursor: pointer;
+ padding: 0px 8px;
+ position: absolute;
+ width: 34px;
+ text-align: center;
+}
+
+.ms-CommandBarSearch .ms-Icon:before {
+ font-size: 17px;
+ color: #0078d7;
+}
diff --git a/dist/components/CommandBar/CommandBar.html b/dist/components/CommandBar/CommandBar.html
new file mode 100644
index 000000000..662ced88b
--- /dev/null
+++ b/dist/components/CommandBar/CommandBar.html
@@ -0,0 +1,86 @@
+
+
+
diff --git a/dist/components/CommandBar/CommandBar.json b/dist/components/CommandBar/CommandBar.json
new file mode 100644
index 000000000..16120fb39
--- /dev/null
+++ b/dist/components/CommandBar/CommandBar.json
@@ -0,0 +1,32 @@
+{
+ "name": "CommandBar",
+ "notes": "",
+ "description": "A commanding surface for panels, pages, and applications. Unlike the {0} NavBar {1}, this component is intended for action and not navigation.",
+ "accessibilityNotes":
+ {
+ "role": "CommandBar",
+ "narration": "Read all the elements in the dialog on open.",
+ "keyboard": "Use the TAB key to navigate between elements in the dialog. To exit, use ESC. Trap focus in the dialog until the user dismisses it. The user needs to return to the previous element on close."
+ },
+ "class": "ms-CommandBar",
+ "dependencies": [
+ "ContextualMenu"
+ ],
+ "branches": [
+ {
+ "name": "Default",
+ "default": true,
+ "template": "CommandBar.html",
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true
+ },
+ {
+ "name": "Close button",
+ "class": "ms-Dialog--close"
+ }
+ ]
+ }
+ ]
+}
diff --git a/dist/components/CommandBar/CommandBar.min.css b/dist/components/CommandBar/CommandBar.min.css
new file mode 100644
index 000000000..77fb1149b
--- /dev/null
+++ b/dist/components/CommandBar/CommandBar.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:3}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:2}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:2}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:2;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}
\ No newline at end of file
diff --git a/dist/components/CommandBar/CommandBar.scss b/dist/components/CommandBar/CommandBar.scss
new file mode 100644
index 000000000..776ec7ac1
--- /dev/null
+++ b/dist/components/CommandBar/CommandBar.scss
@@ -0,0 +1,396 @@
+// 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-mobileHeight: 48px;
+$CommandBar-iconSize: 18px;
+$CommandBar-smallLeft: 44px;
+$CommandBar-largeLeft: 48px;
+$CommandBar-xLargeLeft: 232px;
+$CommandBar-sideAreaWidthsm: 128px;
+$CommandBar-sideAreaWidthlg: 260px;
+$CommandBar-sideAreaWidthxlg: 345px;
+
+$CommandBarItem-height: $CommandBar-height;
+$CommandBarItem-marginTop: 13px;
+$CommandBarItem-textHeight: 16px;
+$CommandBarItem-iconWidth: 16px;
+$CommandBarItem-iconLabelMargin: 8px;
+$CommandBarItem-flippedLineHeight: 32px;
+
+
+$SearchBox-height: 40px;
+$SearchBox-widthLgCollapsed: 50px;
+$SearchBox-widthMdDownCollapsed: 36px;
+$SearchBox-widthXLarge: 208px;
+$SearchBox-iconSize: 17px;
+$SearchBox-sidePadding: 8px; // padding in input on left and right sides without icons
+$SearchBox-smallWidth: 36px;
+$SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePadding * 2);
+
+@mixin highContrastBorder($color) {
+ border-left: 1px solid $color;
+ border-right: 1px solid $color;
+}
+
+.ms-CommandBar {
+ background-color: $ms-color-themeLighterAlt;
+ height: $CommandBar-height;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+
+ &:focus {
+ outline: none;
+ }
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ padding-left: $SearchBox-widthLgCollapsed + 8;
+ @media only screen and (min-width: $ms-screen-xl-min) {
+ padding-left: 24px;
+ }
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 8px;
+
+ .ms-CommandBarItem:last-child {
+ margin-right: 0;
+ }
+
+ @media only screen and (min-width: $ms-screen-lg-min) {
+ min-width: $CommandBar-sideAreaWidthsm;
+ }
+
+ @media only screen and (min-width: $ms-screen-lg-min) {
+ padding-right: 12px;
+ }
+
+ @media only screen and (min-width: $ms-screen-xl-min) {
+ padding-right: 16px;
+ }
+}
+
+// Command Bar Item
+.ms-CommandBarItem {
+ display: inline-block;
+ color: $ms-color-themePrimary;
+ height: $CommandBarItem-height;
+ outline: none;
+ vertical-align: top;
+ margin-right: -4px;
+
+ .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem-commandText {
+ display: none;
+ }
+
+ @media screen and (-ms-high-contrast: active) {
+ @include highContrastBorder($ms-color-black);
+ height: 38px;
+ outline: none;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ @include highContrastBorder($ms-color-white);
+ height: 38px;
+ outline: none;
+ }
+
+ &:hover {
+ background-color: $ms-color-themeLight;
+ color: $ms-color-themePrimary;
+
+ @media screen and (-ms-high-contrast: active) {
+ @include highContrastBorder($ms-color-white);
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ @include highContrastBorder($ms-color-black);
+ }
+ }
+
+ // Hide labels and Chevrons SM-MD
+ @media only screen and (min-width: $ms-screen-lg-min) {
+ margin-right: 8px;
+ .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem-commandText {
+ display: inline;
+ }
+ }
+
+}
+
+.ms-CommandBarItem.is-hidden {
+ width: 0;
+ overflow: hidden;
+}
+
+//== Modifier: For commands with only an icon
+//
+.ms-CommandBarItem.icon-only,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly {
+ .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem-commandText {
+ display: none;
+ }
+}
+
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly {
+ .ms-CommandBarItem-commandText,
+ .ms-CommandBarItem-chevronDown {
+ display: inline;
+ }
+}
+
+.ms-CommandBarItem-overflow {
+ display: none;
+
+ &.is-visible {
+ display: inline-block;
+ }
+
+ .ms-Icon {
+ font-size: $ms-font-size-m;
+ color: $ms-color-neutralSecondary;
+ }
+}
+
+.ms-CommandBarItem-link {
+ line-height: $CommandBarItem-height - 1;
+ padding: 0 6px;
+ cursor: pointer;
+ height: $CommandBarItem-height;
+ min-width: 20px;
+ text-align: center;
+ position: relative;
+ padding: 0 8px;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+}
+
+.ms-CommandBarItem-link:focus {
+ outline: none;
+ &:before {
+ position: absolute;
+ left: 2px;
+ right: 2px;
+ top: 2px;
+ bottom: 2px;
+ border: 1px solid $ms-color-neutralTertiary;
+ content: '';
+ }
+}
+
+.ms-CommandBarItem-icon {
+ font-size: $ms-font-size-l;
+ color: $ms-color-themePrimary;
+}
+
+.ms-CommandBarItem-chevronDown {
+ vertical-align: middle;
+ padding-bottom: 3px;
+ margin-top: $CommandBarItem-marginTop;
+ font-size: 1.1em;
+ line-height: 1em;
+ color: $ms-color-neutralSecondary;
+
+ &:before {
+ height: 10px;
+ line-height: $CommandBarItem-textHeight;
+ }
+}
+
+.ms-CommandBarSearch {
+ float: left;
+ width: 208px;
+ max-width: 208px;
+ background-color: $ms-color-themeLighter;
+ color: $ms-color-neutralPrimary;
+ height: $SearchBox-height;
+ position: relative;
+ box-sizing: border-box;
+ border-color: transparent; // give a base state for animation
+
+
+ @media only screen and (max-width: $ms-screen-lg-max) {
+ overflow: hidden;
+ width: $SearchBox-widthLgCollapsed;
+ position: absolute;
+ }
+
+ transition: $ms-duration1 $ms-ease1;
+ transition-property: width, background-color;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-right: 1px solid $ms-color-white;
+ z-index: 10;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-right: 1px solid $ms-color-black;
+ }
+
+ &:hover {
+ background-color: $ms-color-themeLight;
+ color: $ms-color-themePrimary;
+
+ @media screen and (-ms-high-contrast: active) {
+ @include highContrastBorder($ms-color-white);
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ @include highContrastBorder($ms-color-black);
+ }
+ }
+
+ .ms-Icon--search {
+ margin-left: 2px;
+ margin-top: 12px;
+ vertical-align: top;
+ }
+}
+
+.ms-CommandBarSearch-input {
+ height: $SearchBox-height;
+ // Due to a bug in IE9, we have to use a transparent left border instead of left padding
+ padding: $SearchBox-sidePadding $SearchBox-sidePadding $SearchBox-sidePadding 0;
+ border: none;
+ border-left: $SearchBox-height + 2 solid transparent;
+ background-color: transparent;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+ cursor: pointer;
+ font-size: $ms-font-size-m;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-left: $SearchBox-height solid $ms-color-black;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-left: $SearchBox-height solid $ms-color-white;
+ }
+
+ // remove default iOS styles on input boxes
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+
+ // hide IE's X button for clearing the input (we have our own)
+ &::-ms-clear {
+ display: none;
+ }
+
+ //Placeholder text styles
+ &::placeholder {
+ color: $ms-color-neutralPrimary;
+ opacity: 1;
+ font-size: $ms-font-size-m;
+ }
+
+ //Fixes older firefox issue.
+ &:placeholder {
+ color: $ms-color-neutralPrimary;
+ opacity: 1;
+ font-size: $ms-font-size-m;
+ }
+}
+
+// default styles for icons, show the search icon and hide X (and arrow) until focused
+.ms-CommandBarSearch-iconSearchWrapper {
+ display: block;
+ padding-left: 15px;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper,
+.ms-CommandBarSearch-iconArrowWrapper {
+ top: 0;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.ms-CommandBarSearch-iconClearWrapper {
+ display: none;
+ top: 1px;
+ right: 0px;
+ z-index: $ms-zIndex-front;
+}
+
+
+//== State: Puts search in an active state
+//
+.ms-CommandBarSearch.is-active {
+ background-color: $ms-color-themeLight;
+ color: $ms-color-black;
+
+ @media only screen and (max-width: $ms-screen-lg-max) {
+ width: 100%;
+ position: absolute;
+ z-index: $ms-zIndex-front;
+ max-width: 100%;
+ }
+
+ &:hover {
+ background-color: $ms-color-themeLight;
+ color: $ms-color-black;
+ }
+
+ .ms-CommandBarSearch-input {
+ cursor: text;
+ padding-right: $SearchBox-height; // leave room for the X
+ border-left-width: $SearchBox-sidePadding;
+ }
+
+ &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
+ border-left-width: $SearchBox-height; // leave room for arrow
+ }
+
+ // when focused, remove the search icon and possibly show arrow icon
+ & .ms-CommandBarSearch-iconSearchWrapper {
+ display: none;
+ }
+
+ &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
+ display: block;
+ }
+
+ .ms-CommandBarSearch-input {
+ padding-right: $SearchBox-height;
+ }
+
+ .ms-CommandBarSearch-iconClearWrapper {
+ display: block;
+ }
+}
+
+.ms-CommandBarSearch-iconWrapper {
+ height: $SearchBox-height;
+ line-height: $SearchBox-height;
+ cursor: pointer;
+ padding: 0px $SearchBox-sidePadding;
+ position: absolute;
+ width: $SearchBox-iconWrapperWidth;
+ text-align: center;
+}
+
+.ms-CommandBarSearch .ms-Icon:before {
+ font-size: $SearchBox-iconSize;
+ color: $ms-color-themePrimary;
+}
+
diff --git a/dist/components/ContextualMenu/ContextualMenu.Dividers.html b/dist/components/ContextualMenu/ContextualMenu.Dividers.html
new file mode 100644
index 000000000..fe79ee224
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.Dividers.html
@@ -0,0 +1,23 @@
+
+
+
diff --git a/dist/components/ContextualMenu/ContextualMenu.Multiselect.html b/dist/components/ContextualMenu/ContextualMenu.Multiselect.html
new file mode 100644
index 000000000..de669c095
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.Multiselect.html
@@ -0,0 +1,15 @@
+
+
+
diff --git a/dist/components/ContextualMenu/ContextualMenu.SubMenu.html b/dist/components/ContextualMenu/ContextualMenu.SubMenu.html
new file mode 100644
index 000000000..61cc77cab
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.SubMenu.html
@@ -0,0 +1,20 @@
+
+
+
diff --git a/dist/components/ContextualMenu/ContextualMenu.css b/dist/components/ContextualMenu/ContextualMenu.css
new file mode 100644
index 000000000..2c226d7f9
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.css
@@ -0,0 +1,267 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
diff --git a/dist/components/ContextualMenu/ContextualMenu.html b/dist/components/ContextualMenu/ContextualMenu.html
new file mode 100644
index 000000000..95cc4b21b
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.html
@@ -0,0 +1,9 @@
+
+
+
diff --git a/dist/components/ContextualMenu/ContextualMenu.json b/dist/components/ContextualMenu/ContextualMenu.json
new file mode 100644
index 000000000..610dbc9c4
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.json
@@ -0,0 +1,32 @@
+{
+ "name": "ContextualMenu",
+ "notes": "",
+ "description": "A hidden menu containing actionable items pertaining to an object such as a link or piece of text that should be invoked by a click or hover event. This menu is used by other components including the {0} CommandBar {1}. Custom JavaScript will be needed to complete the functionality of this component.",
+ "template": "ContextualMenu.html",
+ "class": "ms-ContextualMenu",
+ "fileOrder": [
+ "ContextualMenu.html",
+ "ContextualMenu.SubMenu.html",
+ "ContextualMenu.Dividers.html",
+ "ContextualMenu.Multiselect.html"
+ ],
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true
+ },
+ {
+ "name": "Sub menu",
+ "template": "contextualmenu.submenu.html"
+ },
+ {
+ "name": "Group",
+ "template": "contextualmenu.dividers.html"
+ },
+ {
+ "name": "Multi-select",
+ "template": "contextualmenu.multiselect.html",
+ "class": "ms-ContextualMenu--multiselect"
+ }
+ ]
+}
diff --git a/dist/components/ContextualMenu/ContextualMenu.min.css b/dist/components/ContextualMenu/ContextualMenu.min.css
new file mode 100644
index 000000000..5a7e8a565
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:2}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}
\ No newline at end of file
diff --git a/dist/components/ContextualMenu/ContextualMenu.scss b/dist/components/ContextualMenu/ContextualMenu.scss
new file mode 100644
index 000000000..799994575
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.scss
@@ -0,0 +1,226 @@
+// 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
+
+// Mixin for high contrast mode link states
+@mixin contextualMenuLinkState {
+ @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;
+ }
+
+ + .ms-ContextualMenu-subMenuIcon,
+ + .ms-ContextualMenu-caretRight {
+ 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-ContextualMenu-subMenuIcon,
+ + .ms-ContextualMenu-caretRight {
+ color: $ms-color-white;
+ }
+ }
+}
+
+.ms-ContextualMenu {
+ @include ms-font-m;
+ @include ms-u-normalize;
+ display: none;
+
+ // Hidden by default, then trigger this state to show it.
+ &.is-open {
+ @include drop-shadow;
+ background-color: $ms-color-white;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle);
+ }
+}
+
+.ms-ContextualMenu-item {
+ @include ms-u-borderBox;
+ position: relative;
+}
+
+// Modifier: Menu item Dividers
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: $ms-color-neutralLight;
+ position: relative;
+}
+
+// Modifier: Menu item Headers
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: $ms-color-themePrimary;
+ font-size: $ms-font-size-s;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: $ms-color-neutralPrimary;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-black;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-white;
+ }
+
+ // Shorten the first and last items to maintain baseline alignment.
+ &:first-child,
+ &:last-child {
+ height: 39px;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ background-color: $ms-color-neutralLight;
+ color: $ms-color-black;
+ }
+
+ &:hover {
+ @include contextualMenuLinkState;
+ }
+
+ &:active {
+ border: 1px solid $ms-color-themePrimary;
+ }
+
+ &:focus {
+ border-color: $ms-color-themePrimary;
+ outline: 0;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-black;
+ }
+ }
+
+ &.is-selected {
+ background-color: $ms-color-themeLight;
+ color: $ms-color-black;
+ font-family: $ms-font-family-semibold;
+
+ &:hover {
+ background-color: $ms-color-themeLight;
+ }
+
+ @include contextualMenuLinkState;
+ }
+
+ &.is-disabled {
+ color: $ms-color-neutralTertiary;
+ cursor: default;
+ pointer-events: none;
+
+ &:active,
+ &:focus {
+ border-color: $ms-color-white;
+
+ @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;
+ }
+ }
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+}
+
+// Modifier: Contextual menu with submenu
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px; // Move the submenu to the left of the menu item that triggered it
+}
+
+// Right chevron.
+// Note: The .ms-ContextualMenu-caretRight class has been deprecated.
+// Please use .ms-ContextualMenu-subMenuIcon.
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: $ms-color-neutralSecondary;
+ font-size: $ms-font-size-m-plus + 1;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+
+//== Modifier: Multi-select menu
+//
+.ms-ContextualMenu.ms-ContextualMenu--multiselect {
+
+ // Align the header with the items
+ .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+ }
+
+ .ms-ContextualMenu-link {
+ padding: 0 30px;
+
+ // Multi-select checkmark
+ &.is-selected {
+ background-color: $ms-color-white;
+
+ // Checkmark
+ &:after {
+ @include ms-Icon;
+ color: $ms-color-neutralPrimary;
+ content: '\e041';
+ font-size: $ms-font-size-s;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+ }
+ }
+ }
+}
diff --git a/dist/components/DatePicker/DatePicker.css b/dist/components/DatePicker/DatePicker.css
new file mode 100644
index 000000000..1a83264a3
--- /dev/null
+++ b/dist/components/DatePicker/DatePicker.css
@@ -0,0 +1,831 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 8px;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder,
+.ms-TextField.is-disabled::-moz-placeholder,
+.ms-TextField.is-disabled:-moz-placeholder,
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder:after,
+.ms-TextField.is-required::-moz-placeholder:after,
+.ms-TextField.is-required:-moz-placeholder:after,
+.ms-TextField.is-required:-ms-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 10px 8px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field::-webkit-input-placeholder,
+.ms-TextField-field::-moz-placeholder,
+.ms-TextField-field:-moz-placeholder,
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #666666;
+ padding: 7px 0 7px 10px;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 12px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: bottom;
+ padding-left: 12px;
+ padding-bottom: 5px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 2px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.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: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-DatePicker {
+ 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 {
+ -webkit-animation-name: fadeIn, slideDownIn10;
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ 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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #c7e0f4;
+}
+
+.ms-DatePicker-day--disabled:before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.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;
+ text-align: center;
+ 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: 0px;
+ position: absolute;
+ top: 0px;
+ width: 140px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+ display: block;
+ font-weight: normal;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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: normal;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-right: 1px solid #eaeaea;
+ width: 220px;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-dayPicker {
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ left: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0 0;
+ }
+
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ .ms-DatePicker-month {
+ margin-left: 12px;
+ }
+
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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;
+ }
+}
diff --git a/dist/components/DatePicker/DatePicker.html b/dist/components/DatePicker/DatePicker.html
new file mode 100644
index 000000000..4771dc725
--- /dev/null
+++ b/dist/components/DatePicker/DatePicker.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+ Start date
+
+
+
+
+
+
+
+
+
Go to today
+
+
+
+ Jan
+ Feb
+ Mar
+ Apr
+ May
+ Jun
+ Jul
+ Aug
+ Sep
+ Oct
+ Nov
+ Dec
+
+
+
+
diff --git a/dist/components/DatePicker/DatePicker.json b/dist/components/DatePicker/DatePicker.json
new file mode 100644
index 000000000..94f03d2e6
--- /dev/null
+++ b/dist/components/DatePicker/DatePicker.json
@@ -0,0 +1,18 @@
+{
+ "name": "DatePicker",
+ "notes": "This is a sample Date Picker that works for Gregorian calendars. It uses jQuery and pickadate.js for demonstration.",
+ "description": "This is a sample Date Picker that works for Gregorian calendars. It uses jQuery and pickadate.js for demonstration purposes.",
+ "template": "DatePicker.html",
+ "class": "ms-DatePicker",
+ "dependencies": [
+ "TextField",
+ "Label",
+ "Link"
+ ],
+ "branches": [
+ {
+ "name": "Default",
+ "default": true
+ }
+ ]
+}
diff --git a/dist/components/DatePicker/DatePicker.min.css b/dist/components/DatePicker/DatePicker.min.css
new file mode 100644
index 000000000..e9eb34d35
--- /dev/null
+++ b/dist/components/DatePicker/DatePicker.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.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{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-DatePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:3}.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:1}.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{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;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:2}.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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.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;line-height:40px;text-align:center;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:1;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.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-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;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}}
\ No newline at end of file
diff --git a/dist/components/DatePicker/DatePicker.scss b/dist/components/DatePicker/DatePicker.scss
new file mode 100644
index 000000000..fab56b101
--- /dev/null
+++ b/dist/components/DatePicker/DatePicker.scss
@@ -0,0 +1,532 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Date Picker styles
+
+
+.ms-DatePicker {
+ @include ms-u-normalize;
+ margin-bottom: 17px;
+ 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-family: $ms-font-family-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-family: $ms-font-family-regular;
+ font-size: 15px;
+ font-weight: normal;
+ 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-family: $ms-font-family-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;
+ text-align: center;
+ 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: 0px;
+ position: absolute;
+ top: 0px;
+ 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: normal;
+ font-family: $ms-font-family-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: normal;
+ font-family: $ms-font-family-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-family: $ms-font-family-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-family: $ms-font-family-semilight;
+ }
+
+ .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;
+ }
+
+ // Show the month picker.
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+
+ // Swap margin for padding so that the border extends the full height.
+ .ms-DatePicker-dayPicker {
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ // 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 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;
+ }
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-size: 17px;
+ color: $ms-color-neutralPrimary;
+
+ &:hover {
+ color: $ms-color-neutralPrimary;
+ cursor: default;
+ }
+ }
+
+
+ // Calendar day cells are smaller.
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-family: $ms-font-family-semibold;
+ font-size: 12px;
+ }
+
+
+ // Reduce the size of arrows to change month/year.
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-prevYear,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-nextDecade {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+
+ // This component is only used on small displays.
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+
+ // Position the current year and decade labels.
+ .ms-DatePicker-currentYear,
+ .ms-DatePicker-currentDecade {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+
+ // Reduce the size of the month buttons.
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 10px 10px 0;
+
+ &:hover {
+ outline: 1px solid transparent;
+ }
+ }
+
+
+ // Position the "Go to today" button below the month picker.
+ .ms-DatePicker-goToday {
+ @include ms-u-borderBox;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ right: 10px;
+ text-align: right;
+ top: 199px;
+ width: 210px;
+ }
+
+ // State: The picker is showing the year components.
+ // On larger screens the calendar will remain and the years
+ // will replace the months.
+ .ms-DatePicker.is-pickingYears {
+
+ // On large screens, we need to keep the day picker
+ // and month components in view.
+ .ms-DatePicker-dayPicker,
+ .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ // Hide the month picking components.
+ .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ // Show the year picking components.
+ .ms-DatePicker-yearPicker {
+ display: block;
+ }
+ }
+}
+
+// On smaller screens the month button toggles to the picking months state.
+@media (max-width: 459px) {
+
+ // State: The picker is showing the month components.
+ .ms-DatePicker.is-pickingMonths {
+
+ // Hide the day picking components.
+ .ms-DatePicker-dayPicker,
+ .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ // Show the month picking components.
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+ }
+}
diff --git a/dist/components/Dialog/Dialog.Blocking.html b/dist/components/Dialog/Dialog.Blocking.html
new file mode 100644
index 000000000..4e5cae881
--- /dev/null
+++ b/dist/components/Dialog/Dialog.Blocking.html
@@ -0,0 +1,34 @@
+
+
+
+
+ Open Dialog - Blocking
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
+
Are you sure you want to discard these changes?
+
+
+
+
+
diff --git a/dist/components/Dialog/Dialog.Close.html b/dist/components/Dialog/Dialog.Close.html
new file mode 100644
index 000000000..dc5254bc5
--- /dev/null
+++ b/dist/components/Dialog/Dialog.Close.html
@@ -0,0 +1,42 @@
+
+
+
+
+ Open Dialog - Close
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
+
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
+
+
+ Option1
+
+
+
+ Option2
+
+
+
+
+
+ Save
+
+
+ Cancel
+
+
+
+
+
+
diff --git a/dist/components/Dialog/Dialog.LgHeader.html b/dist/components/Dialog/Dialog.LgHeader.html
new file mode 100644
index 000000000..7e8f7299b
--- /dev/null
+++ b/dist/components/Dialog/Dialog.LgHeader.html
@@ -0,0 +1,34 @@
+
+
+
+
+ Open Dialog - Large Header
+ Opens the Sample Dialog
+
+
+
diff --git a/dist/components/Dialog/Dialog.Multiline.html b/dist/components/Dialog/Dialog.Multiline.html
new file mode 100644
index 000000000..8144858db
--- /dev/null
+++ b/dist/components/Dialog/Dialog.Multiline.html
@@ -0,0 +1,38 @@
+
+
+
+
+ Open Dialog - Multiline
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+
+
diff --git a/dist/components/Dialog/Dialog.css b/dist/components/Dialog/Dialog.css
new file mode 100644
index 000000000..4bcc46e26
--- /dev/null
+++ b/dist/components/Dialog/Dialog.css
@@ -0,0 +1,693 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-ChoiceField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-ChoiceField .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field {
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #eaeaea;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #00ff00;
+ color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #600000;
+ color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField-input {
+ position: absolute;
+ opacity: 0;
+ top: 8px;
+}
+
+.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+}
+
+.ms-ChoiceField-field:after {
+ content: '';
+ display: inline-block;
+ border: 1px #c8c8c8 solid;
+ width: 19px;
+ height: 19px;
+ cursor: pointer;
+ position: relative;
+ font-weight: normal;
+ left: -1px;
+ top: -1px;
+ border-radius: 50%;
+ position: absolute;
+}
+
+.ms-ChoiceField-field:hover:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ background-color: #666666;
+ border-color: #666666;
+ color: #666666;
+ border-radius: 50%;
+ content: '\00a0';
+ display: inline-block;
+ position: absolute;
+ top: 4px;
+ right: 0;
+ bottom: 0;
+ left: 4px;
+ width: 11px;
+ height: 11px;
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #ffffff;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #000000;
+ background-color: #000000;
+ }
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
+ background-color: #212121;
+ color: #212121;
+}
+
+.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after {
+ border-radius: 0;
+}
+
+.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ background-color: transparent;
+ border-radius: 0;
+ font-size: 13px;
+ top: 3px;
+ left: 3px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #ffffff;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #000000;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.ms-ChoiceFieldGroup {
+ margin-bottom: 4px;
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Dialog {
+ background-color: transparent;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 300;
+ display: block;
+ font-size: 0;
+ line-height: 100vh;
+ text-align: center;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+}
+
+.ms-Dialog::before {
+ vertical-align: middle;
+ display: inline-block;
+ content: '';
+ height: 100%;
+ width: 0;
+}
+
+.ms-Dialog .ms-Button.ms-Button--compound {
+ display: block;
+ margin-left: 0;
+}
+
+.ms-Dialog .ms-Overlay {
+ z-index: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dialog .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Dialog-main {
+ vertical-align: middle;
+ display: inline-block;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ box-sizing: border-box;
+ line-height: 1.35;
+ margin: auto;
+ width: 288px;
+ position: relative;
+ text-align: left;
+ outline: 3px solid transparent;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close {
+ display: none;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ z-index: 10;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Dialog-inner {
+ height: 100%;
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog-header {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 20px 15px;
+}
+
+.ms-Dialog-title {
+ margin: 0;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+ width: 100%;
+}
+
+.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog-subText {
+ margin: 0 0 20px 0;
+ padding-top: 8px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Dialog-actions {
+ position: relative;
+ width: 100%;
+ min-height: 24px;
+ line-height: 24px;
+ margin: 20px 0 0;
+ font-size: 0;
+}
+
+.ms-Dialog-actions .ms-Button {
+ line-height: normal;
+}
+
+.ms-Dialog-actionsRight {
+ text-align: right;
+ font-size: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action:first-child {
+ margin: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action {
+ margin: 0 0 0 16px;
+}
+
+.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-button--close {
+ display: block;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner {
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header {
+ background-color: #0078d7;
+ padding: 26px 20px 28px;
+ margin-bottom: 8px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ font-size: 28px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #ffffff;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText {
+ font-size: 14px;
+}
+
+@media (min-width: 480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
diff --git a/dist/components/Dialog/Dialog.html b/dist/components/Dialog/Dialog.html
new file mode 100644
index 000000000..118e52a6f
--- /dev/null
+++ b/dist/components/Dialog/Dialog.html
@@ -0,0 +1,42 @@
+
+
+
+
+ Open Dialog
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
+
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
+
+
+ Option1
+
+
+
+ Option2
+
+
+
+
+
+ Save
+
+
+ Cancel
+
+
+
+
+
+
diff --git a/dist/components/Dialog/Dialog.json b/dist/components/Dialog/Dialog.json
new file mode 100644
index 000000000..a51926623
--- /dev/null
+++ b/dist/components/Dialog/Dialog.json
@@ -0,0 +1,67 @@
+{
+ "name": "Dialog",
+ "notes": "",
+ "description": "A popup box component that animates in over an application. It is primarily used for confirmation tasks, light-weight creation/edit tasks, and simple management tasks. Dialog has several variants including closeable, large header, multiline button, and blocking. Blocking or modal dialogs do not allow for a light dismiss (clicking/tapping outside the dialog box) and should be used when a user's explicit answer is required for them to proceed such as confirming the deletion of data.",
+ "accessibilityNotes":
+ {
+ "role": "Dialog",
+ "narration": "Read all the elements in the dialog on open.",
+ "keyboard": "Use the TAB key to navigate between elements in the dialog. To exit, use ESC. Trap focus in the dialog until the user dismisses it. The user needs to return to the previous element on close."
+ },
+ "class": "ms-Dialog",
+ "wrapBranches": true,
+ "fileOrder": [
+ "Dialog.html",
+ "Dialog.Close.html",
+ "Dialog.LgHeader.html",
+ "Dialog.Multiline.html",
+ "Dialog.Blocking.html"
+ ],
+ "dependencies": [
+ "Button",
+ "ChoiceField",
+ "Overlay"
+ ],
+ "branches": [
+ {
+ "name": "Default",
+ "default": true,
+ "template": "Dialog.html",
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true
+ },
+ {
+ "name": "Close button",
+ "class": "ms-Dialog--close"
+ }
+ ]
+ },
+ {
+ "name": "Multiline Button",
+ "class": "ms-Dialog--multiline",
+ "template": "Dialog.Multiline.html",
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true
+ },
+ {
+ "name": "Close button",
+ "class": "ms-Dialog--close"
+ }
+ ]
+ },
+ {
+ "name": "Large Header",
+ "class": "ms-Dialog--lgHeader",
+ "template": "Dialog.LgHeader.html"
+ },
+ {
+ "name": "Blocking",
+ "class": "ms-Dialog--blocking",
+ "template": "Dialog.Blocking.html"
+ }
+ ]
+}
diff --git a/dist/components/Dialog/Dialog.min.css b/dist/components/Dialog/Dialog.min.css
new file mode 100644
index 000000000..2216bdf5f
--- /dev/null
+++ b/dist/components/Dialog/Dialog.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:3;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:1}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.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-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}
\ No newline at end of file
diff --git a/dist/components/Dialog/Dialog.scss b/dist/components/Dialog/Dialog.scss
new file mode 100644
index 000000000..db2cb5ce7
--- /dev/null
+++ b/dist/components/Dialog/Dialog.scss
@@ -0,0 +1,211 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Dialog styles
+
+
+// Mixin for IE9 specific styles
+@mixin dialogPositioningIE9Fallback {
+ vertical-align: middle;
+ display: inline-block;
+}
+
+.ms-Dialog {
+ background-color: transparent;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: $ms-zIndex-Dialog;
+
+ // Fallback for IE9
+ display: block;
+ font-size: 0;
+ line-height: 100vh;
+ text-align: center;
+
+ // Flexbox for Modern Browsers
+ @include flexBox();
+ @include alignItems(center);
+
+ &::before {
+ @include dialogPositioningIE9Fallback();
+ content: "";
+ height: 100%;
+ width: 0;
+ }
+
+ .ms-Button.ms-Button--compound {
+ display: block;
+ margin-left: 0;
+ }
+
+ .ms-Overlay {
+ z-index: $ms-zIndex-back;
+
+ @media screen and (-ms-high-contrast: active) {
+ opacity: 0;
+ }
+ }
+}
+
+// The actual dialog element
+.ms-Dialog-main {
+ @include dialogPositioningIE9Fallback();
+ @include drop-shadow();
+ background-color: $ms-color-white;
+ box-sizing: border-box;
+ line-height: 1.35;
+ margin: auto;
+ width: 288px;
+ position: relative;
+ text-align: left;
+ outline: 3px solid transparent;
+}
+
+// Close button, hidden by default
+.ms-Dialog-button.ms-Dialog-button--close {
+ display: none;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ z-index: $ms-zIndex-front;
+
+ .ms-Icon.ms-Icon--x {
+ color: $ms-color-neutralSecondary;
+ font-size: $ms-font-size-m + 2;
+ }
+}
+
+.ms-Dialog-inner {
+ height: 100%;
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog-header {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 20px 15px;
+}
+
+.ms-Dialog-title {
+ margin: 0;
+ font-family: $ms-font-family-light;
+ font-size: $ms-font-size-xl;
+}
+
+.ms-Dialog-content {
+ position: relative;
+ width: 100%;
+
+ // Add margin bottom between compound buttons
+ .ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+ }
+}
+
+.ms-Dialog-subText {
+ margin: 0 0 20px 0;
+ padding-top: 8px;
+ font-family: $ms-font-family-semilight;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-s;
+}
+
+.ms-Dialog-actions {
+ position: relative;
+ width: 100%;
+ min-height: 24px;
+ line-height: 24px;
+ margin: 20px 0 0;
+ font-size: 0;
+
+ .ms-Button {
+ line-height: normal;
+ }
+}
+
+.ms-Dialog-actionsRight {
+ text-align: right;
+ font-size: 0;
+
+ // Reset spacing for first button
+ .ms-Dialog-action:first-child {
+ margin: 0;
+ }
+
+ // Spacing between bottom buttons
+ .ms-Dialog-action + .ms-Dialog-action {
+ margin: 0 0 0 16px;
+ }
+}
+
+
+//= 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-button--close {
+ display: block;
+ }
+}
+
+
+//= Modifier: Multiline button dialog
+//
+.ms-Dialog.ms-Dialog--multiline {
+ .ms-Dialog-title {
+ font-size: $ms-font-size-xxl;
+ }
+
+ .ms-Dialog-inner {
+ padding: 0 20px 20px;
+ }
+}
+
+
+//= Modifier: Large header dialog
+//
+.ms-Dialog.ms-Dialog--lgHeader {
+ .ms-Dialog-header {
+ background-color: $ms-color-themePrimary;
+ padding: 26px 20px 28px;
+ margin-bottom: 8px;
+ }
+
+ .ms-Dialog-title {
+ font-size: $ms-font-size-xxl;
+ font-family: $ms-font-family-light;
+ color: $ms-color-white;
+ }
+
+ .ms-Dialog-subText {
+ font-size: $ms-font-size-m;
+ }
+}
+
+
+
+@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/Dropdown/Dropdown.Disabled.html b/dist/components/Dropdown/Dropdown.Disabled.html
new file mode 100644
index 000000000..cb892a4b9
--- /dev/null
+++ b/dist/components/Dropdown/Dropdown.Disabled.html
@@ -0,0 +1,13 @@
+
+
+
+ Dropdown label
+
+
+ Choose a sound…
+ Dog barking
+ Wind blowing
+ Duck quacking
+ Cow mooing
+
+
diff --git a/dist/components/Dropdown/Dropdown.css b/dist/components/Dropdown/Dropdown.css
new file mode 100644
index 000000000..111afeece
--- /dev/null
+++ b/dist/components/Dropdown/Dropdown.css
@@ -0,0 +1,329 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Dropdown {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ 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.ms-Dropdown--open .ms-Dropdown-items,
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: fixed;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #666666;
+ font-size: 17px;
+ position: absolute;
+ right: 9px;
+ bottom: 5px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ line-height: 30px;
+ padding: 0 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-items {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ max-width: 268px;
+ z-index: 400;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow-y: scroll;
+}
+
+.ms-Dropdown-items:before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 38px;
+ padding: 0 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:first-child,
+.ms-Dropdown-item:last-child {
+ height: 39px;
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Dropdown-items {
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+ }
+
+ .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
+ .ms-Dropdown.is-open .ms-Dropdown-items {
+ position: absolute;
+ }
+}
diff --git a/dist/components/Dropdown/Dropdown.html b/dist/components/Dropdown/Dropdown.html
new file mode 100644
index 000000000..e57e63461
--- /dev/null
+++ b/dist/components/Dropdown/Dropdown.html
@@ -0,0 +1,13 @@
+
+
+
+ Dropdown label
+
+
+ Choose a sound…
+ Dog barking
+ Wind blowing
+ Duck quacking
+ Cow mooing
+
+
\ No newline at end of file
diff --git a/dist/components/Dropdown/Dropdown.json b/dist/components/Dropdown/Dropdown.json
new file mode 100644
index 000000000..e5ed89558
--- /dev/null
+++ b/dist/components/Dropdown/Dropdown.json
@@ -0,0 +1,27 @@
+{
+ "name": "Dropdown",
+ "notes": "",
+ "description": "The styling for a dropdown component and its disabled variant. This dropdown takes current items in a real HTML dropdown and creates a shimmed version that can be styled and selected.",
+ "template": "Dropdown.html",
+ "class": "ms-Dropdown",
+ "dependencies": [
+ "Label"
+ ],
+ "fileOrder": [
+ "Dropdown.html",
+ "Dropdown.Disabled.html"
+ ],
+ "dependencies": [
+ "Label"
+ ],
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+}
diff --git a/dist/components/Dropdown/Dropdown.min.css b/dist/components/Dropdown/Dropdown.min.css
new file mode 100644
index 000000000..cd404bc55
--- /dev/null
+++ b/dist/components/Dropdown/Dropdown.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;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,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}
\ No newline at end of file
diff --git a/dist/components/Dropdown/Dropdown.scss b/dist/components/Dropdown/Dropdown.scss
new file mode 100644
index 000000000..fefc88252
--- /dev/null
+++ b/dist/components/Dropdown/Dropdown.scss
@@ -0,0 +1,245 @@
+// 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-font-m;
+ @include ms-u-normalize;
+ 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
+// Note: .ms-Dropdown--open is deprecated and will be removed in a future version.
+// Use .is-open for an open dropdown.
+.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: fixed;
+}
+
+// Hide the original dropdown
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: $ms-color-neutralSecondary;
+ font-size: $ms-font-size-l;
+ position: absolute;
+ right: 9px;
+ bottom: 5px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+// Style the new, replacement component
+.ms-Dropdown-title {
+ @include ms-u-normalize;
+ background: $ms-color-white;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ line-height: 30px;
+ padding: 0 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+// Container for the dropdown items, displayed as a panel on small screens.
+.ms-Dropdown-items {
+ @include ms-u-normalize;
+ @include drop-shadow;
+ background-color: $ms-color-white;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ max-width: 268px;
+ z-index: ($ms-zIndex-Dropdown + $ms-zIndex-back);
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow-y: scroll;
+
+ &:before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid $ms-color-neutralLight;
+ }
+
+ @media screen and (-ms-high-contrast: active) {
+ border: 1px solid $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border: 1px solid $ms-color-black;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 38px;
+ padding: 0 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-black;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-white;
+ }
+
+ // Shorten the first and last items to maintain baseline alignment.
+ &:first-child,
+ &:last-child {
+ height: 39px;
+ }
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ color: $ms-color-black;
+
+ @include highContrastListItemState;
+ }
+
+ &:active {
+ background-color: $ms-color-neutralLight;
+ border-color: $ms-color-themePrimary;
+ color: $ms-color-black;
+ }
+
+ &.is-disabled {
+ background: $ms-color-white;
+ color: $ms-color-neutralTertiary;
+ cursor: default;
+ line-height: 40px;
+ }
+}
+
+//== State: A selected dropdown item
+// Note: .ms-Dropdown-item--selected is deprecated and will be removed in a future version.
+// Use .is-selected instead.
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: $ms-color-themeLight;
+ color: $ms-color-black;
+ line-height: 40px;
+
+ &:hover {
+ background-color: $ms-color-themeLight;
+ }
+
+ @include highContrastListItemState;
+}
+
+@media (min-width: $ms-screen-md-min) {
+ // On larger screens, display as a traditional dropdown.
+ .ms-Dropdown-items {
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+ }
+
+ .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
+ .ms-Dropdown.is-open .ms-Dropdown-items {
+ position: absolute;
+ }
+}
diff --git a/dist/components/Facepile/Facepile.css b/dist/components/Facepile/Facepile.css
new file mode 100644
index 000000000..4f9baf0f7
--- /dev/null
+++ b/dist/components/Facepile/Facepile.css
@@ -0,0 +1,2208 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-Panel {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 300;
+ display: none;
+ pointer-events: none;
+}
+
+.ms-Panel .ms-Overlay {
+ z-index: 0;
+ display: none;
+ pointer-events: none;
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+.ms-Panel-main {
+ background-color: #ffffff;
+ bottom: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ display: none;
+ z-index: 10;
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ pointer-events: auto;
+ width: 340px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+ left: auto;
+ }
+}
+
+.ms-Panel-main .ms-CommandBar {
+ outline: 1px solid transparent;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main .ms-CommandBar {
+ display: none;
+ }
+}
+
+.ms-Panel-main .ms-CommandBarItem {
+ margin-left: 8px;
+}
+
+.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline-block;
+}
+
+.ms-Panel-main .ms-CommandBar-mainArea {
+ padding-left: 0;
+ margin-left: -1px;
+ overflow: hidden;
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-main {
+ right: auto;
+ left: 0;
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-commands,
+.ms-Panel.ms-Panel--left .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 340px;
+ }
+}
+
+@media (min-width: 640px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main,
+ .ms-Panel.ms-Panel--lg .ms-Panel-main,
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 48px;
+ width: auto;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main {
+ left: auto;
+ width: 643px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg .ms-Panel-main {
+ left: 428px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main {
+ left: auto;
+ width: 940px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 176px;
+ }
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Panel-main {
+ opacity: 1;
+ pointer-events: auto;
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Overlay {
+ display: block;
+ pointer-events: auto;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Panel.is-open .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open .ms-Overlay {
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media screen and (min-width: 480px) and (-ms-high-contrast: active) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay,
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ opacity: 0;
+ -webkit-animation-name: none;
+ animation-name: none;
+ }
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 8px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 14px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-contentInner {
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar {
+ display: block;
+ }
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover {
+ background-color: #d7eaf9;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active {
+ background-color: #b5d8f4;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon {
+ color: #07288b;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
+ color: #000000;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child {
+ background-color: #0078d7;
+ box-shadow: inset 0 1px 0 0 #2488d8;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
+ padding-left: 12px;
+ padding-right: 12px;
+ cursor: pointer;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover {
+ background-color: #005a9e;
+ box-shadow: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-delay: 250ms;
+ animation-delay: 250ms;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-delay: 500ms;
+ animation-delay: 500ms;
+ }
+}
+
+.ms-PeoplePicker {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ *zoom: 1;
+ border: 1px solid #c8c8c8;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchBox:before,
+.ms-PeoplePicker-searchBox:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-PeoplePicker-searchBox:after {
+ clear: both;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: left;
+ height: 38px;
+ outline: none;
+ padding-left: 8px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: left;
+ margin: 4px;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-persona .ms-Persona {
+ background-color: #f4f4f4;
+ float: left;
+ min-height: 30px;
+}
+
+.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;
+ float: left;
+ 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 {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: 305;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ padding: 17px 0 0 12px;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+.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;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-result .ms-Persona:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-result .ms-Persona-details {
+ width: 100%;
+}
+
+.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 0;
+ 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: 34px;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultAction {
+ height: 48px;
+ }
+}
+
+.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: #71afe5;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid #eaeaea;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ left: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
+ background-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
+ color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching:hover {
+ background-color: transparent;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-left: 70px;
+ text-align: left;
+}
+
+.ms-PeoplePicker-searchMoreBtn:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-searchMoreBtn:focus,
+.ms-PeoplePicker-searchMoreBtn:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-left: 50px;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+}
+
+.ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #333333;
+ font-size: 16px;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
+ background-color: inherit;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
+ color: #666666;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
+ margin-top: -8px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+ height: 49px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ left: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ font-size: 17px;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 45px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
+ height: 28px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn {
+ height: 42px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction {
+ height: 42px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
+ padding-left: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
+ top: 16px;
+ left: 14px;
+ height: 20px;
+ width: 20px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
+.ms-PeoplePicker-result .ms-Persona:hover .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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ 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.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
+
+.ms-Spinner {
+ 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 {
+ position: relative;
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
+
+.ms-Facepile {
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ top: 40px;
+ height: 200px;
+}
+
+.ms-Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn {
+ 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-itemBtn .ms-Persona-presence,
+.ms-Facepile-itemBtn .ms-Persona-details {
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover,
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus {
+ background-color: #005a9e;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover {
+ color: #212121;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
diff --git a/dist/components/Facepile/Facepile.html b/dist/components/Facepile/Facepile.html
new file mode 100644
index 000000000..a68cdf6ce
--- /dev/null
+++ b/dist/components/Facepile/Facepile.html
@@ -0,0 +1,241 @@
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+ +3
+
+
+ @@include('../PersonaCard/PersonaCard.html')
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
Search Contacts & Directory
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+ @@include('../PersonaCard/PersonaCard.html')
+
+
+
+
+
+
+
+
+
diff --git a/dist/components/Facepile/Facepile.json b/dist/components/Facepile/Facepile.json
new file mode 100644
index 000000000..38863940d
--- /dev/null
+++ b/dist/components/Facepile/Facepile.json
@@ -0,0 +1,15 @@
+{
+ "name": "Facepile",
+ "notes": "",
+ "template": "Facepile.html",
+ "class": "ms-Facepile",
+ "dependencies": [
+ "Overlay",
+ "Link",
+ "Panel",
+ "PeoplePicker",
+ "Persona",
+ "PersonaCard",
+ "Spinner"
+ ]
+}
diff --git a/dist/components/Facepile/Facepile.min.css b/dist/components/Facepile/Facepile.min.css
new file mode 100644
index 000000000..d7194e5a2
--- /dev/null
+++ b/dist/components/Facepile/Facepile.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:3}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:1;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.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;float:left;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{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:4}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.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}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.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:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.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:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Spinner{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;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{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-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}
\ No newline at end of file
diff --git a/dist/components/Facepile/Facepile.scss b/dist/components/Facepile/Facepile.scss
new file mode 100644
index 000000000..1588cac08
--- /dev/null
+++ b/dist/components/Facepile/Facepile.scss
@@ -0,0 +1,110 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Facepile styles
+
+
+.ms-Facepile {
+ position: relative;
+ height: 32px;
+ width: auto;
+
+ .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ top: 40px;
+ height: 200px;
+
+ &.is-active {
+ display: block;
+ }
+ }
+}
+
+.ms-Facepile-itemBtn {
+ @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-itemBtn.ms-Facepile-itemBtn--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-itemBtn.ms-Facepile-itemBtn--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-family: $ms-font-family-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.Disabled.html b/dist/components/Label/Label.Disabled.html
new file mode 100644
index 000000000..9102c26dd
--- /dev/null
+++ b/dist/components/Label/Label.Disabled.html
@@ -0,0 +1,3 @@
+
+
+Name
diff --git a/dist/components/Label/Label.Required.html b/dist/components/Label/Label.Required.html
new file mode 100644
index 000000000..7a6950daa
--- /dev/null
+++ b/dist/components/Label/Label.Required.html
@@ -0,0 +1,3 @@
+
+
+Name
diff --git a/dist/components/Label/Label.css b/dist/components/Label/Label.css
new file mode 100644
index 000000000..e1fc52b41
--- /dev/null
+++ b/dist/components/Label/Label.css
@@ -0,0 +1,59 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
diff --git a/dist/components/Label/Label.html b/dist/components/Label/Label.html
new file mode 100644
index 000000000..d6da21faf
--- /dev/null
+++ b/dist/components/Label/Label.html
@@ -0,0 +1,5 @@
+
+
+
+ Name
+
diff --git a/dist/components/Label/Label.json b/dist/components/Label/Label.json
new file mode 100644
index 000000000..06abb0cb3
--- /dev/null
+++ b/dist/components/Label/Label.json
@@ -0,0 +1,27 @@
+{
+ "name": "Label",
+ "notes": "A standard form label.",
+ "descripton": "Styling for form labels including the required and disabled variants.",
+ "template": "Label.html",
+ "class": "ms-Label",
+ "wrapBranches": true,
+ "fileOrder": [
+ "Label.html",
+ "Label.Disabled.html",
+ "Label.Required.html"
+ ],
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ },
+ {
+ "name": "Required",
+ "class": "is-required"
+ }
+ ]
+}
diff --git a/dist/components/Label/Label.min.css b/dist/components/Label/Label.min.css
new file mode 100644
index 000000000..a1d91feee
--- /dev/null
+++ b/dist/components/Label/Label.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}
\ No newline at end of file
diff --git a/dist/components/Label/Label.scss b/dist/components/Label/Label.scss
new file mode 100644
index 000000000..75721859e
--- /dev/null
+++ b/dist/components/Label/Label.scss
@@ -0,0 +1,48 @@
+// 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;
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteDisabled;
+ }
+}
+
+@mixin ms-Label-is-required {
+ &:after {
+ content: ' *';
+ color: $ms-color-error;
+ }
+}
+
+
+.ms-Label {
+ @include ms-font-s;
+ @include ms-u-normalize;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+
+ &.is-required {
+ @include ms-Label-is-required;
+ }
+
+ &.is-disabled {
+ @include ms-Label-is-disabled;
+ }
+}
+
+.is-disabled {
+ .ms-Label {
+ @include ms-Label-is-disabled;
+ }
+}
diff --git a/dist/components/Link/Link.css b/dist/components/Link/Link.css
new file mode 100644
index 000000000..dd43a20f4
--- /dev/null
+++ b/dist/components/Link/Link.css
@@ -0,0 +1,35 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
diff --git a/dist/components/Link/Link.html b/dist/components/Link/Link.html
new file mode 100644
index 000000000..c5bf39384
--- /dev/null
+++ b/dist/components/Link/Link.html
@@ -0,0 +1,6 @@
+
+
+You can add links to any text
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit . In condimentum nisl sed dolor consectetur, vitae hendrerit nulla ullamcorper. Sed quis massa mi. Etiam sed ullamcorper est. Phasellus sodales tempus sapien et tristique. Praesent non mauris sem. Aliquam leo elit, molestie sed eros ac, sodales mattis metus. Cras imperdiet est vel quam faucibus posuere. Praesent quis felis mattis, dapibus nibh ut, porttitor dui. Curabitur in eleifend tortor, vel fermentum enim. Etiam blandit quam neque, quis pretium lorem finibus pharetra. Aliquam a placerat arcu. Sed at nibh et nulla ullamcorper pharetra ac ac tortor. Nullam arcu justo, vulputate et efficitur ut, finibus sit amet leo. Phasellus non sem id sapien gravida sodales et at leo.
+
diff --git a/dist/components/Link/Link.json b/dist/components/Link/Link.json
new file mode 100644
index 000000000..c9b3aa17f
--- /dev/null
+++ b/dist/components/Link/Link.json
@@ -0,0 +1,13 @@
+{
+ "name": "Link",
+ "notes": "",
+ "description": "A component containing styles for links including two variants.",
+ "template": "Link.html",
+ "class": "ms-Link",
+ "branches": [
+ {
+ "name": "Default",
+ "default": true
+ }
+ ]
+}
diff --git a/dist/components/Link/Link.min.css b/dist/components/Link/Link.min.css
new file mode 100644
index 000000000..3037cf1ce
--- /dev/null
+++ b/dist/components/Link/Link.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}
\ No newline at end of file
diff --git a/dist/components/Link/Link.scss b/dist/components/Link/Link.scss
new file mode 100644
index 000000000..6cb1c1948
--- /dev/null
+++ b/dist/components/Link/Link.scss
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Link (anchor) styles
+
+
+@mixin ms-Link {
+ color: $ms-color-themePrimary;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover,
+ &:focus {
+ color: $ms-color-themeDarker;
+ }
+
+ &:active {
+ color: $ms-color-themePrimary;
+ }
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackLink;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteLink;
+ }
+}
+
+.ms-Link {
+ @include ms-Link;
+}
diff --git a/dist/components/List/List.Grid.html b/dist/components/List/List.Grid.html
new file mode 100644
index 000000000..d7f17cfbb
--- /dev/null
+++ b/dist/components/List/List.Grid.html
@@ -0,0 +1,106 @@
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
diff --git a/dist/components/List/List.css b/dist/components/List/List.css
new file mode 100644
index 000000000..682f359a2
--- /dev/null
+++ b/dist/components/List/List.css
@@ -0,0 +1,268 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ListItem {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+}
+
+.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-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-List {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width: 480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+}
diff --git a/dist/components/List/List.html b/dist/components/List/List.html
new file mode 100644
index 000000000..69116fe77
--- /dev/null
+++ b/dist/components/List/List.html
@@ -0,0 +1,108 @@
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
diff --git a/dist/components/List/List.json b/dist/components/List/List.json
new file mode 100644
index 000000000..2174dfd8f
--- /dev/null
+++ b/dist/components/List/List.json
@@ -0,0 +1,25 @@
+{
+ "name": "List",
+ "notes": "",
+ "description": "A component for displaying lists that need actions, icons, and additional descriptive information. There are two variants for List including the Default List and Grid List. Lists contain {0} ListItems {1} that have their own set of variants.",
+ "template": "List.html",
+ "class": "ms-List",
+ "wrapBranches": true,
+ "fileOrder": [
+ "List.html",
+ "List.Grid.html"
+ ],
+ "dependencies": [
+ "ListItem"
+ ],
+ "branches": [
+ {
+ "name": "Basic",
+ "default": true
+ },
+ {
+ "name": "Grid",
+ "class": "ms-List--grid"
+ }
+ ]
+}
diff --git a/dist/components/List/List.min.css b/dist/components/List/List.min.css
new file mode 100644
index 000000000..80d4ad757
--- /dev/null
+++ b/dist/components/List/List.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-List,.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-List{color:#333;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}
\ No newline at end of file
diff --git a/dist/components/List/List.scss b/dist/components/List/List.scss
new file mode 100644
index 000000000..dfc9096b1
--- /dev/null
+++ b/dist/components/List/List.scss
@@ -0,0 +1,31 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// List and Grid styles
+
+
+.ms-List {
+ @include ms-font-m;
+ @include ms-u-normalize;
+ list-style-type: none;
+}
+
+
+//== Modifier: List rendered as a grid
+//
+.ms-List.ms-List--grid {
+ @media (min-width: $ms-screen-md-min) {
+ .ms-ListItem {
+ @include ms-u-sm4;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ // Remove the border from the last column.
+ .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+ }
+}
diff --git a/dist/components/ListItem/ListItem.Document.html b/dist/components/ListItem/ListItem.Document.html
new file mode 100644
index 000000000..a4e5e0d5d
--- /dev/null
+++ b/dist/components/ListItem/ListItem.Document.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+ Perdivn Pitch.mp3
+ 08/11/14 12:32p
+
+
diff --git a/dist/components/ListItem/ListItem.Image.html b/dist/components/ListItem/ListItem.Image.html
new file mode 100644
index 000000000..109c11852
--- /dev/null
+++ b/dist/components/ListItem/ListItem.Image.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
diff --git a/dist/components/ListItem/ListItem.Selectable.html b/dist/components/ListItem/ListItem.Selectable.html
new file mode 100644
index 000000000..4f863b987
--- /dev/null
+++ b/dist/components/ListItem/ListItem.Selectable.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
diff --git a/dist/components/ListItem/ListItem.Selected.html b/dist/components/ListItem/ListItem.Selected.html
new file mode 100644
index 000000000..6df5653dc
--- /dev/null
+++ b/dist/components/ListItem/ListItem.Selected.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
diff --git a/dist/components/ListItem/ListItem.Unread.html b/dist/components/ListItem/ListItem.Unread.html
new file mode 100644
index 000000000..d410974df
--- /dev/null
+++ b/dist/components/ListItem/ListItem.Unread.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
diff --git a/dist/components/ListItem/ListItem.Unseen.html b/dist/components/ListItem/ListItem.Unseen.html
new file mode 100644
index 000000000..f93532ac5
--- /dev/null
+++ b/dist/components/ListItem/ListItem.Unseen.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
diff --git a/dist/components/ListItem/ListItem.css b/dist/components/ListItem/ListItem.css
new file mode 100644
index 000000000..ce9cefd5b
--- /dev/null
+++ b/dist/components/ListItem/ListItem.css
@@ -0,0 +1,268 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-List {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width: 480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+}
+
+.ms-ListItem {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+}
+
+.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-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ padding-top: 6px;
+}
diff --git a/dist/components/ListItem/ListItem.html b/dist/components/ListItem/ListItem.html
new file mode 100644
index 000000000..4fd7cd35c
--- /dev/null
+++ b/dist/components/ListItem/ListItem.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
diff --git a/dist/components/ListItem/ListItem.json b/dist/components/ListItem/ListItem.json
new file mode 100644
index 000000000..d5c439e3e
--- /dev/null
+++ b/dist/components/ListItem/ListItem.json
@@ -0,0 +1,46 @@
+{
+ "name": "ListItem",
+ "notes": "",
+ "description": "List item variants that are placed inside of the {0} List {1} component. List variants support several states including Selectable, Selected, Unseen, Picture, Picture, and Document.",
+ "template": "ListItem.html",
+ "class": "ms-ListItem",
+ "fileOrder": [
+ "ListItem.html",
+ "ListItem.Selectable.html",
+ "ListItem.Selected.html",
+ "ListItem.Unseen.html",
+ "ListItem.Unread.html",
+ "ListItem.Image.html",
+ "ListItem.Document.html"
+ ],
+ "dependencies": [
+ "List"
+ ],
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true
+ },
+ {
+ "name": "With image",
+ "template": "ListItem.Image.html"
+ },
+ {
+ "name": "Unread",
+ "class": "is-unread"
+ },
+ {
+ "name": "Unseen",
+ "class": "is-unseen"
+ },
+ {
+ "name": "Selectable",
+ "class": "is-selectable"
+ },
+ {
+ "name": "Document",
+ "template": "ListItem.Document.html",
+ "class": "ms-ListItem--document"
+ }
+ ]
+}
diff --git a/dist/components/ListItem/ListItem.min.css b/dist/components/ListItem/ListItem.min.css
new file mode 100644
index 000000000..e8dca4dfb
--- /dev/null
+++ b/dist/components/ListItem/ListItem.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;padding-top:6px}
\ No newline at end of file
diff --git a/dist/components/ListItem/ListItem.scss b/dist/components/ListItem/ListItem.scss
new file mode 100644
index 000000000..d5b76a1a6
--- /dev/null
+++ b/dist/components/ListItem/ListItem.scss
@@ -0,0 +1,230 @@
+// 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-font-m;
+ @include ms-u-normalize;
+ @include ms-u-clearfix;
+ 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-family: $ms-font-family-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-family: $ms-font-family-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-family: $ms-font-family-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-family: $ms-font-family-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;
+}
+
+.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-family: $ms-font-family-semibold;
+ }
+}
+
+
+//== State: Unseen list item
+//
+.ms-ListItem.is-unseen {
+ &:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid $ms-color-themePrimary;
+ left: 0;
+ position: absolute;
+ top: 0;
+ }
+}
+
+
+//== State: Selectable list item
+//
+.ms-ListItem.is-selectable {
+ .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+ }
+
+ .ms-ListItem-image {
+ margin-left: 0;
+ }
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ cursor: pointer;
+ outline: 1px solid transparent;
+
+ // Insert the empty box.
+ &:before {
+ @include ms-Icon;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid $ms-color-neutralSecondaryAlt;
+ }
+ }
+}
+
+
+//== State: Selected list item
+//
+.ms-ListItem.is-selected {
+ // Insert the checkmark.
+ &:before {
+ border: 1px solid transparent;
+ }
+
+ &:before,
+ &:hover:before {
+ @include ms-Icon;
+ content: '\e041';
+ font-size: $ms-font-size-m-plus;
+ color: $ms-color-neutralSecondaryAlt;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ }
+
+ &:hover {
+ background-color: $ms-color-themeLight;
+ outline: 1px solid transparent;
+ }
+}
+
+
+//== Modifier: Document list item
+//
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+
+ // The icon for a file or folder in the items list. This may
+ // be an .ms-Icon or a specific modifier that loads an image.
+ .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+ }
+
+ // If the item icon is an .ms-Icon, position and color it appropriately.
+ .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: $ms-color-neutralSecondary;
+ }
+
+ // Primary text, typically the name.
+ .ms-ListItem-primaryText {
+ @include noWrap;
+ font-size: $ms-font-size-m;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+ }
+
+ // Secondary text, typically the modified date or some other metadata.
+ .ms-ListItem-secondaryText {
+ @include noWrap;
+ color: $ms-color-neutralSecondary;
+ font-family: $ms-font-family-regular;
+ font-size: $ms-font-size-xs;
+ padding-top: 6px;
+ }
+}
diff --git a/dist/components/MessageBanner/MessageBanner.css b/dist/components/MessageBanner/MessageBanner.css
new file mode 100644
index 000000000..1798433f0
--- /dev/null
+++ b/dist/components/MessageBanner/MessageBanner.css
@@ -0,0 +1,458 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-MessageBanner {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ position: relative;
+ border-bottom: 1px solid #767676;
+ background-color: #eff6fc;
+ min-width: 320px;
+ width: 100%;
+ height: 52px;
+ text-align: center;
+ overflow: hidden;
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ -webkit-animation-name: fadeOut, slideUpOut20;
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-expand:focus,
+.ms-MessageBanner-close:focus {
+ outline: 1px solid 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-expand {
+ display: inline-block;
+ }
+
+ .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 0;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
diff --git a/dist/components/MessageBanner/MessageBanner.html b/dist/components/MessageBanner/MessageBanner.html
new file mode 100644
index 000000000..ec90437e1
--- /dev/null
+++ b/dist/components/MessageBanner/MessageBanner.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
+
+
+
+
+
+
+ Get More Storage
+
+
+
+
+
+
diff --git a/dist/components/MessageBanner/MessageBanner.json b/dist/components/MessageBanner/MessageBanner.json
new file mode 100644
index 000000000..45021a464
--- /dev/null
+++ b/dist/components/MessageBanner/MessageBanner.json
@@ -0,0 +1,10 @@
+{
+ "name": "MessageBanner",
+ "notes": "A component for displaying errors",
+ "description:": "A component for displaying errors to a user via a top-of-the-screen message surface.",
+ "template": "MessageBanner.html",
+ "class": "ms-MessageBanner",
+ "dependencies": [
+ "Button"
+ ]
+}
diff --git a/dist/components/MessageBanner/MessageBanner.min.css b/dist/components/MessageBanner/MessageBanner.min.css
new file mode 100644
index 000000000..e074f1a3e
--- /dev/null
+++ b/dist/components/MessageBanner/MessageBanner.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-MessageBanner{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid 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-expand{display:inline-block}.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{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}
\ No newline at end of file
diff --git a/dist/components/MessageBanner/MessageBanner.scss b/dist/components/MessageBanner/MessageBanner.scss
new file mode 100644
index 000000000..d076ec313
--- /dev/null
+++ b/dist/components/MessageBanner/MessageBanner.scss
@@ -0,0 +1,133 @@
+// 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-font-s();
+ 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;
+ }
+}
+
+.ms-MessageBanner {
+ &.hide {
+ @include ms-u-slideUpOut20();
+ }
+
+ &.is-hidden {
+ display: none;
+ }
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: $MessageBanner-height;
+ width: $MessageBanner-iconSize;
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
+
+ &:focus {
+ outline: 1px solid 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-expand {
+ display: inline-block;
+ }
+
+ .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 0;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+
+ .ms-Icon {
+ color: $ms-color-themePrimary;
+ }
+ }
+}
diff --git a/dist/components/NavBar/NavBar.css b/dist/components/NavBar/NavBar.css
new file mode 100644
index 000000000..60f3ca959
--- /dev/null
+++ b/dist/components/NavBar/NavBar.css
@@ -0,0 +1,792 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-List {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width: 480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+}
+
+.ms-ListItem {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+}
+
+.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-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-NavBar {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ height: 40px;
+ padding: 0 10px;
+ width: 100%;
+ outline: 1px solid transparent;
+}
+
+.ms-NavBar .ms-Overlay {
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ z-index: 0;
+}
+
+.ms-NavBar-openMenu {
+ font-size: 20px;
+ height: 40px;
+ line-height: 40px;
+ position: absolute;
+ right: 27px;
+ text-align: center;
+ width: 40px;
+ cursor: pointer;
+}
+
+.ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item {
+ box-sizing: border-box;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ padding-left: 20px;
+ position: relative;
+}
+
+.ms-NavBar-item:hover {
+ cursor: pointer;
+ background-color: #deecf9;
+ color: #000000;
+}
+
+.ms-NavBar-item:hover .ms-Icon {
+ color: #333333;
+}
+
+.ms-NavBar-item:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-NavBar-item.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-NavBar-item.is-disabled:hover {
+ cursor: default;
+ border: none;
+}
+
+.ms-NavBar-link {
+ color: #333333;
+ text-decoration: none;
+}
+
+.ms-NavBar-link:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after {
+ color: #212121;
+}
+
+.ms-NavBar-chevronDown {
+ color: #666666;
+ font-size: 22px;
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search {
+ position: relative;
+ width: 30px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #666666;
+ content: '\e039';
+ font-size: 21px;
+ line-height: 40px;
+ position: absolute;
+ right: 5px;
+ top: 0;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search .ms-TextField {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open {
+ width: 200px;
+ padding-right: 40px;
+ border: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField {
+ display: block;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field {
+ border: none;
+ background-color: transparent;
+}
+
+@media (max-width: 479px) {
+ .ms-NavBar.is-open .ms-NavBar-items {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ bottom: 0;
+ display: block;
+ left: 50px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ outline: 1px solid transparent;
+ z-index: 5;
+ }
+
+ .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu {
+ position: relative;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 479px) {
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected {
+ height: inherit;
+ background-color: transparent;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown {
+ -webkit-transform: scaleY(-1);
+ -ms-transform: scaleY(-1);
+ transform: scaleY(-1);
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu {
+ position: static;
+ border: none;
+ box-shadow: none;
+ width: auto;
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ }
+
+ .ms-NavBar.is-open .ms-Overlay {
+ display: block;
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-NavBar-openMenu {
+ display: none;
+ }
+
+ .ms-NavBar-items {
+ display: block;
+ list-style: none;
+ margin: 0 7px 0 0;
+ padding: 0;
+ }
+
+ .ms-NavBar-chevronDown {
+ top: 3px;
+ right: 0;
+ float: none;
+ position: relative;
+ }
+
+ .ms-NavBar-item {
+ float: left;
+ margin-right: 18px;
+ font-size: 14px;
+ padding: 0;
+ }
+
+ .ms-NavBar-item:hover {
+ border-bottom: 2px solid #0078d7;
+ background-color: transparent;
+ }
+
+ .ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ border-bottom: 2px solid #0078d7;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu:after {
+ position: relative;
+ top: 3px;
+ padding-top: 0;
+ right: auto;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--right {
+ float: right;
+ margin: 0;
+ }
+}
diff --git a/dist/components/NavBar/NavBar.html b/dist/components/NavBar/NavBar.html
new file mode 100644
index 000000000..e25f0ecd3
--- /dev/null
+++ b/dist/components/NavBar/NavBar.html
@@ -0,0 +1,29 @@
+
+
+
diff --git a/dist/components/NavBar/NavBar.json b/dist/components/NavBar/NavBar.json
new file mode 100644
index 000000000..9afa11a0f
--- /dev/null
+++ b/dist/components/NavBar/NavBar.json
@@ -0,0 +1,13 @@
+{
+ "name": "NavBar",
+ "notes": "",
+ "description": "A navigational layout element that includes search, commanding, and contextual menus. On smaller screen sizes, it collapses into a hamburger menu that presents its elements in a {0} Panel {1}.",
+ "template": "NavBar.html",
+ "class": "ms-NavBar",
+ "dependencies": [
+ "List",
+ "ListItem",
+ "ContextualMenu",
+ "Overlay"
+ ]
+}
diff --git a/dist/components/NavBar/NavBar.min.css b/dist/components/NavBar/NavBar.min.css
new file mode 100644
index 000000000..65e0ab4ec
--- /dev/null
+++ b/dist/components/NavBar/NavBar.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;padding-top:6px}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:3}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:4}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:2}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}}
\ No newline at end of file
diff --git a/dist/components/NavBar/NavBar.scss b/dist/components/NavBar/NavBar.scss
new file mode 100644
index 000000000..80cf188b3
--- /dev/null
+++ b/dist/components/NavBar/NavBar.scss
@@ -0,0 +1,279 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Nav Bar styles
+
+
+// On small screens, the nav bar contains only the hamburger icon.
+.ms-NavBar {
+ @include ms-font-m;
+ @include ms-u-normalize;
+ background-color: $ms-color-neutralLighter;
+ height: 40px;
+ padding: 0 10px;
+ width: 100%;
+ outline: 1px solid transparent;
+
+ .ms-Overlay {
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity $ms-duration3 $ms-ease1;
+ z-index: $ms-zIndex-back;
+ }
+}
+
+// The button to open the menu on small screens.
+.ms-NavBar-openMenu {
+ font-size: 20px;
+ height: 40px;
+ line-height: 40px;
+ position: absolute;
+ right: 27px;
+ text-align: center;
+ width: 40px;
+ cursor: pointer;
+}
+
+// Hide the items by default.
+.ms-NavBar-items {
+ display: none;
+}
+
+// Individual item/button, with optional subitems.
+.ms-NavBar-item {
+ @include ms-u-borderBox;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-l;
+ padding-left: 20px;
+ position: relative;
+
+ &:hover {
+ cursor: pointer;
+ background-color: $ms-color-themeLighter;
+ color: $ms-color-black;
+
+ .ms-Icon {
+ color: $ms-color-neutralPrimary;
+ }
+ }
+
+ &:active {
+ color: $ms-color-themePrimary;
+ }
+
+ // The currently-selected item.
+ &.is-selected {
+ font-family: $ms-font-family-semibold;
+ }
+
+ // Items can be disabled.
+ &.is-disabled {
+ color: $ms-color-neutralTertiary;
+
+ &:hover {
+ cursor: default;
+ border: none;
+ }
+ }
+}
+
+.ms-NavBar-link {
+ color: $ms-color-neutralPrimary;
+ text-decoration: none;
+
+ &:active {
+ color: $ms-color-themePrimary;
+ }
+}
+
+
+// Items can contain subitems.
+.ms-NavBar-item.ms-NavBar-item--hasMenu {
+
+ // Hide submenus by default.
+ .ms-NavBar-items {
+ display: none;
+ }
+
+ &:hover {
+ &:after {
+ color: $ms-color-neutralDark;
+ }
+ }
+}
+
+// Add chevron icon.
+.ms-NavBar-chevronDown {
+ color: $ms-color-neutralSecondary;
+ font-size: 22px;
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+
+// Search.
+.ms-NavBar-item.ms-NavBar-item--search {
+ position: relative;
+ width: 30px;
+
+ // Search icon.
+ &:after {
+ @include ms-Icon;
+ color: $ms-color-neutralSecondary;
+ content: '\e039';
+ font-size: 21px;
+ line-height: 40px;
+ position: absolute;
+ right: 5px;
+ top: 0;
+ }
+
+ // The search box is hidden by default.
+ .ms-TextField {
+ display: none;
+ }
+
+ // Opened state.
+ &.is-open {
+ width: 200px;
+ padding-right: 40px;
+ border: none;
+
+ .ms-TextField {
+ display: block;
+ }
+
+ .ms-TextField-field {
+ border: none;
+ background-color: transparent;
+ }
+ }
+}
+
+// Show the nav items menu only on small screens
+@media (max-width: $ms-screen-sm-max) {
+ // State: The navigation panel is open.
+ .ms-NavBar.is-open {
+ // Show the items.
+ .ms-NavBar-items {
+ @include drop-shadow;
+ background-color: $ms-color-white;
+ bottom: 0;
+ display: block;
+ left: 50px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ outline: 1px solid transparent;
+ z-index: $ms-zIndex-middle;
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu {
+ position: relative;
+ }
+ }
+}
+
+// On small screens, override the contextual menu styles.
+@media (min-width: $ms-screen-sm-min) and (max-width: $ms-screen-sm-max) {
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected {
+ height: inherit;
+ background-color: transparent;
+ font-family: $ms-font-family-semilight;
+
+ // Flip the chevron around.
+ .ms-NavBar-chevronDown {
+ transform: scaleY(-1);
+ }
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu {
+ position: static;
+ border: none;
+ box-shadow: none;
+ width: auto;
+
+ .ms-ContextualMenu-link {
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-l;
+ }
+ }
+
+ // When the navbar is opened, animate to full opacity
+ // and activate pointer events so can be clicked.
+ .ms-NavBar.is-open .ms-Overlay {
+ display: block;
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+// On medium screens and larger we display the menu items in the nav bar.
+@media (min-width: $ms-screen-md-min) {
+
+ // We don't need the button to open the menu.
+ .ms-NavBar-openMenu {
+ display: none;
+ }
+
+ // Show the items list.
+ .ms-NavBar-items {
+ display: block;
+ list-style: none;
+ margin: 0 7px 0 0;
+ padding: 0;
+ }
+
+ .ms-NavBar-chevronDown {
+ top: 3px;
+ right: 0;
+ float: none;
+ position: relative;
+ }
+
+ // Position the items in a horizontal list.
+ .ms-NavBar-item {
+ float: left;
+ margin-right: 18px;
+ font-size: $ms-font-size-m;
+ padding: 0;
+
+ &:hover {
+ border-bottom: 2px solid $ms-color-themePrimary;
+ background-color: transparent;
+ }
+
+ // The currently-selected item.
+ &.is-selected {
+ font-family: $ms-font-family-semibold;
+ border-bottom: 2px solid $ms-color-themePrimary;
+ }
+ }
+
+ // Modifier: Items can contain subitems.
+ .ms-NavBar-item.ms-NavBar-item--hasMenu {
+ // Add chevron icon.
+ &:after {
+ position: relative;
+ top: 3px;
+ padding-top: 0;
+ right: auto;
+ }
+ }
+
+ // Modifier: Items can be positioned to the right on larger screens.
+ .ms-NavBar-item.ms-NavBar-item--right {
+ float: right;
+ margin: 0;
+ }
+}
diff --git a/dist/components/OrgChart/OrgChart.Square.html b/dist/components/OrgChart/OrgChart.Square.html
new file mode 100644
index 000000000..7a4d842ac
--- /dev/null
+++ b/dist/components/OrgChart/OrgChart.Square.html
@@ -0,0 +1,121 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/components/OrgChart/OrgChart.css b/dist/components/OrgChart/OrgChart.css
new file mode 100644
index 000000000..21686e819
--- /dev/null
+++ b/dist/components/OrgChart/OrgChart.css
@@ -0,0 +1,544 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Persona {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-OrgChart {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px 0;
+}
+
+.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;
+ outline: transparent;
+}
diff --git a/dist/components/OrgChart/OrgChart.html b/dist/components/OrgChart/OrgChart.html
new file mode 100644
index 000000000..424361882
--- /dev/null
+++ b/dist/components/OrgChart/OrgChart.html
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/components/OrgChart/OrgChart.json b/dist/components/OrgChart/OrgChart.json
new file mode 100644
index 000000000..520b74a50
--- /dev/null
+++ b/dist/components/OrgChart/OrgChart.json
@@ -0,0 +1,26 @@
+{
+ "name": "OrgChart",
+ "notes": "",
+ "description": "A component embedded within the {0} PersonaCard {1} component that displays hierarchical information about an individual within an organization.",
+ "template": "OrgChart.html",
+ "class": "ms-OrgChart",
+ "wrapBranches": true,
+ "dependencies": [
+ "Persona"
+ ],
+ "fileOrder": [
+ "OrgChart.html",
+ "OrgChart.Square.html"
+ ],
+ "branches": [
+ {
+ "name": "Regular",
+ "default": true
+ },
+ {
+ "name": "Circles",
+ "notes": "Circle personas.",
+ "class": "ms-OrgChart--circles"
+ }
+ ]
+}
diff --git a/dist/components/OrgChart/OrgChart.min.css b/dist/components/OrgChart/OrgChart.min.css
new file mode 100644
index 000000000..22ad942bd
--- /dev/null
+++ b/dist/components/OrgChart/OrgChart.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.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;outline:transparent}
\ No newline at end of file
diff --git a/dist/components/OrgChart/OrgChart.scss b/dist/components/OrgChart/OrgChart.scss
new file mode 100644
index 000000000..1a251addd
--- /dev/null
+++ b/dist/components/OrgChart/OrgChart.scss
@@ -0,0 +1,43 @@
+// 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-font-m;
+ @include ms-u-normalize;
+}
+
+.ms-OrgChart-groupTitle {
+ color: $ms-color-neutralSecondary;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px 0;
+}
+
+.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;
+ outline: transparent;
+}
diff --git a/dist/components/Overlay/Overlay.Dark.html b/dist/components/Overlay/Overlay.Dark.html
new file mode 100644
index 000000000..22127c6ff
--- /dev/null
+++ b/dist/components/Overlay/Overlay.Dark.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/dist/components/Overlay/Overlay.None.html b/dist/components/Overlay/Overlay.None.html
new file mode 100644
index 000000000..6bf8ab0e5
--- /dev/null
+++ b/dist/components/Overlay/Overlay.None.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/dist/components/Overlay/Overlay.css b/dist/components/Overlay/Overlay.css
new file mode 100644
index 000000000..bf8b93f39
--- /dev/null
+++ b/dist/components/Overlay/Overlay.css
@@ -0,0 +1,26 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
diff --git a/dist/components/Overlay/Overlay.html b/dist/components/Overlay/Overlay.html
new file mode 100644
index 000000000..2d9d05796
--- /dev/null
+++ b/dist/components/Overlay/Overlay.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/dist/components/Overlay/Overlay.json b/dist/components/Overlay/Overlay.json
new file mode 100644
index 000000000..6b45c573b
--- /dev/null
+++ b/dist/components/Overlay/Overlay.json
@@ -0,0 +1,28 @@
+{
+ "name": "Overlay",
+ "notes": "",
+ "description": "An element that takes over the screen to help bring focus to an element for the user. Used in conjunction with the {0} Panel {1} and {2} Dialog {3} and available in clear and dark.",
+ "template": "Overlay.html",
+ "class": "ms-Overlay",
+ "wrapBranches": true,
+ "fileOrder": [
+ "Overlay.html",
+ "Overlay.Dark.html",
+ "Overlay.None.html"
+ ],
+ "branches": [
+ {
+ "name": "Light (default)",
+ "default": true
+ },
+ {
+ "name": "Dark",
+ "class": "ms-Overlay--dark"
+ },
+ {
+ "name": "None",
+ "notes": "A hidden overlay, used primarily as part of other components like the dialog.",
+ "class": "ms-Overlay--none"
+ }
+ ]
+}
diff --git a/dist/components/Overlay/Overlay.min.css b/dist/components/Overlay/Overlay.min.css
new file mode 100644
index 000000000..01e2cb9cb
--- /dev/null
+++ b/dist/components/Overlay/Overlay.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:1}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}
\ No newline at end of file
diff --git a/dist/components/Overlay/Overlay.scss b/dist/components/Overlay/Overlay.scss
new file mode 100644
index 000000000..0d6831df0
--- /dev/null
+++ b/dist/components/Overlay/Overlay.scss
@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Modal overlay styles
+
+
+.ms-Overlay {
+ background-color: $ms-color-whiteTranslucent40;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: $ms-zIndex-Overlay;
+}
+
+
+//== Modifier: Dark overlay
+//
+.ms-Overlay.ms-Overlay--dark {
+ background-color: $ms-color-blackTranslucent40;
+}
+
+
+//== Modifier: Hidden overlay
+//
+&.ms-Overlay--none {
+ visibility: hidden;
+}
+
diff --git a/dist/components/Panel/Panel.ExtraLarge.html b/dist/components/Panel/Panel.ExtraLarge.html
new file mode 100644
index 000000000..9e7c4e2bb
--- /dev/null
+++ b/dist/components/Panel/Panel.ExtraLarge.html
@@ -0,0 +1,44 @@
+
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
diff --git a/dist/components/Panel/Panel.Large.Fixed.html b/dist/components/Panel/Panel.Large.Fixed.html
new file mode 100644
index 000000000..5f2b5d705
--- /dev/null
+++ b/dist/components/Panel/Panel.Large.Fixed.html
@@ -0,0 +1,44 @@
+
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
diff --git a/dist/components/Panel/Panel.Large.html b/dist/components/Panel/Panel.Large.html
new file mode 100644
index 000000000..79e6c487f
--- /dev/null
+++ b/dist/components/Panel/Panel.Large.html
@@ -0,0 +1,44 @@
+
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
diff --git a/dist/components/Panel/Panel.Left.html b/dist/components/Panel/Panel.Left.html
new file mode 100644
index 000000000..d7243f361
--- /dev/null
+++ b/dist/components/Panel/Panel.Left.html
@@ -0,0 +1,12 @@
+
+
+
+ Open panel
+
+
+
diff --git a/dist/components/Panel/Panel.LightDismiss.html b/dist/components/Panel/Panel.LightDismiss.html
new file mode 100644
index 000000000..73c6981dc
--- /dev/null
+++ b/dist/components/Panel/Panel.LightDismiss.html
@@ -0,0 +1,12 @@
+
+
+
+ Open panel
+
+
+
diff --git a/dist/components/Panel/Panel.Medium.html b/dist/components/Panel/Panel.Medium.html
new file mode 100644
index 000000000..2301ccdb3
--- /dev/null
+++ b/dist/components/Panel/Panel.Medium.html
@@ -0,0 +1,44 @@
+
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
diff --git a/dist/components/Panel/Panel.css b/dist/components/Panel/Panel.css
new file mode 100644
index 000000000..67ca72790
--- /dev/null
+++ b/dist/components/Panel/Panel.css
@@ -0,0 +1,1634 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-CommandBar {
+ background-color: #eff6fc;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ padding-left: 58px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-mainArea {
+ padding-left: 24px;
+ }
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 12px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 16px;
+ }
+}
+
+.ms-CommandBarItem {
+ display: inline-block;
+ color: #0078d7;
+ height: 40px;
+ outline: none;
+ vertical-align: top;
+ margin-right: -4px;
+}
+
+.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ height: 38px;
+ outline: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ height: 38px;
+ outline: none;
+ }
+}
+
+.ms-CommandBarItem:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBarItem {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline;
+ }
+}
+
+.ms-CommandBarItem.is-hidden {
+ width: 0;
+ overflow: hidden;
+}
+
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown {
+ display: inline;
+}
+
+.ms-CommandBarItem-overflow {
+ display: none;
+}
+
+.ms-CommandBarItem-overflow.is-visible {
+ display: inline-block;
+}
+
+.ms-CommandBarItem-overflow .ms-Icon {
+ font-size: 14px;
+ color: #666666;
+}
+
+.ms-CommandBarItem-link {
+ line-height: 39px;
+ padding: 0 6px;
+ cursor: pointer;
+ height: 40px;
+ min-width: 20px;
+ text-align: center;
+ position: relative;
+ padding: 0 8px;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+}
+
+.ms-CommandBarItem-link:focus {
+ outline: none;
+}
+
+.ms-CommandBarItem-link:focus:before {
+ position: absolute;
+ left: 2px;
+ right: 2px;
+ top: 2px;
+ bottom: 2px;
+ border: 1px solid #a6a6a6;
+ content: '';
+}
+
+.ms-CommandBarItem-icon {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-CommandBarItem-chevronDown {
+ vertical-align: middle;
+ padding-bottom: 3px;
+ margin-top: 13px;
+ font-size: 1.1em;
+ line-height: 1em;
+ color: #666666;
+}
+
+.ms-CommandBarItem-chevronDown:before {
+ height: 10px;
+ line-height: 16px;
+}
+
+.ms-CommandBarSearch {
+ float: left;
+ width: 208px;
+ max-width: 208px;
+ background-color: #deecf9;
+ color: #333333;
+ height: 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-color: transparent;
+ transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ transition-property: width, background-color;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch {
+ overflow: hidden;
+ width: 50px;
+ position: absolute;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #ffffff;
+ z-index: 10;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch .ms-Icon--search {
+ margin-left: 2px;
+ margin-top: 12px;
+ vertical-align: top;
+}
+
+.ms-CommandBarSearch-input {
+ height: 40px;
+ padding: 8px 8px 8px 0;
+ border: none;
+ border-left: 42px solid transparent;
+ background-color: transparent;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+ cursor: pointer;
+ font-size: 14px;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #ffffff;
+ }
+}
+
+.ms-CommandBarSearch-input::-ms-clear {
+ display: none;
+}
+
+.ms-CommandBarSearch-input::-webkit-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::-moz-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:-ms-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper {
+ display: block;
+ padding-left: 15px;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper,
+.ms-CommandBarSearch-iconArrowWrapper {
+ top: 0;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.ms-CommandBarSearch-iconClearWrapper {
+ display: none;
+ top: 1px;
+ right: 0px;
+ z-index: 10;
+}
+
+.ms-CommandBarSearch.is-active {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch.is-active {
+ width: 100%;
+ position: absolute;
+ z-index: 10;
+ max-width: 100%;
+ }
+}
+
+.ms-CommandBarSearch.is-active:hover {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ cursor: text;
+ padding-right: 40px;
+ border-left-width: 8px;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
+ border-left-width: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ padding-right: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch-iconWrapper {
+ height: 40px;
+ line-height: 40px;
+ cursor: pointer;
+ padding: 0px 8px;
+ position: absolute;
+ width: 34px;
+ text-align: center;
+}
+
+.ms-CommandBarSearch .ms-Icon:before {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Pivot {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 40px;
+ list-style-type: none;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ position: relative;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ line-height: 40px;
+ margin-right: 8px;
+}
+
+.ms-Pivot-link:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:after {
+ background-color: #37006e;
+ }
+}
+
+.ms-Pivot-link:hover,
+.ms-Pivot-link:focus,
+.ms-Pivot-link:active {
+ color: #000000;
+ cursor: pointer;
+}
+
+.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:active + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-link:active {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:active {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:active {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link:active:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected {
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link.is-selected {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link.is-selected {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link.is-selected:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-dropdownIcon {
+ font-size: 16px;
+ position: relative;
+ top: 2px;
+}
+
+.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:after {
+ display: none;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs {
+ height: 40px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important;
+}
+
+.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 !important;
+ background-color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.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 !important;
+}
+
+@media (min-width: 640px) {
+ .ms-Pivot-link {
+ font-size: 14px;
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 14px;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+}
+
+.ms-Panel {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 300;
+ display: none;
+ pointer-events: none;
+}
+
+.ms-Panel .ms-Overlay {
+ z-index: 0;
+ display: none;
+ pointer-events: none;
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+.ms-Panel-main {
+ background-color: #ffffff;
+ bottom: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ display: none;
+ z-index: 10;
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ pointer-events: auto;
+ width: 340px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+ left: auto;
+ }
+}
+
+.ms-Panel-main .ms-CommandBar {
+ outline: 1px solid transparent;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main .ms-CommandBar {
+ display: none;
+ }
+}
+
+.ms-Panel-main .ms-CommandBarItem {
+ margin-left: 8px;
+}
+
+.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline-block;
+}
+
+.ms-Panel-main .ms-CommandBar-mainArea {
+ padding-left: 0;
+ margin-left: -1px;
+ overflow: hidden;
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-main {
+ right: auto;
+ left: 0;
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-commands,
+.ms-Panel.ms-Panel--left .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 340px;
+ }
+}
+
+@media (min-width: 640px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main,
+ .ms-Panel.ms-Panel--lg .ms-Panel-main,
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 48px;
+ width: auto;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main {
+ left: auto;
+ width: 643px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg .ms-Panel-main {
+ left: 428px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main {
+ left: auto;
+ width: 940px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 176px;
+ }
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Panel-main {
+ opacity: 1;
+ pointer-events: auto;
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Overlay {
+ display: block;
+ pointer-events: auto;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Panel.is-open .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open .ms-Overlay {
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media screen and (min-width: 480px) and (-ms-high-contrast: active) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay,
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ opacity: 0;
+ -webkit-animation-name: none;
+ animation-name: none;
+ }
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 8px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 14px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-contentInner {
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar {
+ display: block;
+ }
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover {
+ background-color: #d7eaf9;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active {
+ background-color: #b5d8f4;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon {
+ color: #07288b;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
+ color: #000000;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child {
+ background-color: #0078d7;
+ box-shadow: inset 0 1px 0 0 #2488d8;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
+ padding-left: 12px;
+ padding-right: 12px;
+ cursor: pointer;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover {
+ background-color: #005a9e;
+ box-shadow: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-delay: 250ms;
+ animation-delay: 250ms;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-delay: 500ms;
+ animation-delay: 500ms;
+ }
+}
diff --git a/dist/components/Panel/Panel.html b/dist/components/Panel/Panel.html
new file mode 100644
index 000000000..21de4ba1b
--- /dev/null
+++ b/dist/components/Panel/Panel.html
@@ -0,0 +1,68 @@
+
+
+
+
+ Small, right-aligned, fixed
+
+
+ Small, left-aligned, fixed
+
+
+ Small, light dismiss, fixed
+
+
+ Medium, fixed
+
+
+ Large, fixed
+
+
+ Large, fluid
+
+
+ Extra Large, fluid
+
+
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
diff --git a/dist/components/Panel/Panel.json b/dist/components/Panel/Panel.json
new file mode 100644
index 000000000..6d5f2abbb
--- /dev/null
+++ b/dist/components/Panel/Panel.json
@@ -0,0 +1,51 @@
+{
+ "name": "Panel",
+ "notes": "",
+ "description": "Containers used in experiences that do not require explicit context for heavy-weight creation/edit/management tasks such as settings, multi-field forms, and permissions. For containers used for complex tasks that requires context, use a separate Pane alongside the existing experience such as a List/Details layout.",
+ "template": "Panel.html",
+ "class": "ms-Panel",
+ "dependencies": [
+ "Button",
+ "CommandBar",
+ "Label",
+ "Overlay",
+ "Pivot"
+ ],
+ "wrapBranches": true,
+ "fileOrder": [
+ "Panel.html"
+ ],
+ "branches": [
+ {
+ "name": "Small",
+ "default": true,
+ "class": "ms-Panel--sm",
+ "branches": [
+ {
+ "name": "Right",
+ "default": true
+ },
+ {
+ "name": "Left",
+ "class": "ms-Panel--left"
+ }
+ ]
+ },
+ {
+ "name": "Medium",
+ "class": "ms-Panel--md"
+ },
+ {
+ "name": "Large",
+ "class": "ms-Panel--lg"
+ },
+ {
+ "name": "Large Fixed",
+ "class": "ms-Panel--lg ms-Panel--fixed"
+ },
+ {
+ "name": "Extra Large",
+ "class": "ms-Panel--xl"
+ }
+ ]
+}
diff --git a/dist/components/Panel/Panel.min.css b/dist/components/Panel/Panel.min.css
new file mode 100644
index 000000000..537957cee
--- /dev/null
+++ b/dist/components/Panel/Panel.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:1}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:1}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:1;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.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:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.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!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.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!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:3}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:1;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}
\ No newline at end of file
diff --git a/dist/components/Panel/Panel.scss b/dist/components/Panel/Panel.scss
new file mode 100644
index 000000000..d9816f5e2
--- /dev/null
+++ b/dist/components/Panel/Panel.scss
@@ -0,0 +1,478 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Panel styles
+
+$Panel-width-lightDismiss: 272px;
+$Panel-width-sm: 340px;
+$Panel-width-md: 643px;
+$Panel-width-lg: 940px;
+$Panel-margin-md: 48px;
+$Panel-margin-lg: 428px;
+$Panel-margin-xl: 176px;
+$CommandBarHeight: 40px;
+$CommandButtonLightBlue: #b5d8f4;
+$CommandButtonLighterBlue: #d7eaf9;
+$CommandButtonDarkBlue: #07288b;
+$CommandButtonBlue: #2488D8;
+
+// The panel covers the entire screen.
+.ms-Panel {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: $ms-zIndex-Panel;
+ display: none;
+ pointer-events: none;
+
+ // Overlay used within panel
+ .ms-Overlay {
+ z-index: $ms-zIndex-back;
+ display: none;
+ pointer-events: none;
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity $ms-duration3 $ms-ease1;
+ }
+}
+
+// The panel itself, where the content goes.
+.ms-Panel-main {
+ background-color: $ms-color-white;
+ bottom: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ display: none;
+ z-index: $ms-zIndex-front;
+ width: 100%;
+
+ // Medium screens and up - (anchored right, fixed width)
+ @media (min-width: $ms-screen-md-min) {
+ border-left: 1px solid $ms-color-neutralLight;
+ border-right: 1px solid $ms-color-neutralLight;
+ pointer-events: auto;
+ width: $Panel-width-sm;
+ @include drop-shadow(-30px, 0px, 30px, -30px, .2);
+ left: auto;
+ }
+
+ .ms-CommandBar {
+ outline: 1px solid transparent;
+
+ // The commandbar is not displayed by default on md+ screens
+ @media (min-width: $ms-screen-md-min) {
+ display: none;
+ }
+ }
+
+ .ms-CommandBarItem {
+ margin-left: 8px;
+
+ .ms-CommandBarItem-commandText {
+ display: inline-block;
+ }
+ }
+
+ .ms-CommandBar-mainArea {
+ padding-left: 0;
+ margin-left: -1px;
+ overflow: hidden;
+ }
+}
+
+//== Modifier: Light Dismiss on small screens (fixed width)
+// Note: This panel should only be used for dropdown menus on small screens.
+.ms-Panel.ms-Panel--lightDismiss {
+ .ms-Panel-main {
+ border-left: 1px solid $ms-color-neutralLight;
+ border-right: 1px solid $ms-color-neutralLight;
+ width: $Panel-width-lightDismiss;
+ @include drop-shadow(-30px, 0px, 30px, -30px, .2);
+ }
+
+ // Commands and content inner are not displayed
+ // Note: Replace with a dropdown contextual menu.
+ .ms-Panel-commands,
+ .ms-Panel-contentInner {
+ display: none;
+ }
+
+ // Animations -- Default (anchored right)
+ &.ms-Panel-animateIn {
+ .ms-Panel-main {
+ @include ms-u-slideLeftIn40;
+ }
+
+ .ms-Overlay {
+ @include ms-u-fadeIn200;
+ }
+ }
+
+ &.ms-Panel-animateOut {
+ .ms-Panel-main {
+ @include ms-u-slideRightOut40;
+ }
+ .ms-Overlay {
+ @include ms-u-fadeOut200;
+ }
+ }
+}
+
+//== Modifier: Left anchored panel (anchored left, fixed width)
+// Note: This panel variant should only be used for left nav.
+.ms-Panel.ms-Panel--left {
+ .ms-Panel-main {
+ right: auto;
+ left: 0;
+ border-left: 1px solid $ms-color-neutralLight;
+ border-right: 1px solid $ms-color-neutralLight;
+ width: $Panel-width-lightDismiss;
+ @include drop-shadow(-30px, 0px, 30px, 30px, .2);
+ }
+
+ // Commands and content inner are not displayed
+ // Note: Replace with a leftnav menu.
+ .ms-Panel-commands,
+ .ms-Panel-contentInner {
+ display: none;
+ }
+
+ // Animations -- Default (anchored right)
+ &.ms-Panel-animateIn {
+ .ms-Panel-main {
+ @include ms-u-slideLeftIn40;
+ }
+
+ .ms-Overlay {
+ @include ms-u-fadeIn200;
+ }
+ }
+
+ &.ms-Panel-animateOut {
+ .ms-Panel-main {
+ @include ms-u-slideRightOut40;
+ }
+ .ms-Overlay {
+ @include ms-u-fadeOut200;
+ }
+ }
+
+ // Animations - Left panel (anchored left)
+ &.ms-Panel-animateIn {
+ .ms-Panel-main {
+ @include ms-u-slideRightIn40;
+ }
+
+ .ms-Overlay {
+ @include ms-u-fadeIn200;
+ }
+ }
+
+ &.ms-Panel--left.ms-Panel-animateOut {
+ .ms-Panel-main {
+ @include ms-u-slideLeftOut40;
+ }
+ .ms-Overlay {
+ @include ms-u-fadeOut200;
+ }
+ }
+}
+
+//== Modifier: Small panel (anchored right, fixed width)
+//
+.ms-Panel.ms-Panel--sm {
+ .ms-Panel-main {
+ width: 100%;
+
+ @media (min-width: $ms-screen-md-min) {
+ width: $Panel-width-sm;
+ }
+ }
+}
+
+//== Modifier: Medium, Large, Extra Largs panels (anchored right, fluid width)
+//
+.ms-Panel.ms-Panel--md,
+.ms-Panel.ms-Panel--lg,
+.ms-Panel.ms-Panel--xl {
+ .ms-Panel-main {
+ @media (min-width: $ms-screen-lg-min) {
+ left: $Panel-margin-md;
+ width: auto;
+ }
+ }
+}
+
+//== Modifier: Medium panel (anchored right, fixed width)
+//
+.ms-Panel.ms-Panel--md {
+ .ms-Panel-main {
+ @media (min-width: $ms-screen-xl-min) {
+ left: auto;
+ width: $Panel-width-md;
+ }
+ }
+}
+
+//== Modifier: Large panel (anchored right, fluid width)
+//
+.ms-Panel.ms-Panel--lg {
+ .ms-Panel-main {
+ @media (min-width: $ms-screen-xxl-min) {
+ left: $Panel-margin-lg;
+ }
+ }
+}
+
+//== Modifier: Large fixed panel (anchored right, fixed width)
+//
+.ms-Panel.ms-Panel--lg.ms-Panel--fixed {
+ .ms-Panel-main {
+ @media (min-width: $ms-screen-xxl-min) {
+ left: auto;
+ width: $Panel-width-lg;
+ }
+ }
+}
+
+//== Modifier: XLarge panel (anchored right, fluid width)
+//
+.ms-Panel.ms-Panel--xl {
+ .ms-Panel-main {
+ @media (min-width: $ms-screen-xxl-min) {
+ left: $Panel-margin-xl;
+ }
+ }
+}
+
+//== State: When the panel is open.
+//
+.ms-Panel.is-open {
+ display: block;
+
+ .ms-Panel-main {
+ opacity: 1;
+ pointer-events: auto;
+ display: block;
+ }
+
+ .ms-Overlay {
+ display: block;
+ pointer-events: auto;
+
+ @media screen and (-ms-high-contrast: active) {
+ opacity: 0;
+ }
+ }
+
+ &.ms-Panel-animateIn {
+ .ms-Panel-main {
+ @include ms-u-fadeIn100;
+ }
+ }
+
+ &.ms-Panel-animateOut {
+ .ms-Panel-main {
+ @include ms-u-fadeOut100;
+ }
+
+ .ms-Overlay {
+ display: none;
+ }
+ }
+
+ // Medium screens and up
+ @media (min-width: $ms-screen-md-min) {
+ // Animations -- Default (anchored right)
+ &.ms-Panel-animateIn {
+ .ms-Panel-main {
+ @include ms-u-slideLeftIn40;
+ }
+
+ .ms-Overlay {
+ @include ms-u-fadeIn200;
+ }
+ }
+
+ &.ms-Panel-animateOut {
+ .ms-Panel-main {
+ @include ms-u-slideRightOut40;
+ }
+ .ms-Overlay {
+ @include ms-u-fadeOut200;
+ }
+ }
+
+ // Animations - Left panel (anchored left)
+ &.ms-Panel--left.ms-Panel-animateIn {
+ .ms-Panel-main {
+ @include ms-u-slideRightIn40;
+ }
+
+ .ms-Overlay {
+ @include ms-u-fadeIn200;
+ }
+ }
+
+ &.ms-Panel--left.ms-Panel-animateOut {
+ .ms-Panel-main {
+ @include ms-u-slideLeftOut40;
+ }
+ .ms-Overlay {
+ @include ms-u-fadeOut200;
+ }
+ }
+
+ // Animate overlay to full opacity, activate pointer events
+ .ms-Overlay {
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ &.ms-Panel-animateIn,
+ &.ms-Panel--left.ms-Panel-animateIn {
+ .ms-Overlay {
+ @media screen and (-ms-high-contrast: active) {
+ opacity: 0;
+ animation-name: none;
+ }
+ }
+ }
+ }
+}
+
+// The close button in the top right (x)
+.ms-Panel-closeButton {
+ @include button-reset();
+ position: absolute;
+ right: 8px;
+ top: 0;
+ height: $CommandBarHeight;
+ width: $CommandBarHeight;
+ line-height: $CommandBarHeight;
+ outline: 0;
+ padding: 0;
+ color: $ms-color-neutralSecondary;
+ font-size: $ms-font-size-m;
+
+ &:hover {
+ color: $ms-color-neutralPrimary;
+ }
+}
+
+// Scrollable content area
+.ms-Panel-contentInner {
+ position: absolute;
+ top: $CommandBarHeight;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+
+ @media (min-width: $ms-screen-lg-min) {
+ padding: 0 32px 20px;
+ }
+
+ @media (min-width: $ms-screen-xxl-min) {
+ padding: 0 40px 20px;
+ }
+}
+
+// Header text at the top of the panel.
+.ms-Panel-headerText {
+ font-family: $ms-font-family-light;
+ font-size: $ms-font-size-xl;
+ color: $ms-color-neutralPrimary;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ @media (min-width: $ms-screen-xl-min) {
+ margin-top: 30px;
+ }
+}
+
+//== Modifier: Deprecated Animated commandbar
+//
+.ms-Panel.ms-Panel--animatedCommands {
+ .ms-CommandBar {
+ @media (min-width: $ms-screen-md-min) {
+ display: block;
+ }
+ }
+
+ .ms-CommandBarItem {
+ user-select: none;
+
+ &:hover {
+ background-color: $CommandButtonLighterBlue;
+ }
+
+ &:active {
+ background-color: $CommandButtonLightBlue;
+
+ .ms-CommandBarItem-icon {
+ color: $CommandButtonDarkBlue;;
+ }
+
+ .ms-CommandBarItem-commandText {
+ color: $ms-color-black;
+ }
+ }
+ }
+
+ .ms-CommandBarItem:first-child {
+ background-color: $ms-color-themePrimary;
+ box-shadow: inset 0 1px 0 0 $CommandButtonBlue;
+
+ .ms-CommandBarItem-icon {
+ color: $ms-color-white;
+ }
+
+ .ms-CommandBarItem-commandText {
+ color: $ms-color-white;
+ }
+
+ .ms-CommandBarItem-linkWrapper {
+ padding-left: 12px;
+ padding-right: 12px;
+ cursor: pointer;
+ }
+
+ &:hover {
+ background-color: $ms-color-themeDark;
+ box-shadow: none;
+
+ .ms-CommandBarItem-icon {
+ color: $ms-color-white;
+ }
+
+ .ms-CommandBarItem-commandText {
+ color: $ms-color-white;
+ }
+ }
+ }
+
+ &.is-open {
+ .ms-CommandBar {
+ @include ms-u-slideDownIn20();
+ animation-delay: 250ms;
+ }
+
+ @media (min-width: $ms-screen-md-min) {
+ // Animate CommandBar in
+ .ms-CommandBar {
+ animation-delay: 500ms;
+ }
+ }
+ }
+}
diff --git a/dist/components/PeoplePicker/PeoplePicker.Compact.html b/dist/components/PeoplePicker/PeoplePicker.Compact.html
new file mode 100644
index 000000000..e98eddfba
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.Compact.html
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
Top results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Other results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Showing top 5 results
+
Search Contacts & Directory
+
+
+
+
diff --git a/dist/components/PeoplePicker/PeoplePicker.Disconnected.html b/dist/components/PeoplePicker/PeoplePicker.Disconnected.html
new file mode 100644
index 000000000..7e023cb7d
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.Disconnected.html
@@ -0,0 +1,168 @@
+
+
+
+
+
+
+
+
+
+
Top results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Other results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
We are having trouble connecting to the server. Please try again in a few minutes.
+
+
+
+
diff --git a/dist/components/PeoplePicker/PeoplePicker.FacePile.html b/dist/components/PeoplePicker/PeoplePicker.FacePile.html
new file mode 100644
index 000000000..6a9d0c434
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.FacePile.html
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
Search Contacts & Directory
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+ @@include('../PersonaCard/PersonaCard.html')
+
+
\ No newline at end of file
diff --git a/dist/components/PeoplePicker/PeoplePicker.MembersList.html b/dist/components/PeoplePicker/PeoplePicker.MembersList.html
new file mode 100644
index 000000000..a44438071
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.MembersList.html
@@ -0,0 +1,112 @@
+
+
+
+
People picker
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
GS
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/components/PeoplePicker/PeoplePicker.Searching.png b/dist/components/PeoplePicker/PeoplePicker.Searching.png
new file mode 100644
index 000000000..147416f77
Binary files /dev/null and b/dist/components/PeoplePicker/PeoplePicker.Searching.png differ
diff --git a/dist/components/PeoplePicker/PeoplePicker.css b/dist/components/PeoplePicker/PeoplePicker.css
new file mode 100644
index 000000000..54eac8c9f
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.css
@@ -0,0 +1,1775 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Persona {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
+.ms-PeoplePicker-result .ms-Persona:hover .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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ 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.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
+
+.ms-PeoplePicker {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ *zoom: 1;
+ border: 1px solid #c8c8c8;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchBox:before,
+.ms-PeoplePicker-searchBox:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-PeoplePicker-searchBox:after {
+ clear: both;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: left;
+ height: 38px;
+ outline: none;
+ padding-left: 8px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: left;
+ margin: 4px;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-persona .ms-Persona {
+ background-color: #f4f4f4;
+ float: left;
+ min-height: 30px;
+}
+
+.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;
+ float: left;
+ 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 {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: 305;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ padding: 17px 0 0 12px;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+.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;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-result .ms-Persona:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-result .ms-Persona-details {
+ width: 100%;
+}
+
+.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 0;
+ 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: 34px;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultAction {
+ height: 48px;
+ }
+}
+
+.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: #71afe5;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid #eaeaea;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ left: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
+ background-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
+ color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching:hover {
+ background-color: transparent;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-left: 70px;
+ text-align: left;
+}
+
+.ms-PeoplePicker-searchMoreBtn:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-searchMoreBtn:focus,
+.ms-PeoplePicker-searchMoreBtn:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-left: 50px;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+}
+
+.ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #333333;
+ font-size: 16px;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
+ background-color: inherit;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
+ color: #666666;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
+ margin-top: -8px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+ height: 49px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ left: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ font-size: 17px;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 45px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
+ height: 28px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn {
+ height: 42px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction {
+ height: 42px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
+ padding-left: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
+ top: 16px;
+ left: 14px;
+ height: 20px;
+ width: 20px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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;
+}
diff --git a/dist/components/PeoplePicker/PeoplePicker.html b/dist/components/PeoplePicker/PeoplePicker.html
new file mode 100644
index 000000000..1419428cf
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.html
@@ -0,0 +1,178 @@
+
+
+
+
+
+
+
+
+
+
Top results
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Other results
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Showing top 5 results
+ Search Contacts & Directory
+
+
+
+
diff --git a/dist/components/PeoplePicker/PeoplePicker.json b/dist/components/PeoplePicker/PeoplePicker.json
new file mode 100644
index 000000000..61d741acc
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.json
@@ -0,0 +1,43 @@
+{
+ "name": "PeoplePicker",
+ "notes": "",
+ "description": "A component used for searching for and picking a person (or people). There are several variants and modifications to the dropdown list of {0} Personas {1} that allow for removing selected people, compact visualizations, a disconnected state, and a 'tokenized' list of selected users.",
+ "template": "PeoplePicker.html",
+ "class": "ms-PeoplePicker",
+ "dependencies": [
+ "Button",
+ "Label",
+ "Overlay",
+ "Persona",
+ "PersonaCard"
+ ],
+ "wrapBranches": true,
+ "fileOrder": [
+ "PeoplePicker.html",
+ "PeoplePicker.Compact.html",
+ "PeoplePicker.Disconnected.html",
+ "PeoplePicker.MembersList.html",
+ "PeoplePicker.Facepile.html"
+ ],
+ "branches": [
+ {
+ "name": "Regular",
+ "default": true
+ },
+ {
+ "name": "Compact",
+ "template": "PeoplePicker.Compact.html",
+ "class": "ms-PeoplePicker--compact"
+ },
+ {
+ "name": "Disconnected",
+ "notes": "When the search can not be completed, an error message is shown.",
+ "template": "PeoplePicker.Disconnected.html"
+ },
+ {
+ "name": "Facepile",
+ "template": "PeoplePicker.Facepile.html",
+ "class": "ms-PeoplePicker--Facepile"
+ }
+ ]
+}
diff --git a/dist/components/PeoplePicker/PeoplePicker.min.css b/dist/components/PeoplePicker/PeoplePicker.min.css
new file mode 100644
index 000000000..2dd7b1b00
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:1}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.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;float:left;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{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:2}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.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}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.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:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.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:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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}
\ No newline at end of file
diff --git a/dist/components/PeoplePicker/PeoplePicker.scss b/dist/components/PeoplePicker/PeoplePicker.scss
new file mode 100644
index 000000000..0fbf863b7
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.scss
@@ -0,0 +1,635 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// People Picker styles
+
+$personaItemHeight: 42px;
+
+
+.ms-PeoplePicker {
+ @include ms-font-m;
+ @include ms-u-normalize;
+ background-color: $ms-color-white;
+ margin-bottom: 10px;
+}
+
+// Box that contains the search field and selected people.
+.ms-PeoplePicker-searchBox {
+ @include ms-u-clearfix;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+
+ &:hover {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+}
+
+// Highlight the search box when the people picker is active
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: $ms-color-themePrimary;
+}
+
+// The search field.
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: left;
+ height: 38px;
+ outline: none;
+ padding-left: 8px;
+ width: 100%;
+}
+
+// A selected persona, which appears within the search field.
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: left;
+ margin: 4px;
+ outline: 1px solid transparent;
+
+ //TODO: Avoid styling child components like this.
+ .ms-Persona {
+ background-color: $ms-color-neutralLighter;
+ float: left;
+ min-height: 30px;
+ }
+}
+
+// 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;
+ float: left;
+ 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 {
+ @include drop-shadow();
+ background-color: $ms-color-white;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: ($ms-zIndex-PeoplePicker + $ms-zIndex-middle);
+}
+
+// Show the results area when the people picker is active
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+
+// One or more groups of results (ms-PeoplePicker-resultGroup) are contained in this scrollable area.
+// This is limited to five results for both regular and compact sizes.
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+// 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-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-s;
+ padding: 17px 0 0 12px;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+// 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;
+
+ .ms-Persona {
+ &:hover {
+ @extend .ms-Persona.ms-Persona--darkText;
+ cursor: pointer;
+ }
+
+ // TODO: Active style is being blocked by the inner content on IE
+ // http://stackoverflow.com/questions/5594102/active-css-selector-not-working-for-ie8-and-ie9?rq=1
+ &:active {
+ background-color: $ms-color-themeLight;
+ }
+ }
+
+ // Ensure the width is 100%.
+ .ms-Persona-details {
+ width: 100%;
+ }
+}
+
+// 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 0;
+ 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: 34px;
+ transition: background-color 0.367s $ms-ease1;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+
+ @media (min-width: $ms-screen-md-min) {
+ height: 48px;
+ }
+
+ .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-themeTertiary;
+ }
+}
+
+// A result can contain additional content (usually a ms-PeoplePicker-resultList of Persona components) that is hidden initially
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+// Use the .is-expanded state to reveal the additional content
+.ms-PeoplePicker-result.is-expanded {
+ background-color: $ms-color-neutralLighter;
+ margin-bottom: 11px;
+
+ // Switch the toggle icon
+ .ms-PeoplePicker-resultAction .ms-Icon {
+ transform: rotate(180deg);
+ }
+
+ // Show the content
+ .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+ }
+}
+
+// After the result groups we have an area to trigger additional searches
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid $ms-color-neutralLight;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+
+ .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ left: 20px;
+ display: none;
+
+ .ms-Spinner-circle {
+ background-color: $ms-color-themePrimary;
+ }
+ }
+}
+
+// Searching state
+.ms-PeoplePicker-searchMore.is-searching {
+
+ .ms-Spinner {
+ display: block;
+ }
+
+ .ms-PeoplePicker-searchMoreIcon {
+ .ms-Icon {
+ display: none;
+ }
+ }
+
+ .ms-PeoplePicker-searchMorePrimary {
+ color: $ms-color-themePrimary;
+ }
+
+ &:hover {
+ background-color: transparent;
+ cursor: default;
+ }
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ @include button-reset();
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-left: 70px;
+ text-align: left;
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ cursor: pointer;
+ }
+
+ // TODO: Works in Chrome, but not working in IE
+ &:focus,
+ &:active {
+ background-color: $ms-color-themeLight;
+ }
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-left: 50px;
+}
+
+// Default search icon
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+
+ .ms-Icon {
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m + 2;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+ }
+}
+
+// Primary text
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: $ms-font-family-regular;
+}
+
+// Secondary text
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-xs;
+ color: $ms-color-neutralSecondary;
+}
+
+// The search more area may be in a disconnected state.
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected {
+
+ // Do nothing on hover
+ &:hover {
+ background-color: inherit;
+ cursor: default;
+ }
+
+ // Alert icon
+ .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: $ms-color-neutralSecondary;
+ }
+
+ // Primary text
+ .ms-PeoplePicker-searchMorePrimary {
+ color: $ms-color-neutralSecondary;
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-xs;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+ }
+}
+
+// Compact size
+.ms-PeoplePicker.ms-PeoplePicker--compact {
+
+ // Limit to 5 results before scrolling.
+ .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+ }
+
+ .ms-PeoplePicker-resultAction {
+ height: 32px;
+
+ .ms-Icon {
+ margin-top: -8px;
+ }
+ }
+
+ .ms-PeoplePicker-searchMore {
+ height: 49px;
+
+ .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ left: 12px;
+ }
+
+ }
+
+ .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+ }
+
+ .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+
+ .ms-Icon {
+ font-size: $ms-font-size-l;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+ }
+ }
+
+ .ms-PeoplePicker-searchMorePrimary {
+ font-size: $ms-font-size-s;
+ line-height: 45px;
+ }
+
+ .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+ }
+}
+
+
+//== Modifier: Facepile and Members list
+//
+.ms-PeoplePicker.ms-PeoplePicker--Facepile,
+.ms-PeoplePicker.ms-PeoplePicker--membersList {
+ .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+ }
+
+ .ms-PeoplePicker-searchField {
+ height: 28px;
+ }
+
+ .ms-Persona {
+ cursor: pointer;
+ }
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+
+ &.is-active {
+ display: block;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile {
+ //= State: Searching in peoplepicker search field
+ &.is-searching {
+ .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+ }
+
+ .ms-PeoplePicker-peopleListHeader {
+ display: none;
+ }
+ }
+
+ .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid $ms-color-neutralLight;
+ }
+
+ // Personas are size xs on mobile, sm on md screens and above
+ .ms-PeoplePicker-results,
+ .ms-PeoplePicker-selectedPeople {
+ @media (max-width: $ms-screen-sm-max) {
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-s;
+ line-height: 32px;
+ }
+
+ .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-Persona-primaryText {
+ font-size: $ms-font-size-m;
+ padding-top: 3px;
+ }
+
+ .ms-Persona-secondaryText {
+ display: none;
+ }
+ }
+
+ @media (min-width: $ms-screen-md-min) {
+ .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+ }
+ }
+
+ .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-peopleListBtn {
+ @media (min-width: $ms-screen-md-min) {
+ height: $personaItemHeight;
+ }
+ }
+
+ .ms-PeoplePicker-resultAction {
+ @media (min-width: $ms-screen-md-min) {
+ height: $personaItemHeight;
+ }
+ }
+
+ .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+ }
+
+ .ms-PeoplePicker-searchMore {
+ display: none;
+
+ &.is-active {
+ display: block;
+ }
+ }
+
+ .ms-PeoplePicker-searchMore,
+ .ms-PeoplePicker-searchMoreBtn,
+ .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+ }
+
+ .ms-PeoplePicker-searchMoreBtn {
+ padding-left: 48px;
+ }
+
+ .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+ }
+
+ .ms-PeoplePicker-searchMorePrimary {
+ font-size: $ms-font-size-s;
+ line-height: 48px;
+ }
+
+ .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+ }
+
+ .ms-Spinner {
+ top: 16px;
+ left: 14px;
+ height: 20px;
+ width: 20px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile {
+ .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+
+ &.is-active {
+ display: block;
+ }
+ }
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: $ms-color-themePrimary;
+ font-size: $ms-font-size-s;
+ font-family: $ms-font-family-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.ExtraLarge.html b/dist/components/Persona/Persona.ExtraLarge.html
new file mode 100644
index 000000000..86acb1cc9
--- /dev/null
+++ b/dist/components/Persona/Persona.ExtraLarge.html
@@ -0,0 +1,15 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
diff --git a/dist/components/Persona/Persona.ExtraSmall.html b/dist/components/Persona/Persona.ExtraSmall.html
new file mode 100644
index 000000000..5a4ea6f19
--- /dev/null
+++ b/dist/components/Persona/Persona.ExtraSmall.html
@@ -0,0 +1,12 @@
+
+
+
+
+
AL
+
+
+
+
+
diff --git a/dist/components/Persona/Persona.Initials.html b/dist/components/Persona/Persona.Initials.html
new file mode 100644
index 000000000..176f41559
--- /dev/null
+++ b/dist/components/Persona/Persona.Initials.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Large.html b/dist/components/Persona/Persona.Large.html
new file mode 100644
index 000000000..4847b10e1
--- /dev/null
+++ b/dist/components/Persona/Persona.Large.html
@@ -0,0 +1,15 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
+
+
diff --git a/dist/components/Persona/Persona.Person.jpg b/dist/components/Persona/Persona.Person.jpg
new file mode 100644
index 000000000..4d06e964d
Binary files /dev/null and b/dist/components/Persona/Persona.Person.jpg differ
diff --git a/dist/components/Persona/Persona.Person2.png b/dist/components/Persona/Persona.Person2.png
new file mode 100644
index 000000000..4ba5f7b0d
Binary files /dev/null and b/dist/components/Persona/Persona.Person2.png differ
diff --git a/dist/components/Persona/Persona.Presence.Available.html b/dist/components/Persona/Persona.Presence.Available.html
new file mode 100644
index 000000000..b550738e2
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Available.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Away.html b/dist/components/Persona/Persona.Presence.Away.html
new file mode 100644
index 000000000..54c341ab9
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Away.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Blocked.html b/dist/components/Persona/Persona.Presence.Blocked.html
new file mode 100644
index 000000000..5ea8249a9
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Blocked.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Busy.html b/dist/components/Persona/Persona.Presence.Busy.html
new file mode 100644
index 000000000..75b2ae282
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Busy.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Dnd.html b/dist/components/Persona/Persona.Presence.Dnd.html
new file mode 100644
index 000000000..ffec1605a
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Dnd.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Offline.html b/dist/components/Persona/Persona.Presence.Offline.html
new file mode 100644
index 000000000..99007a1c6
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Offline.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Square.Available.html b/dist/components/Persona/Persona.Presence.Square.Available.html
new file mode 100644
index 000000000..a3ede2609
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Square.Available.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Square.Away.html b/dist/components/Persona/Persona.Presence.Square.Away.html
new file mode 100644
index 000000000..69fc097ce
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Square.Away.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Square.Blocked.html b/dist/components/Persona/Persona.Presence.Square.Blocked.html
new file mode 100644
index 000000000..fa5a85ac9
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Square.Blocked.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Square.Busy.html b/dist/components/Persona/Persona.Presence.Square.Busy.html
new file mode 100644
index 000000000..b20903e98
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Square.Busy.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Square.Dnd.html b/dist/components/Persona/Persona.Presence.Square.Dnd.html
new file mode 100644
index 000000000..a75950758
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Square.Dnd.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Presence.Square.Offline.html b/dist/components/Persona/Persona.Presence.Square.Offline.html
new file mode 100644
index 000000000..dfd9a06d7
--- /dev/null
+++ b/dist/components/Persona/Persona.Presence.Square.Offline.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Small.html b/dist/components/Persona/Persona.Small.html
new file mode 100644
index 000000000..e98607ead
--- /dev/null
+++ b/dist/components/Persona/Persona.Small.html
@@ -0,0 +1,14 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
diff --git a/dist/components/Persona/Persona.Square.ExtraLarge.html b/dist/components/Persona/Persona.Square.ExtraLarge.html
new file mode 100644
index 000000000..d256b8354
--- /dev/null
+++ b/dist/components/Persona/Persona.Square.ExtraLarge.html
@@ -0,0 +1,15 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
diff --git a/dist/components/Persona/Persona.Square.ExtraSmall.html b/dist/components/Persona/Persona.Square.ExtraSmall.html
new file mode 100644
index 000000000..221621a96
--- /dev/null
+++ b/dist/components/Persona/Persona.Square.ExtraSmall.html
@@ -0,0 +1,12 @@
+
+
+
+
+
AL
+
+
+
+
+
diff --git a/dist/components/Persona/Persona.Square.Large.html b/dist/components/Persona/Persona.Square.Large.html
new file mode 100644
index 000000000..c44203166
--- /dev/null
+++ b/dist/components/Persona/Persona.Square.Large.html
@@ -0,0 +1,14 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
+
diff --git a/dist/components/Persona/Persona.Square.Small.html b/dist/components/Persona/Persona.Square.Small.html
new file mode 100644
index 000000000..ebf9c829b
--- /dev/null
+++ b/dist/components/Persona/Persona.Square.Small.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Square.Tiny.html b/dist/components/Persona/Persona.Square.Tiny.html
new file mode 100644
index 000000000..a1f455304
--- /dev/null
+++ b/dist/components/Persona/Persona.Square.Tiny.html
@@ -0,0 +1,8 @@
+
+
+
diff --git a/dist/components/Persona/Persona.Square.html b/dist/components/Persona/Persona.Square.html
new file mode 100644
index 000000000..ea8eceef3
--- /dev/null
+++ b/dist/components/Persona/Persona.Square.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.Tiny.html b/dist/components/Persona/Persona.Tiny.html
new file mode 100644
index 000000000..65acaf3bd
--- /dev/null
+++ b/dist/components/Persona/Persona.Tiny.html
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/dist/components/Persona/Persona.css b/dist/components/Persona/Persona.css
new file mode 100644
index 000000000..f49dabc36
--- /dev/null
+++ b/dist/components/Persona/Persona.css
@@ -0,0 +1,500 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Persona {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
diff --git a/dist/components/Persona/Persona.html b/dist/components/Persona/Persona.html
new file mode 100644
index 000000000..c7a9baaec
--- /dev/null
+++ b/dist/components/Persona/Persona.html
@@ -0,0 +1,13 @@
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
diff --git a/dist/components/Persona/Persona.json b/dist/components/Persona/Persona.json
new file mode 100644
index 000000000..0ed1a0160
--- /dev/null
+++ b/dist/components/Persona/Persona.json
@@ -0,0 +1,191 @@
+{
+ "name": "Persona",
+ "notes": "The persona component is used to represent a person. A placeholder icon is included in every persona as a fallback for when there is no img src or the img hasn't been received yet from the server.",
+ "description": "The persona component is used to represent a person. Circular framing of the user's avatar is currently the default along with circular presence indicators. A placeholder icon is included in every persona as a fallback for when there is no img src or the img hasn't been received yet from the server.",
+ "template": "Persona.html",
+ "class": "ms-Persona",
+ "wrapBranches": true,
+ "fileOrder": [
+ "Persona.Tiny.html",
+ "Persona.ExtraSmall.html",
+ "Persona.Small.html",
+ "Persona.html",
+ "Persona.Large.html",
+ "Persona.ExtraLarge.html",
+ "Persona.Square.Tiny.html",
+ "Persona.Square.ExtraSmall.html",
+ "Persona.Square.Small.html",
+ "Persona.Square.html",
+ "Persona.Square.Large.html",
+ "Persona.Square.ExtraLarge.html",
+ "Persona.Presence.Available.html",
+ "Persona.Presence.Away.html",
+ "Persona.Presence.Blocked.html",
+ "Persona.Presence.Busy.html",
+ "Persona.Presence.Dnd.html",
+ "Persona.Presence.Offline.html",
+ "Persona.Presence.Square.Available.html",
+ "Persona.Presence.Square.Away.html",
+ "Persona.Presence.Square.Blocked.html",
+ "Persona.Presence.Square.Busy.html",
+ "Persona.Presence.Square.Dnd.html",
+ "Persona.Presence.Square.Offline.html",
+ "Persona.Initials.html"
+ ],
+ "branches": [
+ {
+ "name": "Sizes",
+ "default": true,
+ "branches": [
+ {
+ "name": "Tiny/recipient",
+ "notes": "This one is usually used within a People Picker to represent a person in a minimal way.",
+ "class": "ms-Persona--tiny",
+ "branches": [
+ {
+ "name": "Editable",
+ "default": true
+ },
+ {
+ "name": "Read-only",
+ "class": "ms-Persona--readonly"
+ }
+ ]
+ },
+ {
+ "name": "Extra small",
+ "class": "ms-Persona--xs",
+ "branches": [
+ {
+ "name": "Regular",
+ "default": true
+ },
+ {
+ "name": "Dark text",
+ "class": "ms-Persona--darkText",
+ "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover."
+ },
+ {
+ "name": "Selectable",
+ "class": "ms-Persona--selectable"
+ }
+ ]
+ },
+ {
+ "name": "Small",
+ "class": "ms-Persona--sm",
+ "notes": "This should be no smaller than...",
+ "branches": [
+ {
+ "name": "Regular",
+ "default": true
+ },
+ {
+ "name": "Dark text",
+ "class": "ms-Persona--darkText",
+ "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover."
+ },
+ {
+ "name": "Selectable",
+ "class": "ms-Persona--selectable"
+ }
+ ]
+ },
+ {
+ "name": "Medium",
+ "default": true,
+ "branches": [
+ {
+ "name": "Regular",
+ "default": true
+ },
+ {
+ "name": "Dark text",
+ "class": "ms-Persona--darkText",
+ "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover."
+ },
+ {
+ "name": "Selectable",
+ "class": "ms-Persona--selectable"
+ }
+ ]
+ },
+ {
+ "name": "Large",
+ "class": "ms-Persona--lg",
+ "branches": [
+ {
+ "name": "Regular",
+ "default": true
+ },
+ {
+ "name": "Dark text",
+ "class": "ms-Persona--darkText",
+ "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover."
+ },
+ {
+ "name": "Selectable",
+ "class": "ms-Persona--selectable"
+ }
+ ]
+ },
+ {
+ "name": "Extra large",
+ "class": "ms-Persona--xl",
+ "branches": [
+ {
+ "name": "Regular",
+ "default": true
+ },
+ {
+ "name": "Dark text",
+ "class": "ms-Persona--darkText",
+ "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover."
+ },
+ {
+ "name": "Selectable",
+ "class": "ms-Persona--selectable"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "Presence",
+ "notes": "An extra large Persona is shown here to better see the presence indicator. The same options and appearance apply to all sizes.",
+ "class": "ms-Persona--xl",
+ "branches": [
+ {
+ "name": "Available",
+ "class": "ms-Persona--available",
+ "default": true
+ },
+ {
+ "name": "Away",
+ "class": "ms-Persona--away"
+ },
+ {
+ "name": "Blocked",
+ "class": "ms-Persona--blocked"
+ },
+ {
+ "name": "Busy",
+ "class": "ms-Persona--busy"
+ },
+ {
+ "name": "Do not disturb",
+ "class": "ms-Persona--dnd"
+ },
+ {
+ "name": "Offline",
+ "class": "ms-Persona--offline"
+ },
+ {
+ "name": "No presence",
+ "notes": "The presence indicator is not required.",
+ "template": "Persona.No-Presence.html"
+ }
+ ]
+ }
+ ]
+}
diff --git a/dist/components/Persona/Persona.min.css b/dist/components/Persona/Persona.min.css
new file mode 100644
index 000000000..d63dca156
--- /dev/null
+++ b/dist/components/Persona/Persona.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}
\ No newline at end of file
diff --git a/dist/components/Persona/Persona.scss b/dist/components/Persona/Persona.scss
new file mode 100644
index 000000000..eb152d317
--- /dev/null
+++ b/dist/components/Persona/Persona.scss
@@ -0,0 +1,595 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Persona styles
+
+
+//= Colors used in the initials color block
+$ms-color-initials-lightBlue: #6ba5e7;
+$ms-color-initials-blue: #2d89ef;
+$ms-color-initials-darkBlue: #2b5797;
+$ms-color-initials-teal: #00aba9;
+$ms-color-initials-lightGreen: #99b433;
+$ms-color-initials-green: #00a300;
+$ms-color-initials-darkGreen: #1e7145;
+$ms-color-initials-lightPink: #e773bd;
+$ms-color-initials-pink: #ff0097;
+$ms-color-initials-magenta: #7e3878;
+$ms-color-initials-purple: #603cba;
+$ms-color-initials-black: #1d1d1d;
+$ms-color-initials-orange: #da532c;
+$ms-color-initials-red: #ee1111;
+$ms-color-initials-darkRed: #b91d47;
+
+
+.ms-Persona {
+ @include ms-font-m;
+ @include ms-u-normalize;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: $ms-zIndex-back;
+
+ @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;
+}
+
+.ms-Persona-initials {
+ color: $ms-color-white;
+ font-size: $ms-font-size-l;
+ font-family: $ms-font-family-light;
+ line-height: 48px;
+
+ &.ms-Persona-initials--lightBlue {
+ background-color: $ms-color-initials-lightBlue;
+ }
+ &.ms-Persona-initials--blue {
+ background-color: $ms-color-initials-blue;
+ }
+ &.ms-Persona-initials--darkBlue {
+ background-color: $ms-color-initials-darkBlue;
+ }
+ &.ms-Persona-initials--teal {
+ background-color: $ms-color-initials-teal;
+ }
+ &.ms-Persona-initials--lightGreen {
+ background-color: $ms-color-initials-lightGreen;
+ }
+ &.ms-Persona-initials--green {
+ background-color: $ms-color-initials-green;
+ }
+ &.ms-Persona-initials--darkGreen {
+ background-color: $ms-color-initials-darkGreen;
+ }
+ &.ms-Persona-initials--lightPink {
+ background-color: $ms-color-initials-lightPink;
+ }
+ &.ms-Persona-initials--pink {
+ background-color: $ms-color-initials-pink;
+ }
+ &.ms-Persona-initials--magenta {
+ background-color: $ms-color-initials-magenta;
+ }
+ &.ms-Persona-initials--purple {
+ background-color: $ms-color-initials-purple;
+ }
+ &.ms-Persona-initials--black {
+ background-color: $ms-color-initials-black;
+ }
+ &.ms-Persona-initials--orange {
+ background-color: $ms-color-initials-orange;
+ }
+ &.ms-Persona-initials--red {
+ background-color: $ms-color-initials-red;
+ }
+ &.ms-Persona-initials--darkRed {
+ background-color: $ms-color-initials-darkRed;
+ }
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=""] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: $ms-color-presence-available;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid $ms-color-white;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ @include noWrap();
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-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-family: $ms-font-family-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: Persona with square images
+//
+.ms-Persona.ms-Persona--square {
+ .ms-Persona-imageArea {
+ background-color: $ms-color-neutralTertiary;
+ border-radius: 0;
+ }
+
+ .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 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;
+ }
+ }
+}
+
+
+//== Modifier: Tiny Persona
+//
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+
+ .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+ }
+
+ .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: Tiny Square Persona
+//
+.ms-Persona.ms-Persona--square.ms-Persona--tiny {
+ .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+ }
+}
+
+
+//== Modifier: Extra Small Persona
+//
+.ms-Persona.ms-Persona--xs {
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-s;
+ line-height: 32px;
+ }
+
+ .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-Persona-primaryText {
+ font-size: $ms-font-size-m;
+ padding-top: 3px;
+ }
+
+ .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+
+//== Modifier: Extra Small Square Persona
+//
+.ms-Persona.ms-Persona--square.ms-Persona--xs {
+ .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+ }
+}
+
+
+//== Modifier: Small Persona
+//
+.ms-Persona.ms-Persona--sm {
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ width: 40px;
+ height: 40px;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 38px;
+ top: 5px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-m;
+ line-height: 40px;
+ }
+
+ .ms-Persona-presence {
+ left: 27px;
+ }
+
+ .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-Persona-primaryText {
+ font-size: $ms-font-size-m;
+ }
+
+ .ms-Persona-primaryText,
+ .ms-Persona-secondaryText {
+ padding-top: 1px;
+ }
+}
+
+
+//== Modifier: Small Square Persona
+//
+.ms-Persona.ms-Persona--square.ms-Persona--sm {
+ .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+ }
+}
+
+
+//== Modifier: Large Persona
+//
+.ms-Persona.ms-Persona--lg {
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ width: 72px;
+ height: 72px;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 67px;
+ top: 10px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-xxl;
+ line-height: 72px;
+ }
+
+ .ms-Persona-presence {
+ left: 49px;
+ }
+
+ .ms-Persona-secondaryText {
+ padding-top: 3px;
+ }
+
+ .ms-Persona-tertiaryText {
+ padding-top: 5px;
+ }
+
+ .ms-Persona-tertiaryText {
+ display: block; // Show tertiary text
+ }
+}
+
+
+//== Modifier: Large Square Persona
+//
+.ms-Persona.ms-Persona--square.ms-Persona--lg {
+ .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+ }
+}
+
+
+//== Modifier: Extra Large Persona
+//
+.ms-Persona.ms-Persona--xl {
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 95px;
+ top: 12px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-su;
+ line-height: 100px;
+ }
+
+ .ms-Persona-presence {
+ height: 20px;
+ width: 20px;
+ left: 71px;
+ }
+
+ .ms-Persona-details {
+ padding-left: 20px;
+ }
+
+ .ms-Persona-primaryText {
+ font-size: $ms-font-size-xl;
+ font-family: $ms-font-family-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: Extra Large Square Persona
+//
+.ms-Persona.ms-Persona--square.ms-Persona--xl {
+ .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+ }
+}
+
+
+//== Modifier: Persona with darker text
+//
+// Note: Typically applied when the component has a colored background.
+.ms-Persona.ms-Persona--darkText {
+ .ms-Persona-primaryText {
+ color: $ms-color-neutralDark;
+ }
+
+ .ms-Persona-secondaryText,
+ .ms-Persona-tertiaryText,
+ .ms-Persona-optionalText {
+ color: $ms-color-neutralPrimary;
+ }
+}
+
+
+//== Modifier: Selectable Persona
+//
+.ms-Persona.ms-Persona--selectable {
+ cursor: pointer;
+ padding: 0 10px;
+
+ &:not(.ms-Persona--xl) {
+ &:hover,
+ &:focus {
+ background-color: $ms-color-themeLighter;
+ outline: 1px solid transparent;
+ }
+ }
+}
+
+
+//== Presence indicator variants.
+
+//== Modifier: Persona with available presence
+//
+.ms-Persona.ms-Persona--available {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-available;
+ }
+}
+
+
+//== Modifier: Persona with away presence
+//
+.ms-Persona.ms-Persona--away {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-away;
+ }
+}
+
+
+//== Modifier: Persona with blocked presence
+//
+.ms-Persona.ms-Persona--blocked {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-blocked-background;
+ // Use a gradient to include the stripe on modern browsers.
+ background-image: linear-gradient( to bottom, $ms-color-presence-blocked-background 0%, $ms-color-presence-blocked-background 48%, $ms-color-presence-blocked-line 40%, $ms-color-presence-blocked-line 58%, $ms-color-presence-blocked-background 52%, $ms-color-presence-blocked-background 100% );
+ }
+}
+
+
+//== Modifier: Persona with busy presence
+//
+.ms-Persona.ms-Persona--busy {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-busy-average;
+ // Replace solid background with stripes on modern browsers.
+ background: repeating-linear-gradient( -45deg, $ms-color-presence-busy-stripe-light, $ms-color-presence-busy-stripe-light 1px, $ms-color-presence-busy-stripe-dark 0px, $ms-color-presence-busy-stripe-dark 2px );
+ }
+}
+
+
+//== Modifier: Square Persona with busy presence
+//
+.ms-Persona.ms-Persona--busy.ms-Persona--square {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-busy-average;
+ // Replace solid background with stripes on modern browsers.
+ background: repeating-linear-gradient( -45deg, $ms-color-presence-busy-stripe-light, $ms-color-presence-busy-stripe-light 3px, $ms-color-presence-busy-stripe-dark 3px, $ms-color-presence-busy-stripe-dark 6px );
+ }
+}
+
+
+//== Modifier: Persona with do not disturb presence
+//
+.ms-Persona.ms-Persona--dnd {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-dnd-background;
+ // Use a gradient to include the stripe on modern browsers.
+ background-image: linear-gradient( to bottom, $ms-color-presence-dnd-background 0%, $ms-color-presence-dnd-background 48%, $ms-color-presence-dnd-line 48%, $ms-color-presence-dnd-line 52%, $ms-color-presence-dnd-background 52%, $ms-color-presence-dnd-background 100% );
+ }
+}
+
+
+//== Modifier: Persona with offline presence
+//
+.ms-Persona.ms-Persona--offline {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-offline;
+ }
+}
diff --git a/dist/components/PersonaCard/PersonaCard.Square.html b/dist/components/PersonaCard/PersonaCard.Square.html
new file mode 100644
index 000000000..9862fa807
--- /dev/null
+++ b/dist/components/PersonaCard/PersonaCard.Square.html
@@ -0,0 +1,168 @@
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/components/PersonaCard/PersonaCard.css b/dist/components/PersonaCard/PersonaCard.css
new file mode 100644
index 000000000..6dca4a09d
--- /dev/null
+++ b/dist/components/PersonaCard/PersonaCard.css
@@ -0,0 +1,859 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Persona {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-OrgChart {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px 0;
+}
+
+.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;
+ outline: transparent;
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ 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.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
diff --git a/dist/components/PersonaCard/PersonaCard.html b/dist/components/PersonaCard/PersonaCard.html
new file mode 100644
index 000000000..b00b5e3f8
--- /dev/null
+++ b/dist/components/PersonaCard/PersonaCard.html
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
GS
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
MG
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/components/PersonaCard/PersonaCard.json b/dist/components/PersonaCard/PersonaCard.json
new file mode 100644
index 000000000..226b1c69d
--- /dev/null
+++ b/dist/components/PersonaCard/PersonaCard.json
@@ -0,0 +1,28 @@
+{
+ "name": "PersonaCard",
+ "notes": "",
+ "description": "The visualization of details of an individual including Skype contact details, email, location information, and organizational placement via the embedded {0} OrgChart {1}. PersonaCards are often invoked when a {2} Persona {3} is hovered over or tapped.",
+ "template": "PersonaCard.html",
+ "class": "ms-PersonaCard",
+ "wrapBranches": true,
+ "fileOrder": [
+ "PersonaCard.html",
+ "PersonaCard.Square.html"
+ ],
+ "dependencies": [
+ "Persona",
+ "OrgChart",
+ "Link"
+ ],
+ "branches": [
+ {
+ "name": "Regular",
+ "default": true
+ },
+ {
+ "name": "Circles",
+ "notes": "This persona card uses circle personas and has the org chart built in.",
+ "class": "ms-PersonaCard--circles"
+ }
+ ]
+}
diff --git a/dist/components/PersonaCard/PersonaCard.min.css b/dist/components/PersonaCard/PersonaCard.min.css
new file mode 100644
index 000000000..2257938f8
--- /dev/null
+++ b/dist/components/PersonaCard/PersonaCard.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.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;outline:transparent}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}
\ No newline at end of file
diff --git a/dist/components/PersonaCard/PersonaCard.scss b/dist/components/PersonaCard/PersonaCard.scss
new file mode 100644
index 000000000..745d64a14
--- /dev/null
+++ b/dist/components/PersonaCard/PersonaCard.scss
@@ -0,0 +1,289 @@
+// 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-font-m;
+ @include ms-u-slideUpIn10;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: $ms-color-neutralLighter;
+}
+
+// Overrides for persona
+.ms-PersonaCard-persona .ms-Persona {
+ .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+ }
+
+ .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-xxl;
+ line-height: 80px;
+ }
+
+ .ms-Persona-presence {
+ border-color: $ms-color-neutralLighter;
+ left: 77px;
+ bottom: 12px;
+ }
+
+ .ms-Persona-tertiaryText,
+ .ms-Persona-optionalText {
+ display: block; // Show tertiary and optional text
+ }
+}
+
+.ms-PersonaCard-actions {
+ @include ms-u-borderBox;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
+ background-color: $ms-color-white;
+ height: 48px;
+}
+
+.ms-PersonaCard-action {
+ display: inline-block;
+ cursor: pointer;
+ font-size: $ms-font-size-l;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: $ms-color-neutralSecondary;
+ position: relative;
+ @include ms-u-borderBox;
+
+ &:hover {
+ color: $ms-color-neutralDark;
+ }
+
+ &:active {
+ color: $ms-color-themePrimary;
+ }
+
+ // Currently-selected action
+ &.is-active {
+ color: $ms-color-themePrimary;
+
+ // Arrow
+ &:after {
+ @include ms-u-borderBox;
+ @include rotate(45deg);
+ content: "";
+ width: 10px;
+ height: 10px;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ background-color: $ms-color-white;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+ }
+ }
+}
+
+.ms-PersonaCard-overflow {
+ @extend .ms-PersonaCard-action;
+ font-size: $ms-font-size-m;
+ color: $ms-color-neutralPrimary;
+ float: right;
+ margin-top: -1px;
+
+ &:hover {
+ color: $ms-color-themePrimary;
+ }
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: $ms-color-white;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: $ms-color-neutralSecondary;
+ padding: 9px 20px;
+ transition: max-height $ms-duration2 $ms-ease1 0.2s;
+ box-sizing: border-box;
+
+ // State: Contents are collapsed to a single line.
+ &.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+
+ // Show the expander icon.
+ .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+ }
+ }
+}
+
+// Active detail items
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+// Inactive Items
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+// Icon to expand a collapsed actionDetails section.
+.ms-PersonaCard-detailExpander {
+ color: $ms-color-neutralPrimary;
+ cursor: pointer;
+ font-size: $ms-font-size-m-plus;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+
+ &:after {
+ @include ms-Icon;
+ content: '\e087';
+ }
+}
+
+.ms-PersonaCard-detailLine {
+ color: $ms-color-neutralPrimary;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: $ms-color-neutralSecondary;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart {
+ &:after {
+ display: none; // Hide arrow for orgchart action
+ }
+}
+
+
+//== Modifier: Persona card with square personas
+//
+.ms-PersonaCard.ms-PersonaCard--square {
+ .ms-PersonaCard-persona {
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+ }
+
+ .ms-Persona-presence {
+ left: 0;
+ }
+ }
+}
+
+
+@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;
+ }
+}
diff --git a/dist/components/Pivot/Pivot.Large.html b/dist/components/Pivot/Pivot.Large.html
new file mode 100644
index 000000000..6c0d955a7
--- /dev/null
+++ b/dist/components/Pivot/Pivot.Large.html
@@ -0,0 +1,10 @@
+
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
diff --git a/dist/components/Pivot/Pivot.Tabs.Large.html b/dist/components/Pivot/Pivot.Tabs.Large.html
new file mode 100644
index 000000000..9c77826ca
--- /dev/null
+++ b/dist/components/Pivot/Pivot.Tabs.Large.html
@@ -0,0 +1,10 @@
+
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
diff --git a/dist/components/Pivot/Pivot.Tabs.html b/dist/components/Pivot/Pivot.Tabs.html
new file mode 100644
index 000000000..910aa420a
--- /dev/null
+++ b/dist/components/Pivot/Pivot.Tabs.html
@@ -0,0 +1,10 @@
+
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
diff --git a/dist/components/Pivot/Pivot.css b/dist/components/Pivot/Pivot.css
new file mode 100644
index 000000000..69f2f5ea6
--- /dev/null
+++ b/dist/components/Pivot/Pivot.css
@@ -0,0 +1,242 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Pivot {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 40px;
+ list-style-type: none;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ position: relative;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ line-height: 40px;
+ margin-right: 8px;
+}
+
+.ms-Pivot-link:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:after {
+ background-color: #37006e;
+ }
+}
+
+.ms-Pivot-link:hover,
+.ms-Pivot-link:focus,
+.ms-Pivot-link:active {
+ color: #000000;
+ cursor: pointer;
+}
+
+.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:active + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-link:active {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:active {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:active {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link:active:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected {
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link.is-selected {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link.is-selected {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link.is-selected:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-dropdownIcon {
+ font-size: 16px;
+ position: relative;
+ top: 2px;
+}
+
+.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:after {
+ display: none;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs {
+ height: 40px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important;
+}
+
+.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 !important;
+ background-color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.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 !important;
+}
+
+@media (min-width: 640px) {
+ .ms-Pivot-link {
+ font-size: 14px;
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 14px;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+}
diff --git a/dist/components/Pivot/Pivot.html b/dist/components/Pivot/Pivot.html
new file mode 100644
index 000000000..374ee99fd
--- /dev/null
+++ b/dist/components/Pivot/Pivot.html
@@ -0,0 +1,10 @@
+
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
diff --git a/dist/components/Pivot/Pivot.json b/dist/components/Pivot/Pivot.json
new file mode 100644
index 000000000..3ce252690
--- /dev/null
+++ b/dist/components/Pivot/Pivot.json
@@ -0,0 +1,45 @@
+{
+ "name": "Pivot",
+ "notes": "",
+ "description": "A navigational, layout component that allows users to switch between different sets of content. Fabric provides a typography focused variant - Pivot - and a tabular variant - Tabs - along with two sizes for each. All variants include an overflow button that can be used in conjunction with {0} ContextualMenu {1} to present more options to the user.",
+ "template": "Pivot.html",
+ "class": "ms-Pivot",
+ "wrapBranches": true,
+ "fileOrder": [
+ "Pivot.html",
+ "Pivot.Large.html",
+ "Pivot.Tabs.html",
+ "Pivot.Tabs.Large.html"
+ ],
+ "branches": [
+ {
+ "name": "Pivots",
+ "default": true,
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true
+ },
+ {
+ "name": "Large",
+ "class": "ms-Pivot--large"
+ }
+ ]
+ },
+
+ {
+ "name": "Tabs",
+ "class": "ms-Pivot--tabs",
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true
+ },
+ {
+ "name": "Large",
+ "class": "ms-Pivot--large"
+ }
+ ]
+ }
+ ]
+}
diff --git a/dist/components/Pivot/Pivot.min.css b/dist/components/Pivot/Pivot.min.css
new file mode 100644
index 000000000..7bef270b7
--- /dev/null
+++ b/dist/components/Pivot/Pivot.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.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:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.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!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.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!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}
\ No newline at end of file
diff --git a/dist/components/Pivot/Pivot.scss b/dist/components/Pivot/Pivot.scss
new file mode 100644
index 000000000..ae1464add
--- /dev/null
+++ b/dist/components/Pivot/Pivot.scss
@@ -0,0 +1,242 @@
+// 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-font-m;
+ @include ms-u-normalize;
+ height: 40px;
+ list-style-type: none;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: $ms-color-neutralPrimary;
+ display: inline-block;
+ position: relative;
+ font-family: $ms-font-family-regular;
+ font-size: $ms-font-size-m-plus;
+ line-height: 40px;
+ margin-right: 8px;
+
+ &:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ background-color: $ms-color-themePrimary;
+
+ @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,
+ &:active {
+ color: $ms-color-black;
+ cursor: pointer;
+
+ + .ms-Pivot-dropdownIcon {
+ color: $ms-color-neutralDark;
+ }
+ }
+
+ &:active {
+ font-family: $ms-font-family-semibold;
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteSelected;
+ }
+
+ &:after {
+ display: block;
+ }
+ }
+
+ //== State: Selected
+ &.is-selected {
+ color: $ms-color-black;
+ font-family: $ms-font-family-semibold;
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteSelected;
+ }
+
+ &:after {
+ display: block;
+ }
+
+ + .ms-Pivot-dropdownIcon {
+ color: $ms-color-neutralDark;
+ }
+ }
+}
+
+.ms-Pivot-dropdownIcon {
+ font-size: $ms-font-size-m-plus + 1;
+ position: relative;
+ top: 2px;
+}
+
+// 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 {
+ &:after {
+ display: none;
+ }
+ }
+}
+
+// Ellipsis icon
+.ms-Pivot-ellipsis {
+ font-size: $ms-font-size-m-plus;
+ position: relative;
+ top: 0;
+}
+
+
+//== Modifier: Large Pivots
+//
+.ms-Pivot.ms-Pivot--large {
+ .ms-Pivot-link {
+ font-size: $ms-font-size-l;
+
+ &:active {
+ font-family: $ms-font-family-regular;
+ }
+
+ &.is-selected {
+ font-family: $ms-font-family-regular;
+ }
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow {
+ &:after {
+ font-size: $ms-font-size-l;
+ }
+ }
+}
+
+
+//== Modifier: Tabs
+//
+.ms-Pivot.ms-Pivot--tabs {
+ height: 40px;
+
+ .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;
+ font-family: $ms-font-family-semilight !important;
+
+ &: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 !important;
+ background-color: $ms-color-themePrimary;
+ font-family: $ms-font-family-semilight;
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-contrastBlackSelected;
+ color: $ms-color-black;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-contrastWhiteSelected;
+ color: $ms-color-white;
+ }
+ }
+
+ //== State: Selected
+ &.is-selected {
+ background-color: $ms-color-themePrimary;
+ color: $ms-color-white;
+ font-family: $ms-font-family-semilight;
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-contrastBlackSelected;
+ color: $ms-color-black;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-contrastWhiteSelected;
+ color: $ms-color-white;
+ }
+ }
+ }
+
+ .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 !important;
+ }
+ }
+}
+
+
+
+@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-family: $ms-font-family-semibold;
+ }
+ }
+ }
+}
diff --git a/dist/components/ProgressIndicator/ProgressIndicator.css b/dist/components/ProgressIndicator/ProgressIndicator.css
new file mode 100644
index 000000000..b42295cf3
--- /dev/null
+++ b/dist/components/ProgressIndicator/ProgressIndicator.css
@@ -0,0 +1,63 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ProgressIndicator-itemName {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ 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 {
+ position: absolute;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@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;
+ }
+}
diff --git a/dist/components/ProgressIndicator/ProgressIndicator.html b/dist/components/ProgressIndicator/ProgressIndicator.html
new file mode 100644
index 000000000..1f58dbf24
--- /dev/null
+++ b/dist/components/ProgressIndicator/ProgressIndicator.html
@@ -0,0 +1,10 @@
+
+
+
+
Example.jpg
+
+
My Progress Description
+
diff --git a/dist/components/ProgressIndicator/ProgressIndicator.json b/dist/components/ProgressIndicator/ProgressIndicator.json
new file mode 100644
index 000000000..944be9699
--- /dev/null
+++ b/dist/components/ProgressIndicator/ProgressIndicator.json
@@ -0,0 +1,7 @@
+{
+ "name": "ProgressIndicator",
+ "notes": "A component for outputting determinate progress",
+ "description": "A simple, determinate progress indicator that allows the user to see the status of activities. Unlike the {0} Spinner {1}, ProgressIndicator should accurately display the progress of the activity while the Spinner is used when the time is indeterminate.",
+ "template": "ProgressIndicator.html",
+ "class": "ms-ProgressIndicator"
+}
diff --git a/dist/components/ProgressIndicator/ProgressIndicator.min.css b/dist/components/ProgressIndicator/ProgressIndicator.min.css
new file mode 100644
index 000000000..2a06031c6
--- /dev/null
+++ b/dist/components/ProgressIndicator/ProgressIndicator.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;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{position:absolute;height:2px;background-color:#0078d7}@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}}
\ No newline at end of file
diff --git a/dist/components/ProgressIndicator/ProgressIndicator.scss b/dist/components/ProgressIndicator/ProgressIndicator.scss
new file mode 100644
index 000000000..96ce1b702
--- /dev/null
+++ b/dist/components/ProgressIndicator/ProgressIndicator.scss
@@ -0,0 +1,56 @@
+// 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-itemName {
+ @include ms-font-m();
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: $ProgressIndicatorMarginBetweenText / 2;
+ line-height: $ProgressIndicatorTextHeight + 2;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ @include ms-font-m();
+ color: $ms-color-neutralSecondaryAlt;
+ font-size: 11px;
+ 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 {
+ position: absolute;
+ height: 2px;
+ background-color: $ms-color-themePrimary;
+
+ @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/SearchBox/SearchBox.css b/dist/components/SearchBox/SearchBox.css
new file mode 100644
index 000000000..b352e4399
--- /dev/null
+++ b/dist/components/SearchBox/SearchBox.css
@@ -0,0 +1,178 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-SearchBox {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #600000;
+ }
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon {
+ color: #c8c8c8;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-closeButton {
+ display: block;
+ outline: transparent 1px solid;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #71afe5;
+ outline: transparent 1px solid;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ color: #000000;
+ height: 32px;
+ padding: 6px 3px 7px 10px;
+ width: 180px;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-SearchBox-field.hovering {
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-closeButton {
+ border: none;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 32px;
+ width: 32px;
+ background-color: #0078d7;
+ text-align: center;
+ display: none;
+ font-size: 17px;
+ color: #ffffff;
+ z-index: 10;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-left: 8px;
+ line-height: 32px;
+ color: #666666;
+}
+
+.ms-SearchBox-icon {
+ margin-right: 7px;
+ font-size: 17px;
+ color: #767676;
+}
diff --git a/dist/components/SearchBox/SearchBox.html b/dist/components/SearchBox/SearchBox.html
new file mode 100644
index 000000000..984d3ecf1
--- /dev/null
+++ b/dist/components/SearchBox/SearchBox.html
@@ -0,0 +1,7 @@
+
+
+
+
+ Search
+
+
diff --git a/dist/components/SearchBox/SearchBox.json b/dist/components/SearchBox/SearchBox.json
new file mode 100644
index 000000000..5af246866
--- /dev/null
+++ b/dist/components/SearchBox/SearchBox.json
@@ -0,0 +1,20 @@
+{
+ "name": "SearchBox",
+ "notes": "",
+ "description": "A basic Office 365 search field that includes a standard selection state and cancel button.",
+ "template": "SearchBox.html",
+ "class": "ms-SearchBox",
+ "dependencies": [
+ "Label"
+ ],
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+}
diff --git a/dist/components/SearchBox/SearchBox.min.css b/dist/components/SearchBox/SearchBox.min.css
new file mode 100644
index 000000000..ed6123f2b
--- /dev/null
+++ b/dist/components/SearchBox/SearchBox.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-SearchBox{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:1}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:2}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676}
\ No newline at end of file
diff --git a/dist/components/SearchBox/SearchBox.scss b/dist/components/SearchBox/SearchBox.scss
new file mode 100644
index 000000000..d79b4d2d2
--- /dev/null
+++ b/dist/components/SearchBox/SearchBox.scss
@@ -0,0 +1,109 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Search box styles
+
+
+.ms-SearchBox {
+ @include ms-font-m;
+ @include ms-u-normalize;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+
+ // State: Disabled searchbox
+ &.is-disabled {
+ .ms-SearchBox-label {
+ @include ms-Label-is-disabled;
+ }
+ .ms-SearchBox-icon {
+ color: $ms-color-neutralTertiaryAlt;
+ }
+ .ms-SearchBox-field {
+ background-color: $ms-color-neutralLighter;
+ border-color: $ms-color-neutralLighter;
+ pointer-events: none;
+ cursor: default;
+ }
+ }
+
+ // State: Active searchbox
+ &.is-active {
+ .ms-SearchBox-closeButton {
+ display: block;
+ outline: transparent 1px solid;
+ }
+ }
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ @include ms-u-normalize;
+ border: 1px solid $ms-color-themeTertiary;
+ outline: transparent 1px solid;
+ border-radius: 0;
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-m;
+ color: $ms-color-black;
+ height: 32px;
+ padding: 6px 3px 7px 10px;
+ width: 180px;
+ background-color: transparent;
+ z-index: $ms-zIndex-middle;
+
+ &.hovering {
+ border-color: $ms-color-themePrimary;
+ background-color: $ms-color-themeLighter;
+
+ & + .ms-SearchBox-label {
+ color: $ms-color-black;
+
+ .ms-Icon {
+ color: $ms-color-neutralPrimary;
+ }
+ }
+ }
+
+ &:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: $ms-color-themePrimary;
+ background-color: $ms-color-themeLighter;
+ }
+
+ &::-ms-clear {
+ display: none;
+ }
+}
+
+.ms-SearchBox-closeButton {
+ border: none;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 32px;
+ width: 32px;
+ background-color: $ms-color-themePrimary;
+ text-align: center;
+ display: none;
+ font-size: $ms-font-size-l;
+ color: $ms-color-white;
+ z-index: $ms-zIndex-front;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-left: 8px;
+ line-height: 32px;
+ color: $ms-color-neutralSecondary;
+}
+
+.ms-SearchBox-icon {
+ margin-right: 7px;
+ font-size: $ms-font-size-l;
+ color: $ms-color-neutralSecondaryAlt;
+}
diff --git a/dist/components/Spinner/Spinner.Large.html b/dist/components/Spinner/Spinner.Large.html
new file mode 100644
index 000000000..a0eed672c
--- /dev/null
+++ b/dist/components/Spinner/Spinner.Large.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/dist/components/Spinner/Spinner.Message.Large.html b/dist/components/Spinner/Spinner.Message.Large.html
new file mode 100644
index 000000000..aa806a87b
--- /dev/null
+++ b/dist/components/Spinner/Spinner.Message.Large.html
@@ -0,0 +1,5 @@
+
+
+
diff --git a/dist/components/Spinner/Spinner.Message.html b/dist/components/Spinner/Spinner.Message.html
new file mode 100644
index 000000000..669b9c15f
--- /dev/null
+++ b/dist/components/Spinner/Spinner.Message.html
@@ -0,0 +1,5 @@
+
+
+
diff --git a/dist/components/Spinner/Spinner.css b/dist/components/Spinner/Spinner.css
new file mode 100644
index 000000000..3bbcd4412
--- /dev/null
+++ b/dist/components/Spinner/Spinner.css
@@ -0,0 +1,52 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Spinner {
+ 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 {
+ position: relative;
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
diff --git a/dist/components/Spinner/Spinner.html b/dist/components/Spinner/Spinner.html
new file mode 100644
index 000000000..dbbe8f5ee
--- /dev/null
+++ b/dist/components/Spinner/Spinner.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/dist/components/Spinner/Spinner.json b/dist/components/Spinner/Spinner.json
new file mode 100644
index 000000000..ff1c312e2
--- /dev/null
+++ b/dist/components/Spinner/Spinner.json
@@ -0,0 +1,32 @@
+{
+ "name": "Spinner",
+ "notes": "An animating activity indicator.",
+ "description": "A progress/loading indicator that is ideally used when the length of time to completion for a task is indeterminate. If the length of time is known or can be determined, use the {0} ProgressIndicator {1}",
+ "template": "Spinner.html",
+ "class": "ms-Spinner",
+ "wrapBranches": true,
+ "fileOrder": [
+ "Spinner.html",
+ "Spinner.Large.html",
+ "Spinner.Message.html",
+ "Spinner.Message.Large.html"
+ ],
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true
+ },
+ {
+ "name": "Large",
+ "class": "ms-Spinner--large"
+ },
+ {
+ "name": "Standard with message ",
+ "class": "ms-Spinner"
+ },
+ {
+ "name": "Large with message",
+ "class": "ms-Spinner--large"
+ }
+ ]
+}
diff --git a/dist/components/Spinner/Spinner.min.css b/dist/components/Spinner/Spinner.min.css
new file mode 100644
index 000000000..bf6e346ce
--- /dev/null
+++ b/dist/components/Spinner/Spinner.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Spinner{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;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}
\ No newline at end of file
diff --git a/dist/components/Spinner/Spinner.scss b/dist/components/Spinner/Spinner.scss
new file mode 100644
index 000000000..b8fd8a60e
--- /dev/null
+++ b/dist/components/Spinner/Spinner.scss
@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Spinner styles
+
+
+.ms-Spinner {
+ position: relative;
+ height: 20px;
+
+ &.ms-Spinner--large {
+ height: 28px;
+
+ .ms-Spinner-label {
+ left: 34px;
+ top: 6px;
+ }
+ }
+}
+
+.ms-Spinner-circle {
+ position: absolute;
+ border-radius: 100px;
+ background-color: $ms-color-themePrimary;
+ opacity: 0;
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-black;
+ }
+}
+
+.ms-Spinner-label {
+ position: relative;
+ @include ms-font-s();
+ color: $ms-color-themePrimary;
+ left: 28px;
+ top: 2px;
+}
diff --git a/dist/components/Table/Table.Fixed.html b/dist/components/Table/Table.Fixed.html
new file mode 100644
index 000000000..1ea3f65a4
--- /dev/null
+++ b/dist/components/Table/Table.Fixed.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+
+
+ Cupcake ipsum dolor sit amet cake gummies bear claw cake. Chocolate chocolate bar donut.
+ Candy canes bear claw marzipan icing wafer.
+ Chocolate chocolate bar donut.
+ Candy canes cupcake macaroon toffee.
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
diff --git a/dist/components/Table/Table.css b/dist/components/Table/Table.css
new file mode 100644
index 000000000..8c86e2e52
--- /dev/null
+++ b/dist/components/Table/Table.css
@@ -0,0 +1,140 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Table {
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table tr:hover,
+.ms-Table-row:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-Table tr.is-selected,
+.ms-Table-row.is-selected {
+ background-color: #c7e0f4;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck,
+.ms-Table-row.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:before,
+.ms-Table-row.is-selected .ms-Table-rowCheck:before {
+ display: none;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:after,
+.ms-Table-row.is-selected .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #ffffff;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table thead th,
+.ms-Table-head {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table thead td,
+.ms-Table thead th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table thead .ms-Table-rowCheck:after,
+.ms-Table-head .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck:before {
+ border: 1px solid #a6a6a6;
+ content: '';
+ display: block;
+ height: 14px;
+ left: 2px;
+ position: absolute;
+ top: 6px;
+ width: 14px;
+}
+
+@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;
+ }
+}
diff --git a/dist/components/Table/Table.html b/dist/components/Table/Table.html
new file mode 100644
index 000000000..865074097
--- /dev/null
+++ b/dist/components/Table/Table.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+
+
+ Cupcake ipsum dolor sit amet cake gummies bear claw cake. Chocolate chocolate bar donut.
+ Candy canes bear claw marzipan icing wafer.
+ Chocolate chocolate bar donut.
+ Candy canes cupcake macaroon toffee.
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
\ No newline at end of file
diff --git a/dist/components/Table/Table.json b/dist/components/Table/Table.json
new file mode 100644
index 000000000..9ac6467a3
--- /dev/null
+++ b/dist/components/Table/Table.json
@@ -0,0 +1,22 @@
+{
+ "name": "Table",
+ "notes": "",
+ "description": "The table component provides a div-based way to visualize data in columns and rows. Although the table is responsive by nature, we recommend keeping the number of columns small if the table is intended to be viewed on mobile devices.",
+ "template": "Table.html",
+ "wrapBranches": true,
+ "class": "ms-Table",
+ "fileOrder": [
+ "Table.html",
+ "Table.Fixed.html"
+ ],
+ "branches": [
+ {
+ "name": "Default",
+ "default": true
+ },
+ {
+ "name": "Fixed",
+ "class": "ms-Table--fixed"
+ }
+ ]
+}
diff --git a/dist/components/Table/Table.min.css b/dist/components/Table/Table.min.css
new file mode 100644
index 000000000..421affa73
--- /dev/null
+++ b/dist/components/Table/Table.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@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}}
\ No newline at end of file
diff --git a/dist/components/Table/Table.scss b/dist/components/Table/Table.scss
new file mode 100644
index 000000000..2e23759d1
--- /dev/null
+++ b/dist/components/Table/Table.scss
@@ -0,0 +1,132 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Data table styles
+
+.ms-Table {
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
+}
+
+// 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-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-s;
+ color: $ms-color-neutralPrimary;
+
+ &:hover {
+ background-color: $ms-color-neutralLighter;
+ cursor: pointer;
+ outline: 1px solid transparent;
+ }
+
+ // Rows can be selected.
+ &.is-selected {
+ background-color: $ms-color-themeLight;
+
+ // A checkmark in a selected row.
+ .ms-Table-rowCheck {
+ background-color: $ms-color-themePrimary;
+
+ // Hide the checkbox.
+ &:before {
+ display: none;
+ }
+
+ // But show the mark.
+ &:after {
+ @include ms-Icon;
+ content: '\e041';
+ color: $ms-color-white;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+ }
+ }
+ }
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+// Style the first row as a header.
+.ms-Table thead th,
+.ms-Table-head {
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-xs;
+ color: $ms-color-neutralSecondary;
+}
+
+.ms-Table thead,
+.ms-Table-head {
+ td,
+ th,
+ .ms-Table-cell,
+ .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid $ms-color-neutralLight;
+ }
+
+ .ms-Table-rowCheck:after {
+ @include ms-Icon;
+ content: '\e041';
+ color: $ms-color-neutralTertiary;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+ }
+}
+
+// On selectable tables, each row has a checkbox.
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+
+ // Empty checkbox.
+ &:before {
+ border: 1px solid $ms-color-neutralTertiary;
+ content: '';
+ display: block;
+ height: 14px;
+ left: 2px;
+ position: absolute;
+ top: 6px;
+ width: 14px;
+ }
+}
+
+// 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.Multiline.html b/dist/components/TextField/TextField.Multiline.html
new file mode 100644
index 000000000..9caf28a16
--- /dev/null
+++ b/dist/components/TextField/TextField.Multiline.html
@@ -0,0 +1,6 @@
+
+
+
+ Enter street
+
+
diff --git a/dist/components/TextField/TextField.Placeholder.html b/dist/components/TextField/TextField.Placeholder.html
new file mode 100644
index 000000000..f8f321255
--- /dev/null
+++ b/dist/components/TextField/TextField.Placeholder.html
@@ -0,0 +1,10 @@
+
+
+
+ Given name
+
+
+
+ Family name
+
+
diff --git a/dist/components/TextField/TextField.Underlined.html b/dist/components/TextField/TextField.Underlined.html
new file mode 100644
index 000000000..01205526c
--- /dev/null
+++ b/dist/components/TextField/TextField.Underlined.html
@@ -0,0 +1,6 @@
+
+
+
+ Name:
+
+
diff --git a/dist/components/TextField/TextField.css b/dist/components/TextField/TextField.css
new file mode 100644
index 000000000..a84d5d106
--- /dev/null
+++ b/dist/components/TextField/TextField.css
@@ -0,0 +1,344 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 8px;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder,
+.ms-TextField.is-disabled::-moz-placeholder,
+.ms-TextField.is-disabled:-moz-placeholder,
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder:after,
+.ms-TextField.is-required::-moz-placeholder:after,
+.ms-TextField.is-required:-moz-placeholder:after,
+.ms-TextField.is-required:-ms-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 10px 8px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field::-webkit-input-placeholder,
+.ms-TextField-field::-moz-placeholder,
+.ms-TextField-field:-moz-placeholder,
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #666666;
+ padding: 7px 0 7px 10px;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 12px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: bottom;
+ padding-left: 12px;
+ padding-bottom: 5px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 2px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.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: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
diff --git a/dist/components/TextField/TextField.html b/dist/components/TextField/TextField.html
new file mode 100644
index 000000000..a43010aa8
--- /dev/null
+++ b/dist/components/TextField/TextField.html
@@ -0,0 +1,7 @@
+
+
+
+ Name
+
+ This should be your first and last name.
+
diff --git a/dist/components/TextField/TextField.json b/dist/components/TextField/TextField.json
new file mode 100644
index 000000000..20b24041a
--- /dev/null
+++ b/dist/components/TextField/TextField.json
@@ -0,0 +1,108 @@
+{
+ "name": "TextField",
+ "notes": "",
+ "description": "The table component provides a div-based way to visualize data in columns and rows. Although the table is responsive by nature, we recommend keeping the number of columns small if the table is intended to be viewed on mobile devices.",
+ "template": "TextField.html",
+ "class": "ms-TextField",
+ "fileOrder": [
+ "TextField.html",
+ "TextField.Multiline.html",
+ "TextField.Placeholder.html",
+ "TextField.Underlined.html"
+ ],
+ "dependencies": [
+ "Label"
+ ],
+ "branches": [
+ {
+ "name": "Standard",
+ "default": true,
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ },
+ {
+ "name": "Required",
+ "class": "is-required"
+ }
+ ]
+ },
+ {
+ "name": "Placeholder",
+ "class": "ms-TextField--placeholder",
+ "template": "TextField.Placeholder.html",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ },
+ {
+ "name": "Required",
+ "class": "is-required"
+ }
+ ]
+ },
+ {
+ "name": "Underlined",
+ "class": "ms-TextField--underlined",
+ "template": "Textfield.Underlined.html",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ },
+ {
+ "name": "Multiline",
+ "class": "ms-TextField--multiline",
+ "template": "Textfield.Multiline.html",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ },
+ {
+ "name": "Required",
+ "class": "is-required"
+ }
+ ]
+ },
+ {
+ "name": "Ml Placeholder",
+ "class": "ms-TextField--multiline ms-TextField--placeholder",
+ "template": "Textfield.Multiline.html",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ },
+ {
+ "name": "Required",
+ "class": "is-required"
+ }
+ ]
+ }
+ ]
+}
diff --git a/dist/components/TextField/TextField.min.css b/dist/components/TextField/TextField.min.css
new file mode 100644
index 000000000..fba85ea3f
--- /dev/null
+++ b/dist/components/TextField/TextField.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.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:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}
\ No newline at end of file
diff --git a/dist/components/TextField/TextField.scss b/dist/components/TextField/TextField.scss
new file mode 100644
index 000000000..9fd4f3658
--- /dev/null
+++ b/dist/components/TextField/TextField.scss
@@ -0,0 +1,204 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Single line (input) and multiline (textarea) form field styles
+
+
+@import '../Label/Label.scss';
+
+
+.ms-TextField {
+ @include ms-font-m;
+ @include ms-u-normalize;
+ margin-bottom: 8px;
+}
+
+//= State: A disabled textfield
+.ms-TextField.is-disabled {
+ .ms-TextField-field {
+ background-color: $ms-color-neutralLighter;
+ border-color: $ms-color-neutralLighter;
+ pointer-events: none;
+ cursor: default;
+ }
+
+ @include input-placeholder {
+ color: $ms-color-neutralTertiary;
+ }
+}
+
+//= State: A required textfield
+.ms-TextField.is-required {
+ .ms-Label {
+ @include ms-Label-is-required
+ }
+
+ @include input-placeholder {
+ @include ms-Label-is-required
+ }
+}
+
+//= State: An active textfield
+.ms-TextField.is-active {
+ border-color: $ms-color-themePrimary;
+}
+
+.ms-TextField-field {
+ @include ms-u-normalize;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ border-radius: 0;
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-s;
+ color: $ms-color-neutralPrimary;
+ height: 32px;
+ padding: 6px 10px 8px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+
+ &:hover {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+
+ &:focus {
+ border-color: $ms-color-themePrimary;
+ }
+
+ &:hover,
+ &:focus {
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+
+ @include input-placeholder {
+ color: $ms-color-neutralSecondary;
+ }
+}
+
+.ms-TextField-description {
+ color: $ms-color-neutralSecondaryAlt;
+ font-size: $ms-font-size-xs;
+}
+
+
+//== Modifier: Single line (default), placeholder label
+//
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+
+ .ms-Label {
+ position: absolute;
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-s;
+ color: $ms-color-neutralSecondary;
+ padding: 7px 0 7px 10px;
+ }
+
+ &.is-disabled {
+ color: $ms-color-neutralTertiary;
+
+ .ms-Label {
+ @include ms-Label-is-disabled;
+ }
+ }
+}
+
+
+//== Modifier: Single line (default), underlined
+//
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+
+ &:hover {
+ border-color: $ms-color-neutralSecondaryAlt;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+
+ &:active,
+ &:focus {
+ border-color: $ms-color-themePrimary;
+ }
+
+ .ms-Label {
+ font-size: $ms-font-size-s;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: bottom;
+ padding-left: 12px;
+ padding-bottom: 5px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+ }
+
+ .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 2px;
+
+ &:active,
+ &:focus,
+ &:hover {
+ outline: 0;
+ }
+ }
+
+ &.is-disabled {
+ border-bottom-color: $ms-color-neutralLight;
+
+ .ms-Label {
+ @include ms-Label-is-disabled;
+ }
+
+ .ms-TextField-field {
+ background-color: transparent;
+ color: $ms-color-neutralTertiary;
+ }
+ }
+
+ &.is-active {
+ border-color: $ms-color-themePrimary;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+}
+
+
+//== Modifier: Multiline textfield
+//
+.ms-TextField.ms-TextField--multiline {
+ .ms-TextField-field {
+ @include ms-font-s;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+ }
+}
diff --git a/dist/components/Toggle/Toggle.Disabled.html b/dist/components/Toggle/Toggle.Disabled.html
new file mode 100644
index 000000000..ea2458df4
--- /dev/null
+++ b/dist/components/Toggle/Toggle.Disabled.html
@@ -0,0 +1,10 @@
+
+
+
+ Let apps use my location
+
+
+ Off
+ On
+
+
\ No newline at end of file
diff --git a/dist/components/Toggle/Toggle.TextLeft.html b/dist/components/Toggle/Toggle.TextLeft.html
new file mode 100644
index 000000000..9c83bd306
--- /dev/null
+++ b/dist/components/Toggle/Toggle.TextLeft.html
@@ -0,0 +1,10 @@
+
+
+
+ Let apps use my location
+
+
+ Off
+ On
+
+
diff --git a/dist/components/Toggle/Toggle.css b/dist/components/Toggle/Toggle.css
new file mode 100644
index 000000000..c03ba8387
--- /dev/null
+++ b/dist/components/Toggle/Toggle.css
@@ -0,0 +1,286 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+}
+
+.ms-Toggle .ms-Label {
+ position: relative;
+ padding: 0 0 0 62px;
+ font-size: 12px;
+}
+
+.ms-Toggle:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff !important;
+ border-color: #c8c8c8 !important;
+ pointer-events: none !important;
+ cursor: default !important;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field:before {
+ background-color: #c8c8c8 !important;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 12px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 57px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2.5px #c8c8c8 solid;
+ cursor: pointer;
+}
+
+.ms-Toggle-input {
+ position: absolute;
+ opacity: 0;
+ top: 0;
+}
+
+.ms-Toggle-input + .ms-Toggle-field {
+ background-color: #f4f4f4;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ left: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ right: auto;
+ border-right: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ right: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ left: auto;
+ border-left: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle-input:focus + .ms-Toggle-field,
+.ms-Toggle-input:hover + .ms-Toggle-field {
+ background-color: #eaeaea;
+}
+
+.ms-Toggle-input:focus:checked + .ms-Toggle-field,
+.ms-Toggle-input:hover:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+}
+
+.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/components/Toggle/Toggle.html b/dist/components/Toggle/Toggle.html
new file mode 100644
index 000000000..3d6030957
--- /dev/null
+++ b/dist/components/Toggle/Toggle.html
@@ -0,0 +1,10 @@
+
+
+
+ Let apps use my location
+
+
+ Off
+ On
+
+
diff --git a/dist/components/Toggle/Toggle.json b/dist/components/Toggle/Toggle.json
new file mode 100644
index 000000000..9d139876c
--- /dev/null
+++ b/dist/components/Toggle/Toggle.json
@@ -0,0 +1,43 @@
+{
+ "name": "Toggle",
+ "notes": "",
+ "description":"A boolean visualization that allows for users to select between two states, typically on and off. In Office 365, on/true is signified by a blue state while off/false is shown in grey. Also see {0} ChoiceField - checkbox {1} for a boolean visualization that is better suited to a long list of individual choices for the user.",
+ "template": "Toggle.html",
+ "class": "ms-Toggle",
+ "fileOrder": [
+ "Toggle.html",
+ "Toggle.TextLeft.html",
+ "Toggle.Disabled.html"
+ ],
+ "branches": [
+ {
+ "name": "Text above",
+ "class": "ms-Toggle--textAbove",
+ "default": true,
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ },
+ {
+ "name": "Text left",
+ "class": "ms-Toggle--textLeft",
+ "branches": [
+ {
+ "name": "Enabled",
+ "default": true
+ },
+ {
+ "name": "Disabled",
+ "class": "is-disabled"
+ }
+ ]
+ }
+ ]
+}
diff --git a/dist/components/Toggle/Toggle.min.css b/dist/components/Toggle/Toggle.min.css
new file mode 100644
index 000000000..f836c1b5d
--- /dev/null
+++ b/dist/components/Toggle/Toggle.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.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/components/Toggle/Toggle.scss b/dist/components/Toggle/Toggle.scss
new file mode 100644
index 000000000..1b16a4881
--- /dev/null
+++ b/dist/components/Toggle/Toggle.scss
@@ -0,0 +1,208 @@
+// 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';
+
+
+// Toggle
+.ms-Toggle {
+ @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;
+ padding: 0 0 0 62px;
+ font-size: $ms-font-size-s;
+ }
+
+ &: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 !important;
+ border-color: $ms-color-neutralTertiaryAlt !important;
+ pointer-events: none !important;
+ cursor: default !important;
+
+ &:before {
+ background-color: $ms-color-neutralTertiaryAlt !important;
+ }
+ }
+
+ .ms-Toggle-field,
+ .ms-Toggle-field:before {
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+ }
+}
+
+// Description text
+.ms-Toggle-description {
+ position: relative;
+ font-size: $ms-font-size-s;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+// Toggle input field
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 57px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2.5px $ms-color-neutralTertiaryAlt solid;
+ cursor: pointer;
+}
+
+// Slider mixin
+@mixin ms-Toggle-slider($direction) {
+ // Slider pseudo element
+ &:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ #{$direction}: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: $ms-color-neutralSecondaryAlt;
+ outline: 2px solid transparent;
+
+ @media screen and (-ms-high-contrast: active) {
+ border: 2.5px solid $ms-color-white;
+ height: 15px;
+ outline: 0;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-black;
+ }
+ }
+
+ @if $direction == left {
+ &:before {
+ right: auto;
+ border-right: 2.5px solid $ms-color-white;
+ }
+ }
+
+ @if $direction == right {
+ &:before {
+ left: auto;
+ border-left: 2.5px solid $ms-color-white;
+ }
+ }
+
+ &:active {
+ background-color: $ms-color-themePrimary;
+ }
+}
+
+// On/Off slide states
+.ms-Toggle-input {
+ position: absolute;
+ opacity: 0;
+ top: 0;
+
+ // 'Off' state - slider on the left
+ & + .ms-Toggle-field {
+ background-color: $ms-color-neutralLighter;
+
+ @include ms-Toggle-slider(left);
+
+ // Show the off label / hide the on label
+ .ms-Label--off {
+ display: block;
+ }
+
+ .ms-Label--on {
+ display: none;
+ }
+ }
+
+ // 'On' state - slider on the right
+ &:checked + .ms-Toggle-field {
+ background-color: $ms-color-themePrimary;
+
+ @include ms-Toggle-slider(right);
+
+ // Show the on label / hide the off label
+ .ms-Label--off {
+ display: none;
+ }
+
+ .ms-Label--on {
+ display: block;
+ }
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-black;
+ }
+ }
+
+ &:focus,
+ &:hover {
+ & + .ms-Toggle-field {
+ background-color: $ms-color-neutralLight;
+ }
+
+ &:checked + .ms-Toggle-field {
+ background-color: $ms-color-themeDark;
+ }
+ }
+}
+
+
+//== Modifier: Toggle with description text left
+//
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+
+ .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+ }
+
+ .ms-Toggle-field {
+ float: right;
+ }
+}
diff --git a/dist/css/fabric.components.css b/dist/css/fabric.components.css
new file mode 100644
index 000000000..316824682
--- /dev/null
+++ b/dist/css/fabric.components.css
@@ -0,0 +1,6554 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+.ms-Breadcrumb {
+ margin: 23px 0 1px 0;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 17px;
+ color: #666666;
+ vertical-align: top;
+ margin: 10px 0;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+ margin-right: -4px;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 12px;
+ display: inline-block;
+ color: #0078d7;
+ margin-right: -4px;
+ padding: 12px 8px 3px 8px;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu:before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: white;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: none;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ font-weight: normal;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media screen and (max-width: 639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 14px;
+ margin-top: 7px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 8px;
+ padding-bottom: 3px;
+ }
+}
+
+@media screen and (max-width: 479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin-top: 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 5px;
+ padding-bottom: 3px;
+ }
+}
+
+.ms-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-Callout {
+ z-index: 100;
+ margin: 16px auto;
+ position: relative;
+ width: 288px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ content: '';
+ position: absolute;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ height: 0;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowTop:before {
+ z-index: 0;
+ outline: 1px solid transparent;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:after {
+ z-index: 10;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ top: 40px;
+ display: none;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid #ffffff;
+ left: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid transparent;
+ right: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid transparent;
+ top: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid #ffffff;
+ bottom: -10px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ background-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ background-color: #ffffff;
+ }
+}
+
+.ms-Callout-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.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-inner {
+ height: 100%;
+ padding: 0 24px 20px;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding: 18px 24px 12px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-actions .ms-Link.ms-Link--hero {
+ position: relative;
+ left: -8px;
+}
+
+.ms-Callout-action {
+ position: relative;
+ top: 4px;
+ left: -8px;
+ margin-left: 0 !important;
+}
+
+.ms-Callout-action:hover .ms-Callout-actionIcon,
+.ms-Callout-action:focus .ms-Callout-actionIcon {
+ color: #0078d7;
+}
+
+.ms-Callout-button {
+ margin-right: 12px;
+}
+
+.ms-Callout.ms-Callout--close .ms-Callout-title {
+ margin-right: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after {
+ border-color: #0078d7;
+ background-color: transparent;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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;
+ margin-bottom: -8px;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after {
+ left: 40px;
+ right: auto;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after {
+ top: calc('50% - 10px');
+}
+
+.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;
+}
+
+@media (min-width: 480px) {
+ .ms-Callout {
+ width: 300px;
+ margin: 16px;
+ }
+
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after {
+ display: block;
+ }
+}
+
+.ms-ChoiceField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-ChoiceField .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field {
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #eaeaea;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #00ff00;
+ color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #600000;
+ color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField-input {
+ position: absolute;
+ opacity: 0;
+ top: 8px;
+}
+
+.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+}
+
+.ms-ChoiceField-field:after {
+ content: '';
+ display: inline-block;
+ border: 1px #c8c8c8 solid;
+ width: 19px;
+ height: 19px;
+ cursor: pointer;
+ position: relative;
+ font-weight: normal;
+ left: -1px;
+ top: -1px;
+ border-radius: 50%;
+ position: absolute;
+}
+
+.ms-ChoiceField-field:hover:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ background-color: #666666;
+ border-color: #666666;
+ color: #666666;
+ border-radius: 50%;
+ content: '\00a0';
+ display: inline-block;
+ position: absolute;
+ top: 4px;
+ right: 0;
+ bottom: 0;
+ left: 4px;
+ width: 11px;
+ height: 11px;
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #ffffff;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #000000;
+ background-color: #000000;
+ }
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
+ background-color: #212121;
+ color: #212121;
+}
+
+.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after {
+ border-radius: 0;
+}
+
+.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ background-color: transparent;
+ border-radius: 0;
+ font-size: 13px;
+ top: 3px;
+ left: 3px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #ffffff;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #000000;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.ms-ChoiceFieldGroup {
+ margin-bottom: 4px;
+}
+
+.ms-CommandBar {
+ background-color: #eff6fc;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ padding-left: 58px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-mainArea {
+ padding-left: 24px;
+ }
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 12px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 16px;
+ }
+}
+
+.ms-CommandBarItem {
+ display: inline-block;
+ color: #0078d7;
+ height: 40px;
+ outline: none;
+ vertical-align: top;
+ margin-right: -4px;
+}
+
+.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ height: 38px;
+ outline: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ height: 38px;
+ outline: none;
+ }
+}
+
+.ms-CommandBarItem:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBarItem {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline;
+ }
+}
+
+.ms-CommandBarItem.is-hidden {
+ width: 0;
+ overflow: hidden;
+}
+
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown {
+ display: inline;
+}
+
+.ms-CommandBarItem-overflow {
+ display: none;
+}
+
+.ms-CommandBarItem-overflow.is-visible {
+ display: inline-block;
+}
+
+.ms-CommandBarItem-overflow .ms-Icon {
+ font-size: 14px;
+ color: #666666;
+}
+
+.ms-CommandBarItem-link {
+ line-height: 39px;
+ padding: 0 6px;
+ cursor: pointer;
+ height: 40px;
+ min-width: 20px;
+ text-align: center;
+ position: relative;
+ padding: 0 8px;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+}
+
+.ms-CommandBarItem-link:focus {
+ outline: none;
+}
+
+.ms-CommandBarItem-link:focus:before {
+ position: absolute;
+ left: 2px;
+ right: 2px;
+ top: 2px;
+ bottom: 2px;
+ border: 1px solid #a6a6a6;
+ content: '';
+}
+
+.ms-CommandBarItem-icon {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-CommandBarItem-chevronDown {
+ vertical-align: middle;
+ padding-bottom: 3px;
+ margin-top: 13px;
+ font-size: 1.1em;
+ line-height: 1em;
+ color: #666666;
+}
+
+.ms-CommandBarItem-chevronDown:before {
+ height: 10px;
+ line-height: 16px;
+}
+
+.ms-CommandBarSearch {
+ float: left;
+ width: 208px;
+ max-width: 208px;
+ background-color: #deecf9;
+ color: #333333;
+ height: 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-color: transparent;
+ transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ transition-property: width, background-color;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch {
+ overflow: hidden;
+ width: 50px;
+ position: absolute;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #ffffff;
+ z-index: 10;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch .ms-Icon--search {
+ margin-left: 2px;
+ margin-top: 12px;
+ vertical-align: top;
+}
+
+.ms-CommandBarSearch-input {
+ height: 40px;
+ padding: 8px 8px 8px 0;
+ border: none;
+ border-left: 42px solid transparent;
+ background-color: transparent;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+ cursor: pointer;
+ font-size: 14px;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #ffffff;
+ }
+}
+
+.ms-CommandBarSearch-input::-ms-clear {
+ display: none;
+}
+
+.ms-CommandBarSearch-input::-webkit-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::-moz-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:-ms-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper {
+ display: block;
+ padding-left: 15px;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper,
+.ms-CommandBarSearch-iconArrowWrapper {
+ top: 0;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.ms-CommandBarSearch-iconClearWrapper {
+ display: none;
+ top: 1px;
+ right: 0px;
+ z-index: 10;
+}
+
+.ms-CommandBarSearch.is-active {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch.is-active {
+ width: 100%;
+ position: absolute;
+ z-index: 10;
+ max-width: 100%;
+ }
+}
+
+.ms-CommandBarSearch.is-active:hover {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ cursor: text;
+ padding-right: 40px;
+ border-left-width: 8px;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
+ border-left-width: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ padding-right: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch-iconWrapper {
+ height: 40px;
+ line-height: 40px;
+ cursor: pointer;
+ padding: 0px 8px;
+ position: absolute;
+ width: 34px;
+ text-align: center;
+}
+
+.ms-CommandBarSearch .ms-Icon:before {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
+
+.ms-DatePicker {
+ 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 {
+ -webkit-animation-name: fadeIn, slideDownIn10;
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ 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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #c7e0f4;
+}
+
+.ms-DatePicker-day--disabled:before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.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;
+ text-align: center;
+ 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: 0px;
+ position: absolute;
+ top: 0px;
+ width: 140px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+ display: block;
+ font-weight: normal;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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: normal;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-right: 1px solid #eaeaea;
+ width: 220px;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-dayPicker {
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ left: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0 0;
+ }
+
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ .ms-DatePicker-month {
+ margin-left: 12px;
+ }
+
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ }
+
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-prevYear,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-nextDecade {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+ .ms-DatePicker-currentYear,
+ .ms-DatePicker-currentDecade {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 10px 10px 0;
+ }
+
+ .ms-DatePicker-monthOption:hover,
+ .ms-DatePicker-yearOption:hover {
+ outline: 1px solid transparent;
+ }
+
+ .ms-DatePicker-goToday {
+ box-sizing: border-box;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ right: 10px;
+ text-align: right;
+ top: 199px;
+ width: 210px;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+ }
+}
+
+@media (max-width: 459px) {
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker {
+ display: block;
+ }
+}
+
+.ms-Dialog {
+ background-color: transparent;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 300;
+ display: block;
+ font-size: 0;
+ line-height: 100vh;
+ text-align: center;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+}
+
+.ms-Dialog::before {
+ vertical-align: middle;
+ display: inline-block;
+ content: '';
+ height: 100%;
+ width: 0;
+}
+
+.ms-Dialog .ms-Button.ms-Button--compound {
+ display: block;
+ margin-left: 0;
+}
+
+.ms-Dialog .ms-Overlay {
+ z-index: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dialog .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Dialog-main {
+ vertical-align: middle;
+ display: inline-block;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ box-sizing: border-box;
+ line-height: 1.35;
+ margin: auto;
+ width: 288px;
+ position: relative;
+ text-align: left;
+ outline: 3px solid transparent;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close {
+ display: none;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ z-index: 10;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Dialog-inner {
+ height: 100%;
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog-header {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 20px 15px;
+}
+
+.ms-Dialog-title {
+ margin: 0;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+ width: 100%;
+}
+
+.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog-subText {
+ margin: 0 0 20px 0;
+ padding-top: 8px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Dialog-actions {
+ position: relative;
+ width: 100%;
+ min-height: 24px;
+ line-height: 24px;
+ margin: 20px 0 0;
+ font-size: 0;
+}
+
+.ms-Dialog-actions .ms-Button {
+ line-height: normal;
+}
+
+.ms-Dialog-actionsRight {
+ text-align: right;
+ font-size: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action:first-child {
+ margin: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action {
+ margin: 0 0 0 16px;
+}
+
+.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-button--close {
+ display: block;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner {
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header {
+ background-color: #0078d7;
+ padding: 26px 20px 28px;
+ margin-bottom: 8px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ font-size: 28px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #ffffff;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText {
+ font-size: 14px;
+}
+
+@media (min-width: 480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
+
+.ms-Dropdown {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ 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.ms-Dropdown--open .ms-Dropdown-items,
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: fixed;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #666666;
+ font-size: 17px;
+ position: absolute;
+ right: 9px;
+ bottom: 5px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ line-height: 30px;
+ padding: 0 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-items {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ max-width: 268px;
+ z-index: 400;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow-y: scroll;
+}
+
+.ms-Dropdown-items:before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 38px;
+ padding: 0 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:first-child,
+.ms-Dropdown-item:last-child {
+ height: 39px;
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Dropdown-items {
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+ }
+
+ .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
+ .ms-Dropdown.is-open .ms-Dropdown-items {
+ position: absolute;
+ }
+}
+
+.ms-Facepile {
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ top: 40px;
+ height: 200px;
+}
+
+.ms-Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn {
+ 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-itemBtn .ms-Persona-presence,
+.ms-Facepile-itemBtn .ms-Persona-details {
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover,
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus {
+ background-color: #005a9e;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover {
+ color: #212121;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-List {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width: 480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+}
+
+.ms-ListItem {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+}
+
+.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-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-MessageBanner {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ position: relative;
+ border-bottom: 1px solid #767676;
+ background-color: #eff6fc;
+ min-width: 320px;
+ width: 100%;
+ height: 52px;
+ text-align: center;
+ overflow: hidden;
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ -webkit-animation-name: fadeOut, slideUpOut20;
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-expand:focus,
+.ms-MessageBanner-close:focus {
+ outline: 1px solid 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-expand {
+ display: inline-block;
+ }
+
+ .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 0;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
+
+.ms-NavBar {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ height: 40px;
+ padding: 0 10px;
+ width: 100%;
+ outline: 1px solid transparent;
+}
+
+.ms-NavBar .ms-Overlay {
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ z-index: 0;
+}
+
+.ms-NavBar-openMenu {
+ font-size: 20px;
+ height: 40px;
+ line-height: 40px;
+ position: absolute;
+ right: 27px;
+ text-align: center;
+ width: 40px;
+ cursor: pointer;
+}
+
+.ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item {
+ box-sizing: border-box;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ padding-left: 20px;
+ position: relative;
+}
+
+.ms-NavBar-item:hover {
+ cursor: pointer;
+ background-color: #deecf9;
+ color: #000000;
+}
+
+.ms-NavBar-item:hover .ms-Icon {
+ color: #333333;
+}
+
+.ms-NavBar-item:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-NavBar-item.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-NavBar-item.is-disabled:hover {
+ cursor: default;
+ border: none;
+}
+
+.ms-NavBar-link {
+ color: #333333;
+ text-decoration: none;
+}
+
+.ms-NavBar-link:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after {
+ color: #212121;
+}
+
+.ms-NavBar-chevronDown {
+ color: #666666;
+ font-size: 22px;
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search {
+ position: relative;
+ width: 30px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #666666;
+ content: '\e039';
+ font-size: 21px;
+ line-height: 40px;
+ position: absolute;
+ right: 5px;
+ top: 0;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search .ms-TextField {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open {
+ width: 200px;
+ padding-right: 40px;
+ border: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField {
+ display: block;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field {
+ border: none;
+ background-color: transparent;
+}
+
+@media (max-width: 479px) {
+ .ms-NavBar.is-open .ms-NavBar-items {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ bottom: 0;
+ display: block;
+ left: 50px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ outline: 1px solid transparent;
+ z-index: 5;
+ }
+
+ .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu {
+ position: relative;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 479px) {
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected {
+ height: inherit;
+ background-color: transparent;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown {
+ -webkit-transform: scaleY(-1);
+ -ms-transform: scaleY(-1);
+ transform: scaleY(-1);
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu {
+ position: static;
+ border: none;
+ box-shadow: none;
+ width: auto;
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ }
+
+ .ms-NavBar.is-open .ms-Overlay {
+ display: block;
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-NavBar-openMenu {
+ display: none;
+ }
+
+ .ms-NavBar-items {
+ display: block;
+ list-style: none;
+ margin: 0 7px 0 0;
+ padding: 0;
+ }
+
+ .ms-NavBar-chevronDown {
+ top: 3px;
+ right: 0;
+ float: none;
+ position: relative;
+ }
+
+ .ms-NavBar-item {
+ float: left;
+ margin-right: 18px;
+ font-size: 14px;
+ padding: 0;
+ }
+
+ .ms-NavBar-item:hover {
+ border-bottom: 2px solid #0078d7;
+ background-color: transparent;
+ }
+
+ .ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ border-bottom: 2px solid #0078d7;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu:after {
+ position: relative;
+ top: 3px;
+ padding-top: 0;
+ right: auto;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--right {
+ float: right;
+ margin: 0;
+ }
+}
+
+.ms-OrgChart {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px 0;
+}
+
+.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;
+ outline: transparent;
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Panel {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 300;
+ display: none;
+ pointer-events: none;
+}
+
+.ms-Panel .ms-Overlay {
+ z-index: 0;
+ display: none;
+ pointer-events: none;
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+.ms-Panel-main {
+ background-color: #ffffff;
+ bottom: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ display: none;
+ z-index: 10;
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ pointer-events: auto;
+ width: 340px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+ left: auto;
+ }
+}
+
+.ms-Panel-main .ms-CommandBar {
+ outline: 1px solid transparent;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main .ms-CommandBar {
+ display: none;
+ }
+}
+
+.ms-Panel-main .ms-CommandBarItem {
+ margin-left: 8px;
+}
+
+.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline-block;
+}
+
+.ms-Panel-main .ms-CommandBar-mainArea {
+ padding-left: 0;
+ margin-left: -1px;
+ overflow: hidden;
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-main {
+ right: auto;
+ left: 0;
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-commands,
+.ms-Panel.ms-Panel--left .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 340px;
+ }
+}
+
+@media (min-width: 640px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main,
+ .ms-Panel.ms-Panel--lg .ms-Panel-main,
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 48px;
+ width: auto;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main {
+ left: auto;
+ width: 643px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg .ms-Panel-main {
+ left: 428px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main {
+ left: auto;
+ width: 940px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 176px;
+ }
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Panel-main {
+ opacity: 1;
+ pointer-events: auto;
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Overlay {
+ display: block;
+ pointer-events: auto;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Panel.is-open .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open .ms-Overlay {
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media screen and (min-width: 480px) and (-ms-high-contrast: active) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay,
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ opacity: 0;
+ -webkit-animation-name: none;
+ animation-name: none;
+ }
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 8px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 14px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-contentInner {
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar {
+ display: block;
+ }
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover {
+ background-color: #d7eaf9;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active {
+ background-color: #b5d8f4;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon {
+ color: #07288b;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
+ color: #000000;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child {
+ background-color: #0078d7;
+ box-shadow: inset 0 1px 0 0 #2488d8;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
+ padding-left: 12px;
+ padding-right: 12px;
+ cursor: pointer;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover {
+ background-color: #005a9e;
+ box-shadow: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-delay: 250ms;
+ animation-delay: 250ms;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-delay: 500ms;
+ animation-delay: 500ms;
+ }
+}
+
+.ms-PeoplePicker {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ *zoom: 1;
+ border: 1px solid #c8c8c8;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchBox:before,
+.ms-PeoplePicker-searchBox:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-PeoplePicker-searchBox:after {
+ clear: both;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: left;
+ height: 38px;
+ outline: none;
+ padding-left: 8px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: left;
+ margin: 4px;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-persona .ms-Persona {
+ background-color: #f4f4f4;
+ float: left;
+ min-height: 30px;
+}
+
+.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;
+ float: left;
+ 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 {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: 305;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ padding: 17px 0 0 12px;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+.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;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-result .ms-Persona:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-result .ms-Persona-details {
+ width: 100%;
+}
+
+.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 0;
+ 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: 34px;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultAction {
+ height: 48px;
+ }
+}
+
+.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: #71afe5;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid #eaeaea;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ left: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
+ background-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
+ color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching:hover {
+ background-color: transparent;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-left: 70px;
+ text-align: left;
+}
+
+.ms-PeoplePicker-searchMoreBtn:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-searchMoreBtn:focus,
+.ms-PeoplePicker-searchMoreBtn:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-left: 50px;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+}
+
+.ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #333333;
+ font-size: 16px;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
+ background-color: inherit;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
+ color: #666666;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
+ margin-top: -8px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+ height: 49px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ left: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ font-size: 17px;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 45px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
+ height: 28px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn {
+ height: 42px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction {
+ height: 42px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
+ padding-left: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
+ top: 16px;
+ left: 14px;
+ height: 20px;
+ width: 20px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
+.ms-PeoplePicker-result .ms-Persona:hover .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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ 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.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
+
+.ms-Pivot {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 40px;
+ list-style-type: none;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ position: relative;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ line-height: 40px;
+ margin-right: 8px;
+}
+
+.ms-Pivot-link:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:after {
+ background-color: #37006e;
+ }
+}
+
+.ms-Pivot-link:hover,
+.ms-Pivot-link:focus,
+.ms-Pivot-link:active {
+ color: #000000;
+ cursor: pointer;
+}
+
+.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:active + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-link:active {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:active {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:active {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link:active:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected {
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link.is-selected {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link.is-selected {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link.is-selected:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-dropdownIcon {
+ font-size: 16px;
+ position: relative;
+ top: 2px;
+}
+
+.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:after {
+ display: none;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs {
+ height: 40px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important;
+}
+
+.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 !important;
+ background-color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.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 !important;
+}
+
+@media (min-width: 640px) {
+ .ms-Pivot-link {
+ font-size: 14px;
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 14px;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+}
+
+.ms-ProgressIndicator-itemName {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ 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 {
+ position: absolute;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #600000;
+ }
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon {
+ color: #c8c8c8;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-closeButton {
+ display: block;
+ outline: transparent 1px solid;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #71afe5;
+ outline: transparent 1px solid;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ color: #000000;
+ height: 32px;
+ padding: 6px 3px 7px 10px;
+ width: 180px;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-SearchBox-field.hovering {
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-closeButton {
+ border: none;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 32px;
+ width: 32px;
+ background-color: #0078d7;
+ text-align: center;
+ display: none;
+ font-size: 17px;
+ color: #ffffff;
+ z-index: 10;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-left: 8px;
+ line-height: 32px;
+ color: #666666;
+}
+
+.ms-SearchBox-icon {
+ margin-right: 7px;
+ font-size: 17px;
+ color: #767676;
+}
+
+.ms-Spinner {
+ 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 {
+ position: relative;
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
+
+.ms-Table {
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table tr:hover,
+.ms-Table-row:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-Table tr.is-selected,
+.ms-Table-row.is-selected {
+ background-color: #c7e0f4;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck,
+.ms-Table-row.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:before,
+.ms-Table-row.is-selected .ms-Table-rowCheck:before {
+ display: none;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:after,
+.ms-Table-row.is-selected .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #ffffff;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table thead th,
+.ms-Table-head {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table thead td,
+.ms-Table thead th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table thead .ms-Table-rowCheck:after,
+.ms-Table-head .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck:before {
+ border: 1px solid #a6a6a6;
+ content: '';
+ display: block;
+ height: 14px;
+ left: 2px;
+ position: absolute;
+ top: 6px;
+ width: 14px;
+}
+
+@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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 8px;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder,
+.ms-TextField.is-disabled::-moz-placeholder,
+.ms-TextField.is-disabled:-moz-placeholder,
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder:after,
+.ms-TextField.is-required::-moz-placeholder:after,
+.ms-TextField.is-required:-moz-placeholder:after,
+.ms-TextField.is-required:-ms-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 10px 8px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field::-webkit-input-placeholder,
+.ms-TextField-field::-moz-placeholder,
+.ms-TextField-field:-moz-placeholder,
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #666666;
+ padding: 7px 0 7px 10px;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 12px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: bottom;
+ padding-left: 12px;
+ padding-bottom: 5px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 2px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.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: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+}
+
+.ms-Toggle .ms-Label {
+ position: relative;
+ padding: 0 0 0 62px;
+ font-size: 12px;
+}
+
+.ms-Toggle:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff !important;
+ border-color: #c8c8c8 !important;
+ pointer-events: none !important;
+ cursor: default !important;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field:before {
+ background-color: #c8c8c8 !important;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 12px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 57px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2.5px #c8c8c8 solid;
+ cursor: pointer;
+}
+
+.ms-Toggle-input {
+ position: absolute;
+ opacity: 0;
+ top: 0;
+}
+
+.ms-Toggle-input + .ms-Toggle-field {
+ background-color: #f4f4f4;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ left: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ right: auto;
+ border-right: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ right: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ left: auto;
+ border-left: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle-input:focus + .ms-Toggle-field,
+.ms-Toggle-input:hover + .ms-Toggle-field {
+ background-color: #eaeaea;
+}
+
+.ms-Toggle-input:focus:checked + .ms-Toggle-field,
+.ms-Toggle-input:hover:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+}
+
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field {
+ float: right;
+}
diff --git a/dist/css/fabric.components.min.css b/dist/css/fabric.components.min.css
new file mode 100644
index 000000000..646e5d007
--- /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 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;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{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Callout{z-index:100;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:10}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.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-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:105;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.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}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:10}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:10}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:105}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-DatePicker{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{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.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;line-height:40px;text-align:center;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:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.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-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:300;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:10}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.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-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;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,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{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-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-MessageBanner{overflow:hidden;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-MessageBanner{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;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid 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-expand{display:inline-block}.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{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:5}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.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;outline:transparent}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:200}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:300}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:10;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.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;float:left;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{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:305}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.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}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.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:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.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:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.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:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.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!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.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!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;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{position:absolute;height:2px;background-color:#0078d7}@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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:5}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:10}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676}.ms-Spinner{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;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.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{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}
\ No newline at end of file
diff --git a/dist/css/fabric.components.rtl.css b/dist/css/fabric.components.rtl.css
new file mode 100644
index 000000000..c97ec1e92
--- /dev/null
+++ b/dist/css/fabric.components.rtl.css
@@ -0,0 +1,6356 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+
+.ms-Breadcrumb {
+ margin: 23px 0 1px;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 17px;
+ color: #666666;
+ vertical-align: top;
+ margin: 10px 0;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+ margin-left: -4px;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 12px;
+ display: inline-block;
+ color: #0078d7;
+ margin-left: -4px;
+ padding: 12px 8px 3px;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ right: 0;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu:before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ top: -6px;
+ right: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: #ffffff;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: none;
+ 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 {
+ color: #333333;
+ font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 21px;
+ font-weight: 400;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media screen and (max-width:639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 14px;
+ margin-top: 7px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 8px;
+ padding-bottom: 3px;
+ }
+}
+
+@media screen and (max-width:479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin-top: 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 5px;
+ padding-bottom: 3px;
+ }
+}
+
+.ms-Button {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-right: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-description,
+.ms-Button-icon {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary.is-disabled,
+.ms-Button.ms-Button--primary:disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,
+.ms-Button.ms-Button--primary:disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:focus .ms-Button-label,
+.ms-Button.ms-Button--hero:hover .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,
+.ms-Button.ms-Button--hero:disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+ position: relative;
+ text-align: right;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: right;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-left: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-Button.ms-Button--command:focus .ms-Button-icon,
+.ms-Button.ms-Button--command:hover .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:focus .ms-Button-label,
+.ms-Button.ms-Button--command:hover .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,
+.ms-Button.ms-Button--command:disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label,
+.ms-Button.ms-Button--command:disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-right: 14px;
+}
+
+.ms-Callout {
+ z-index: 100;
+ margin: 16px auto;
+ position: relative;
+ width: 288px;
+}
+
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--arrowTop:before {
+ content: '';
+ position: absolute;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ height: 0;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowTop:before {
+ z-index: 0;
+ outline: 1px solid transparent;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+}
+
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowTop:after {
+ z-index: 10;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowRight:before {
+ top: 40px;
+ display: none;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowLeft:before {
+ border-top: 10px solid #ffffff;
+ border-left: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-right: 10px solid #ffffff;
+ right: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowRight:before {
+ border-top: 10px solid transparent;
+ border-left: 10px solid #ffffff;
+ border-bottom: 10px solid #ffffff;
+ border-right: 10px solid transparent;
+ left: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--arrowTop:before {
+ right: 0;
+ left: 0;
+ margin: 0 auto;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--arrowTop:before {
+ border-top: 10px solid #ffffff;
+ border-left: 10px solid #ffffff;
+ border-bottom: 10px solid transparent;
+ border-right: 10px solid transparent;
+ top: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowBottom:before {
+ border-top: 10px solid transparent;
+ border-left: 10px solid transparent;
+ border-bottom: 10px solid #ffffff;
+ border-right: 10px solid #ffffff;
+ bottom: -10px;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowTop:after,
+ .ms-Callout.ms-Callout--arrowTop:before {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ background-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowTop:after,
+ .ms-Callout.ms-Callout--arrowTop:before {
+ background-color: #ffffff;
+ }
+}
+
+.ms-Callout-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+}
+
+.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-inner {
+ height: 100%;
+ padding: 0 24px 20px;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding: 18px 24px 12px;
+}
+
+.ms-Callout-title {
+ font-size: 21px;
+}
+
+.ms-Callout-subText,
+.ms-Callout-title {
+ margin: 0;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-Callout-subText {
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-action,
+.ms-Callout-actions .ms-Link.ms-Link--hero {
+ position: relative;
+ right: -8px;
+}
+
+.ms-Callout-action {
+ top: 4px;
+ margin-right: 0!important;
+}
+
+.ms-Callout-action:focus .ms-Callout-actionIcon,
+.ms-Callout-action:hover .ms-Callout-actionIcon {
+ color: #0078d7;
+}
+
+.ms-Callout-button {
+ margin-left: 12px;
+}
+
+.ms-Callout.ms-Callout--close .ms-Callout-title {
+ margin-left: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before {
+ border-color: #0078d7;
+ background-color: transparent;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;
+ 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;
+ margin-bottom: -8px;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before {
+ right: 40px;
+ left: auto;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before {
+ top: calc('50% - 10px');
+}
+
+.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;
+}
+
+@media (min-width:480px) {
+ .ms-Callout {
+ width: 300px;
+ margin: 16px;
+ }
+
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowRight:before {
+ display: block;
+ }
+}
+
+.ms-ChoiceField {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-ChoiceField .ms-Label {
+ font-size: 14px;
+ padding: 0 26px 0 0;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field {
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #eaeaea;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #00ff00;
+ color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #600000;
+ color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField-input {
+ position: absolute;
+ opacity: 0;
+ top: 8px;
+}
+
+.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+}
+
+.ms-ChoiceField-field:after {
+ content: '';
+ display: inline-block;
+ border: 1px solid #c8c8c8;
+ width: 19px;
+ height: 19px;
+ cursor: pointer;
+ position: relative;
+ font-weight: 400;
+ right: -1px;
+ top: -1px;
+ border-radius: 50%;
+ position: absolute;
+}
+
+.ms-ChoiceField-field:hover:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ background-color: #666666;
+ border-color: #666666;
+ color: #666666;
+ border-radius: 50%;
+ content: '\00a0';
+ display: inline-block;
+ position: absolute;
+ top: 4px;
+ left: 0;
+ bottom: 0;
+ right: 4px;
+ width: 11px;
+ height: 11px;
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #ffffff;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #000000;
+ background-color: #000000;
+ }
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
+ background-color: #212121;
+ color: #212121;
+}
+
+.ms-ChoiceField-input[type=checkbox] + .ms-ChoiceField-field:after {
+ border-radius: 0;
+}
+
+.ms-ChoiceField-input[type=checkbox]:checked + .ms-ChoiceField-field:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: Office365Icons;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ background-color: transparent;
+ border-radius: 0;
+ font-size: 13px;
+ top: 3px;
+ right: 3px;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ChoiceField-input[type=checkbox]:checked + .ms-ChoiceField-field:before {
+ color: #ffffff;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ChoiceField-input[type=checkbox]:checked + .ms-ChoiceField-field:before {
+ color: #000000;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.ms-ChoiceFieldGroup {
+ margin-bottom: 4px;
+}
+
+.ms-CommandBar {
+ background-color: #eff6fc;
+ height: 40px;
+ white-space: nowrap;
+ padding-right: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ padding-right: 58px;
+}
+
+@media only screen and (min-width:1024px) {
+ .ms-CommandBar-mainArea {
+ padding-right: 24px;
+ }
+}
+
+.ms-CommandBar-sideCommands {
+ float: left;
+ text-align: left;
+ width: auto;
+ padding-left: 8px;
+}
+
+.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child {
+ margin-left: 0;
+}
+
+@media only screen and (min-width:640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ padding-left: 12px;
+ }
+}
+
+@media only screen and (min-width:1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-left: 16px;
+ }
+}
+
+.ms-CommandBarItem {
+ display: inline-block;
+ color: #0078d7;
+ height: 40px;
+ outline: none;
+ vertical-align: top;
+ margin-left: -4px;
+}
+
+.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-CommandBarItem {
+ border-right: 1px solid #000000;
+ border-left: 1px solid #000000;
+ height: 38px;
+ outline: none;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-CommandBarItem {
+ border-right: 1px solid #ffffff;
+ border-left: 1px solid #ffffff;
+ height: 38px;
+ outline: none;
+ }
+}
+
+.ms-CommandBarItem:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-CommandBarItem:hover {
+ border-right: 1px solid #ffffff;
+ border-left: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-CommandBarItem:hover {
+ border-right: 1px solid #000000;
+ border-left: 1px solid #000000;
+ }
+}
+
+@media only screen and (min-width:640px) {
+ .ms-CommandBarItem {
+ margin-left: 8px;
+ }
+
+ .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline;
+ }
+}
+
+.ms-CommandBarItem.is-hidden {
+ width: 0;
+ overflow: hidden;
+}
+
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText {
+ display: inline;
+}
+
+.ms-CommandBarItem-overflow {
+ display: none;
+}
+
+.ms-CommandBarItem-overflow.is-visible {
+ display: inline-block;
+}
+
+.ms-CommandBarItem-overflow .ms-Icon {
+ font-size: 14px;
+ color: #666666;
+}
+
+.ms-CommandBarItem-link {
+ line-height: 39px;
+ padding: 0 6px;
+ cursor: pointer;
+ height: 40px;
+ min-width: 20px;
+ text-align: center;
+ position: relative;
+ padding: 0 8px;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+}
+
+.ms-CommandBarItem-link:focus {
+ outline: none;
+}
+
+.ms-CommandBarItem-link:focus:before {
+ position: absolute;
+ right: 2px;
+ left: 2px;
+ top: 2px;
+ bottom: 2px;
+ border: 1px solid #a6a6a6;
+ content: '';
+}
+
+.ms-CommandBarItem-icon {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-CommandBarItem-chevronDown {
+ vertical-align: middle;
+ padding-bottom: 3px;
+ margin-top: 13px;
+ font-size: 1.1em;
+ line-height: 1em;
+ color: #666666;
+}
+
+.ms-CommandBarItem-chevronDown:before {
+ height: 10px;
+ line-height: 16px;
+}
+
+.ms-CommandBarSearch {
+ float: right;
+ width: 208px;
+ max-width: 208px;
+ background-color: #deecf9;
+ color: #333333;
+ height: 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-color: transparent;
+ transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ transition-property: width, background-color;
+}
+
+@media only screen and (max-width:1023px) {
+ .ms-CommandBarSearch {
+ overflow: hidden;
+ width: 50px;
+ position: absolute;
+ }
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-CommandBarSearch {
+ border-left: 1px solid #ffffff;
+ z-index: 10;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-CommandBarSearch {
+ border-left: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-CommandBarSearch:hover {
+ border-right: 1px solid #ffffff;
+ border-left: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-CommandBarSearch:hover {
+ border-right: 1px solid #000000;
+ border-left: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch .ms-Icon--search {
+ margin-right: 2px;
+ margin-top: 12px;
+ vertical-align: top;
+}
+
+.ms-CommandBarSearch-input {
+ height: 40px;
+ padding: 8px 0 8px 8px;
+ border: none;
+ border-right: 42px solid transparent;
+ background-color: transparent;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+ cursor: pointer;
+ font-size: 14px;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-CommandBarSearch-input {
+ border-right: 40px solid #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-CommandBarSearch-input {
+ border-right: 40px solid #ffffff;
+ }
+}
+
+.ms-CommandBarSearch-input::-ms-clear {
+ display: none;
+}
+
+.ms-CommandBarSearch-input::-webkit-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::-moz-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:-ms-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::placeholder,
+.ms-CommandBarSearch-input:placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper {
+ display: block;
+ padding-right: 15px;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper,
+.ms-CommandBarSearch-iconSearchWrapper {
+ top: 0;
+ padding-right: 8px;
+ padding-left: 8px;
+}
+
+.ms-CommandBarSearch-iconClearWrapper {
+ display: none;
+ top: 1px;
+ left: 0;
+ z-index: 10;
+}
+
+.ms-CommandBarSearch.is-active {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+@media only screen and (max-width:1023px) {
+ .ms-CommandBarSearch.is-active {
+ width: 100%;
+ position: absolute;
+ z-index: 10;
+ max-width: 100%;
+ }
+}
+
+.ms-CommandBarSearch.is-active:hover {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ cursor: text;
+ padding-left: 40px;
+ border-right-width: 8px;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
+ border-right-width: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ padding-left: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch-iconWrapper {
+ height: 40px;
+ line-height: 40px;
+ cursor: pointer;
+ padding: 0 8px;
+ position: absolute;
+ width: 34px;
+ text-align: center;
+}
+
+.ms-CommandBarSearch .ms-Icon:before {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-ContextualMenu {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus,
+.ms-ContextualMenu-link:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ right: 178px;
+}
+
+.ms-ContextualMenu-caretRight,
+.ms-ContextualMenu-subMenuIcon {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ left: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: Office365Icons;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ right: 10px;
+}
+
+.ms-DatePicker {
+ 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 {
+ -webkit-animation-name: fadeIn,slideDownIn10;
+ animation-name: fadeIn,slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ -webkit-animation-fill-mode: both;
+ 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-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;
+ 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-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 15px;
+ font-weight: 400;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #c7e0f4;
+}
+
+.ms-DatePicker-day--disabled:before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.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;
+ line-height: 40px;
+ text-align: center;
+ 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: 400;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ 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-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ 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-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ 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-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-left: 1px solid #eaeaea;
+ width: 220px;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-dayPicker {
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .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-month,
+ .ms-DatePicker-year {
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 12px;
+ }
+
+ .ms-DatePicker-nextDecade,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-prevYear {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+ .ms-DatePicker-currentDecade,
+ .ms-DatePicker-currentYear {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 0 10px 10px;
+ }
+
+ .ms-DatePicker-monthOption:hover,
+ .ms-DatePicker-yearOption:hover {
+ outline: 1px solid transparent;
+ }
+
+ .ms-DatePicker-goToday {
+ box-sizing: border-box;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ left: 10px;
+ text-align: left;
+ top: 199px;
+ width: 210px;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+ }
+}
+
+@media (max-width:459px) {
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker {
+ display: block;
+ }
+}
+
+.ms-Dialog {
+ background-color: transparent;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ right: 0;
+ z-index: 300;
+ display: block;
+ font-size: 0;
+ line-height: 100vh;
+ text-align: center;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+}
+
+.ms-Dialog:before {
+ vertical-align: middle;
+ display: inline-block;
+ content: '';
+ height: 100%;
+ width: 0;
+}
+
+.ms-Dialog .ms-Button.ms-Button--compound {
+ display: block;
+ margin-right: 0;
+}
+
+.ms-Dialog .ms-Overlay {
+ z-index: 0;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dialog .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Dialog-main {
+ vertical-align: middle;
+ display: inline-block;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ background-color: #ffffff;
+ box-sizing: border-box;
+ line-height: 1.35;
+ margin: auto;
+ width: 288px;
+ position: relative;
+ text-align: right;
+ outline: 3px solid transparent;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close {
+ display: none;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ top: 12px;
+ left: 12px;
+ padding: 8px;
+ z-index: 10;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Dialog-inner {
+ height: 100%;
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog-header {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 20px 15px;
+}
+
+.ms-Dialog-title {
+ margin: 0;
+ font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 21px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+ width: 100%;
+}
+
+.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog-subText {
+ margin: 0 0 20px;
+ padding-top: 8px;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Dialog-actions {
+ position: relative;
+ width: 100%;
+ min-height: 24px;
+ line-height: 24px;
+ margin: 20px 0 0;
+ font-size: 0;
+}
+
+.ms-Dialog-actions .ms-Button {
+ line-height: normal;
+}
+
+.ms-Dialog-actionsRight {
+ text-align: left;
+ font-size: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action:first-child {
+ margin: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action {
+ margin: 0 16px 0 0;
+}
+
+.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-button--close {
+ display: block;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner {
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header {
+ background-color: #0078d7;
+ padding: 26px 20px 28px;
+ margin-bottom: 8px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ font-size: 28px;
+ font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;
+ color: #ffffff;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText {
+ font-size: 14px;
+}
+
+@media (min-width:480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
+
+.ms-Dropdown {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ 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,
+.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items {
+ display: block;
+ position: fixed;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #666666;
+ font-size: 17px;
+ position: absolute;
+ left: 9px;
+ bottom: 5px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ padding: 0;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ line-height: 30px;
+ padding: 0 10px 0 32px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-items,
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ box-shadow: none;
+}
+
+.ms-Dropdown-items {
+ padding: 0;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ max-width: 268px;
+ z-index: 400;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ overflow-y: scroll;
+}
+
+.ms-Dropdown-items:before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 38px;
+ padding: 0 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:first-child,
+.ms-Dropdown-item:last-child {
+ height: 39px;
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+@media (min-width:480px) {
+ .ms-Dropdown-items {
+ top: auto;
+ left: auto;
+ bottom: auto;
+ right: auto;
+ max-width: 100%;
+ }
+
+ .ms-Dropdown.is-open .ms-Dropdown-items,
+ .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items {
+ position: absolute;
+ }
+}
+
+.ms-Facepile {
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ top: 40px;
+ height: 200px;
+}
+
+.ms-Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn {
+ 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-itemBtn .ms-Persona-details,
+.ms-Facepile-itemBtn .ms-Persona-presence {
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover {
+ background-color: #005a9e;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover {
+ color: #212121;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:focus,
+.ms-Link:hover {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-List {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width:480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: right;
+ border-width: 0 0 1px 1px;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px;
+ }
+}
+
+.ms-ListItem {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *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-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 21px;
+ padding-left: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-left: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-left: 30px;
+}
+
+.ms-ListItem-metaText,
+.ms-ListItem-tertiaryText {
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-size: 11px;
+ position: absolute;
+ left: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: right;
+ height: 70px;
+ margin-right: -8px;
+ margin-left: 10px;
+ width: 70px;
+}
+
+.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-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-left: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ right: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ right: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-right: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: Office365Icons;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ right: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: Office365Icons;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ right: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: right;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-left: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,
+.ms-MessageBanner {
+ overflow: hidden;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-MessageBanner {
+ 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;
+ -webkit-animation-name: fadeIn,slideDownIn20;
+ animation-name: fadeIn,slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ -webkit-animation-name: fadeOut,slideUpOut20;
+ animation-name: fadeOut,slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-close,
+.ms-MessageBanner-expand {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-close:focus,
+.ms-MessageBanner-expand:focus {
+ outline: 1px solid 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-expand {
+ display: inline-block;
+ }
+
+ .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 {
+ padding: 0;
+ margin-right: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
+
+.ms-NavBar {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ height: 40px;
+ padding: 0 10px;
+ width: 100%;
+ outline: 1px solid transparent;
+}
+
+.ms-NavBar .ms-Overlay {
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ z-index: 0;
+}
+
+.ms-NavBar-openMenu {
+ font-size: 20px;
+ height: 40px;
+ line-height: 40px;
+ position: absolute;
+ left: 27px;
+ text-align: center;
+ width: 40px;
+ cursor: pointer;
+}
+
+.ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item {
+ box-sizing: border-box;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 17px;
+ padding-right: 20px;
+ position: relative;
+}
+
+.ms-NavBar-item:hover {
+ cursor: pointer;
+ background-color: #deecf9;
+ color: #000000;
+}
+
+.ms-NavBar-item:hover .ms-Icon {
+ color: #333333;
+}
+
+.ms-NavBar-item:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.is-selected {
+ font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-NavBar-item.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-NavBar-item.is-disabled:hover {
+ cursor: default;
+ border: none;
+}
+
+.ms-NavBar-link {
+ color: #333333;
+ text-decoration: none;
+}
+
+.ms-NavBar-link:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after {
+ color: #212121;
+}
+
+.ms-NavBar-chevronDown {
+ color: #666666;
+ font-size: 22px;
+ position: absolute;
+ top: 10px;
+ left: 20px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search {
+ position: relative;
+ width: 30px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: Office365Icons;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1;
+ speak: none;
+ color: #666666;
+ content: '\e039';
+ font-size: 21px;
+ line-height: 40px;
+ position: absolute;
+ left: 5px;
+ top: 0;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search .ms-TextField {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open {
+ width: 200px;
+ padding-left: 40px;
+ border: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField {
+ display: block;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field {
+ border: none;
+ background-color: transparent;
+}
+
+@media (max-width:479px) {
+ .ms-NavBar.is-open .ms-NavBar-items {
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ background-color: #ffffff;
+ bottom: 0;
+ display: block;
+ right: 50px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+ outline: 1px solid transparent;
+ z-index: 5;
+ }
+
+ .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu {
+ position: relative;
+ }
+}
+
+@media (min-width:320px) and (max-width:479px) {
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected {
+ height: inherit;
+ background-color: transparent;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown {
+ -webkit-transform: scaleY(-1);
+ transform: scaleY(-1);
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu {
+ position: static;
+ border: none;
+ box-shadow: none;
+ width: auto;
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link {
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 17px;
+ }
+
+ .ms-NavBar.is-open .ms-Overlay {
+ display: block;
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media (min-width:480px) {
+ .ms-NavBar-openMenu {
+ display: none;
+ }
+
+ .ms-NavBar-items {
+ display: block;
+ list-style: none;
+ margin: 0 0 0 7px;
+ padding: 0;
+ }
+
+ .ms-NavBar-chevronDown {
+ top: 3px;
+ left: 0;
+ float: none;
+ position: relative;
+ }
+
+ .ms-NavBar-item {
+ float: right;
+ margin-left: 18px;
+ font-size: 14px;
+ padding: 0;
+ }
+
+ .ms-NavBar-item:hover {
+ border-bottom: 2px solid #0078d7;
+ background-color: transparent;
+ }
+
+ .ms-NavBar-item.is-selected {
+ font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+ border-bottom: 2px solid #0078d7;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu:after {
+ position: relative;
+ top: 3px;
+ padding-top: 0;
+ left: auto;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--right {
+ float: left;
+ margin: 0;
+ }
+}
+
+.ms-OrgChart {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.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;
+ outline: transparent;
+}
+
+.ms-Overlay {
+ background-color: hsla(0,0%,100%,0.4);
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0,0,0,0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Panel {
+ bottom: 0;
+ right: 0;
+ position: fixed;
+ left: 0;
+ top: 0;
+ z-index: 300;
+}
+
+.ms-Panel,
+.ms-Panel .ms-Overlay {
+ display: none;
+ pointer-events: none;
+}
+
+.ms-Panel .ms-Overlay {
+ z-index: 0;
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+.ms-Panel-main {
+ background-color: #ffffff;
+ bottom: 0;
+ position: fixed;
+ left: 0;
+ top: 0;
+ display: none;
+ z-index: 10;
+ width: 100%;
+}
+
+@media (min-width:480px) {
+ .ms-Panel-main {
+ border-right: 1px solid #eaeaea;
+ border-left: 1px solid #eaeaea;
+ pointer-events: auto;
+ width: 340px;
+ box-shadow: 30px 0 30px -30px rgba(0,0,0,0.2);
+ right: auto;
+ }
+}
+
+.ms-Panel-main .ms-CommandBar {
+ outline: 1px solid transparent;
+}
+
+@media (min-width:480px) {
+ .ms-Panel-main .ms-CommandBar {
+ display: none;
+ }
+}
+
+.ms-Panel-main .ms-CommandBarItem {
+ margin-right: 8px;
+}
+
+.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline-block;
+}
+
+.ms-Panel-main .ms-CommandBar-mainArea {
+ padding-right: 0;
+ margin-right: -1px;
+ overflow: hidden;
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main {
+ border-right: 1px solid #eaeaea;
+ border-left: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: 30px 0 30px -30px rgba(0,0,0,0.2);
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn,slideLeftIn40;
+ animation-name: fadeIn,slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut,slideRightOut40;
+ animation-name: fadeOut,slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-main {
+ left: auto;
+ right: 0;
+ border-right: 1px solid #eaeaea;
+ border-left: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: 30px 0 30px 30px rgba(0,0,0,0.2);
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-commands,
+.ms-Panel.ms-Panel--left .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn,slideLeftIn40;
+ animation-name: fadeIn,slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut,slideRightOut40;
+ animation-name: fadeOut,slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn,slideRightIn40;
+ animation-name: fadeIn,slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut,slideLeftOut40;
+ animation-name: fadeOut,slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 100%;
+}
+
+@media (min-width:480px) {
+ .ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 340px;
+ }
+}
+
+@media (min-width:640px) {
+ .ms-Panel.ms-Panel--lg .ms-Panel-main,
+ .ms-Panel.ms-Panel--md .ms-Panel-main,
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ right: 48px;
+ width: auto;
+ }
+}
+
+@media (min-width:1024px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main {
+ right: auto;
+ width: 643px;
+ }
+}
+
+@media (min-width:1366px) {
+ .ms-Panel.ms-Panel--lg .ms-Panel-main {
+ right: 428px;
+ }
+}
+
+@media (min-width:1366px) {
+ .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main {
+ right: auto;
+ width: 940px;
+ }
+}
+
+@media (min-width:1366px) {
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ right: 176px;
+ }
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Panel-main {
+ opacity: 1;
+}
+
+.ms-Panel.is-open .ms-Overlay,
+.ms-Panel.is-open .ms-Panel-main {
+ pointer-events: auto;
+ display: block;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Panel.is-open .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ display: none;
+}
+
+@media (min-width:480px) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn,slideLeftIn40;
+ animation-name: fadeIn,slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut,slideRightOut40;
+ animation-name: fadeOut,slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn,slideRightIn40;
+ animation-name: fadeIn,slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut,slideLeftOut40;
+ animation-name: fadeOut,slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open .ms-Overlay {
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media screen and (min-width:480px) and (-ms-high-contrast:active) {
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
+ opacity: 0;
+ -webkit-animation-name: none;
+ animation-name: none;
+ }
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ left: 8px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 14px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-contentInner {
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+}
+
+@media (min-width:640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width:1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width:1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+@media (min-width:480px) {
+ .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar {
+ display: block;
+ }
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover {
+ background-color: #d7eaf9;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active {
+ background-color: #b5d8f4;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon {
+ color: #07288b;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
+ color: #000000;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child {
+ background-color: #0078d7;
+ box-shadow: inset 0 1px 0 0 #2488d8;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
+ padding-right: 12px;
+ padding-left: 12px;
+ cursor: pointer;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover {
+ background-color: #005a9e;
+ box-shadow: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-name: fadeIn,slideDownIn20;
+ animation-name: fadeIn,slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-delay: 0.25s;
+ animation-delay: 0.25s;
+}
+
+@media (min-width:480px) {
+ .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-delay: 0.5s;
+ animation-delay: 0.5s;
+ }
+}
+
+.ms-PeoplePicker {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ *zoom: 1;
+ border: 1px solid #c8c8c8;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchBox:after,
+.ms-PeoplePicker-searchBox:before {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-PeoplePicker-searchBox:after {
+ clear: both;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: right;
+ height: 38px;
+ outline: none;
+ padding-right: 8px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: right;
+ margin: 4px;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-persona .ms-Persona {
+ background-color: #f4f4f4;
+ float: right;
+ min-height: 30px;
+}
+
+.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;
+ float: right;
+ 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 {
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: 305;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 12px;
+ padding: 17px 12px 0 0;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+.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;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-result .ms-Persona:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-result .ms-Persona-details {
+ width: 100%;
+}
+
+.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: 34px;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+}
+
+@media (min-width:480px) {
+ .ms-PeoplePicker-resultAction {
+ height: 48px;
+ }
+}
+
+.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: #71afe5;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid #eaeaea;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ right: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
+ background-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
+ color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching:hover {
+ background-color: transparent;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-right: 70px;
+ text-align: right;
+}
+
+.ms-PeoplePicker-searchMoreBtn:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-searchMoreBtn:active,
+.ms-PeoplePicker-searchMoreBtn:focus {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-right: 50px;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 70px;
+}
+
+.ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #333333;
+ font-size: 16px;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
+ background-color: inherit;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
+ color: #666666;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
+ margin-top: -8px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+ height: 49px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ right: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ font-size: 17px;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 45px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
+ height: 28px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width:479px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ right: 19px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-right: 8px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width:480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width:480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn {
+ height: 42px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
+ padding-right: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
+ top: 16px;
+ right: 14px;
+ height: 20px;
+ width: 20px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-peopleListHeader,
+.ms-PeoplePicker-selectedHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ 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 {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-left: 10px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ right: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-optionalText,
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText {
+ display: block;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-optionalText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText {
+ color: #666666;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ right: 0;
+ bottom: auto;
+ left: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-image,
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ right: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-right: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ right: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-image,
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ right: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-image,
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea {
+ 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;
+}
+
+.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--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ right: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-image,
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea {
+ 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: 20px;
+ width: 20px;
+ right: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-right: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ right: 0;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
+.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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(180deg,#c72d25 0,#c72d25 48%,#ffffff 0,#ffffff 52%,#c72d25 0,#c72d25);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ -webkit-animation-name: fadeIn,slideUpIn10;
+ animation-name: fadeIn,slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ right: 0;
+ position: fixed;
+ left: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 20px 12px 0;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ right: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ right: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-action:hover,
+.ms-PersonaCard-overflow:hover {
+ color: #212121;
+}
+
+.is-active.ms-PersonaCard-overflow,
+.ms-PersonaCard-action.is-active,
+.ms-PersonaCard-action:active,
+.ms-PersonaCard-overflow:active {
+ color: #0078d7;
+}
+
+.is-active.ms-PersonaCard-overflow:after,
+.ms-PersonaCard-action.is-active:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-left: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ right: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: left;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ left: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: right;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-right: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-right: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-right: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-right: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-right: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailMail .detail-4,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ left: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: Office365Icons;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ right: 0;
+}
+
+@media (min-width:480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
+
+.ms-Pivot {
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 40px;
+ list-style-type: none;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+
+.ms-Pivot,
+.ms-Pivot-link {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-Pivot-link {
+ display: inline-block;
+ position: relative;
+ font-size: 15px;
+ line-height: 40px;
+ margin-left: 8px;
+}
+
+.ms-Pivot-link:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ display: none;
+ bottom: 0;
+ right: 0;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Pivot-link:after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Pivot-link:after {
+ background-color: #37006e;
+ }
+}
+
+.ms-Pivot-link:active,
+.ms-Pivot-link:focus,
+.ms-Pivot-link:hover {
+ color: #000000;
+ cursor: pointer;
+}
+
+.ms-Pivot-link:active + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-link:active {
+ font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Pivot-link:active {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Pivot-link:active {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link:active:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected {
+ color: #000000;
+ font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Pivot-link.is-selected {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Pivot-link.is-selected {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link.is-selected:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-dropdownIcon {
+ font-size: 16px;
+ position: relative;
+ top: 2px;
+}
+
+.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:after {
+ display: none;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active {
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs {
+ height: 40px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-left: -2px;
+ padding: 0 10px;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important;
+}
+
+.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!important;
+ background-color: #0078d7;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.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!important;
+}
+
+@media (min-width:640px) {
+ .ms-Pivot-link,
+ .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 14px;
+ }
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;
+ }
+}
+
+.ms-ProgressIndicator-itemName {
+ color: #333333;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription,
+.ms-ProgressIndicator-itemName {
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #333333;
+ 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 {
+ position: absolute;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@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 {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #600000;
+ }
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon {
+ color: #c8c8c8;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-closeButton {
+ display: block;
+ outline: 1px solid transparent;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #71afe5;
+ outline: 1px solid transparent;
+ border-radius: 0;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ color: #000000;
+ height: 32px;
+ padding: 6px 10px 7px 3px;
+ width: 180px;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-SearchBox-field.hovering {
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 10px 7px 32px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-closeButton {
+ border: none;
+ cursor: pointer;
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 32px;
+ width: 32px;
+ background-color: #0078d7;
+ text-align: center;
+ display: none;
+ font-size: 17px;
+ color: #ffffff;
+ z-index: 10;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding-right: 8px;
+ line-height: 32px;
+ color: #666666;
+}
+
+.ms-SearchBox-icon {
+ margin-left: 7px;
+ font-size: 17px;
+ color: #767676;
+}
+
+.ms-Spinner {
+ 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;
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 12px;
+ font-weight: 400;
+ color: #0078d7;
+ right: 28px;
+ top: 2px;
+}
+
+.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-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table-row:hover,
+.ms-Table tr:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-Table-row.is-selected,
+.ms-Table tr.is-selected {
+ background-color: #c7e0f4;
+}
+
+.ms-Table-row.is-selected .ms-Table-rowCheck,
+.ms-Table tr.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table-row.is-selected .ms-Table-rowCheck:before,
+.ms-Table tr.is-selected .ms-Table-rowCheck:before {
+ display: none;
+}
+
+.ms-Table-row.is-selected .ms-Table-rowCheck:after,
+.ms-Table tr.is-selected .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: Office365Icons;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #ffffff;
+ font-size: 12px;
+ position: absolute;
+ right: 4px;
+ top: 9px;
+}
+
+.ms-Table-cell,
+.ms-Table td,
+.ms-Table th {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table-head,
+.ms-Table thead th {
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table thead td,
+.ms-Table thead th {
+ font-weight: 400;
+ text-align: right;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table-head .ms-Table-rowCheck:after,
+.ms-Table thead .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: Office365Icons;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ right: 4px;
+ top: 9px;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck:before {
+ border: 1px solid #a6a6a6;
+ content: '';
+ display: block;
+ height: 14px;
+ right: 2px;
+ position: absolute;
+ top: 6px;
+ width: 14px;
+}
+
+@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 {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 8px;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled:-moz-placeholder,
+.ms-TextField.is-disabled:-ms-input-placeholder,
+.ms-TextField.is-disabled::-moz-placeholder,
+.ms-TextField.is-disabled::-webkit-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required:-moz-placeholder:after,
+.ms-TextField.is-required:-ms-input-placeholder:after,
+.ms-TextField.is-required::-moz-placeholder:after,
+.ms-TextField.is-required::-webkit-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 12px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 10px 8px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-TextField-field:focus,
+ .ms-TextField-field:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-TextField-field:focus,
+ .ms-TextField-field:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field:-moz-placeholder,
+.ms-TextField-field:-ms-input-placeholder,
+.ms-TextField-field::-moz-placeholder,
+.ms-TextField-field::-webkit-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 12px;
+ color: #666666;
+ padding: 7px 10px 7px 0;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled,
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 12px;
+ margin-left: 8px;
+ display: table-cell;
+ vertical-align: bottom;
+ padding-right: 12px;
+ padding-bottom: 5px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: right;
+ display: table-cell;
+ text-align: right;
+ padding-top: 8px;
+ padding-bottom: 2px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.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 {
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label,
+.ms-TextField.ms-TextField--multiline .ms-TextField-field {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ font-size: 12px;
+ font-weight: 400;
+}
+
+.ms-Label {
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle {
+ color: #333333;
+ font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;
+ 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;
+ padding: 0 62px 0 0;
+ font-size: 12px;
+}
+
+.ms-Toggle:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff!important;
+ border-color: #c8c8c8!important;
+ pointer-events: none!important;
+ cursor: default!important;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field:before {
+ background-color: #c8c8c8!important;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 12px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 57px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2.5px solid #c8c8c8;
+ cursor: pointer;
+}
+
+.ms-Toggle-input {
+ position: absolute;
+ opacity: 0;
+ top: 0;
+}
+
+.ms-Toggle-input + .ms-Toggle-field {
+ background-color: #f4f4f4;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ right: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ left: auto;
+ border-left: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ left: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ right: auto;
+ border-right: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle-input:focus + .ms-Toggle-field,
+.ms-Toggle-input:hover + .ms-Toggle-field {
+ background-color: #eaeaea;
+}
+
+.ms-Toggle-input:focus:checked + .ms-Toggle-field,
+.ms-Toggle-input:hover:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+}
+
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field {
+ float: left;
+}
diff --git a/dist/css/fabric.components.rtl.min.css b/dist/css/fabric.components.rtl.min.css
new file mode 100644
index 000000000..1e11a8631
--- /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 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-left:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-left:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;right:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;right:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;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{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-right:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:right;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:right;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-left:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-right:14px}.ms-Callout{z-index:100;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:10}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-left:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff;right:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-left:10px solid #fff;border-bottom:10px solid #fff;border-right:10px solid transparent;left:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{right:0;left:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-left:10px solid #fff;border-bottom:10px solid transparent;border-right:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-left:10px solid transparent;border-bottom:10px solid #fff;border-right:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.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-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:105;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;right:-8px}.ms-Callout-action{top:4px;margin-right:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-left:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-left:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{right:40px;left:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.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}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 26px 0 0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;right:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;left:0;bottom:0;right:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;right:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-right:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-right:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-right:24px}}.ms-CommandBar-sideCommands{float:left;text-align:left;width:auto;padding-left:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-left:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-left:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-left:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-left:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-right:1px solid #000;border-left:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-right:1px solid #fff;border-left:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-right:1px solid #fff;border-left:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-right:1px solid #000;border-left:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-left:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;right:2px;left:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:right;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-left:1px solid #fff;z-index:10}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-left:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-right:1px solid #fff;border-left:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-right:1px solid #000;border-left:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-right:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 0 8px 8px;border:none;border-right:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-right:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-right:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-right:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-right:8px;padding-left:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;left:0;z-index:10}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-left:40px;border-right-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-right-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-left:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:105}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;right:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;left:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;right:10px}.ms-DatePicker{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{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.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;line-height:40px;text-align:center;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:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-left:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.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-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 0 10px 10px}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;left:10px;text-align:left;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;right:0;z-index:300;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-right:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:right;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;left:12px;padding:8px;z-index:10}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:left;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 16px 0 0}.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-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;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,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;left:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 10px 0 32px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;left:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;right:0;left:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;left:auto;bottom:auto;right:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{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-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:right;border-width:0 0 1px 1px}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-left:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-left:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-left:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;left:30px;top:39px}.ms-ListItem-image{float:right;height:70px;margin-right:-8px;margin-left:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-left:10px solid transparent;border-top:10px solid #0078d7;right:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;right:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-right:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;right:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;right:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:right;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-left:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-MessageBanner{overflow:hidden;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-MessageBanner{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;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid 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-expand{display:inline-block}.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{padding:0;margin-right:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;left:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-right:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;left:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;left:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-left:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;right:50px;margin:0;padding:0;position:absolute;left:0;top:0;outline:1px solid transparent;z-index:5}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 0 0 7px;padding:0}.ms-NavBar-chevronDown{top:3px;left:0;float:none;position:relative}.ms-NavBar-item{float:right;margin-left:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;left:auto}.ms-NavBar-item.ms-NavBar-item--right{float:left;margin:0}}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.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;outline:transparent}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;right:0;left:0;top:0;z-index:200}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{bottom:0;right:0;position:fixed;left:0;top:0;z-index:300}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;left:0;top:0;display:none;z-index:10;width:100%}@media (min-width:480px){.ms-Panel-main{border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2);right:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-right:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-right:0;margin-right:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;width:272px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{left:auto;right:0;border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;width:272px;box-shadow:30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{right:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{right:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{right:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{right:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{right:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;left:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;right:0;left:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-right:12px;padding-left:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:right;height:38px;outline:none;padding-right:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:right;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:right;min-height:30px}.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;float:right;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{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:305}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 12px 0 0;text-transform:uppercase;height:40px}.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}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.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:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;left:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.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:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;right:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-right:70px;text-align:right}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-right:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;right:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;right:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{right:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-right:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-right:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;right:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-left:10px;position:absolute;top:0;right:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;right:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;right:0;bottom:auto;left:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{right:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-right:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;right:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;right:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;right:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;right:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-right:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;right:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;right:0;position:fixed;left:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 20px 12px 0}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;right:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;right:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-left:0;border-bottom:0;bottom:-4px;right:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:left;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;left:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:right;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-right:0}.ms-PersonaCard-detailPhone{margin-right:-100%}.ms-PersonaCard-detailVideo{margin-right:-200%}.ms-PersonaCard-detailMail{margin-right:-300%}.ms-PersonaCard-detailOrg{margin-right:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;left:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{right:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-left:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;right:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.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:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-left:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.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!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.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!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;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{position:absolute;height:2px;background-color:#0078d7}@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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 10px 7px 3px;width:180px;background-color:transparent;z-index:5}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 10px 7px 32px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;left:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:10}.ms-SearchBox-label{position:absolute;top:0;right:0;padding-right:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-left:7px;font-size:17px;color:#767676}.ms-Spinner{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;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;right:28px;top:2px}.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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;right:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:right;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;right:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;right:2px;position:absolute;top:6px;width:14px}@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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 10px 7px 0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-left:8px;display:table-cell;vertical-align:bottom;padding-right:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:right;display:table-cell;text-align:right;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.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{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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;padding:0 62px 0 0;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:left}
\ No newline at end of file
diff --git a/dist/css/fabric.css b/dist/css/fabric.css
new file mode 100644
index 000000000..ac901a745
--- /dev/null
+++ b/dist/css/fabric.css
@@ -0,0 +1,5976 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+.ms-u-borderBox,
+.ms-u-borderBox:before,
+.ms-u-borderBox:after {
+ box-sizing: border-box;
+}
+
+.ms-u-clearfix {
+ *zoom: 1;
+}
+
+.ms-u-clearfix:before,
+.ms-u-clearfix:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-u-clearfix:after {
+ clear: both;
+}
+
+.ms-u-normalize {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.ms-bgColor-themeDark,
+.ms-bgColor-themeDark--hover:hover {
+ background-color: #005a9e;
+}
+
+.ms-bgColor-themeDarkAlt,
+.ms-bgColor-themeDarkAlt--hover:hover {
+ background-color: #106ebe;
+}
+
+.ms-bgColor-themeDarker,
+.ms-bgColor-themeDarker--hover:hover {
+ background-color: #004578;
+}
+
+.ms-bgColor-themePrimary,
+.ms-bgColor-themePrimary--hover:hover {
+ background-color: #0078d7;
+}
+
+.ms-bgColor-themeSecondary,
+.ms-bgColor-themeSecondary--hover:hover {
+ background-color: #2b88d8;
+}
+
+.ms-bgColor-themeTertiary,
+.ms-bgColor-themeTertiary--hover:hover {
+ background-color: #71afe5;
+}
+
+.ms-bgColor-themeLight,
+.ms-bgColor-themeLight--hover:hover {
+ background-color: #c7e0f4;
+}
+
+.ms-bgColor-themeLighter,
+.ms-bgColor-themeLighter--hover:hover {
+ background-color: #deecf9;
+}
+
+.ms-bgColor-themeLighterAlt,
+.ms-bgColor-themeLighterAlt--hover:hover {
+ background-color: #eff6fc;
+}
+
+.ms-bgColor-black,
+.ms-bgColor-black--hover:hover {
+ background-color: #000000;
+}
+
+.ms-bgColor-neutralDark,
+.ms-bgColor-neutralDark--hover:hover {
+ background-color: #212121;
+}
+
+.ms-bgColor-neutralPrimary,
+.ms-bgColor-neutralPrimary--hover:hover {
+ background-color: #333333;
+}
+
+.ms-bgColor-neutralSecondary,
+.ms-bgColor-neutralSecondary--hover:hover {
+ background-color: #666666;
+}
+
+.ms-bgColor-neutralSecondaryAlt,
+.ms-bgColor-neutralSecondaryAlt--hover:hover {
+ background-color: #767676;
+}
+
+.ms-bgColor-neutralTertiary,
+.ms-bgColor-neutralTertiary--hover:hover {
+ background-color: #a6a6a6;
+}
+
+.ms-bgColor-neutralTertiaryAlt,
+.ms-bgColor-neutralTertiaryAlt--hover:hover {
+ background-color: #c8c8c8;
+}
+
+.ms-bgColor-neutralLight,
+.ms-bgColor-neutralLight--hover:hover {
+ background-color: #eaeaea;
+}
+
+.ms-bgColor-neutralLighter,
+.ms-bgColor-neutralLighter--hover:hover {
+ background-color: #f4f4f4;
+}
+
+.ms-bgColor-neutralLighterAlt,
+.ms-bgColor-neutralLighterAlt--hover:hover {
+ background-color: #f8f8f8;
+}
+
+.ms-bgColor-white,
+.ms-bgColor-white--hover:hover {
+ background-color: #ffffff;
+}
+
+.ms-bgColor-yellow {
+ background-color: #ffb900;
+}
+
+.ms-bgColor-yellowLight {
+ background-color: #fff100;
+}
+
+.ms-bgColor-orange {
+ background-color: #d83b01;
+}
+
+.ms-bgColor-orangeLight {
+ background-color: #ea4300;
+}
+
+.ms-bgColor-orangeLighter {
+ background-color: #ff8c00;
+}
+
+.ms-bgColor-redDark {
+ background-color: #a80000;
+}
+
+.ms-bgColor-red {
+ background-color: #e81123;
+}
+
+.ms-bgColor-magentaDark {
+ background-color: #5c005c;
+}
+
+.ms-bgColor-magenta {
+ background-color: #b4009e;
+}
+
+.ms-bgColor-magentaLight {
+ background-color: #e3008c;
+}
+
+.ms-bgColor-purpleDark {
+ background-color: #32145a;
+}
+
+.ms-bgColor-purple {
+ background-color: #5c2d91;
+}
+
+.ms-bgColor-purpleLight {
+ background-color: #b4a0ff;
+}
+
+.ms-bgColor-blueDark {
+ background-color: #002050;
+}
+
+.ms-bgColor-blueMid {
+ background-color: #00188f;
+}
+
+.ms-bgColor-blue {
+ background-color: #0078d7;
+}
+
+.ms-bgColor-blueLight {
+ background-color: #00bcf2;
+}
+
+.ms-bgColor-tealDark {
+ background-color: #004b50;
+}
+
+.ms-bgColor-teal {
+ background-color: #008272;
+}
+
+.ms-bgColor-tealLight {
+ background-color: #00b294;
+}
+
+.ms-bgColor-greenDark {
+ background-color: #004b1c;
+}
+
+.ms-bgColor-green {
+ background-color: #107c10;
+}
+
+.ms-bgColor-greenLight {
+ background-color: #bad80a;
+}
+
+.ms-bgColor-info {
+ background-color: #f4f4f4;
+}
+
+.ms-bgColor-success {
+ background-color: #dff6dd;
+}
+
+.ms-bgColor-alert {
+ background-color: #f4f4f4;
+}
+
+.ms-bgColor-error {
+ background-color: #fde7e9;
+}
+
+.ms-borderColor-themeDark,
+.ms-borderColor-themeDark--hover:hover {
+ border-color: #005a9e;
+}
+
+.ms-borderColor-themeDarkAlt,
+.ms-borderColor-themeDarkAlt--hover:hover {
+ border-color: #106ebe;
+}
+
+.ms-borderColor-themeDarker,
+.ms-borderColor-themeDarker--hover:hover {
+ border-color: #004578;
+}
+
+.ms-borderColor-themePrimary,
+.ms-borderColor-themePrimary--hover:hover {
+ border-color: #0078d7;
+}
+
+.ms-borderColor-themeSecondary,
+.ms-borderColor-themeSecondary--hover:hover {
+ border-color: #2b88d8;
+}
+
+.ms-borderColor-themeTertiary,
+.ms-borderColor-themeTertiary--hover:hover {
+ border-color: #71afe5;
+}
+
+.ms-borderColor-themeLight,
+.ms-borderColor-themeLight--hover:hover {
+ border-color: #c7e0f4;
+}
+
+.ms-borderColor-themeLighter,
+.ms-borderColor-themeLighter--hover:hover {
+ border-color: #deecf9;
+}
+
+.ms-borderColor-themeLighterAlt,
+.ms-borderColor-themeLighterAlt--hover:hover {
+ border-color: #eff6fc;
+}
+
+.ms-borderColor-black,
+.ms-borderColor-black--hover:hover {
+ border-color: #000000;
+}
+
+.ms-borderColor-neutralDark,
+.ms-borderColor-neutralDark--hover:hover {
+ border-color: #212121;
+}
+
+.ms-borderColor-neutralPrimary,
+.ms-borderColor-neutralPrimary--hover:hover {
+ border-color: #333333;
+}
+
+.ms-borderColor-neutralSecondary,
+.ms-borderColor-neutralSecondary--hover:hover {
+ border-color: #666666;
+}
+
+.ms-borderColor-neutralSecondaryAlt,
+.ms-borderColor-neutralSecondaryAlt--hover:hover {
+ border-color: #767676;
+}
+
+.ms-borderColor-neutralTertiary,
+.ms-borderColor-neutralTertiary--hover:hover {
+ border-color: #a6a6a6;
+}
+
+.ms-borderColor-neutralTertiaryAlt,
+.ms-borderColor-neutralTertiaryAlt--hover:hover {
+ border-color: #c8c8c8;
+}
+
+.ms-borderColor-neutralLight,
+.ms-borderColor-neutralLight--hover:hover {
+ border-color: #eaeaea;
+}
+
+.ms-borderColor-neutralLighter,
+.ms-borderColor-neutralLighter--hover:hover {
+ border-color: #f4f4f4;
+}
+
+.ms-borderColor-neutralLighterAlt,
+.ms-borderColor-neutralLighterAlt--hover:hover {
+ border-color: #f8f8f8;
+}
+
+.ms-borderColor-white,
+.ms-borderColor-white--hover:hover {
+ border-color: #ffffff;
+}
+
+.ms-borderColor-yellow {
+ border-color: #ffb900;
+}
+
+.ms-borderColor-yellowLight {
+ border-color: #fff100;
+}
+
+.ms-borderColor-orange {
+ border-color: #d83b01;
+}
+
+.ms-borderColor-orangeLight {
+ border-color: #ea4300;
+}
+
+.ms-borderColor-orangeLighter {
+ border-color: #ff8c00;
+}
+
+.ms-borderColor-redDark {
+ border-color: #a80000;
+}
+
+.ms-borderColor-red {
+ border-color: #e81123;
+}
+
+.ms-borderColor-magentaDark {
+ border-color: #5c005c;
+}
+
+.ms-borderColor-magenta {
+ border-color: #b4009e;
+}
+
+.ms-borderColor-magentaLight {
+ border-color: #e3008c;
+}
+
+.ms-borderColor-purpleDark {
+ border-color: #32145a;
+}
+
+.ms-borderColor-purple {
+ border-color: #5c2d91;
+}
+
+.ms-borderColor-purpleLight {
+ border-color: #b4a0ff;
+}
+
+.ms-borderColor-blueDark {
+ border-color: #002050;
+}
+
+.ms-borderColor-blueMid {
+ border-color: #00188f;
+}
+
+.ms-borderColor-blue {
+ border-color: #0078d7;
+}
+
+.ms-borderColor-blueLight {
+ border-color: #00bcf2;
+}
+
+.ms-borderColor-tealDark {
+ border-color: #004b50;
+}
+
+.ms-borderColor-teal {
+ border-color: #008272;
+}
+
+.ms-borderColor-tealLight {
+ border-color: #00b294;
+}
+
+.ms-borderColor-greenDark {
+ border-color: #004b1c;
+}
+
+.ms-borderColor-green {
+ border-color: #107c10;
+}
+
+.ms-borderColor-greenLight {
+ border-color: #bad80a;
+}
+
+.ms-borderColor-info {
+ border-color: #107c10;
+}
+
+.ms-borderColor-success {
+ border-color: #107c10;
+}
+
+.ms-borderColor-alert {
+ border-color: #d83b01;
+}
+
+.ms-borderColor-error {
+ border-color: #a80000;
+}
+
+.ms-borderColorTop-themePrimary,
+.ms-borderColorTop-themePrimary--hover:hover {
+ border-top-color: #0078d7;
+}
+
+.ms-font-su {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 42px;
+ font-weight: normal;
+}
+
+.ms-font-xxl {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 28px;
+ font-weight: normal;
+}
+
+.ms-font-xl {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ font-weight: normal;
+}
+
+.ms-font-l {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ font-weight: normal;
+}
+
+.ms-font-m-plus {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+}
+
+.ms-font-m {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+}
+
+.ms-font-s-plus {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 13px;
+ font-weight: normal;
+}
+
+.ms-font-s {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+}
+
+.ms-font-xs {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ font-weight: normal;
+}
+
+.ms-font-mi {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 10px;
+ font-weight: normal;
+}
+
+.ms-fontWeight-light,
+.ms-fontWeight-light--hover:hover {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-fontWeight-semilight,
+.ms-fontWeight-semilight--hover:hover {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-fontWeight-regular,
+.ms-fontWeight-regular--hover:hover {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-fontWeight-semibold,
+.ms-fontWeight-semibold--hover:hover {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-fontSize-su {
+ font-size: 42px;
+}
+
+.ms-fontSize-xxl {
+ font-size: 28px;
+}
+
+.ms-fontSize-xl {
+ font-size: 21px;
+}
+
+.ms-fontSize-l {
+ font-size: 17px;
+}
+
+.ms-fontSize-mPlus {
+ font-size: 15px;
+}
+
+.ms-fontSize-m {
+ font-size: 14px;
+}
+
+.ms-fontSize-sPlus {
+ font-size: 13px;
+}
+
+.ms-fontSize-s {
+ font-size: 12px;
+}
+
+.ms-fontSize-xs {
+ font-size: 11px;
+}
+
+.ms-fontSize-mi {
+ font-size: 10px;
+}
+
+.ms-fontColor-themeDarker,
+.ms-fontColor-themeDarker--hover:hover {
+ color: #004578;
+}
+
+.ms-fontColor-themeDark,
+.ms-fontColor-themeDark--hover:hover {
+ color: #005a9e;
+}
+
+.ms-fontColor-themeDarkAlt,
+.ms-fontColor-themeDarkAlt--hover:hover {
+ color: #106ebe;
+}
+
+.ms-fontColor-themePrimary,
+.ms-fontColor-themePrimary--hover:hover {
+ color: #0078d7;
+}
+
+.ms-fontColor-themeSecondary,
+.ms-fontColor-themeSecondary--hover:hover {
+ color: #2b88d8;
+}
+
+.ms-fontColor-themeTertiary,
+.ms-fontColor-themeTertiary--hover:hover {
+ color: #71afe5;
+}
+
+.ms-fontColor-themeLight,
+.ms-fontColor-themeLight--hover:hover {
+ color: #c7e0f4;
+}
+
+.ms-fontColor-themeLighter,
+.ms-fontColor-themeLighter--hover:hover {
+ color: #deecf9;
+}
+
+.ms-fontColor-themeLighterAlt,
+.ms-fontColor-themeLighterAlt--hover:hover {
+ color: #eff6fc;
+}
+
+.ms-fontColor-black,
+.ms-fontColor-black--hover:hover {
+ color: #000000;
+}
+
+.ms-fontColor-neutralDark,
+.ms-fontColor-neutralDark--hover:hover {
+ color: #212121;
+}
+
+.ms-fontColor-neutralPrimary,
+.ms-fontColor-neutralPrimary--hover:hover {
+ color: #333333;
+}
+
+.ms-fontColor-neutralSecondary,
+.ms-fontColor-neutralSecondary--hover:hover {
+ color: #666666;
+}
+
+.ms-fontColor-neutralSecondaryAlt,
+.ms-fontColor-neutralSecondaryAlt--hover:hover {
+ color: #767676;
+}
+
+.ms-fontColor-neutralTertiary,
+.ms-fontColor-neutralTertiary--hover:hover {
+ color: #a6a6a6;
+}
+
+.ms-fontColor-neutralTertiaryAlt,
+.ms-fontColor-neutralTertiaryAlt--hover:hover {
+ color: #c8c8c8;
+}
+
+.ms-fontColor-neutralLight,
+.ms-fontColor-neutralLight--hover:hover {
+ color: #eaeaea;
+}
+
+.ms-fontColor-neutralLighter,
+.ms-fontColor-neutralLighter--hover:hover {
+ color: #f4f4f4;
+}
+
+.ms-fontColor-neutralLighterAlt,
+.ms-fontColor-neutralLighterAlt--hover:hover {
+ color: #f8f8f8;
+}
+
+.ms-fontColor-white,
+.ms-fontColor-white--hover:hover {
+ color: #ffffff;
+}
+
+.ms-fontColor-yellow,
+.ms-fontColor-yellow--hover:hover {
+ color: #ffb900;
+}
+
+.ms-fontColor-yellowLight,
+.ms-fontColor-yellowLight--hover:hover {
+ color: #fff100;
+}
+
+.ms-fontColor-orange,
+.ms-fontColor-orange--hover:hover {
+ color: #d83b01;
+}
+
+.ms-fontColor-orangeLight,
+.ms-fontColor-orangeLight--hover:hover {
+ color: #ea4300;
+}
+
+.ms-fontColor-orangeLighter,
+.ms-fontColor-orangeLighter--hover:hover {
+ color: #ff8c00;
+}
+
+.ms-fontColor-redDark,
+.ms-fontColor-redDark--hover:hover {
+ color: #a80000;
+}
+
+.ms-fontColor-red,
+.ms-fontColor-red--hover:hover {
+ color: #e81123;
+}
+
+.ms-fontColor-magentaDark,
+.ms-fontColor-magentaDark--hover:hover {
+ color: #5c005c;
+}
+
+.ms-fontColor-magenta,
+.ms-fontColor-magenta--hover:hover {
+ color: #b4009e;
+}
+
+.ms-fontColor-magentaLight,
+.ms-fontColor-magentaLight--hover:hover {
+ color: #e3008c;
+}
+
+.ms-fontColor-purpleDark,
+.ms-fontColor-purpleDark--hover:hover {
+ color: #32145a;
+}
+
+.ms-fontColor-purple,
+.ms-fontColor-purple--hover:hover {
+ color: #5c2d91;
+}
+
+.ms-fontColor-purpleLight,
+.ms-fontColor-purpleLight--hover:hover {
+ color: #b4a0ff;
+}
+
+.ms-fontColor-blueDark,
+.ms-fontColor-blueDark--hover:hover {
+ color: #002050;
+}
+
+.ms-fontColor-blueMid,
+.ms-fontColor-blueMid--hover:hover {
+ color: #00188f;
+}
+
+.ms-fontColor-blue,
+.ms-fontColor-blue--hover:hover {
+ color: #0078d7;
+}
+
+.ms-fontColor-blueLight,
+.ms-fontColor-blueLight--hover:hover {
+ color: #00bcf2;
+}
+
+.ms-fontColor-tealDark,
+.ms-fontColor-tealDark--hover:hover {
+ color: #004b50;
+}
+
+.ms-fontColor-teal,
+.ms-fontColor-teal--hover:hover {
+ color: #008272;
+}
+
+.ms-fontColor-tealLight,
+.ms-fontColor-tealLight--hover:hover {
+ color: #00b294;
+}
+
+.ms-fontColor-greenDark,
+.ms-fontColor-greenDark--hover:hover {
+ color: #004b1c;
+}
+
+.ms-fontColor-green,
+.ms-fontColor-green--hover:hover {
+ color: #107c10;
+}
+
+.ms-fontColor-greenLight,
+.ms-fontColor-greenLight--hover:hover {
+ color: #bad80a;
+}
+
+.ms-fontColor-info,
+.ms-fontColor-info--hover:hover {
+ color: #107c10;
+}
+
+.ms-fontColor-success,
+.ms-fontColor-success--hover:hover {
+ color: #107c10;
+}
+
+.ms-fontColor-alert,
+.ms-fontColor-alert--hover:hover {
+ color: #d83b01;
+}
+
+.ms-fontColor-error,
+.ms-fontColor-error--hover:hover {
+ color: #a80000;
+}
+
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+@font-face {
+ font-family: 'Leelawadee UI Bold';
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Leelawadee UI';
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Leelawadee UI Semilight';
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Arabic';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Arabic';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Arabic';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Arabic';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Cyrillic';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Cyrillic';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Cyrillic';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Cyrillic';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light EastEuropean';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular EastEuropean';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold EastEuropean';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight EastEuropean';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Greek';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Greek';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Greek';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Greek';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Hebrew';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Hebrew';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Hebrew';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Hebrew';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Vietnamese';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Vietnamese';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Vietnamese';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Vietnamese';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light WestEuropean';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular WestEuropean';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold WestEuropean';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight WestEuropean';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+*[lang='ja-JP'] .ms-font-mi,
+*[lang='ja-JP'] .ms-font-xs,
+*[lang='ja-JP'] .ms-font-s,
+*[lang='ja-JP'] .ms-font-s-plus,
+*[lang='ja-JP'] .ms-font-m,
+*[lang='ja-JP'] .ms-font-m-plus,
+*[lang='ja-JP'] .ms-font-l,
+*[lang='ja-JP'] .ms-font-xl,
+*[lang='ja-JP'] .ms-font-xxl,
+*[lang='ja-JP'] .ms-font-su,
+*[lang='ja-JP'] .ms-fontWeight-light,
+*[lang='ja-JP'] .ms-fontWeight-light-hover:hover,
+*[lang='ja-JP'] .ms-fontWeight-semilight,
+*[lang='ja-JP'] .ms-fontWeight-semilight-hover:hover,
+*[lang='ja-JP'] .ms-fontWeight-regular,
+*[lang='ja-JP'] .ms-fontWeight-regular-hover:hover,
+*[lang='ja-JP'] .ms-fontWeight-semibold,
+*[lang='ja-JP'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ko-KR'] .ms-font-mi,
+*[lang='ko-KR'] .ms-font-xs,
+*[lang='ko-KR'] .ms-font-s,
+*[lang='ko-KR'] .ms-font-s-plus,
+*[lang='ko-KR'] .ms-font-m,
+*[lang='ko-KR'] .ms-font-m-plus,
+*[lang='ko-KR'] .ms-font-l,
+*[lang='ko-KR'] .ms-font-xl,
+*[lang='ko-KR'] .ms-font-xxl,
+*[lang='ko-KR'] .ms-font-su,
+*[lang='ko-KR'] .ms-fontWeight-light,
+*[lang='ko-KR'] .ms-fontWeight-light-hover:hover,
+*[lang='ko-KR'] .ms-fontWeight-semilight,
+*[lang='ko-KR'] .ms-fontWeight-semilight-hover:hover,
+*[lang='ko-KR'] .ms-fontWeight-regular,
+*[lang='ko-KR'] .ms-fontWeight-regular-hover:hover,
+*[lang='ko-KR'] .ms-fontWeight-semibold,
+*[lang='ko-KR'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Malgun Gothic', Gulim, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ch-ZHS'] .ms-font-mi,
+*[lang='ch-ZHS'] .ms-font-xs,
+*[lang='ch-ZHS'] .ms-font-s,
+*[lang='ch-ZHS'] .ms-font-s-plus,
+*[lang='ch-ZHS'] .ms-font-m,
+*[lang='ch-ZHS'] .ms-font-m-plus,
+*[lang='ch-ZHS'] .ms-font-l,
+*[lang='ch-ZHS'] .ms-font-xl,
+*[lang='ch-ZHS'] .ms-font-xxl,
+*[lang='ch-ZHS'] .ms-font-su,
+*[lang='ch-ZHS'] .ms-fontWeight-light,
+*[lang='ch-ZHS'] .ms-fontWeight-light-hover:hover,
+*[lang='ch-ZHS'] .ms-fontWeight-semilight,
+*[lang='ch-ZHS'] .ms-fontWeight-semilight-hover:hover,
+*[lang='ch-ZHS'] .ms-fontWeight-regular,
+*[lang='ch-ZHS'] .ms-fontWeight-regular-hover:hover,
+*[lang='ch-ZHS'] .ms-fontWeight-semibold,
+*[lang='ch-ZHS'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ch-ZHT'] .ms-font-mi,
+*[lang='ch-ZHT'] .ms-font-xs,
+*[lang='ch-ZHT'] .ms-font-s,
+*[lang='ch-ZHT'] .ms-font-s-plus,
+*[lang='ch-ZHT'] .ms-font-m,
+*[lang='ch-ZHT'] .ms-font-m-plus,
+*[lang='ch-ZHT'] .ms-font-l,
+*[lang='ch-ZHT'] .ms-font-xl,
+*[lang='ch-ZHT'] .ms-font-xxl,
+*[lang='ch-ZHT'] .ms-font-su,
+*[lang='ch-ZHT'] .ms-fontWeight-light,
+*[lang='ch-ZHT'] .ms-fontWeight-light-hover:hover,
+*[lang='ch-ZHT'] .ms-fontWeight-semilight,
+*[lang='ch-ZHT'] .ms-fontWeight-semilight-hover:hover,
+*[lang='ch-ZHT'] .ms-fontWeight-regular,
+*[lang='ch-ZHT'] .ms-fontWeight-regular-hover:hover,
+*[lang='ch-ZHT'] .ms-fontWeight-semibold,
+*[lang='ch-ZHT'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Microsoft Jhenghei', Pmingliu, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hi-IN'] .ms-font-mi,
+*[lang='hi-IN'] .ms-font-xs,
+*[lang='hi-IN'] .ms-font-s,
+*[lang='hi-IN'] .ms-font-s-plus,
+*[lang='hi-IN'] .ms-font-m,
+*[lang='hi-IN'] .ms-font-m-plus,
+*[lang='hi-IN'] .ms-font-l,
+*[lang='hi-IN'] .ms-font-xl,
+*[lang='hi-IN'] .ms-font-xxl,
+*[lang='hi-IN'] .ms-font-su,
+*[lang='hi-IN'] .ms-fontWeight-light,
+*[lang='hi-IN'] .ms-fontWeight-light-hover:hover,
+*[lang='hi-IN'] .ms-fontWeight-semilight,
+*[lang='hi-IN'] .ms-fontWeight-semilight-hover:hover,
+*[lang='hi-IN'] .ms-fontWeight-regular,
+*[lang='hi-IN'] .ms-fontWeight-regular-hover:hover,
+*[lang='hi-IN'] .ms-fontWeight-semibold,
+*[lang='hi-IN'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Nirmala UI', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='th-TH'] .ms-font-xl,
+*[lang='th-TH'] .ms-font-xxl,
+*[lang='th-TH'] .ms-fontWeight-light,
+*[lang='th-TH'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Leelawadee UI Semilight', 'Kmer UI', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='th-TH'] .ms-font-l,
+*[lang='th-TH'] .ms-font-su,
+*[lang='th-TH'] .ms-fontWeight-semilight,
+*[lang='th-TH'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Leelawadee UI Semilight', 'Kmer UI', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='th-TH'] .ms-fontWeight-regular,
+*[lang='th-TH'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Leelawadee UI Regular', 'Kmer UI', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='th-TH'] .ms-font-mi,
+*[lang='th-TH'] .ms-fontWeight-semibold,
+*[lang='th-TH'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Leelawadee UI Bold', 'Kmer UI', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ar'] .ms-font-xl,
+*[lang='ar'] .ms-font-xxl,
+*[lang='ar'] .ms-fontWeight-light,
+*[lang='ar'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Arabic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ar'] .ms-font-l,
+*[lang='ar'] .ms-font-su,
+*[lang='ar'] .ms-fontWeight-semilight,
+*[lang='ar'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Arabic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ar'] .ms-fontWeight-regular,
+*[lang='ar'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Arabic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ar'] .ms-font-mi,
+*[lang='ar'] .ms-fontWeight-semibold,
+*[lang='ar'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Arabic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='bg-BG'] .ms-font-xl,
+*[lang='bg-BG'] .ms-font-xxl,
+*[lang='bg-BG'] .ms-fontWeight-light,
+*[lang='bg-BG'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='bg-BG'] .ms-font-l,
+*[lang='bg-BG'] .ms-font-su,
+*[lang='bg-BG'] .ms-fontWeight-semilight,
+*[lang='bg-BG'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='bg-BG'] .ms-fontWeight-regular,
+*[lang='bg-BG'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='bg-BG'] .ms-font-mi,
+*[lang='bg-BG'] .ms-fontWeight-semibold,
+*[lang='bg-BG'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ru-RU'] .ms-font-xl,
+*[lang='ru-RU'] .ms-font-xxl,
+*[lang='ru-RU'] .ms-fontWeight-light,
+*[lang='ru-RU'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ru-RU'] .ms-font-l,
+*[lang='ru-RU'] .ms-font-su,
+*[lang='ru-RU'] .ms-fontWeight-semilight,
+*[lang='ru-RU'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ru-RU'] .ms-fontWeight-regular,
+*[lang='ru-RU'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ru-RU'] .ms-font-mi,
+*[lang='ru-RU'] .ms-fontWeight-semibold,
+*[lang='ru-RU'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='uk-UA'] .ms-font-xl,
+*[lang='uk-UA'] .ms-font-xxl,
+*[lang='uk-UA'] .ms-fontWeight-light,
+*[lang='uk-UA'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='uk-UA'] .ms-font-l,
+*[lang='uk-UA'] .ms-font-su,
+*[lang='uk-UA'] .ms-fontWeight-semilight,
+*[lang='uk-UA'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='uk-UA'] .ms-fontWeight-regular,
+*[lang='uk-UA'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='uk-UA'] .ms-font-mi,
+*[lang='uk-UA'] .ms-fontWeight-semibold,
+*[lang='uk-UA'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='cs-CZ'] .ms-font-xl,
+*[lang='cs-CZ'] .ms-font-xxl,
+*[lang='cs-CZ'] .ms-fontWeight-light,
+*[lang='cs-CZ'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='cs-CZ'] .ms-font-l,
+*[lang='cs-CZ'] .ms-font-su,
+*[lang='cs-CZ'] .ms-fontWeight-semilight,
+*[lang='cs-CZ'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='cs-CZ'] .ms-fontWeight-regular,
+*[lang='cs-CZ'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='cs-CZ'] .ms-font-mi,
+*[lang='cs-CZ'] .ms-fontWeight-semibold,
+*[lang='cs-CZ'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='et-EE'] .ms-font-xl,
+*[lang='et-EE'] .ms-font-xxl,
+*[lang='et-EE'] .ms-fontWeight-light,
+*[lang='et-EE'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='et-EE'] .ms-font-l,
+*[lang='et-EE'] .ms-font-su,
+*[lang='et-EE'] .ms-fontWeight-semilight,
+*[lang='et-EE'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='et-EE'] .ms-fontWeight-regular,
+*[lang='et-EE'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='et-EE'] .ms-font-mi,
+*[lang='et-EE'] .ms-fontWeight-semibold,
+*[lang='et-EE'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hr-HR'] .ms-font-xl,
+*[lang='hr-HR'] .ms-font-xxl,
+*[lang='hr-HR'] .ms-fontWeight-light,
+*[lang='hr-HR'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hr-HR'] .ms-font-l,
+*[lang='hr-HR'] .ms-font-su,
+*[lang='hr-HR'] .ms-fontWeight-semilight,
+*[lang='hr-HR'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hr-HR'] .ms-fontWeight-regular,
+*[lang='hr-HR'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hr-HR'] .ms-font-mi,
+*[lang='hr-HR'] .ms-fontWeight-semibold,
+*[lang='hr-HR'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hu-HU'] .ms-font-xl,
+*[lang='hu-HU'] .ms-font-xxl,
+*[lang='hu-HU'] .ms-fontWeight-light,
+*[lang='hu-HU'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hu-HU'] .ms-font-l,
+*[lang='hu-HU'] .ms-font-su,
+*[lang='hu-HU'] .ms-fontWeight-semilight,
+*[lang='hu-HU'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hu-HU'] .ms-fontWeight-regular,
+*[lang='hu-HU'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hu-HU'] .ms-font-mi,
+*[lang='hu-HU'] .ms-fontWeight-semibold,
+*[lang='hu-HU'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-LT'] .ms-font-xl,
+*[lang='lt-LT'] .ms-font-xxl,
+*[lang='lt-LT'] .ms-fontWeight-light,
+*[lang='lt-LT'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-LT'] .ms-font-l,
+*[lang='lt-LT'] .ms-font-su,
+*[lang='lt-LT'] .ms-fontWeight-semilight,
+*[lang='lt-LT'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-LT'] .ms-fontWeight-regular,
+*[lang='lt-LT'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-LT'] .ms-font-mi,
+*[lang='lt-LT'] .ms-fontWeight-semibold,
+*[lang='lt-LT'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lv-LV'] .ms-font-xl,
+*[lang='lv-LV'] .ms-font-xxl,
+*[lang='lv-LV'] .ms-fontWeight-light,
+*[lang='lv-LV'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lv-LV'] .ms-font-l,
+*[lang='lv-LV'] .ms-font-su,
+*[lang='lv-LV'] .ms-fontWeight-semilight,
+*[lang='lv-LV'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lv-LV'] .ms-fontWeight-regular,
+*[lang='lv-LV'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lv-LV'] .ms-font-mi,
+*[lang='lv-LV'] .ms-fontWeight-semibold,
+*[lang='lv-LV'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='pl-PL'] .ms-font-xl,
+*[lang='pl-PL'] .ms-font-xxl,
+*[lang='pl-PL'] .ms-fontWeight-light,
+*[lang='pl-PL'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='pl-PL'] .ms-font-l,
+*[lang='pl-PL'] .ms-font-su,
+*[lang='pl-PL'] .ms-fontWeight-semilight,
+*[lang='pl-PL'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='pl-PL'] .ms-fontWeight-regular,
+*[lang='pl-PL'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='pl-PL'] .ms-font-mi,
+*[lang='pl-PL'] .ms-fontWeight-semibold,
+*[lang='pl-PL'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-sr-SP'] .ms-font-xl,
+*[lang='lt-sr-SP'] .ms-font-xxl,
+*[lang='lt-sr-SP'] .ms-fontWeight-light,
+*[lang='lt-sr-SP'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-sr-SP'] .ms-font-l,
+*[lang='lt-sr-SP'] .ms-font-su,
+*[lang='lt-sr-SP'] .ms-fontWeight-semilight,
+*[lang='lt-sr-SP'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-sr-SP'] .ms-fontWeight-regular,
+*[lang='lt-sr-SP'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-sr-SP'] .ms-font-mi,
+*[lang='lt-sr-SP'] .ms-fontWeight-semibold,
+*[lang='lt-sr-SP'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='tr-TR'] .ms-font-xl,
+*[lang='tr-TR'] .ms-font-xxl,
+*[lang='tr-TR'] .ms-fontWeight-light,
+*[lang='tr-TR'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='tr-TR'] .ms-font-l,
+*[lang='tr-TR'] .ms-font-su,
+*[lang='tr-TR'] .ms-fontWeight-semilight,
+*[lang='tr-TR'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='tr-TR'] .ms-fontWeight-regular,
+*[lang='tr-TR'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='tr-TR'] .ms-font-mi,
+*[lang='tr-TR'] .ms-fontWeight-semibold,
+*[lang='tr-TR'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='sk-SK'] .ms-font-xl,
+*[lang='sk-SK'] .ms-font-xxl,
+*[lang='sk-SK'] .ms-fontWeight-light,
+*[lang='sk-SK'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='sk-SK'] .ms-font-l,
+*[lang='sk-SK'] .ms-font-su,
+*[lang='sk-SK'] .ms-fontWeight-semilight,
+*[lang='sk-SK'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='sk-SK'] .ms-fontWeight-regular,
+*[lang='sk-SK'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='sk-SK'] .ms-font-mi,
+*[lang='sk-SK'] .ms-fontWeight-semibold,
+*[lang='sk-SK'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='kk-KZ'] .ms-font-xl,
+*[lang='kk-KZ'] .ms-font-xxl,
+*[lang='kk-KZ'] .ms-fontWeight-light,
+*[lang='kk-KZ'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='kk-KZ'] .ms-font-l,
+*[lang='kk-KZ'] .ms-font-su,
+*[lang='kk-KZ'] .ms-fontWeight-semilight,
+*[lang='kk-KZ'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='kk-KZ'] .ms-fontWeight-regular,
+*[lang='kk-KZ'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='kk-KZ'] .ms-font-mi,
+*[lang='kk-KZ'] .ms-fontWeight-semibold,
+*[lang='kk-KZ'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='el-GR'] .ms-font-xl,
+*[lang='el-GR'] .ms-font-xxl,
+*[lang='el-GR'] .ms-fontWeight-light,
+*[lang='el-GR'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Greek', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='el-GR'] .ms-font-l,
+*[lang='el-GR'] .ms-font-su,
+*[lang='el-GR'] .ms-fontWeight-semilight,
+*[lang='el-GR'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Greek', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='el-GR'] .ms-fontWeight-regular,
+*[lang='el-GR'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Greek', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='el-GR'] .ms-font-mi,
+*[lang='el-GR'] .ms-fontWeight-semibold,
+*[lang='el-GR'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Greek', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='he-IL'] .ms-font-xl,
+*[lang='he-IL'] .ms-font-xxl,
+*[lang='he-IL'] .ms-fontWeight-light,
+*[lang='he-IL'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Hebrew', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='he-IL'] .ms-font-l,
+*[lang='he-IL'] .ms-font-su,
+*[lang='he-IL'] .ms-fontWeight-semilight,
+*[lang='he-IL'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Hebrew', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='he-IL'] .ms-fontWeight-regular,
+*[lang='he-IL'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Hebrew', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='he-IL'] .ms-font-mi,
+*[lang='he-IL'] .ms-fontWeight-semibold,
+*[lang='he-IL'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Hebrew', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='vi-VN'] .ms-font-xl,
+*[lang='vi-VN'] .ms-font-xxl,
+*[lang='vi-VN'] .ms-fontWeight-light,
+*[lang='vi-VN'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Vietnamese', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='vi-VN'] .ms-font-l,
+*[lang='vi-VN'] .ms-font-su,
+*[lang='vi-VN'] .ms-fontWeight-semilight,
+*[lang='vi-VN'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Vietnamese', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='vi-VN'] .ms-fontWeight-regular,
+*[lang='vi-VN'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Vietnamese', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='vi-VN'] .ms-font-mi,
+*[lang='vi-VN'] .ms-fontWeight-semibold,
+*[lang='vi-VN'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Vietnamese', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+@font-face {
+ font-family: 'Office365Icons';
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?');
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff?') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf?') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg?#office365icons') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.ms-Icon {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+}
+
+.ms-Icon--circleEmpty:before {
+ content: '\e000';
+}
+
+.ms-Icon--circleFill:before {
+ content: '\e001';
+}
+
+.ms-Icon--placeholder:before {
+ content: '\e002';
+}
+
+.ms-Icon--star:before {
+ content: '\e003';
+}
+
+.ms-Icon--plus:before {
+ content: '\e004';
+}
+
+.ms-Icon--minus:before {
+ content: '\e005';
+}
+
+.ms-Icon--question:before {
+ content: '\e006';
+}
+
+.ms-Icon--exclamation:before {
+ content: '\e007';
+}
+
+.ms-Icon--person:before {
+ content: '\e008';
+}
+
+.ms-Icon--mail:before {
+ content: '\e009';
+}
+
+.ms-Icon--infoCircle:before {
+ content: '\e00a';
+}
+
+.ms-Icon--alert:before {
+ content: '\e00b';
+}
+
+.ms-Icon--xCircle:before {
+ content: '\e00c';
+}
+
+.ms-Icon--mailOpen:before {
+ content: '\e00d';
+}
+
+.ms-Icon--people:before {
+ content: '\e00e';
+}
+
+.ms-Icon--bell:before {
+ content: '\e010';
+}
+
+.ms-Icon--calendar:before {
+ content: '\e011';
+}
+
+.ms-Icon--scheduling:before {
+ content: '\e012';
+}
+
+.ms-Icon--event:before {
+ content: '\e013';
+}
+
+.ms-Icon--folder:before {
+ content: '\e014';
+}
+
+.ms-Icon--documents:before {
+ content: '\e015';
+}
+
+.ms-Icon--onedrive:before {
+ content: '\e016';
+}
+
+.ms-Icon--chat:before {
+ content: '\e017';
+}
+
+.ms-Icon--sites:before {
+ content: '\e018';
+}
+
+.ms-Icon--listBullets:before {
+ content: '\e019';
+}
+
+.ms-Icon--calendarWeek:before {
+ content: '\e01a';
+}
+
+.ms-Icon--calendarWorkWeek:before {
+ content: '\e01b';
+}
+
+.ms-Icon--calendarDay:before {
+ content: '\e01c';
+}
+
+.ms-Icon--folderMove:before {
+ content: '\e01d';
+}
+
+.ms-Icon--panel:before {
+ content: '\e01e';
+}
+
+.ms-Icon--popout:before {
+ content: '\e01f';
+}
+
+.ms-Icon--menu:before {
+ content: '\e020';
+}
+
+.ms-Icon--home:before {
+ content: '\e021';
+}
+
+.ms-Icon--favorites:before {
+ content: '\e022';
+}
+
+.ms-Icon--phone:before {
+ content: '\e023';
+}
+
+.ms-Icon--mailSend:before {
+ content: '\e024';
+}
+
+.ms-Icon--save:before {
+ content: '\e025';
+}
+
+.ms-Icon--trash:before {
+ content: '\e026';
+}
+
+.ms-Icon--pencil:before {
+ content: '\e027';
+}
+
+.ms-Icon--flag:before {
+ content: '\e028';
+}
+
+.ms-Icon--reply:before {
+ content: '\e029';
+}
+
+.ms-Icon--miniatures:before {
+ content: '\e02a';
+}
+
+.ms-Icon--voicemail:before {
+ content: '\e02b';
+}
+
+.ms-Icon--play:before {
+ content: '\e02c';
+}
+
+.ms-Icon--pause:before {
+ content: '\e02d';
+}
+
+.ms-Icon--onlineAdd:before {
+ content: '\e02e';
+}
+
+.ms-Icon--onlineJoin:before {
+ content: '\e02f';
+}
+
+.ms-Icon--replyAll:before {
+ content: '\e030';
+}
+
+.ms-Icon--attachment:before {
+ content: '\e031';
+}
+
+.ms-Icon--drm:before {
+ content: '\e032';
+}
+
+.ms-Icon--pinDown:before {
+ content: '\e033';
+}
+
+.ms-Icon--refresh:before {
+ content: '\e034';
+}
+
+.ms-Icon--gear:before {
+ content: '\e035';
+}
+
+.ms-Icon--smiley:before {
+ content: '\e036';
+}
+
+.ms-Icon--info:before {
+ content: '\e037';
+}
+
+.ms-Icon--lock:before {
+ content: '\e038';
+}
+
+.ms-Icon--search:before {
+ content: '\e039';
+}
+
+.ms-Icon--questionReverse:before {
+ content: '\e03a';
+}
+
+.ms-Icon--notRecurring:before {
+ content: '\e03b';
+}
+
+.ms-Icon--tasks:before {
+ content: '\e040';
+}
+
+.ms-Icon--check:before {
+ content: '\e041';
+}
+
+.ms-Icon--x:before {
+ content: '\e042';
+}
+
+.ms-Icon--ellipsis:before {
+ content: '\e045';
+}
+
+.ms-Icon--dot:before {
+ content: '\e046';
+}
+
+.ms-Icon--arrowUp:before {
+ content: '\e047';
+}
+
+.ms-Icon--arrowDown:before {
+ content: '\e048';
+}
+
+.ms-Icon--arrowLeft:before {
+ content: '\e049';
+}
+
+.ms-Icon--arrowRight:before {
+ content: '\e04a';
+}
+
+.ms-Icon--download:before {
+ content: '\e04b';
+}
+
+.ms-Icon--directions:before {
+ content: '\e04c';
+}
+
+.ms-Icon--microphone:before {
+ content: '\e04f';
+}
+
+.ms-Icon--caretUp:before {
+ content: '\e051';
+}
+
+.ms-Icon--caretDown:before {
+ content: '\e052';
+}
+
+.ms-Icon--caretLeft:before {
+ content: '\e053';
+}
+
+.ms-Icon--caretRight:before {
+ content: '\e054';
+}
+
+.ms-Icon--caretUpLeft:before {
+ content: '\e05a';
+}
+
+.ms-Icon--caretUpRight:before {
+ content: '\e05b';
+}
+
+.ms-Icon--caretDownRight:before {
+ content: '\e05c';
+}
+
+.ms-Icon--caretDownLeft:before {
+ content: '\e05d';
+}
+
+.ms-Icon--note:before {
+ content: '\e06a';
+}
+
+.ms-Icon--noteReply:before {
+ content: '\e06b';
+}
+
+.ms-Icon--noteForward:before {
+ content: '\e06c';
+}
+
+.ms-Icon--key:before {
+ content: '\e06f';
+}
+
+.ms-Icon--tile:before {
+ content: '\e070';
+}
+
+.ms-Icon--taskRecurring:before {
+ content: '\e071';
+}
+
+.ms-Icon--starEmpty:before {
+ content: '\e073';
+}
+
+.ms-Icon--upload:before {
+ content: '\e076';
+}
+
+.ms-Icon--wrench:before {
+ content: '\e077';
+}
+
+.ms-Icon--share:before {
+ content: '\e078';
+}
+
+.ms-Icon--documentReply:before {
+ content: '\e079';
+}
+
+.ms-Icon--documentForward:before {
+ content: '\e07a';
+}
+
+.ms-Icon--partner:before {
+ content: '\e080';
+}
+
+.ms-Icon--reactivate:before {
+ content: '\e084';
+}
+
+.ms-Icon--sort:before {
+ content: '\e085';
+}
+
+.ms-Icon--personAdd:before {
+ content: '\e086';
+}
+
+.ms-Icon--chevronUp:before {
+ content: '\e087';
+}
+
+.ms-Icon--chevronDown:before {
+ content: '\e088';
+}
+
+.ms-Icon--chevronLeft:before {
+ content: '\e089';
+}
+
+.ms-Icon--chevronRight:before {
+ content: '\e08a';
+}
+
+.ms-Icon--peopleAdd:before {
+ content: '\e08c';
+}
+
+.ms-Icon--newsfeed:before {
+ content: '\e08d';
+}
+
+.ms-Icon--notebook:before {
+ content: '\e08e';
+}
+
+.ms-Icon--link:before {
+ content: '\e08f';
+}
+
+.ms-Icon--chevronsUp:before {
+ content: '\e090';
+}
+
+.ms-Icon--chevronsDown:before {
+ content: '\e091';
+}
+
+.ms-Icon--chevronsLeft:before {
+ content: '\e092';
+}
+
+.ms-Icon--chevronsRight:before {
+ content: '\e093';
+}
+
+.ms-Icon--clutter:before {
+ content: '\e09a';
+}
+
+.ms-Icon--subscribe:before {
+ content: '\e09c';
+}
+
+.ms-Icon--unsubscribe:before {
+ content: '\e09d';
+}
+
+.ms-Icon--personRemove:before {
+ content: '\e09e';
+}
+
+.ms-Icon--receiptForward:before {
+ content: '\e0a0';
+}
+
+.ms-Icon--receiptReply:before {
+ content: '\e0a1';
+}
+
+.ms-Icon--receiptCheck:before {
+ content: '\e0a2';
+}
+
+.ms-Icon--peopleRemove:before {
+ content: '\e0a3';
+}
+
+.ms-Icon--merge:before {
+ content: '\e0a4';
+}
+
+.ms-Icon--split:before {
+ content: '\e0a5';
+}
+
+.ms-Icon--eventCancel:before {
+ content: '\e0a6';
+}
+
+.ms-Icon--eventShare:before {
+ content: '\e0a7';
+}
+
+.ms-Icon--today:before {
+ content: '\e0a9';
+}
+
+.ms-Icon--oofReply:before {
+ content: '\e0aa';
+}
+
+.ms-Icon--voicemailReply:before {
+ content: '\e0ac';
+}
+
+.ms-Icon--voicemailForward:before {
+ content: '\e0ad';
+}
+
+.ms-Icon--ribbon:before {
+ content: '\e0af';
+}
+
+.ms-Icon--contact:before {
+ content: '\e0b0';
+}
+
+.ms-Icon--eye:before {
+ content: '\e0b1';
+}
+
+.ms-Icon--glasses:before {
+ content: '\e0b2';
+}
+
+.ms-Icon--print:before {
+ content: '\e100';
+}
+
+.ms-Icon--room:before {
+ content: '\e101';
+}
+
+.ms-Icon--post:before {
+ content: '\e102';
+}
+
+.ms-Icon--toggle:before {
+ content: '\e103';
+}
+
+.ms-Icon--touch:before {
+ content: '\e104';
+}
+
+.ms-Icon--clock:before {
+ content: '\e105';
+}
+
+.ms-Icon--fax:before {
+ content: '\e106';
+}
+
+.ms-Icon--lightning:before {
+ content: '\e110';
+}
+
+.ms-Icon--dialpad:before {
+ content: '\e111';
+}
+
+.ms-Icon--phoneTransfer:before {
+ content: '\e112';
+}
+
+.ms-Icon--phoneAdd:before {
+ content: '\e113';
+}
+
+.ms-Icon--late:before {
+ content: '\e114';
+}
+
+.ms-Icon--chatAdd:before {
+ content: '\e115';
+}
+
+.ms-Icon--conflict:before {
+ content: '\e116';
+}
+
+.ms-Icon--navigate:before {
+ content: '\e117';
+}
+
+.ms-Icon--camera:before {
+ content: '\e119';
+}
+
+.ms-Icon--filter:before {
+ content: '\e11a';
+}
+
+.ms-Icon--fullscreen:before {
+ content: '\e11b';
+}
+
+.ms-Icon--new:before {
+ content: '\e11c';
+}
+
+.ms-Icon--mailEmpty:before {
+ content: '\e11d';
+}
+
+.ms-Icon--editBox:before {
+ content: '\e11e';
+}
+
+.ms-Icon--waffle:before {
+ content: '\e11f';
+}
+
+.ms-Icon--work:before {
+ content: '\e120';
+}
+
+.ms-Icon--eventRecurring:before {
+ content: '\e121';
+}
+
+.ms-Icon--cart:before {
+ content: '\e122';
+}
+
+.ms-Icon--socialListening:before {
+ content: '\e123';
+}
+
+.ms-Icon--mapMarker:before {
+ content: '\e124';
+}
+
+.ms-Icon--org:before {
+ content: '\e125';
+}
+
+.ms-Icon--replyAlt:before {
+ content: '\e150';
+}
+
+.ms-Icon--replyAllAlt:before {
+ content: '\e152';
+}
+
+.ms-Icon--eventInfo:before {
+ content: '\e154';
+}
+
+.ms-Icon--group:before {
+ content: '\e155';
+}
+
+.ms-Icon--money:before {
+ content: '\e161';
+}
+
+.ms-Icon--graph:before {
+ content: '\e162';
+}
+
+.ms-Icon--noteEdit:before {
+ content: '\e163';
+}
+
+.ms-Icon--dashboard:before {
+ content: '\e164';
+}
+
+.ms-Icon--mailEdit:before {
+ content: '\e165';
+}
+
+.ms-Icon--pinLeft:before {
+ content: '\e167';
+}
+
+.ms-Icon--heart:before {
+ content: '\e16a';
+}
+
+.ms-Icon--heartEmpty:before {
+ content: '\e16b';
+}
+
+.ms-Icon--picture:before {
+ content: '\e16c';
+}
+
+.ms-Icon--cake:before {
+ content: '\e16d';
+}
+
+.ms-Icon--books:before {
+ content: '\e16e';
+}
+
+.ms-Icon--chart:before {
+ content: '\e16f';
+}
+
+.ms-Icon--video:before {
+ content: '\e170';
+}
+
+.ms-Icon--soccer:before {
+ content: '\e171';
+}
+
+.ms-Icon--meal:before {
+ content: '\e172';
+}
+
+.ms-Icon--balloon:before {
+ content: '\e173';
+}
+
+.ms-Icon--cat:before {
+ content: '\e174';
+}
+
+.ms-Icon--dog:before {
+ content: '\e175';
+}
+
+.ms-Icon--bag:before {
+ content: '\e176';
+}
+
+.ms-Icon--music:before {
+ content: '\e177';
+}
+
+.ms-Icon--stopwatch:before {
+ content: '\e178';
+}
+
+.ms-Icon--coffee:before {
+ content: '\e179';
+}
+
+.ms-Icon--briefcase:before {
+ content: '\e17a';
+}
+
+.ms-Icon--pill:before {
+ content: '\e17b';
+}
+
+.ms-Icon--trophy:before {
+ content: '\e17c';
+}
+
+.ms-Icon--firstAid:before {
+ content: '\e17d';
+}
+
+.ms-Icon--plane:before {
+ content: '\e17e';
+}
+
+.ms-Icon--page:before {
+ content: '\e17f';
+}
+
+.ms-Icon--car:before {
+ content: '\e180';
+}
+
+.ms-Icon--dogAlt:before {
+ content: '\e181';
+}
+
+.ms-Icon--document:before {
+ content: '\e182';
+}
+
+.ms-Icon--metadata:before {
+ content: '\e183';
+}
+
+.ms-Icon--pointItem:before {
+ content: '\e184';
+}
+
+.ms-Icon--text:before {
+ content: '\e185';
+}
+
+.ms-Icon--fieldText:before {
+ content: '\e186';
+}
+
+.ms-Icon--fieldNumber:before {
+ content: '\e187';
+}
+
+.ms-Icon--dropdown:before {
+ content: '\e188';
+}
+
+.ms-Icon--radioButton:before {
+ content: '\e189';
+}
+
+.ms-Icon--checkbox:before {
+ content: '\e18a';
+}
+
+.ms-Icon--story:before {
+ content: '\e18b';
+}
+
+.ms-Icon--bold:before {
+ content: '\e18c';
+}
+
+.ms-Icon--italic:before {
+ content: '\e18d';
+}
+
+.ms-Icon--underline:before {
+ content: '\e18e';
+}
+
+.ms-Icon--quote:before {
+ content: '\e18f';
+}
+
+.ms-Icon--styleRemove:before {
+ content: '\e190';
+}
+
+.ms-Icon--pictureAdd:before {
+ content: '\e191';
+}
+
+.ms-Icon--pictureRemove:before {
+ content: '\e192';
+}
+
+.ms-Icon--desktop:before {
+ content: '\e193';
+}
+
+.ms-Icon--tablet:before {
+ content: '\e194';
+}
+
+.ms-Icon--mobile:before {
+ content: '\e195';
+}
+
+.ms-Icon--table:before {
+ content: '\e196';
+}
+
+.ms-Icon--hide:before {
+ content: '\e197';
+}
+
+.ms-Icon--shield:before {
+ content: '\e198';
+}
+
+.ms-Icon--header:before {
+ content: '\e19a';
+}
+
+.ms-Icon--paint:before {
+ content: '\e19b';
+}
+
+.ms-Icon--support:before {
+ content: '\e19c';
+}
+
+.ms-Icon--settings:before {
+ content: '\e19d';
+}
+
+.ms-Icon--creditCard:before {
+ content: '\e19e';
+}
+
+.ms-Icon--reload:before {
+ content: '\e19f';
+}
+
+.ms-Icon--peopleSecurity:before {
+ content: '\e200';
+}
+
+.ms-Icon--fieldTextBox:before {
+ content: '\e203';
+}
+
+.ms-Icon--multiChoice:before {
+ content: '\e204';
+}
+
+.ms-Icon--fieldMail:before {
+ content: '\e205';
+}
+
+.ms-Icon--contactForm:before {
+ content: '\e206';
+}
+
+.ms-Icon--circleHalfFilled:before {
+ content: '\e207';
+}
+
+.ms-Icon--documentPDF:before {
+ content: '\e208';
+}
+
+.ms-Icon--bookmark:before {
+ content: '\e209';
+}
+
+.ms-Icon--circleUnfilled:before {
+ content: '\e20b';
+}
+
+.ms-Icon--circleFilled:before {
+ content: '\e20c';
+}
+
+.ms-Icon--textBox:before {
+ content: '\e20e';
+}
+
+.ms-Icon--drop:before {
+ content: '\e20f';
+}
+
+.ms-Icon--sun:before {
+ content: '\e210';
+}
+
+.ms-Icon--lifesaver:before {
+ content: '\e211';
+}
+
+.ms-Icon--lifesaverLock:before {
+ content: '\e212';
+}
+
+.ms-Icon--mailUnread:before {
+ content: '\e213';
+}
+
+.ms-Icon--mailRead:before {
+ content: '\e214';
+}
+
+.ms-Icon--inboxCheck:before {
+ content: '\e215';
+}
+
+.ms-Icon--folderSearch:before {
+ content: '\e216';
+}
+
+.ms-Icon--collapse:before {
+ content: '\e217';
+}
+
+.ms-Icon--expand:before {
+ content: '\e218';
+}
+
+.ms-Icon--ascending:before {
+ content: '\e219';
+}
+
+.ms-Icon--descending:before {
+ content: '\e21a';
+}
+
+.ms-Icon--filterClear:before {
+ content: '\e21b';
+}
+
+.ms-Icon--checkboxEmpty:before {
+ content: '\e21c';
+}
+
+.ms-Icon--checkboxMixed:before {
+ content: '\e21d';
+}
+
+.ms-Icon--boards:before {
+ content: '\e21e';
+}
+
+.ms-Icon--checkboxCheck:before {
+ content: '\e21f';
+}
+
+.ms-Icon--frowny:before {
+ content: '\e220';
+}
+
+.ms-Icon--lightBulb:before {
+ content: '\e221';
+}
+
+.ms-Icon--globe:before {
+ content: '\e222';
+}
+
+.ms-Icon--deviceWipe:before {
+ content: '\e223';
+}
+
+.ms-Icon--listCheck:before {
+ content: '\e226';
+}
+
+.ms-Icon--listGroup:before {
+ content: '\e227';
+}
+
+.ms-Icon--timeline:before {
+ content: '\e228';
+}
+
+.ms-Icon--fontIncrease:before {
+ content: '\e229';
+}
+
+.ms-Icon--fontDecrease:before {
+ content: '\e22a';
+}
+
+.ms-Icon--fontColor:before {
+ content: '\e22b';
+}
+
+.ms-Icon--mailCheck:before {
+ content: '\e22c';
+}
+
+.ms-Icon--mailDown:before {
+ content: '\e22d';
+}
+
+.ms-Icon--listCheckbox:before {
+ content: '\e22e';
+}
+
+.ms-Icon--sunAdd:before {
+ content: '\e22f';
+}
+
+.ms-Icon--sunQuestion:before {
+ content: '\e230';
+}
+
+.ms-Icon--chevronThinUp:before {
+ content: '\e231';
+}
+
+.ms-Icon--chevronThinDown:before {
+ content: '\e232';
+}
+
+.ms-Icon--chevronThinLeft:before {
+ content: '\e233';
+}
+
+.ms-Icon--chevronThinRight:before {
+ content: '\e234';
+}
+
+.ms-Icon--chevronThickUp:before {
+ content: '\e235';
+}
+
+.ms-Icon--chevronThickDown:before {
+ content: '\e236';
+}
+
+.ms-Icon--chevronThickLeft:before {
+ content: '\e237';
+}
+
+.ms-Icon--chevronThickRight:before {
+ content: '\e238';
+}
+
+.ms-Icon--linkRemove:before {
+ content: '\e239';
+}
+
+.ms-Icon--alertOutline:before {
+ content: '\e23b';
+}
+
+.ms-Icon--documentLandscape:before {
+ content: '\e23c';
+}
+
+.ms-Icon--documentAdd:before {
+ content: '\e23d';
+}
+
+.ms-Icon--toggleMiddle:before {
+ content: '\e23e';
+}
+
+.ms-Icon--embed:before {
+ content: '\e23f';
+}
+
+.ms-Icon--listNumbered:before {
+ content: '\e240';
+}
+
+.ms-Icon--peopleCheck:before {
+ content: '\e242';
+}
+
+.ms-Icon--caretUpOutline:before {
+ content: '\e243';
+}
+
+.ms-Icon--caretDownOutline:before {
+ content: '\e244';
+}
+
+.ms-Icon--caretLeftOutline:before {
+ content: '\e245';
+}
+
+.ms-Icon--caretRightOutline:before {
+ content: '\e246';
+}
+
+.ms-Icon--mailSync:before {
+ content: '\e248';
+}
+
+.ms-Icon--mailError:before {
+ content: '\e249';
+}
+
+.ms-Icon--mailPause:before {
+ content: '\e24a';
+}
+
+.ms-Icon--peopleSync:before {
+ content: '\e24b';
+}
+
+.ms-Icon--peopleError:before {
+ content: '\e24c';
+}
+
+.ms-Icon--peoplePause:before {
+ content: '\e24d';
+}
+
+.ms-Icon--circleBall:before {
+ content: '\e24e';
+}
+
+.ms-Icon--circleBalloons:before {
+ content: '\e24f';
+}
+
+.ms-Icon--circleCar:before {
+ content: '\e250';
+}
+
+.ms-Icon--circleCat:before {
+ content: '\e251';
+}
+
+.ms-Icon--circleCoffee:before {
+ content: '\e252';
+}
+
+.ms-Icon--circleDog:before {
+ content: '\e253';
+}
+
+.ms-Icon--circleLightning:before {
+ content: '\e254';
+}
+
+.ms-Icon--circlePill:before {
+ content: '\e255';
+}
+
+.ms-Icon--circlePlane:before {
+ content: '\e256';
+}
+
+.ms-Icon--circlePoodle:before {
+ content: '\e257';
+}
+
+.ms-Icon--checkPeople:before {
+ content: '\e259';
+}
+
+.ms-Icon--documentSearch:before {
+ content: '\e25a';
+}
+
+.ms-Icon--sortLines:before {
+ content: '\e25c';
+}
+
+.ms-Icon--calendarPublic:before {
+ content: '\e25d';
+}
+
+.ms-Icon--contactPublic:before {
+ content: '\e25e';
+}
+
+.ms-Icon--classNotebook:before {
+ content: '\e25f';
+}
+
+.ms-Icon--triangleUp:before {
+ content: '\e260';
+}
+
+.ms-Icon--triangleRight:before {
+ content: '\e261';
+}
+
+.ms-Icon--triangleDown:before {
+ content: '\e262';
+}
+
+.ms-Icon--triangleLeft:before {
+ content: '\e263';
+}
+
+.ms-Icon--triangleEmptyUp:before {
+ content: '\e264';
+}
+
+.ms-Icon--triangleEmptyRight:before {
+ content: '\e265';
+}
+
+.ms-Icon--triangleEmptyDown:before {
+ content: '\e266';
+}
+
+.ms-Icon--triangleEmptyLeft:before {
+ content: '\e267';
+}
+
+.ms-Icon--filePDF:before {
+ content: '\e268';
+}
+
+.ms-Icon--fileImage:before {
+ content: '\e26c';
+}
+
+.ms-Icon--fileDocument:before {
+ content: '\e26d';
+}
+
+.ms-Icon--listGroup2:before {
+ content: '\e26e';
+}
+
+.ms-Icon--copy:before {
+ content: '\e26f';
+}
+
+.ms-Icon--creditCardOutline:before {
+ content: '\e270';
+}
+
+.ms-Icon--mailPublic:before {
+ content: '\e272';
+}
+
+.ms-Icon--folderPublic:before {
+ content: '\e273';
+}
+
+.ms-Icon--teamwork:before {
+ content: '\e274';
+}
+
+.ms-Icon--move:before {
+ content: '\e275';
+}
+
+.ms-Icon--classroom:before {
+ content: '\e276';
+}
+
+.ms-Icon--menu2:before {
+ content: '\e277';
+}
+
+.ms-Icon--plus2:before {
+ content: '\e278';
+}
+
+.ms-Icon--tag:before {
+ content: '\e279';
+}
+
+.ms-Icon--arrowUp2:before {
+ content: '\e27a';
+}
+
+.ms-Icon--arrowDown2:before {
+ content: '\e27b';
+}
+
+.ms-Icon--circlePlus:before {
+ content: '\e27c';
+}
+
+.ms-Icon--circleInfo:before {
+ content: '\e27d';
+}
+
+.ms-Icon--section:before {
+ content: '\e27e';
+}
+
+.ms-Icon--sections:before {
+ content: '\e27f';
+}
+
+.ms-Icon--at:before {
+ content: '\e282';
+}
+
+.ms-Icon--arrowUpRight:before {
+ content: '\e283';
+}
+
+.ms-Icon--arrowDownRight:before {
+ content: '\e284';
+}
+
+.ms-Icon--arrowDownLeft:before {
+ content: '\e285';
+}
+
+.ms-Icon--arrowUpLeft:before {
+ content: '\e286';
+}
+
+.ms-Icon--bundle:before {
+ content: '\e287';
+}
+
+.ms-Icon--pictureEdit:before {
+ content: '\e288';
+}
+
+.ms-Icon--protectionCenter:before {
+ content: '\e289';
+}
+
+.ms-Icon--alert2:before {
+ content: '\e28a';
+}
+
+.ms-Icon--circle {
+ position: relative;
+ display: inline-block;
+ font-size: 1rem;
+ width: 1em;
+ height: 1em;
+ margin: 0 0.5em 0 0;
+ padding: 0;
+ text-align: left;
+ -webkit-font-smoothing: antialiased;
+}
+
+.ms-Icon--circle:before,
+.ms-Icon--circle:after {
+ line-height: 1;
+ font-size: inherit;
+}
+
+.ms-Icon--circle:before {
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ position: absolute;
+}
+
+.ms-Icon--circle:after {
+ content: '\e000';
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transform: scale(2);
+ -ms-transform: scale(2);
+ transform: scale(2);
+ -webkit-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ z-index: 0;
+}
+
+.ms-Icon--circle.ms-Icon--star:before {
+ top: -2%;
+ left: 1%;
+}
+
+.ms-Icon--circle.ms-Icon--person:before {
+ top: -2%;
+ left: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--alert:before {
+ top: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--mailOpen:before {
+ top: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--people:before {
+ top: -4%;
+ left: -7%;
+}
+
+.ms-Icon--circle.ms-Icon--bell:before {
+ top: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--scheduling:before {
+ top: -3%;
+ left: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--documents:before {
+ top: -1%;
+ left: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--listBullets:before {
+ top: -1%;
+ left: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--panel:before {
+ left: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--popout:before {
+ top: -2%;
+ left: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--home:before {
+ top: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--favorites:before {
+ top: -2%;
+ left: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--phone:before {
+ top: -2%;
+ left: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--mailSend:before {
+ left: -10%;
+}
+
+.ms-Icon--circle.ms-Icon--pencil:before {
+ top: -2%;
+ left: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--flag:before {
+ left: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--miniatures:before {
+ left: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--voicemail:before {
+ top: 2%;
+ left: -7%;
+}
+
+.ms-Icon--circle.ms-Icon--onlineAdd:before {
+ top: -1%;
+ left: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--pinDown:before {
+ top: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--gear:before {
+ left: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--check:before {
+ top: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--ellipsis:before {
+ top: 2%;
+ left: -12%;
+}
+
+.ms-Icon--circle.ms-Icon--directions:before {
+ left: 10%;
+}
+
+.ms-Icon--circle.ms-Icon--microphone:before {
+ top: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--caretDown:before {
+ top: 5%;
+ left: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--caretLeft:before {
+ left: -6%;
+}
+
+.ms-Icon--circle.ms-Icon--caretRight:before {
+ left: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--caretUpLeft:before {
+ top: 5%;
+ left: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--caretUpRight:before {
+ top: 5%;
+ left: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--caretDownRight:before {
+ left: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--caretDownLeft:before {
+ left: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--note:before {
+ top: 2%;
+ left: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--noteReply:before {
+ top: 6%;
+ left: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--noteForward:before {
+ top: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--key:before {
+ top: 5%;
+ left: 1%;
+}
+
+.ms-Icon--circle.ms-Icon--tile:before {
+ top: -1%;
+ left: -18%;
+}
+
+.ms-Icon--circle.ms-Icon--taskRecurring:before {
+ top: 2%;
+ left: -1%;
+}
+
+.ms-Icon--circle.ms-Icon--starEmpty:before {
+ top: -4%;
+ left: 1%;
+}
+
+.ms-Icon--circle.ms-Icon--documentReply:before {
+ top: -2%;
+ left: 7%;
+}
+
+.ms-Icon--circle.ms-Icon--documentForward:before {
+ left: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--partner:before {
+ top: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--reactivate:before {
+ top: -2%;
+ left: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--sort:before {
+ left: -19%;
+}
+
+.ms-Icon--circle.ms-Icon--personAdd:before {
+ top: -2%;
+ left: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronDown:before {
+ top: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronLeft:before {
+ left: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronRight:before {
+ left: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleAdd:before {
+ top: -5%;
+ left: -12%;
+}
+
+.ms-Icon--circle.ms-Icon--newsfeed:before {
+ left: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--notebook:before {
+ left: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--link:before {
+ top: 2%;
+ left: -18%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronsDown:before {
+ top: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronsLeft:before {
+ left: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronsRight:before {
+ left: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--personRemove:before {
+ left: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--receiptForward:before {
+ left: -20%;
+}
+
+.ms-Icon--circle.ms-Icon--receiptReply:before {
+ left: -20%;
+}
+
+.ms-Icon--circle.ms-Icon--receiptCheck:before {
+ left: -20%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleRemove:before {
+ top: -3%;
+ left: -12%;
+}
+
+.ms-Icon--circle.ms-Icon--merge:before {
+ top: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--split:before {
+ top: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--eventCancel:before {
+ left: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--today:before {
+ top: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--oofReply:before {
+ left: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--voicemailReply:before {
+ top: 4%;
+ left: -25%;
+}
+
+.ms-Icon--circle.ms-Icon--voicemailForward:before {
+ top: 4%;
+ left: -20%;
+}
+
+.ms-Icon--circle.ms-Icon--eye:before {
+ top: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--post:before {
+ top: -4%;
+ left: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--fax:before {
+ top: -3%;
+ left: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--lightning:before {
+ top: 2%;
+ left: 1%;
+}
+
+.ms-Icon--circle.ms-Icon--filter:before {
+ top: 7%;
+}
+
+.ms-Icon--circle.ms-Icon--cart:before {
+ left: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--socialListening:before {
+ top: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--mapMarker:before {
+ top: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--replyAllAlt:before {
+ left: -16%;
+}
+
+.ms-Icon--circle.ms-Icon--group:before {
+ left: -33%;
+}
+
+.ms-Icon--circle.ms-Icon--money:before {
+ left: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--noteEdit:before {
+ left: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--mailEdit:before {
+ top: 3%;
+ left: 7%;
+}
+
+.ms-Icon--circle.ms-Icon--pinLeft:before {
+ left: -6%;
+}
+
+.ms-Icon--circle.ms-Icon--heart:before {
+ top: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--heartEmpty:before {
+ top: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--cake:before {
+ top: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--books:before {
+ left: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--video:before {
+ top: -3%;
+ left: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--balloon:before {
+ top: 4%;
+ left: -1%;
+}
+
+.ms-Icon--circle.ms-Icon--music:before {
+ top: -2%;
+ left: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--stopwatch:before {
+ top: -3%;
+ left: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--coffee:before {
+ top: -3%;
+ left: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--plane:before {
+ left: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--dogAlt:before {
+ left: -15%;
+}
+
+.ms-Icon--circle.ms-Icon--metadata:before {
+ top: -4%;
+ left: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--text:before {
+ top: -4%;
+ left: 10%;
+}
+
+.ms-Icon--circle.ms-Icon--fieldText:before {
+ left: -14%;
+}
+
+.ms-Icon--circle.ms-Icon--fieldNumber:before {
+ left: -14%;
+}
+
+.ms-Icon--circle.ms-Icon--dropdown:before {
+ left: -14%;
+}
+
+.ms-Icon--circle.ms-Icon--story:before {
+ left: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--bold:before {
+ left: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--underline:before {
+ top: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--quote:before {
+ left: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--styleRemove:before {
+ top: 4%;
+ left: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--pictureAdd:before {
+ left: -6%;
+}
+
+.ms-Icon--circle.ms-Icon--pictureRemove:before {
+ left: -6%;
+}
+
+.ms-Icon--circle.ms-Icon--mobile:before {
+ left: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--hide:before {
+ top: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--header:before {
+ left: -9%;
+}
+
+.ms-Icon--circle.ms-Icon--msn:before {
+ left: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleCheck:before {
+ left: -7%;
+ top: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--caretDownOutline:before {
+ top: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--caretLeftOutline:before {
+ left: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--caretRightOutline:before {
+ left: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--sway:before {
+ left: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--mailSync:before {
+ left: 8%;
+ top: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleSync:before {
+ left: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleError:before {
+ left: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--peoplePause:before {
+ left: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--documentSearch:before {
+ left: 8%;
+}
+
+.ms-Icon--circle.ms-Icon--dynamicsMarketing:before {
+ left: -8%;
+}
+
+.ms-u-slideRightIn10 {
+ -webkit-animation-name: fadeIn, slideRightIn10;
+ animation-name: fadeIn, slideRightIn10;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightIn10 {
+ from {
+ -webkit-transform: translate3d(-10px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightIn10 {
+ from {
+ -webkit-transform: translate3d(-10px, 0px, 0px);
+ transform: translate3d(-10px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightIn20 {
+ -webkit-animation-name: fadeIn, slideRightIn20;
+ animation-name: fadeIn, slideRightIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightIn20 {
+ from {
+ -webkit-transform: translate3d(-20px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightIn20 {
+ from {
+ -webkit-transform: translate3d(-20px, 0px, 0px);
+ transform: translate3d(-20px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightIn40 {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightIn40 {
+ from {
+ -webkit-transform: translate3d(-40px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightIn40 {
+ from {
+ -webkit-transform: translate3d(-40px, 0px, 0px);
+ transform: translate3d(-40px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftIn10 {
+ -webkit-animation-name: fadeIn, slideLeftIn10;
+ animation-name: fadeIn, slideLeftIn10;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftIn10 {
+ from {
+ -webkit-transform: translate3d(10px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftIn10 {
+ from {
+ -webkit-transform: translate3d(10px, 0px, 0px);
+ transform: translate3d(10px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftIn20 {
+ -webkit-animation-name: fadeIn, slideLeftIn20;
+ animation-name: fadeIn, slideLeftIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftIn20 {
+ from {
+ -webkit-transform: translate3d(20px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftIn20 {
+ from {
+ -webkit-transform: translate3d(20px, 0px, 0px);
+ transform: translate3d(20px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftIn40 {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftIn40 {
+ from {
+ -webkit-transform: translate3d(40px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftIn40 {
+ from {
+ -webkit-transform: translate3d(40px, 0px, 0px);
+ transform: translate3d(40px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightIn400 {
+ -webkit-animation-name: fadeIn, slideRightIn400;
+ animation-name: fadeIn, slideRightIn400;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightIn400 {
+ from {
+ -webkit-transform: translate3d(-400px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightIn400 {
+ from {
+ -webkit-transform: translate3d(-400px, 0px, 0px);
+ transform: translate3d(-400px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftIn400 {
+ -webkit-animation-name: fadeIn, slideLeft400;
+ animation-name: fadeIn, slideLeft400;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeft400 {
+ from {
+ -webkit-transform: translate3d(400px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeft400 {
+ from {
+ -webkit-transform: translate3d(400px, 0px, 0px);
+ transform: translate3d(400px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideUpIn20 {
+ -webkit-animation-name: fadeIn, slideUpIn20;
+ animation-name: fadeIn, slideUpIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideUpIn20 {
+ from {
+ -webkit-transform: translate3d(0px, 20px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideUpIn20 {
+ from {
+ -webkit-transform: translate3d(0px, 20px, 0px);
+ transform: translate3d(0px, 20px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideUpIn10 {
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideUpIn10 {
+ from {
+ -webkit-transform: translate3d(0px, 10px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideUpIn10 {
+ from {
+ -webkit-transform: translate3d(0px, 10px, 0px);
+ transform: translate3d(0px, 10px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideDownIn20 {
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideDownIn20 {
+ from {
+ -webkit-transform: translate3d(0px, -20px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideDownIn20 {
+ from {
+ -webkit-transform: translate3d(0px, -20px, 0px);
+ transform: translate3d(0px, -20px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideDownIn10 {
+ -webkit-animation-name: fadeIn, slideDownIn10;
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideDownIn10 {
+ from {
+ -webkit-transform: translate3d(0px, -10px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideDownIn10 {
+ from {
+ -webkit-transform: translate3d(0px, -10px, 0px);
+ transform: translate3d(0px, -10px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightOut40 {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightOut40 {
+ from {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(40px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightOut40 {
+ from {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(40px, 0px, 0px);
+ transform: translate3d(40px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftOut40 {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftOut40 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(-40px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftOut40 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(-40px, 0px, 0px);
+ transform: translate3d(-40px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightOut400 {
+ -webkit-animation-name: fadeOut, slideRightOut400;
+ animation-name: fadeOut, slideRightOut400;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightOut400 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(400px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightOut400 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(400px, 0px, 0px);
+ transform: translate3d(400px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftOut400 {
+ -webkit-animation-name: fadeOut, slideLeftOut400;
+ animation-name: fadeOut, slideLeftOut400;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftOut400 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(-400px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftOut400 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(-400px, 0px, 0px);
+ transform: translate3d(-400px, 0px, 0px);
+ }
+}
+
+.ms-u-slideUpOut20 {
+ -webkit-animation-name: fadeOut, slideUpOut20;
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideUpOut20 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, -20px, 0px);
+ }
+}
+
+@keyframes slideUpOut20 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, -20px, 0px);
+ transform: translate3d(0px, -20px, 0px);
+ }
+}
+
+.ms-u-slideUpOut10 {
+ -webkit-animation-name: fadeOut, slideUpOut10;
+ animation-name: fadeOut, slideUpOut10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideUpOut10 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, -10px, 0px);
+ }
+}
+
+@keyframes slideUpOut10 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, -10px, 0px);
+ transform: translate3d(0px, -10px, 0px);
+ }
+}
+
+.ms-u-slideDownOut20 {
+ -webkit-animation-name: fadeOut, slideDownOut20;
+ animation-name: fadeOut, slideDownOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideDownOut20 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 20px, 0px);
+ }
+}
+
+@keyframes slideDownOut20 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 20px, 0px);
+ transform: translate3d(0px, 20px, 0px);
+ }
+}
+
+.ms-u-slideDownOut10 {
+ -webkit-animation-name: fadeOut, slideDownOut10;
+ animation-name: fadeOut, slideDownOut10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideDownOut10 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 10px, 0px);
+ }
+}
+
+@keyframes slideDownOut10 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 10px, 0px);
+ transform: translate3d(0px, 10px, 0px);
+ }
+}
+
+.ms-u-scaleUpIn100 {
+ -webkit-animation-name: fadeIn, scaleUp100;
+ animation-name: fadeIn, scaleUp100;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes scaleUp100 {
+ from {
+ -webkit-transform: scale3d(0.98, 0.98, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes scaleUp100 {
+ from {
+ -webkit-transform: scale3d(0.98, 0.98, 1);
+ transform: scale3d(0.98, 0.98, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.ms-u-scaleDownIn100 {
+ -webkit-animation-name: fadeIn, scaleDown100;
+ animation-name: fadeIn, scaleDown100;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes scaleDown100 {
+ from {
+ -webkit-transform: scale3d(1.03, 1.03, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes scaleDown100 {
+ from {
+ -webkit-transform: scale3d(1.03, 1.03, 1);
+ transform: scale3d(1.03, 1.03, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.ms-u-scaleUpOut103 {
+ -webkit-animation-name: fadeOut, scaleUp103;
+ animation-name: fadeOut, scaleUp103;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes scaleUp103 {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1.03, 1.03, 1);
+ }
+}
+
+@keyframes scaleUp103 {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1.03, 1.03, 1);
+ transform: scale3d(1.03, 1.03, 1);
+ }
+}
+
+.ms-u-scaleDownOut98 {
+ -webkit-animation-name: fadeOut, scaleDown98;
+ animation-name: fadeOut, scaleDown98;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes scaleDown98 {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(0.98, 0.98, 1);
+ }
+}
+
+@keyframes scaleDown98 {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(0.98, 0.98, 1);
+ transform: scale3d(0.98, 0.98, 1);
+ }
+}
+
+.ms-u-fadeIn400 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-fadeIn100 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-u-fadeIn200 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-u-fadeIn500 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.467s;
+ animation-duration: 0.467s;
+}
+
+@-webkit-keyframes fadeIn {
+ from {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.ms-u-fadeOut400 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-fadeOut100 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-u-fadeOut200 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-u-fadeOut500 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.467s;
+ animation-duration: 0.467s;
+}
+
+@-webkit-keyframes fadeOut {
+ from {
+ opacity: 1;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.ms-u-rotate90deg {
+ -webkit-animation-name: rotate90;
+ animation-name: rotate90;
+ -webkit-animation-duration: 0.1s;
+ -moz-animation-duration: 0.1s;
+ -ms-animation-duration: 0.1s;
+ -o-animation-duration: 0.1s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes rotate90 {
+ from {
+ -webkit-transform: rotateZ(0deg);
+ }
+
+ to {
+ -webkit-transform: rotateZ(90deg);
+ }
+}
+
+@keyframes rotate90 {
+ from {
+ -webkit-transform: rotateZ(0deg);
+ transform: rotateZ(0deg);
+ }
+
+ to {
+ -webkit-transform: rotateZ(90deg);
+ transform: rotateZ(90deg);
+ }
+}
+
+.ms-u-rotateN90deg {
+ -webkit-animation-name: rotateN90;
+ animation-name: rotateN90;
+ -webkit-animation-duration: 0.1s;
+ -moz-animation-duration: 0.1s;
+ -ms-animation-duration: 0.1s;
+ -o-animation-duration: 0.1s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes rotateN90 {
+ from {
+ -webkit-transform: rotateZ(90deg);
+ }
+
+ to {
+ -webkit-transform: rotateZ(0deg);
+ }
+}
+
+@keyframes rotateN90 {
+ from {
+ -webkit-transform: rotateZ(90deg);
+ transform: rotateZ(90deg);
+ }
+
+ to {
+ -webkit-transform: rotateZ(0deg);
+ transform: rotateZ(0deg);
+ }
+}
+
+.ms-u-expandCollapse400 {
+ transition: height 0.367s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-u-expandCollapse200 {
+ transition: height 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-u-expandCollapse100 {
+ transition: height 0.1s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-u-delay100 {
+ -webkit-animation-delay: 0.167s;
+ animation-delay: 0.167s;
+}
+
+.ms-u-delay200 {
+ -webkit-animation-delay: 0.267s;
+ animation-delay: 0.267s;
+}
+
+@media (max-width: 479px) {
+ .ms-u-hiddenSm,
+ .ms-u-hiddenMdDown,
+ .ms-u-hiddenLgDown,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 480px) and (max-width: 639px) {
+ .ms-u-hiddenMd,
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenMdDown,
+ .ms-u-hiddenLgDown,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 640px) and (max-width: 1023px) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLg,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenLgDown,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 1024px) and (max-width: 1365px) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenXl,
+ .ms-u-hiddenXlUp,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 1366px) and (max-width: 1919px) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenXlUp,
+ .ms-u-hiddenXxl,
+ .ms-u-hiddenXxlUp,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 1920px) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenXlUp,
+ .ms-u-hiddenXxlUp,
+ .ms-u-hiddenXxxl {
+ display: none !important;
+ }
+}
+
+.ms-u-sm12 {
+ width: 100%;
+}
+
+.ms-u-sm11 {
+ width: 91.66666666666666%;
+}
+
+.ms-u-sm10 {
+ width: 83.33333333333334%;
+}
+
+.ms-u-sm9 {
+ width: 75%;
+}
+
+.ms-u-sm8 {
+ width: 66.66666666666666%;
+}
+
+.ms-u-sm7 {
+ width: 58.333333333333336%;
+}
+
+.ms-u-sm6 {
+ width: 50%;
+}
+
+.ms-u-sm5 {
+ width: 41.66666666666667%;
+}
+
+.ms-u-sm4 {
+ width: 33.33333333333333%;
+}
+
+.ms-u-sm3 {
+ width: 25%;
+}
+
+.ms-u-sm2 {
+ width: 16.666666666666664%;
+}
+
+.ms-u-sm1 {
+ width: 8.333333333333332%;
+}
+
+.ms-u-smPull12 {
+ right: 100%;
+}
+
+.ms-u-smPull11 {
+ right: 91.66666666666666%;
+}
+
+.ms-u-smPull10 {
+ right: 83.33333333333334%;
+}
+
+.ms-u-smPull9 {
+ right: 75%;
+}
+
+.ms-u-smPull8 {
+ right: 66.66666666666666%;
+}
+
+.ms-u-smPull7 {
+ right: 58.333333333333336%;
+}
+
+.ms-u-smPull6 {
+ right: 50%;
+}
+
+.ms-u-smPull5 {
+ right: 41.66666666666667%;
+}
+
+.ms-u-smPull4 {
+ right: 33.33333333333333%;
+}
+
+.ms-u-smPull3 {
+ right: 25%;
+}
+
+.ms-u-smPull2 {
+ right: 16.666666666666664%;
+}
+
+.ms-u-smPull1 {
+ right: 8.333333333333332%;
+}
+
+.ms-u-smPull0 {
+ right: auto;
+}
+
+.ms-u-smPush12 {
+ left: 100%;
+}
+
+.ms-u-smPush11 {
+ left: 91.66666666666666%;
+}
+
+.ms-u-smPush10 {
+ left: 83.33333333333334%;
+}
+
+.ms-u-smPush9 {
+ left: 75%;
+}
+
+.ms-u-smPush8 {
+ left: 66.66666666666666%;
+}
+
+.ms-u-smPush7 {
+ left: 58.333333333333336%;
+}
+
+.ms-u-smPush6 {
+ left: 50%;
+}
+
+.ms-u-smPush5 {
+ left: 41.66666666666667%;
+}
+
+.ms-u-smPush4 {
+ left: 33.33333333333333%;
+}
+
+.ms-u-smPush3 {
+ left: 25%;
+}
+
+.ms-u-smPush2 {
+ left: 16.666666666666664%;
+}
+
+.ms-u-smPush1 {
+ left: 8.333333333333332%;
+}
+
+.ms-u-smPush0 {
+ left: auto;
+}
+
+.ms-u-smOffset11 {
+ margin-left: 91.66666666666666%;
+}
+
+.ms-u-smOffset10 {
+ margin-left: 83.33333333333334%;
+}
+
+.ms-u-smOffset9 {
+ margin-left: 75%;
+}
+
+.ms-u-smOffset8 {
+ margin-left: 66.66666666666666%;
+}
+
+.ms-u-smOffset7 {
+ margin-left: 58.333333333333336%;
+}
+
+.ms-u-smOffset6 {
+ margin-left: 50%;
+}
+
+.ms-u-smOffset5 {
+ margin-left: 41.66666666666667%;
+}
+
+.ms-u-smOffset4 {
+ margin-left: 33.33333333333333%;
+}
+
+.ms-u-smOffset3 {
+ margin-left: 25%;
+}
+
+.ms-u-smOffset2 {
+ margin-left: 16.666666666666664%;
+}
+
+.ms-u-smOffset1 {
+ margin-left: 8.333333333333332%;
+}
+
+.ms-u-smOffset0 {
+ margin-left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-u-md12 {
+ width: 100%;
+ }
+
+ .ms-u-md11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-md10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-md9 {
+ width: 75%;
+ }
+
+ .ms-u-md8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-md7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-md6 {
+ width: 50%;
+ }
+
+ .ms-u-md5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-md4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-md3 {
+ width: 25%;
+ }
+
+ .ms-u-md2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-md1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-mdPull12 {
+ right: 100%;
+ }
+
+ .ms-u-mdPull11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-mdPull10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-mdPull9 {
+ right: 75%;
+ }
+
+ .ms-u-mdPull8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-mdPull7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-mdPull6 {
+ right: 50%;
+ }
+
+ .ms-u-mdPull5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-mdPull4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-mdPull3 {
+ right: 25%;
+ }
+
+ .ms-u-mdPull2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-mdPull1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-mdPull0 {
+ right: auto;
+ }
+
+ .ms-u-mdPush12 {
+ left: 100%;
+ }
+
+ .ms-u-mdPush11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-mdPush10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-mdPush9 {
+ left: 75%;
+ }
+
+ .ms-u-mdPush8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-mdPush7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-mdPush6 {
+ left: 50%;
+ }
+
+ .ms-u-mdPush5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-mdPush4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-mdPush3 {
+ left: 25%;
+ }
+
+ .ms-u-mdPush2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-mdPush1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-mdPush0 {
+ left: auto;
+ }
+
+ .ms-u-mdOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+
+ .ms-u-mdOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+
+ .ms-u-mdOffset9 {
+ margin-left: 75%;
+ }
+
+ .ms-u-mdOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+
+ .ms-u-mdOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+
+ .ms-u-mdOffset6 {
+ margin-left: 50%;
+ }
+
+ .ms-u-mdOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+
+ .ms-u-mdOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+
+ .ms-u-mdOffset3 {
+ margin-left: 25%;
+ }
+
+ .ms-u-mdOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+
+ .ms-u-mdOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+
+ .ms-u-mdOffset0 {
+ margin-left: 0;
+ }
+}
+
+@media (min-width: 640px) {
+ .ms-u-lg12 {
+ width: 100%;
+ }
+
+ .ms-u-lg11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-lg10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-lg9 {
+ width: 75%;
+ }
+
+ .ms-u-lg8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-lg7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-lg6 {
+ width: 50%;
+ }
+
+ .ms-u-lg5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-lg4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-lg3 {
+ width: 25%;
+ }
+
+ .ms-u-lg2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-lg1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-lgPull12 {
+ right: 100%;
+ }
+
+ .ms-u-lgPull11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-lgPull10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-lgPull9 {
+ right: 75%;
+ }
+
+ .ms-u-lgPull8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-lgPull7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-lgPull6 {
+ right: 50%;
+ }
+
+ .ms-u-lgPull5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-lgPull4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-lgPull3 {
+ right: 25%;
+ }
+
+ .ms-u-lgPull2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-lgPull1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-lgPull0 {
+ right: auto;
+ }
+
+ .ms-u-lgPush12 {
+ left: 100%;
+ }
+
+ .ms-u-lgPush11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-lgPush10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-lgPush9 {
+ left: 75%;
+ }
+
+ .ms-u-lgPush8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-lgPush7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-lgPush6 {
+ left: 50%;
+ }
+
+ .ms-u-lgPush5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-lgPush4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-lgPush3 {
+ left: 25%;
+ }
+
+ .ms-u-lgPush2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-lgPush1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-lgPush0 {
+ left: auto;
+ }
+
+ .ms-u-lgOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+
+ .ms-u-lgOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+
+ .ms-u-lgOffset9 {
+ margin-left: 75%;
+ }
+
+ .ms-u-lgOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+
+ .ms-u-lgOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+
+ .ms-u-lgOffset6 {
+ margin-left: 50%;
+ }
+
+ .ms-u-lgOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+
+ .ms-u-lgOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+
+ .ms-u-lgOffset3 {
+ margin-left: 25%;
+ }
+
+ .ms-u-lgOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+
+ .ms-u-lgOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+
+ .ms-u-lgOffset0 {
+ margin-left: 0;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ms-u-xl12 {
+ width: 100%;
+ }
+
+ .ms-u-xl11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-xl10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-xl9 {
+ width: 75%;
+ }
+
+ .ms-u-xl8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-xl7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-xl6 {
+ width: 50%;
+ }
+
+ .ms-u-xl5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-xl4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-xl3 {
+ width: 25%;
+ }
+
+ .ms-u-xl2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-xl1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-xlPull12 {
+ right: 100%;
+ }
+
+ .ms-u-xlPull11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-xlPull10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-xlPull9 {
+ right: 75%;
+ }
+
+ .ms-u-xlPull8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-xlPull7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-xlPull6 {
+ right: 50%;
+ }
+
+ .ms-u-xlPull5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-xlPull4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-xlPull3 {
+ right: 25%;
+ }
+
+ .ms-u-xlPull2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-xlPull1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-xlPull0 {
+ right: auto;
+ }
+
+ .ms-u-xlPush12 {
+ left: 100%;
+ }
+
+ .ms-u-xlPush11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-xlPush10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-xlPush9 {
+ left: 75%;
+ }
+
+ .ms-u-xlPush8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-xlPush7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-xlPush6 {
+ left: 50%;
+ }
+
+ .ms-u-xlPush5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-xlPush4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-xlPush3 {
+ left: 25%;
+ }
+
+ .ms-u-xlPush2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-xlPush1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-xlPush0 {
+ left: auto;
+ }
+
+ .ms-u-xlOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+
+ .ms-u-xlOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+
+ .ms-u-xlOffset9 {
+ margin-left: 75%;
+ }
+
+ .ms-u-xlOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+
+ .ms-u-xlOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+
+ .ms-u-xlOffset6 {
+ margin-left: 50%;
+ }
+
+ .ms-u-xlOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+
+ .ms-u-xlOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+
+ .ms-u-xlOffset3 {
+ margin-left: 25%;
+ }
+
+ .ms-u-xlOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+
+ .ms-u-xlOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+
+ .ms-u-xlOffset0 {
+ margin-left: 0;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-u-xxl12 {
+ width: 100%;
+ }
+
+ .ms-u-xxl11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-xxl10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-xxl9 {
+ width: 75%;
+ }
+
+ .ms-u-xxl8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-xxl7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-xxl6 {
+ width: 50%;
+ }
+
+ .ms-u-xxl5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-xxl4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-xxl3 {
+ width: 25%;
+ }
+
+ .ms-u-xxl2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-xxl1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-xxlPull12 {
+ right: 100%;
+ }
+
+ .ms-u-xxlPull11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-xxlPull10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-xxlPull9 {
+ right: 75%;
+ }
+
+ .ms-u-xxlPull8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-xxlPull7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-xxlPull6 {
+ right: 50%;
+ }
+
+ .ms-u-xxlPull5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-xxlPull4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-xxlPull3 {
+ right: 25%;
+ }
+
+ .ms-u-xxlPull2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-xxlPull1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-xxlPull0 {
+ right: auto;
+ }
+
+ .ms-u-xxlPush12 {
+ left: 100%;
+ }
+
+ .ms-u-xxlPush11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-xxlPush10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-xxlPush9 {
+ left: 75%;
+ }
+
+ .ms-u-xxlPush8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-xxlPush7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-xxlPush6 {
+ left: 50%;
+ }
+
+ .ms-u-xxlPush5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-xxlPush4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-xxlPush3 {
+ left: 25%;
+ }
+
+ .ms-u-xxlPush2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-xxlPush1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-xxlPush0 {
+ left: auto;
+ }
+
+ .ms-u-xxlOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+
+ .ms-u-xxlOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+
+ .ms-u-xxlOffset9 {
+ margin-left: 75%;
+ }
+
+ .ms-u-xxlOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+
+ .ms-u-xxlOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+
+ .ms-u-xxlOffset6 {
+ margin-left: 50%;
+ }
+
+ .ms-u-xxlOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+
+ .ms-u-xxlOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+
+ .ms-u-xxlOffset3 {
+ margin-left: 25%;
+ }
+
+ .ms-u-xxlOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+
+ .ms-u-xxlOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+
+ .ms-u-xxlOffset0 {
+ margin-left: 0;
+ }
+}
+
+@media (min-width: 1920px) {
+ .ms-u-xxxl12 {
+ width: 100%;
+ }
+
+ .ms-u-xxxl11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-xxxl10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-xxxl9 {
+ width: 75%;
+ }
+
+ .ms-u-xxxl8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-xxxl7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-xxxl6 {
+ width: 50%;
+ }
+
+ .ms-u-xxxl5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-xxxl4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-xxxl3 {
+ width: 25%;
+ }
+
+ .ms-u-xxxl2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-xxxl1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-xxxlPull12 {
+ right: 100%;
+ }
+
+ .ms-u-xxxlPull11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-xxxlPull10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-xxxlPull9 {
+ right: 75%;
+ }
+
+ .ms-u-xxxlPull8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-xxxlPull7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-xxxlPull6 {
+ right: 50%;
+ }
+
+ .ms-u-xxxlPull5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-xxxlPull4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-xxxlPull3 {
+ right: 25%;
+ }
+
+ .ms-u-xxxlPull2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-xxxlPull1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-xxxlPull0 {
+ right: auto;
+ }
+
+ .ms-u-xxxlPush12 {
+ left: 100%;
+ }
+
+ .ms-u-xxxlPush11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-xxxlPush10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-xxxlPush9 {
+ left: 75%;
+ }
+
+ .ms-u-xxxlPush8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-xxxlPush7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-xxxlPush6 {
+ left: 50%;
+ }
+
+ .ms-u-xxxlPush5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-xxxlPush4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-xxxlPush3 {
+ left: 25%;
+ }
+
+ .ms-u-xxxlPush2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-xxxlPush1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-xxxlPush0 {
+ left: auto;
+ }
+
+ .ms-u-xxxlOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+
+ .ms-u-xxxlOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+
+ .ms-u-xxxlOffset9 {
+ margin-left: 75%;
+ }
+
+ .ms-u-xxxlOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+
+ .ms-u-xxxlOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+
+ .ms-u-xxxlOffset6 {
+ margin-left: 50%;
+ }
+
+ .ms-u-xxxlOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+
+ .ms-u-xxxlOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+
+ .ms-u-xxxlOffset3 {
+ margin-left: 25%;
+ }
+
+ .ms-u-xxxlOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+
+ .ms-u-xxxlOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+
+ .ms-u-xxxlOffset0 {
+ margin-left: 0;
+ }
+}
+
+.ms-Grid {
+ box-sizing: border-box;
+ *zoom: 1;
+ padding: 0 8px;
+}
+
+.ms-Grid:before,
+.ms-Grid:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-Grid:after {
+ clear: both;
+}
+
+.ms-Grid-row {
+ margin: 0 -8px;
+ box-sizing: border-box;
+ *zoom: 1;
+}
+
+.ms-Grid-row:before,
+.ms-Grid-row:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-Grid-row:after {
+ clear: both;
+}
+
+.ms-Grid-col {
+ position: relative;
+ min-height: 1px;
+ padding-left: 8px;
+ padding-right: 8px;
+ box-sizing: border-box;
+ float: left;
+}
+
+.ms-Grid-col .ms-Grid {
+ padding: 0;
+}
diff --git a/dist/css/fabric.min.css b/dist/css/fabric.min.css
new file mode 100644
index 000000000..dd3e404f4
--- /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 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-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-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2b88d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#71afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#c7e0f4}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-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-alert{background-color:#f4f4f4}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2b88d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#71afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#c7e0f4}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-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-borderColor-info,.ms-borderColor-success{border-color:#107c10}.ms-borderColor-alert{border-color:#d83b01}.ms-borderColor-error{border-color:#a80000}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-xxl{font-size:28px}.ms-font-xl{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-font-l,.ms-font-xl{color:#333;font-weight:400}.ms-font-l{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px}.ms-font-mi,.ms-font-xs{color:#333;font-weight:400}.ms-font-mi{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:10px}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2b88d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#71afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#c7e0f4}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-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,.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}@font-face{font-family:Leelawadee UI Bold;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI Semilight;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Arabic;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Arabic;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Arabic;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Arabic;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Cyrillic;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Cyrillic;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Cyrillic;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Cyrillic;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light EastEuropean;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular EastEuropean;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold EastEuropean;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight EastEuropean;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Greek;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Greek;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Greek;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Greek;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Hebrew;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Hebrew;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Hebrew;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Hebrew;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Vietnamese;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Vietnamese;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Vietnamese;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Vietnamese;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light WestEuropean;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular WestEuropean;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold WestEuropean;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight WestEuropean;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}[lang=ja-JP] .ms-font-l,[lang=ja-JP] .ms-font-m,[lang=ja-JP] .ms-font-m-plus,[lang=ja-JP] .ms-font-mi,[lang=ja-JP] .ms-font-s,[lang=ja-JP] .ms-font-s-plus,[lang=ja-JP] .ms-font-su,[lang=ja-JP] .ms-font-xl,[lang=ja-JP] .ms-font-xs,[lang=ja-JP] .ms-font-xxl,[lang=ja-JP] .ms-fontWeight-light,[lang=ja-JP] .ms-fontWeight-light-hover:hover,[lang=ja-JP] .ms-fontWeight-regular,[lang=ja-JP] .ms-fontWeight-regular-hover:hover,[lang=ja-JP] .ms-fontWeight-semibold,[lang=ja-JP] .ms-fontWeight-semibold-hover:hover,[lang=ja-JP] .ms-fontWeight-semilight,[lang=ja-JP] .ms-fontWeight-semilight-hover:hover{font-family:Yu Gothic,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,Tahoma,Arial,sans-serif}[lang=ko-KR] .ms-font-l,[lang=ko-KR] .ms-font-m,[lang=ko-KR] .ms-font-m-plus,[lang=ko-KR] .ms-font-mi,[lang=ko-KR] .ms-font-s,[lang=ko-KR] .ms-font-s-plus,[lang=ko-KR] .ms-font-su,[lang=ko-KR] .ms-font-xl,[lang=ko-KR] .ms-font-xs,[lang=ko-KR] .ms-font-xxl,[lang=ko-KR] .ms-fontWeight-light,[lang=ko-KR] .ms-fontWeight-light-hover:hover,[lang=ko-KR] .ms-fontWeight-regular,[lang=ko-KR] .ms-fontWeight-regular-hover:hover,[lang=ko-KR] .ms-fontWeight-semibold,[lang=ko-KR] .ms-fontWeight-semibold-hover:hover,[lang=ko-KR] .ms-fontWeight-semilight,[lang=ko-KR] .ms-fontWeight-semilight-hover:hover{font-family:Malgun Gothic,Gulim,Segoe UI,Tahoma,Arial,sans-serif}[lang=ch-ZHS] .ms-font-l,[lang=ch-ZHS] .ms-font-m,[lang=ch-ZHS] .ms-font-m-plus,[lang=ch-ZHS] .ms-font-mi,[lang=ch-ZHS] .ms-font-s,[lang=ch-ZHS] .ms-font-s-plus,[lang=ch-ZHS] .ms-font-su,[lang=ch-ZHS] .ms-font-xl,[lang=ch-ZHS] .ms-font-xs,[lang=ch-ZHS] .ms-font-xxl,[lang=ch-ZHS] .ms-fontWeight-light,[lang=ch-ZHS] .ms-fontWeight-light-hover:hover,[lang=ch-ZHS] .ms-fontWeight-regular,[lang=ch-ZHS] .ms-fontWeight-regular-hover:hover,[lang=ch-ZHS] .ms-fontWeight-semibold,[lang=ch-ZHS] .ms-fontWeight-semibold-hover:hover,[lang=ch-ZHS] .ms-fontWeight-semilight,[lang=ch-ZHS] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Yahei,Verdana,Simsun,Segoe UI,Tahoma,Arial,sans-serif}[lang=ch-ZHT] .ms-font-l,[lang=ch-ZHT] .ms-font-m,[lang=ch-ZHT] .ms-font-m-plus,[lang=ch-ZHT] .ms-font-mi,[lang=ch-ZHT] .ms-font-s,[lang=ch-ZHT] .ms-font-s-plus,[lang=ch-ZHT] .ms-font-su,[lang=ch-ZHT] .ms-font-xl,[lang=ch-ZHT] .ms-font-xs,[lang=ch-ZHT] .ms-font-xxl,[lang=ch-ZHT] .ms-fontWeight-light,[lang=ch-ZHT] .ms-fontWeight-light-hover:hover,[lang=ch-ZHT] .ms-fontWeight-regular,[lang=ch-ZHT] .ms-fontWeight-regular-hover:hover,[lang=ch-ZHT] .ms-fontWeight-semibold,[lang=ch-ZHT] .ms-fontWeight-semibold-hover:hover,[lang=ch-ZHT] .ms-fontWeight-semilight,[lang=ch-ZHT] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Jhenghei,Pmingliu,Segoe UI,Tahoma,Arial,sans-serif}[lang=hi-IN] .ms-font-l,[lang=hi-IN] .ms-font-m,[lang=hi-IN] .ms-font-m-plus,[lang=hi-IN] .ms-font-mi,[lang=hi-IN] .ms-font-s,[lang=hi-IN] .ms-font-s-plus,[lang=hi-IN] .ms-font-su,[lang=hi-IN] .ms-font-xl,[lang=hi-IN] .ms-font-xs,[lang=hi-IN] .ms-font-xxl,[lang=hi-IN] .ms-fontWeight-light,[lang=hi-IN] .ms-fontWeight-light-hover:hover,[lang=hi-IN] .ms-fontWeight-regular,[lang=hi-IN] .ms-fontWeight-regular-hover:hover,[lang=hi-IN] .ms-fontWeight-semibold,[lang=hi-IN] .ms-fontWeight-semibold-hover:hover,[lang=hi-IN] .ms-fontWeight-semilight,[lang=hi-IN] .ms-fontWeight-semilight-hover:hover{font-family:Nirmala UI,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-font-l,[lang=th-TH] .ms-font-su,[lang=th-TH] .ms-font-xl,[lang=th-TH] .ms-font-xxl,[lang=th-TH] .ms-fontWeight-light,[lang=th-TH] .ms-fontWeight-light-hover:hover,[lang=th-TH] .ms-fontWeight-semilight,[lang=th-TH] .ms-fontWeight-semilight-hover:hover{font-family:Leelawadee UI Semilight,Kmer UI,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-fontWeight-regular,[lang=th-TH] .ms-fontweight-regular-hover:hover{font-family:Leelawadee UI Regular,Kmer UI,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-font-mi,[lang=th-TH] .ms-fontWeight-semibold,[lang=th-TH] .ms-fontWeight-semibold-hover:hover{font-family:Leelawadee UI Bold,Kmer UI,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-xl,[lang=ar] .ms-font-xxl,[lang=ar] .ms-fontWeight-light,[lang=ar] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Arabic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-l,[lang=ar] .ms-font-su,[lang=ar] .ms-fontWeight-semilight,[lang=ar] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Arabic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-fontWeight-regular,[lang=ar] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Arabic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-mi,[lang=ar] .ms-fontWeight-semibold,[lang=ar] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Arabic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-xl,[lang=bg-BG] .ms-font-xxl,[lang=bg-BG] .ms-fontWeight-light,[lang=bg-BG] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-l,[lang=bg-BG] .ms-font-su,[lang=bg-BG] .ms-fontWeight-semilight,[lang=bg-BG] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-fontWeight-regular,[lang=bg-BG] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-mi,[lang=bg-BG] .ms-fontWeight-semibold,[lang=bg-BG] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-xl,[lang=ru-RU] .ms-font-xxl,[lang=ru-RU] .ms-fontWeight-light,[lang=ru-RU] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-l,[lang=ru-RU] .ms-font-su,[lang=ru-RU] .ms-fontWeight-semilight,[lang=ru-RU] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-fontWeight-regular,[lang=ru-RU] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-mi,[lang=ru-RU] .ms-fontWeight-semibold,[lang=ru-RU] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-xl,[lang=uk-UA] .ms-font-xxl,[lang=uk-UA] .ms-fontWeight-light,[lang=uk-UA] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-l,[lang=uk-UA] .ms-font-su,[lang=uk-UA] .ms-fontWeight-semilight,[lang=uk-UA] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-fontWeight-regular,[lang=uk-UA] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-mi,[lang=uk-UA] .ms-fontWeight-semibold,[lang=uk-UA] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-xl,[lang=cs-CZ] .ms-font-xxl,[lang=cs-CZ] .ms-fontWeight-light,[lang=cs-CZ] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-l,[lang=cs-CZ] .ms-font-su,[lang=cs-CZ] .ms-fontWeight-semilight,[lang=cs-CZ] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-fontWeight-regular,[lang=cs-CZ] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-mi,[lang=cs-CZ] .ms-fontWeight-semibold,[lang=cs-CZ] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-xl,[lang=et-EE] .ms-font-xxl,[lang=et-EE] .ms-fontWeight-light,[lang=et-EE] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-l,[lang=et-EE] .ms-font-su,[lang=et-EE] .ms-fontWeight-semilight,[lang=et-EE] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-fontWeight-regular,[lang=et-EE] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-mi,[lang=et-EE] .ms-fontWeight-semibold,[lang=et-EE] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-xl,[lang=hr-HR] .ms-font-xxl,[lang=hr-HR] .ms-fontWeight-light,[lang=hr-HR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-l,[lang=hr-HR] .ms-font-su,[lang=hr-HR] .ms-fontWeight-semilight,[lang=hr-HR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-fontWeight-regular,[lang=hr-HR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-mi,[lang=hr-HR] .ms-fontWeight-semibold,[lang=hr-HR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-xl,[lang=hu-HU] .ms-font-xxl,[lang=hu-HU] .ms-fontWeight-light,[lang=hu-HU] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-l,[lang=hu-HU] .ms-font-su,[lang=hu-HU] .ms-fontWeight-semilight,[lang=hu-HU] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-fontWeight-regular,[lang=hu-HU] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-mi,[lang=hu-HU] .ms-fontWeight-semibold,[lang=hu-HU] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-xl,[lang=lt-LT] .ms-font-xxl,[lang=lt-LT] .ms-fontWeight-light,[lang=lt-LT] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-l,[lang=lt-LT] .ms-font-su,[lang=lt-LT] .ms-fontWeight-semilight,[lang=lt-LT] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-fontWeight-regular,[lang=lt-LT] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-mi,[lang=lt-LT] .ms-fontWeight-semibold,[lang=lt-LT] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-xl,[lang=lv-LV] .ms-font-xxl,[lang=lv-LV] .ms-fontWeight-light,[lang=lv-LV] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-l,[lang=lv-LV] .ms-font-su,[lang=lv-LV] .ms-fontWeight-semilight,[lang=lv-LV] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-fontWeight-regular,[lang=lv-LV] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-mi,[lang=lv-LV] .ms-fontWeight-semibold,[lang=lv-LV] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-xl,[lang=pl-PL] .ms-font-xxl,[lang=pl-PL] .ms-fontWeight-light,[lang=pl-PL] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-l,[lang=pl-PL] .ms-font-su,[lang=pl-PL] .ms-fontWeight-semilight,[lang=pl-PL] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-fontWeight-regular,[lang=pl-PL] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-mi,[lang=pl-PL] .ms-fontWeight-semibold,[lang=pl-PL] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-xl,[lang=lt-sr-SP] .ms-font-xxl,[lang=lt-sr-SP] .ms-fontWeight-light,[lang=lt-sr-SP] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-l,[lang=lt-sr-SP] .ms-font-su,[lang=lt-sr-SP] .ms-fontWeight-semilight,[lang=lt-sr-SP] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-fontWeight-regular,[lang=lt-sr-SP] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-mi,[lang=lt-sr-SP] .ms-fontWeight-semibold,[lang=lt-sr-SP] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-xl,[lang=tr-TR] .ms-font-xxl,[lang=tr-TR] .ms-fontWeight-light,[lang=tr-TR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-l,[lang=tr-TR] .ms-font-su,[lang=tr-TR] .ms-fontWeight-semilight,[lang=tr-TR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-fontWeight-regular,[lang=tr-TR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-mi,[lang=tr-TR] .ms-fontWeight-semibold,[lang=tr-TR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-xl,[lang=sk-SK] .ms-font-xxl,[lang=sk-SK] .ms-fontWeight-light,[lang=sk-SK] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-l,[lang=sk-SK] .ms-font-su,[lang=sk-SK] .ms-fontWeight-semilight,[lang=sk-SK] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-fontWeight-regular,[lang=sk-SK] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-mi,[lang=sk-SK] .ms-fontWeight-semibold,[lang=sk-SK] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-xl,[lang=kk-KZ] .ms-font-xxl,[lang=kk-KZ] .ms-fontWeight-light,[lang=kk-KZ] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-l,[lang=kk-KZ] .ms-font-su,[lang=kk-KZ] .ms-fontWeight-semilight,[lang=kk-KZ] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-fontWeight-regular,[lang=kk-KZ] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-mi,[lang=kk-KZ] .ms-fontWeight-semibold,[lang=kk-KZ] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-xl,[lang=el-GR] .ms-font-xxl,[lang=el-GR] .ms-fontWeight-light,[lang=el-GR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Greek,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-l,[lang=el-GR] .ms-font-su,[lang=el-GR] .ms-fontWeight-semilight,[lang=el-GR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Greek,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-fontWeight-regular,[lang=el-GR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Greek,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-mi,[lang=el-GR] .ms-fontWeight-semibold,[lang=el-GR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Greek,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-xl,[lang=he-IL] .ms-font-xxl,[lang=he-IL] .ms-fontWeight-light,[lang=he-IL] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Hebrew,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-l,[lang=he-IL] .ms-font-su,[lang=he-IL] .ms-fontWeight-semilight,[lang=he-IL] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Hebrew,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-fontWeight-regular,[lang=he-IL] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Hebrew,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-mi,[lang=he-IL] .ms-fontWeight-semibold,[lang=he-IL] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Hebrew,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-xl,[lang=vi-VN] .ms-font-xxl,[lang=vi-VN] .ms-fontWeight-light,[lang=vi-VN] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Vietnamese,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-l,[lang=vi-VN] .ms-font-su,[lang=vi-VN] .ms-fontWeight-semilight,[lang=vi-VN] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Vietnamese,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-fontWeight-regular,[lang=vi-VN] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Vietnamese,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-mi,[lang=vi-VN] .ms-fontWeight-semibold,[lang=vi-VN] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Vietnamese,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@font-face{font-family:Office365Icons;src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot);src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg#office365icons) format('svg');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none}.ms-Icon--circleEmpty:before{content:'\e000'}.ms-Icon--circleFill:before{content:'\e001'}.ms-Icon--placeholder:before{content:'\e002'}.ms-Icon--star:before{content:'\e003'}.ms-Icon--plus:before{content:'\e004'}.ms-Icon--minus:before{content:'\e005'}.ms-Icon--question:before{content:'\e006'}.ms-Icon--exclamation:before{content:'\e007'}.ms-Icon--person:before{content:'\e008'}.ms-Icon--mail:before{content:'\e009'}.ms-Icon--infoCircle:before{content:'\e00a'}.ms-Icon--alert:before{content:'\e00b'}.ms-Icon--xCircle:before{content:'\e00c'}.ms-Icon--mailOpen:before{content:'\e00d'}.ms-Icon--people:before{content:'\e00e'}.ms-Icon--bell:before{content:'\e010'}.ms-Icon--calendar:before{content:'\e011'}.ms-Icon--scheduling:before{content:'\e012'}.ms-Icon--event:before{content:'\e013'}.ms-Icon--folder:before{content:'\e014'}.ms-Icon--documents:before{content:'\e015'}.ms-Icon--onedrive:before{content:'\e016'}.ms-Icon--chat:before{content:'\e017'}.ms-Icon--sites:before{content:'\e018'}.ms-Icon--listBullets:before{content:'\e019'}.ms-Icon--calendarWeek:before{content:'\e01a'}.ms-Icon--calendarWorkWeek:before{content:'\e01b'}.ms-Icon--calendarDay:before{content:'\e01c'}.ms-Icon--folderMove:before{content:'\e01d'}.ms-Icon--panel:before{content:'\e01e'}.ms-Icon--popout:before{content:'\e01f'}.ms-Icon--menu:before{content:'\e020'}.ms-Icon--home:before{content:'\e021'}.ms-Icon--favorites:before{content:'\e022'}.ms-Icon--phone:before{content:'\e023'}.ms-Icon--mailSend:before{content:'\e024'}.ms-Icon--save:before{content:'\e025'}.ms-Icon--trash:before{content:'\e026'}.ms-Icon--pencil:before{content:'\e027'}.ms-Icon--flag:before{content:'\e028'}.ms-Icon--reply:before{content:'\e029'}.ms-Icon--miniatures:before{content:'\e02a'}.ms-Icon--voicemail:before{content:'\e02b'}.ms-Icon--play:before{content:'\e02c'}.ms-Icon--pause:before{content:'\e02d'}.ms-Icon--onlineAdd:before{content:'\e02e'}.ms-Icon--onlineJoin:before{content:'\e02f'}.ms-Icon--replyAll:before{content:'\e030'}.ms-Icon--attachment:before{content:'\e031'}.ms-Icon--drm:before{content:'\e032'}.ms-Icon--pinDown:before{content:'\e033'}.ms-Icon--refresh:before{content:'\e034'}.ms-Icon--gear:before{content:'\e035'}.ms-Icon--smiley:before{content:'\e036'}.ms-Icon--info:before{content:'\e037'}.ms-Icon--lock:before{content:'\e038'}.ms-Icon--search:before{content:'\e039'}.ms-Icon--questionReverse:before{content:'\e03a'}.ms-Icon--notRecurring:before{content:'\e03b'}.ms-Icon--tasks:before{content:'\e040'}.ms-Icon--check:before{content:'\e041'}.ms-Icon--x:before{content:'\e042'}.ms-Icon--ellipsis:before{content:'\e045'}.ms-Icon--dot:before{content:'\e046'}.ms-Icon--arrowUp:before{content:'\e047'}.ms-Icon--arrowDown:before{content:'\e048'}.ms-Icon--arrowLeft:before{content:'\e049'}.ms-Icon--arrowRight:before{content:'\e04a'}.ms-Icon--download:before{content:'\e04b'}.ms-Icon--directions:before{content:'\e04c'}.ms-Icon--microphone:before{content:'\e04f'}.ms-Icon--caretUp:before{content:'\e051'}.ms-Icon--caretDown:before{content:'\e052'}.ms-Icon--caretLeft:before{content:'\e053'}.ms-Icon--caretRight:before{content:'\e054'}.ms-Icon--caretUpLeft:before{content:'\e05a'}.ms-Icon--caretUpRight:before{content:'\e05b'}.ms-Icon--caretDownRight:before{content:'\e05c'}.ms-Icon--caretDownLeft:before{content:'\e05d'}.ms-Icon--note:before{content:'\e06a'}.ms-Icon--noteReply:before{content:'\e06b'}.ms-Icon--noteForward:before{content:'\e06c'}.ms-Icon--key:before{content:'\e06f'}.ms-Icon--tile:before{content:'\e070'}.ms-Icon--taskRecurring:before{content:'\e071'}.ms-Icon--starEmpty:before{content:'\e073'}.ms-Icon--upload:before{content:'\e076'}.ms-Icon--wrench:before{content:'\e077'}.ms-Icon--share:before{content:'\e078'}.ms-Icon--documentReply:before{content:'\e079'}.ms-Icon--documentForward:before{content:'\e07a'}.ms-Icon--partner:before{content:'\e080'}.ms-Icon--reactivate:before{content:'\e084'}.ms-Icon--sort:before{content:'\e085'}.ms-Icon--personAdd:before{content:'\e086'}.ms-Icon--chevronUp:before{content:'\e087'}.ms-Icon--chevronDown:before{content:'\e088'}.ms-Icon--chevronLeft:before{content:'\e089'}.ms-Icon--chevronRight:before{content:'\e08a'}.ms-Icon--peopleAdd:before{content:'\e08c'}.ms-Icon--newsfeed:before{content:'\e08d'}.ms-Icon--notebook:before{content:'\e08e'}.ms-Icon--link:before{content:'\e08f'}.ms-Icon--chevronsUp:before{content:'\e090'}.ms-Icon--chevronsDown:before{content:'\e091'}.ms-Icon--chevronsLeft:before{content:'\e092'}.ms-Icon--chevronsRight:before{content:'\e093'}.ms-Icon--clutter:before{content:'\e09a'}.ms-Icon--subscribe:before{content:'\e09c'}.ms-Icon--unsubscribe:before{content:'\e09d'}.ms-Icon--personRemove:before{content:'\e09e'}.ms-Icon--receiptForward:before{content:'\e0a0'}.ms-Icon--receiptReply:before{content:'\e0a1'}.ms-Icon--receiptCheck:before{content:'\e0a2'}.ms-Icon--peopleRemove:before{content:'\e0a3'}.ms-Icon--merge:before{content:'\e0a4'}.ms-Icon--split:before{content:'\e0a5'}.ms-Icon--eventCancel:before{content:'\e0a6'}.ms-Icon--eventShare:before{content:'\e0a7'}.ms-Icon--today:before{content:'\e0a9'}.ms-Icon--oofReply:before{content:'\e0aa'}.ms-Icon--voicemailReply:before{content:'\e0ac'}.ms-Icon--voicemailForward:before{content:'\e0ad'}.ms-Icon--ribbon:before{content:'\e0af'}.ms-Icon--contact:before{content:'\e0b0'}.ms-Icon--eye:before{content:'\e0b1'}.ms-Icon--glasses:before{content:'\e0b2'}.ms-Icon--print:before{content:'\e100'}.ms-Icon--room:before{content:'\e101'}.ms-Icon--post:before{content:'\e102'}.ms-Icon--toggle:before{content:'\e103'}.ms-Icon--touch:before{content:'\e104'}.ms-Icon--clock:before{content:'\e105'}.ms-Icon--fax:before{content:'\e106'}.ms-Icon--lightning:before{content:'\e110'}.ms-Icon--dialpad:before{content:'\e111'}.ms-Icon--phoneTransfer:before{content:'\e112'}.ms-Icon--phoneAdd:before{content:'\e113'}.ms-Icon--late:before{content:'\e114'}.ms-Icon--chatAdd:before{content:'\e115'}.ms-Icon--conflict:before{content:'\e116'}.ms-Icon--navigate:before{content:'\e117'}.ms-Icon--camera:before{content:'\e119'}.ms-Icon--filter:before{content:'\e11a'}.ms-Icon--fullscreen:before{content:'\e11b'}.ms-Icon--new:before{content:'\e11c'}.ms-Icon--mailEmpty:before{content:'\e11d'}.ms-Icon--editBox:before{content:'\e11e'}.ms-Icon--waffle:before{content:'\e11f'}.ms-Icon--work:before{content:'\e120'}.ms-Icon--eventRecurring:before{content:'\e121'}.ms-Icon--cart:before{content:'\e122'}.ms-Icon--socialListening:before{content:'\e123'}.ms-Icon--mapMarker:before{content:'\e124'}.ms-Icon--org:before{content:'\e125'}.ms-Icon--replyAlt:before{content:'\e150'}.ms-Icon--replyAllAlt:before{content:'\e152'}.ms-Icon--eventInfo:before{content:'\e154'}.ms-Icon--group:before{content:'\e155'}.ms-Icon--money:before{content:'\e161'}.ms-Icon--graph:before{content:'\e162'}.ms-Icon--noteEdit:before{content:'\e163'}.ms-Icon--dashboard:before{content:'\e164'}.ms-Icon--mailEdit:before{content:'\e165'}.ms-Icon--pinLeft:before{content:'\e167'}.ms-Icon--heart:before{content:'\e16a'}.ms-Icon--heartEmpty:before{content:'\e16b'}.ms-Icon--picture:before{content:'\e16c'}.ms-Icon--cake:before{content:'\e16d'}.ms-Icon--books:before{content:'\e16e'}.ms-Icon--chart:before{content:'\e16f'}.ms-Icon--video:before{content:'\e170'}.ms-Icon--soccer:before{content:'\e171'}.ms-Icon--meal:before{content:'\e172'}.ms-Icon--balloon:before{content:'\e173'}.ms-Icon--cat:before{content:'\e174'}.ms-Icon--dog:before{content:'\e175'}.ms-Icon--bag:before{content:'\e176'}.ms-Icon--music:before{content:'\e177'}.ms-Icon--stopwatch:before{content:'\e178'}.ms-Icon--coffee:before{content:'\e179'}.ms-Icon--briefcase:before{content:'\e17a'}.ms-Icon--pill:before{content:'\e17b'}.ms-Icon--trophy:before{content:'\e17c'}.ms-Icon--firstAid:before{content:'\e17d'}.ms-Icon--plane:before{content:'\e17e'}.ms-Icon--page:before{content:'\e17f'}.ms-Icon--car:before{content:'\e180'}.ms-Icon--dogAlt:before{content:'\e181'}.ms-Icon--document:before{content:'\e182'}.ms-Icon--metadata:before{content:'\e183'}.ms-Icon--pointItem:before{content:'\e184'}.ms-Icon--text:before{content:'\e185'}.ms-Icon--fieldText:before{content:'\e186'}.ms-Icon--fieldNumber:before{content:'\e187'}.ms-Icon--dropdown:before{content:'\e188'}.ms-Icon--radioButton:before{content:'\e189'}.ms-Icon--checkbox:before{content:'\e18a'}.ms-Icon--story:before{content:'\e18b'}.ms-Icon--bold:before{content:'\e18c'}.ms-Icon--italic:before{content:'\e18d'}.ms-Icon--underline:before{content:'\e18e'}.ms-Icon--quote:before{content:'\e18f'}.ms-Icon--styleRemove:before{content:'\e190'}.ms-Icon--pictureAdd:before{content:'\e191'}.ms-Icon--pictureRemove:before{content:'\e192'}.ms-Icon--desktop:before{content:'\e193'}.ms-Icon--tablet:before{content:'\e194'}.ms-Icon--mobile:before{content:'\e195'}.ms-Icon--table:before{content:'\e196'}.ms-Icon--hide:before{content:'\e197'}.ms-Icon--shield:before{content:'\e198'}.ms-Icon--header:before{content:'\e19a'}.ms-Icon--paint:before{content:'\e19b'}.ms-Icon--support:before{content:'\e19c'}.ms-Icon--settings:before{content:'\e19d'}.ms-Icon--creditCard:before{content:'\e19e'}.ms-Icon--reload:before{content:'\e19f'}.ms-Icon--peopleSecurity:before{content:'\e200'}.ms-Icon--fieldTextBox:before{content:'\e203'}.ms-Icon--multiChoice:before{content:'\e204'}.ms-Icon--fieldMail:before{content:'\e205'}.ms-Icon--contactForm:before{content:'\e206'}.ms-Icon--circleHalfFilled:before{content:'\e207'}.ms-Icon--documentPDF:before{content:'\e208'}.ms-Icon--bookmark:before{content:'\e209'}.ms-Icon--circleUnfilled:before{content:'\e20b'}.ms-Icon--circleFilled:before{content:'\e20c'}.ms-Icon--textBox:before{content:'\e20e'}.ms-Icon--drop:before{content:'\e20f'}.ms-Icon--sun:before{content:'\e210'}.ms-Icon--lifesaver:before{content:'\e211'}.ms-Icon--lifesaverLock:before{content:'\e212'}.ms-Icon--mailUnread:before{content:'\e213'}.ms-Icon--mailRead:before{content:'\e214'}.ms-Icon--inboxCheck:before{content:'\e215'}.ms-Icon--folderSearch:before{content:'\e216'}.ms-Icon--collapse:before{content:'\e217'}.ms-Icon--expand:before{content:'\e218'}.ms-Icon--ascending:before{content:'\e219'}.ms-Icon--descending:before{content:'\e21a'}.ms-Icon--filterClear:before{content:'\e21b'}.ms-Icon--checkboxEmpty:before{content:'\e21c'}.ms-Icon--checkboxMixed:before{content:'\e21d'}.ms-Icon--boards:before{content:'\e21e'}.ms-Icon--checkboxCheck:before{content:'\e21f'}.ms-Icon--frowny:before{content:'\e220'}.ms-Icon--lightBulb:before{content:'\e221'}.ms-Icon--globe:before{content:'\e222'}.ms-Icon--deviceWipe:before{content:'\e223'}.ms-Icon--listCheck:before{content:'\e226'}.ms-Icon--listGroup:before{content:'\e227'}.ms-Icon--timeline:before{content:'\e228'}.ms-Icon--fontIncrease:before{content:'\e229'}.ms-Icon--fontDecrease:before{content:'\e22a'}.ms-Icon--fontColor:before{content:'\e22b'}.ms-Icon--mailCheck:before{content:'\e22c'}.ms-Icon--mailDown:before{content:'\e22d'}.ms-Icon--listCheckbox:before{content:'\e22e'}.ms-Icon--sunAdd:before{content:'\e22f'}.ms-Icon--sunQuestion:before{content:'\e230'}.ms-Icon--chevronThinUp:before{content:'\e231'}.ms-Icon--chevronThinDown:before{content:'\e232'}.ms-Icon--chevronThinLeft:before{content:'\e233'}.ms-Icon--chevronThinRight:before{content:'\e234'}.ms-Icon--chevronThickUp:before{content:'\e235'}.ms-Icon--chevronThickDown:before{content:'\e236'}.ms-Icon--chevronThickLeft:before{content:'\e237'}.ms-Icon--chevronThickRight:before{content:'\e238'}.ms-Icon--linkRemove:before{content:'\e239'}.ms-Icon--alertOutline:before{content:'\e23b'}.ms-Icon--documentLandscape:before{content:'\e23c'}.ms-Icon--documentAdd:before{content:'\e23d'}.ms-Icon--toggleMiddle:before{content:'\e23e'}.ms-Icon--embed:before{content:'\e23f'}.ms-Icon--listNumbered:before{content:'\e240'}.ms-Icon--peopleCheck:before{content:'\e242'}.ms-Icon--caretUpOutline:before{content:'\e243'}.ms-Icon--caretDownOutline:before{content:'\e244'}.ms-Icon--caretLeftOutline:before{content:'\e245'}.ms-Icon--caretRightOutline:before{content:'\e246'}.ms-Icon--mailSync:before{content:'\e248'}.ms-Icon--mailError:before{content:'\e249'}.ms-Icon--mailPause:before{content:'\e24a'}.ms-Icon--peopleSync:before{content:'\e24b'}.ms-Icon--peopleError:before{content:'\e24c'}.ms-Icon--peoplePause:before{content:'\e24d'}.ms-Icon--circleBall:before{content:'\e24e'}.ms-Icon--circleBalloons:before{content:'\e24f'}.ms-Icon--circleCar:before{content:'\e250'}.ms-Icon--circleCat:before{content:'\e251'}.ms-Icon--circleCoffee:before{content:'\e252'}.ms-Icon--circleDog:before{content:'\e253'}.ms-Icon--circleLightning:before{content:'\e254'}.ms-Icon--circlePill:before{content:'\e255'}.ms-Icon--circlePlane:before{content:'\e256'}.ms-Icon--circlePoodle:before{content:'\e257'}.ms-Icon--checkPeople:before{content:'\e259'}.ms-Icon--documentSearch:before{content:'\e25a'}.ms-Icon--sortLines:before{content:'\e25c'}.ms-Icon--calendarPublic:before{content:'\e25d'}.ms-Icon--contactPublic:before{content:'\e25e'}.ms-Icon--classNotebook:before{content:'\e25f'}.ms-Icon--triangleUp:before{content:'\e260'}.ms-Icon--triangleRight:before{content:'\e261'}.ms-Icon--triangleDown:before{content:'\e262'}.ms-Icon--triangleLeft:before{content:'\e263'}.ms-Icon--triangleEmptyUp:before{content:'\e264'}.ms-Icon--triangleEmptyRight:before{content:'\e265'}.ms-Icon--triangleEmptyDown:before{content:'\e266'}.ms-Icon--triangleEmptyLeft:before{content:'\e267'}.ms-Icon--filePDF:before{content:'\e268'}.ms-Icon--fileImage:before{content:'\e26c'}.ms-Icon--fileDocument:before{content:'\e26d'}.ms-Icon--listGroup2:before{content:'\e26e'}.ms-Icon--copy:before{content:'\e26f'}.ms-Icon--creditCardOutline:before{content:'\e270'}.ms-Icon--mailPublic:before{content:'\e272'}.ms-Icon--folderPublic:before{content:'\e273'}.ms-Icon--teamwork:before{content:'\e274'}.ms-Icon--move:before{content:'\e275'}.ms-Icon--classroom:before{content:'\e276'}.ms-Icon--menu2:before{content:'\e277'}.ms-Icon--plus2:before{content:'\e278'}.ms-Icon--tag:before{content:'\e279'}.ms-Icon--arrowUp2:before{content:'\e27a'}.ms-Icon--arrowDown2:before{content:'\e27b'}.ms-Icon--circlePlus:before{content:'\e27c'}.ms-Icon--circleInfo:before{content:'\e27d'}.ms-Icon--section:before{content:'\e27e'}.ms-Icon--sections:before{content:'\e27f'}.ms-Icon--at:before{content:'\e282'}.ms-Icon--arrowUpRight:before{content:'\e283'}.ms-Icon--arrowDownRight:before{content:'\e284'}.ms-Icon--arrowDownLeft:before{content:'\e285'}.ms-Icon--arrowUpLeft:before{content:'\e286'}.ms-Icon--bundle:before{content:'\e287'}.ms-Icon--pictureEdit:before{content:'\e288'}.ms-Icon--protectionCenter:before{content:'\e289'}.ms-Icon--alert2:before{content:'\e28a'}.ms-Icon--circle{position:relative;display:inline-block;font-size:1rem;width:1em;height:1em;margin:0 .5em 0 0;padding:0;text-align:left;-webkit-font-smoothing:antialiased}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;left:0;-webkit-transform:scale(2);transform:scale(2);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;z-index:0}.ms-Icon--circle.ms-Icon--star:before{top:-2%;left:1%}.ms-Icon--circle.ms-Icon--person:before{top:-2%;left:-3%}.ms-Icon--circle.ms-Icon--alert:before{top:-4%}.ms-Icon--circle.ms-Icon--mailOpen:before{top:-5%}.ms-Icon--circle.ms-Icon--people:before{top:-4%;left:-7%}.ms-Icon--circle.ms-Icon--bell:before{top:-3%}.ms-Icon--circle.ms-Icon--scheduling:before{top:-3%;left:6%}.ms-Icon--circle.ms-Icon--documents:before{top:-1%;left:-2%}.ms-Icon--circle.ms-Icon--listBullets:before{top:-1%;left:5%}.ms-Icon--circle.ms-Icon--panel:before{left:-2%}.ms-Icon--circle.ms-Icon--popout:before{top:-2%;left:-2%}.ms-Icon--circle.ms-Icon--home:before{top:-4%}.ms-Icon--circle.ms-Icon--favorites:before{top:-2%;left:2%}.ms-Icon--circle.ms-Icon--phone:before{top:-2%;left:-2%}.ms-Icon--circle.ms-Icon--mailSend:before{left:-10%}.ms-Icon--circle.ms-Icon--pencil:before{top:-2%;left:3%}.ms-Icon--circle.ms-Icon--flag:before{left:3%}.ms-Icon--circle.ms-Icon--miniatures:before{left:-3%}.ms-Icon--circle.ms-Icon--voicemail:before{top:2%;left:-7%}.ms-Icon--circle.ms-Icon--onlineAdd:before{top:-1%;left:2%}.ms-Icon--circle.ms-Icon--pinDown:before{top:5%}.ms-Icon--circle.ms-Icon--gear:before{left:2%}.ms-Icon--circle.ms-Icon--check:before{top:3%}.ms-Icon--circle.ms-Icon--ellipsis:before{top:2%;left:-12%}.ms-Icon--circle.ms-Icon--directions:before{left:10%}.ms-Icon--circle.ms-Icon--microphone:before{top:-3%}.ms-Icon--circle.ms-Icon--caretDown:before{top:5%;left:2%}.ms-Icon--circle.ms-Icon--caretLeft:before{left:-6%}.ms-Icon--circle.ms-Icon--caretRight:before{left:6%}.ms-Icon--circle.ms-Icon--caretUpLeft:before{top:5%;left:5%}.ms-Icon--circle.ms-Icon--caretUpRight:before{top:5%;left:-3%}.ms-Icon--circle.ms-Icon--caretDownRight:before{left:-3%}.ms-Icon--circle.ms-Icon--caretDownLeft:before{left:4%}.ms-Icon--circle.ms-Icon--note:before{top:2%;left:-3%}.ms-Icon--circle.ms-Icon--noteReply:before{top:6%;left:3%}.ms-Icon--circle.ms-Icon--noteForward:before{top:6%}.ms-Icon--circle.ms-Icon--key:before{top:5%;left:1%}.ms-Icon--circle.ms-Icon--tile:before{top:-1%;left:-18%}.ms-Icon--circle.ms-Icon--taskRecurring:before{top:2%;left:-1%}.ms-Icon--circle.ms-Icon--starEmpty:before{top:-4%;left:1%}.ms-Icon--circle.ms-Icon--documentReply:before{top:-2%;left:7%}.ms-Icon--circle.ms-Icon--documentForward:before{left:5%}.ms-Icon--circle.ms-Icon--partner:before{top:-2%}.ms-Icon--circle.ms-Icon--reactivate:before{top:-2%;left:6%}.ms-Icon--circle.ms-Icon--sort:before{left:-19%}.ms-Icon--circle.ms-Icon--personAdd:before{top:-2%;left:6%}.ms-Icon--circle.ms-Icon--chevronDown:before{top:4%}.ms-Icon--circle.ms-Icon--chevronLeft:before{left:-5%}.ms-Icon--circle.ms-Icon--chevronRight:before{left:4%}.ms-Icon--circle.ms-Icon--peopleAdd:before{top:-5%;left:-12%}.ms-Icon--circle.ms-Icon--newsfeed:before,.ms-Icon--circle.ms-Icon--notebook:before{left:-4%}.ms-Icon--circle.ms-Icon--link:before{top:2%;left:-18%}.ms-Icon--circle.ms-Icon--chevronsDown:before{top:5%}.ms-Icon--circle.ms-Icon--chevronsLeft:before{left:-5%}.ms-Icon--circle.ms-Icon--chevronsRight:before{left:4%}.ms-Icon--circle.ms-Icon--personRemove:before{left:5%}.ms-Icon--circle.ms-Icon--receiptCheck:before,.ms-Icon--circle.ms-Icon--receiptForward:before,.ms-Icon--circle.ms-Icon--receiptReply:before{left:-20%}.ms-Icon--circle.ms-Icon--peopleRemove:before{top:-3%;left:-12%}.ms-Icon--circle.ms-Icon--merge:before,.ms-Icon--circle.ms-Icon--split:before{top:2%}.ms-Icon--circle.ms-Icon--eventCancel:before{left:-2%}.ms-Icon--circle.ms-Icon--today:before{top:-2%}.ms-Icon--circle.ms-Icon--oofReply:before{left:5%}.ms-Icon--circle.ms-Icon--voicemailReply:before{top:4%;left:-25%}.ms-Icon--circle.ms-Icon--voicemailForward:before{top:4%;left:-20%}.ms-Icon--circle.ms-Icon--eye:before{top:-4%}.ms-Icon--circle.ms-Icon--post:before{top:-4%;left:4%}.ms-Icon--circle.ms-Icon--fax:before{top:-3%;left:-2%}.ms-Icon--circle.ms-Icon--lightning:before{top:2%;left:1%}.ms-Icon--circle.ms-Icon--filter:before{top:7%}.ms-Icon--circle.ms-Icon--cart:before{left:3%}.ms-Icon--circle.ms-Icon--mapMarker:before,.ms-Icon--circle.ms-Icon--socialListening:before{top:2%}.ms-Icon--circle.ms-Icon--replyAllAlt:before{left:-16%}.ms-Icon--circle.ms-Icon--group:before{left:-33%}.ms-Icon--circle.ms-Icon--money:before{left:-8%}.ms-Icon--circle.ms-Icon--noteEdit:before{left:4%}.ms-Icon--circle.ms-Icon--mailEdit:before{top:3%;left:7%}.ms-Icon--circle.ms-Icon--pinLeft:before{left:-6%}.ms-Icon--circle.ms-Icon--heart:before,.ms-Icon--circle.ms-Icon--heartEmpty:before{top:5%}.ms-Icon--circle.ms-Icon--cake:before{top:-5%}.ms-Icon--circle.ms-Icon--books:before{left:-8%}.ms-Icon--circle.ms-Icon--video:before{top:-3%;left:3%}.ms-Icon--circle.ms-Icon--balloon:before{top:4%;left:-1%}.ms-Icon--circle.ms-Icon--music:before{top:-2%;left:-5%}.ms-Icon--circle.ms-Icon--coffee:before,.ms-Icon--circle.ms-Icon--stopwatch:before{top:-3%;left:3%}.ms-Icon--circle.ms-Icon--plane:before{left:4%}.ms-Icon--circle.ms-Icon--dogAlt:before{left:-15%}.ms-Icon--circle.ms-Icon--metadata:before{top:-4%;left:4%}.ms-Icon--circle.ms-Icon--text:before{top:-4%;left:10%}.ms-Icon--circle.ms-Icon--dropdown:before,.ms-Icon--circle.ms-Icon--fieldNumber:before,.ms-Icon--circle.ms-Icon--fieldText:before{left:-14%}.ms-Icon--circle.ms-Icon--story:before{left:-5%}.ms-Icon--circle.ms-Icon--bold:before{left:4%}.ms-Icon--circle.ms-Icon--underline:before{top:4%}.ms-Icon--circle.ms-Icon--quote:before{left:-4%}.ms-Icon--circle.ms-Icon--styleRemove:before{top:4%;left:5%}.ms-Icon--circle.ms-Icon--pictureAdd:before,.ms-Icon--circle.ms-Icon--pictureRemove:before{left:-6%}.ms-Icon--circle.ms-Icon--mobile:before{left:-3%}.ms-Icon--circle.ms-Icon--hide:before{top:-4%}.ms-Icon--circle.ms-Icon--header:before{left:-9%}.ms-Icon--circle.ms-Icon--msn:before{left:3%}.ms-Icon--circle.ms-Icon--peopleCheck:before{left:-7%;top:-3%}.ms-Icon--circle.ms-Icon--caretDownOutline:before{top:6%}.ms-Icon--circle.ms-Icon--caretLeftOutline:before{left:-5%}.ms-Icon--circle.ms-Icon--caretRightOutline:before{left:5%}.ms-Icon--circle.ms-Icon--sway:before{left:-3%}.ms-Icon--circle.ms-Icon--mailSync:before{left:8%;top:3%}.ms-Icon--circle.ms-Icon--peopleError:before,.ms-Icon--circle.ms-Icon--peoplePause:before,.ms-Icon--circle.ms-Icon--peopleSync:before{left:-8%}.ms-Icon--circle.ms-Icon--documentSearch:before{left:8%}.ms-Icon--circle.ms-Icon--dynamicsMarketing:before{left:-8%}.ms-u-slideRightIn10{-webkit-animation-name:y,a;animation-name:y,a;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes a{0%{-webkit-transform:translate3d(-10px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes a{0%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn20{-webkit-animation-name:y,b;animation-name:y,b;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes b{0%{-webkit-transform:translate3d(-20px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes b{0%{-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn40{-webkit-animation-name:y,c;animation-name:y,c;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes c{0%{-webkit-transform:translate3d(-40px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes c{0%{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn10{-webkit-animation-name:y,d;animation-name:y,d;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes d{0%{-webkit-transform:translate3d(10px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes d{0%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn20{-webkit-animation-name:y,e;animation-name:y,e;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes e{0%{-webkit-transform:translate3d(20px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes e{0%{-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn40{-webkit-animation-name:y,f;animation-name:y,f;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes f{0%{-webkit-transform:translate3d(40px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes f{0%{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn400{-webkit-animation-name:y,g;animation-name:y,g;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes g{0%{-webkit-transform:translate3d(-400px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes g{0%{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn400{-webkit-animation-name:y,h;animation-name:y,h;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes h{0%{-webkit-transform:translate3d(400px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes h{0%{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideUpIn20{-webkit-animation-name:y,i;animation-name:y,i;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes i{0%{-webkit-transform:translate3d(0,20px,0)}to{-webkit-transform:translateZ(0)}}@keyframes i{0%{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideUpIn10{-webkit-animation-name:y,j;animation-name:y,j;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes j{0%{-webkit-transform:translate3d(0,10px,0)}to{-webkit-transform:translateZ(0)}}@keyframes j{0%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideDownIn20{-webkit-animation-name:y,k;animation-name:y,k;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes k{0%{-webkit-transform:translate3d(0,-20px,0)}to{-webkit-transform:translateZ(0)}}@keyframes k{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideDownIn10{-webkit-animation-name:y,l;animation-name:y,l;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes l{0%{-webkit-transform:translate3d(0,-10px,0)}to{-webkit-transform:translateZ(0)}}@keyframes l{0%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightOut40{-webkit-animation-name:z,m;animation-name:z,m;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes m{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(40px,0,0)}}@keyframes m{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{-webkit-animation-name:z,n;animation-name:z,n;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes n{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(-40px,0,0)}}@keyframes n{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{-webkit-animation-name:z,o;animation-name:z,o;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes o{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(400px,0,0)}}@keyframes o{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{-webkit-animation-name:z,p;animation-name:z,p;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes p{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(-400px,0,0)}}@keyframes p{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{-webkit-animation-name:z,q;animation-name:z,q;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes q{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,-20px,0)}}@keyframes q{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{-webkit-animation-name:z,r;animation-name:z,r;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes r{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,-10px,0)}}@keyframes r{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{-webkit-animation-name:z,s;animation-name:z,s;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes s{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,20px,0)}}@keyframes s{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{-webkit-animation-name:z,t;animation-name:z,t;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes t{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,10px,0)}}@keyframes t{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{-webkit-animation-name:y,u;animation-name:y,u;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes u{0%{-webkit-transform:scale3d(.98,.98,1)}to{-webkit-transform:scaleX(1)}}@keyframes u{0%{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.ms-u-scaleDownIn100{-webkit-animation-name:y,v;animation-name:y,v;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes v{0%{-webkit-transform:scale3d(1.03,1.03,1)}to{-webkit-transform:scaleX(1)}}@keyframes v{0%{-webkit-transform:scale3d(1.03,1.03,1);transform:scale3d(1.03,1.03,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.ms-u-scaleUpOut103{-webkit-animation-name:z,w;animation-name:z,w;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes w{0%{-webkit-transform:scaleX(1)}to{-webkit-transform:scale3d(1.03,1.03,1)}}@keyframes w{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scale3d(1.03,1.03,1);transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{-webkit-animation-name:z,x;animation-name:z,x;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes x{0%{-webkit-transform:scaleX(1)}to{-webkit-transform:scale3d(.98,.98,1)}}@keyframes x{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeIn100{-webkit-animation-duration:.167s;animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.467s;animation-duration:.467s}@-webkit-keyframes y{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}@keyframes y{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeOut100{-webkit-animation-duration:.1s;animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.467s;animation-duration:.467s}@-webkit-keyframes z{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@keyframes z{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{-webkit-animation-name:A;animation-name:A;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes A{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(90deg)}}@keyframes A{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.ms-u-rotateN90deg{-webkit-animation-name:B;animation-name:B;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes B{0%{-webkit-transform:rotate(90deg)}to{-webkit-transform:rotate(0deg)}}@keyframes B{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(0deg);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{-webkit-animation-delay:.167s;animation-delay:.167s}.ms-u-delay200{-webkit-animation-delay:.267s;animation-delay:.267s}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{right:100%}.ms-u-smPull11{right:91.66666666666666%}.ms-u-smPull10{right:83.33333333333334%}.ms-u-smPull9{right:75%}.ms-u-smPull8{right:66.66666666666666%}.ms-u-smPull7{right:58.333333333333336%}.ms-u-smPull6{right:50%}.ms-u-smPull5{right:41.66666666666667%}.ms-u-smPull4{right:33.33333333333333%}.ms-u-smPull3{right:25%}.ms-u-smPull2{right:16.666666666666664%}.ms-u-smPull1{right:8.333333333333332%}.ms-u-smPull0{right:auto}.ms-u-smPush12{left:100%}.ms-u-smPush11{left:91.66666666666666%}.ms-u-smPush10{left:83.33333333333334%}.ms-u-smPush9{left:75%}.ms-u-smPush8{left:66.66666666666666%}.ms-u-smPush7{left:58.333333333333336%}.ms-u-smPush6{left:50%}.ms-u-smPush5{left:41.66666666666667%}.ms-u-smPush4{left:33.33333333333333%}.ms-u-smPush3{left:25%}.ms-u-smPush2{left:16.666666666666664%}.ms-u-smPush1{left:8.333333333333332%}.ms-u-smPush0{left:auto}.ms-u-smOffset11{margin-left:91.66666666666666%}.ms-u-smOffset10{margin-left:83.33333333333334%}.ms-u-smOffset9{margin-left:75%}.ms-u-smOffset8{margin-left:66.66666666666666%}.ms-u-smOffset7{margin-left:58.333333333333336%}.ms-u-smOffset6{margin-left:50%}.ms-u-smOffset5{margin-left:41.66666666666667%}.ms-u-smOffset4{margin-left:33.33333333333333%}.ms-u-smOffset3{margin-left:25%}.ms-u-smOffset2{margin-left:16.666666666666664%}.ms-u-smOffset1{margin-left:8.333333333333332%}.ms-u-smOffset0{margin-left:0}@media (min-width:480px){.ms-u-md12{width:100%}.ms-u-md11{width:91.66666666666666%}.ms-u-md10{width:83.33333333333334%}.ms-u-md9{width:75%}.ms-u-md8{width:66.66666666666666%}.ms-u-md7{width:58.333333333333336%}.ms-u-md6{width:50%}.ms-u-md5{width:41.66666666666667%}.ms-u-md4{width:33.33333333333333%}.ms-u-md3{width:25%}.ms-u-md2{width:16.666666666666664%}.ms-u-md1{width:8.333333333333332%}.ms-u-mdPull12{right:100%}.ms-u-mdPull11{right:91.66666666666666%}.ms-u-mdPull10{right:83.33333333333334%}.ms-u-mdPull9{right:75%}.ms-u-mdPull8{right:66.66666666666666%}.ms-u-mdPull7{right:58.333333333333336%}.ms-u-mdPull6{right:50%}.ms-u-mdPull5{right:41.66666666666667%}.ms-u-mdPull4{right:33.33333333333333%}.ms-u-mdPull3{right:25%}.ms-u-mdPull2{right:16.666666666666664%}.ms-u-mdPull1{right:8.333333333333332%}.ms-u-mdPull0{right:auto}.ms-u-mdPush12{left:100%}.ms-u-mdPush11{left:91.66666666666666%}.ms-u-mdPush10{left:83.33333333333334%}.ms-u-mdPush9{left:75%}.ms-u-mdPush8{left:66.66666666666666%}.ms-u-mdPush7{left:58.333333333333336%}.ms-u-mdPush6{left:50%}.ms-u-mdPush5{left:41.66666666666667%}.ms-u-mdPush4{left:33.33333333333333%}.ms-u-mdPush3{left:25%}.ms-u-mdPush2{left:16.666666666666664%}.ms-u-mdPush1{left:8.333333333333332%}.ms-u-mdPush0{left:auto}.ms-u-mdOffset11{margin-left:91.66666666666666%}.ms-u-mdOffset10{margin-left:83.33333333333334%}.ms-u-mdOffset9{margin-left:75%}.ms-u-mdOffset8{margin-left:66.66666666666666%}.ms-u-mdOffset7{margin-left:58.333333333333336%}.ms-u-mdOffset6{margin-left:50%}.ms-u-mdOffset5{margin-left:41.66666666666667%}.ms-u-mdOffset4{margin-left:33.33333333333333%}.ms-u-mdOffset3{margin-left:25%}.ms-u-mdOffset2{margin-left:16.666666666666664%}.ms-u-mdOffset1{margin-left:8.333333333333332%}.ms-u-mdOffset0{margin-left:0}}@media (min-width:640px){.ms-u-lg12{width:100%}.ms-u-lg11{width:91.66666666666666%}.ms-u-lg10{width:83.33333333333334%}.ms-u-lg9{width:75%}.ms-u-lg8{width:66.66666666666666%}.ms-u-lg7{width:58.333333333333336%}.ms-u-lg6{width:50%}.ms-u-lg5{width:41.66666666666667%}.ms-u-lg4{width:33.33333333333333%}.ms-u-lg3{width:25%}.ms-u-lg2{width:16.666666666666664%}.ms-u-lg1{width:8.333333333333332%}.ms-u-lgPull12{right:100%}.ms-u-lgPull11{right:91.66666666666666%}.ms-u-lgPull10{right:83.33333333333334%}.ms-u-lgPull9{right:75%}.ms-u-lgPull8{right:66.66666666666666%}.ms-u-lgPull7{right:58.333333333333336%}.ms-u-lgPull6{right:50%}.ms-u-lgPull5{right:41.66666666666667%}.ms-u-lgPull4{right:33.33333333333333%}.ms-u-lgPull3{right:25%}.ms-u-lgPull2{right:16.666666666666664%}.ms-u-lgPull1{right:8.333333333333332%}.ms-u-lgPull0{right:auto}.ms-u-lgPush12{left:100%}.ms-u-lgPush11{left:91.66666666666666%}.ms-u-lgPush10{left:83.33333333333334%}.ms-u-lgPush9{left:75%}.ms-u-lgPush8{left:66.66666666666666%}.ms-u-lgPush7{left:58.333333333333336%}.ms-u-lgPush6{left:50%}.ms-u-lgPush5{left:41.66666666666667%}.ms-u-lgPush4{left:33.33333333333333%}.ms-u-lgPush3{left:25%}.ms-u-lgPush2{left:16.666666666666664%}.ms-u-lgPush1{left:8.333333333333332%}.ms-u-lgPush0{left:auto}.ms-u-lgOffset11{margin-left:91.66666666666666%}.ms-u-lgOffset10{margin-left:83.33333333333334%}.ms-u-lgOffset9{margin-left:75%}.ms-u-lgOffset8{margin-left:66.66666666666666%}.ms-u-lgOffset7{margin-left:58.333333333333336%}.ms-u-lgOffset6{margin-left:50%}.ms-u-lgOffset5{margin-left:41.66666666666667%}.ms-u-lgOffset4{margin-left:33.33333333333333%}.ms-u-lgOffset3{margin-left:25%}.ms-u-lgOffset2{margin-left:16.666666666666664%}.ms-u-lgOffset1{margin-left:8.333333333333332%}.ms-u-lgOffset0{margin-left:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}.ms-u-xl11{width:91.66666666666666%}.ms-u-xl10{width:83.33333333333334%}.ms-u-xl9{width:75%}.ms-u-xl8{width:66.66666666666666%}.ms-u-xl7{width:58.333333333333336%}.ms-u-xl6{width:50%}.ms-u-xl5{width:41.66666666666667%}.ms-u-xl4{width:33.33333333333333%}.ms-u-xl3{width:25%}.ms-u-xl2{width:16.666666666666664%}.ms-u-xl1{width:8.333333333333332%}.ms-u-xlPull12{right:100%}.ms-u-xlPull11{right:91.66666666666666%}.ms-u-xlPull10{right:83.33333333333334%}.ms-u-xlPull9{right:75%}.ms-u-xlPull8{right:66.66666666666666%}.ms-u-xlPull7{right:58.333333333333336%}.ms-u-xlPull6{right:50%}.ms-u-xlPull5{right:41.66666666666667%}.ms-u-xlPull4{right:33.33333333333333%}.ms-u-xlPull3{right:25%}.ms-u-xlPull2{right:16.666666666666664%}.ms-u-xlPull1{right:8.333333333333332%}.ms-u-xlPull0{right:auto}.ms-u-xlPush12{left:100%}.ms-u-xlPush11{left:91.66666666666666%}.ms-u-xlPush10{left:83.33333333333334%}.ms-u-xlPush9{left:75%}.ms-u-xlPush8{left:66.66666666666666%}.ms-u-xlPush7{left:58.333333333333336%}.ms-u-xlPush6{left:50%}.ms-u-xlPush5{left:41.66666666666667%}.ms-u-xlPush4{left:33.33333333333333%}.ms-u-xlPush3{left:25%}.ms-u-xlPush2{left:16.666666666666664%}.ms-u-xlPush1{left:8.333333333333332%}.ms-u-xlPush0{left:auto}.ms-u-xlOffset11{margin-left:91.66666666666666%}.ms-u-xlOffset10{margin-left:83.33333333333334%}.ms-u-xlOffset9{margin-left:75%}.ms-u-xlOffset8{margin-left:66.66666666666666%}.ms-u-xlOffset7{margin-left:58.333333333333336%}.ms-u-xlOffset6{margin-left:50%}.ms-u-xlOffset5{margin-left:41.66666666666667%}.ms-u-xlOffset4{margin-left:33.33333333333333%}.ms-u-xlOffset3{margin-left:25%}.ms-u-xlOffset2{margin-left:16.666666666666664%}.ms-u-xlOffset1{margin-left:8.333333333333332%}.ms-u-xlOffset0{margin-left:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}.ms-u-xxl11{width:91.66666666666666%}.ms-u-xxl10{width:83.33333333333334%}.ms-u-xxl9{width:75%}.ms-u-xxl8{width:66.66666666666666%}.ms-u-xxl7{width:58.333333333333336%}.ms-u-xxl6{width:50%}.ms-u-xxl5{width:41.66666666666667%}.ms-u-xxl4{width:33.33333333333333%}.ms-u-xxl3{width:25%}.ms-u-xxl2{width:16.666666666666664%}.ms-u-xxl1{width:8.333333333333332%}.ms-u-xxlPull12{right:100%}.ms-u-xxlPull11{right:91.66666666666666%}.ms-u-xxlPull10{right:83.33333333333334%}.ms-u-xxlPull9{right:75%}.ms-u-xxlPull8{right:66.66666666666666%}.ms-u-xxlPull7{right:58.333333333333336%}.ms-u-xxlPull6{right:50%}.ms-u-xxlPull5{right:41.66666666666667%}.ms-u-xxlPull4{right:33.33333333333333%}.ms-u-xxlPull3{right:25%}.ms-u-xxlPull2{right:16.666666666666664%}.ms-u-xxlPull1{right:8.333333333333332%}.ms-u-xxlPull0{right:auto}.ms-u-xxlPush12{left:100%}.ms-u-xxlPush11{left:91.66666666666666%}.ms-u-xxlPush10{left:83.33333333333334%}.ms-u-xxlPush9{left:75%}.ms-u-xxlPush8{left:66.66666666666666%}.ms-u-xxlPush7{left:58.333333333333336%}.ms-u-xxlPush6{left:50%}.ms-u-xxlPush5{left:41.66666666666667%}.ms-u-xxlPush4{left:33.33333333333333%}.ms-u-xxlPush3{left:25%}.ms-u-xxlPush2{left:16.666666666666664%}.ms-u-xxlPush1{left:8.333333333333332%}.ms-u-xxlPush0{left:auto}.ms-u-xxlOffset11{margin-left:91.66666666666666%}.ms-u-xxlOffset10{margin-left:83.33333333333334%}.ms-u-xxlOffset9{margin-left:75%}.ms-u-xxlOffset8{margin-left:66.66666666666666%}.ms-u-xxlOffset7{margin-left:58.333333333333336%}.ms-u-xxlOffset6{margin-left:50%}.ms-u-xxlOffset5{margin-left:41.66666666666667%}.ms-u-xxlOffset4{margin-left:33.33333333333333%}.ms-u-xxlOffset3{margin-left:25%}.ms-u-xxlOffset2{margin-left:16.666666666666664%}.ms-u-xxlOffset1{margin-left:8.333333333333332%}.ms-u-xxlOffset0{margin-left:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}.ms-u-xxxl11{width:91.66666666666666%}.ms-u-xxxl10{width:83.33333333333334%}.ms-u-xxxl9{width:75%}.ms-u-xxxl8{width:66.66666666666666%}.ms-u-xxxl7{width:58.333333333333336%}.ms-u-xxxl6{width:50%}.ms-u-xxxl5{width:41.66666666666667%}.ms-u-xxxl4{width:33.33333333333333%}.ms-u-xxxl3{width:25%}.ms-u-xxxl2{width:16.666666666666664%}.ms-u-xxxl1{width:8.333333333333332%}.ms-u-xxxlPull12{right:100%}.ms-u-xxxlPull11{right:91.66666666666666%}.ms-u-xxxlPull10{right:83.33333333333334%}.ms-u-xxxlPull9{right:75%}.ms-u-xxxlPull8{right:66.66666666666666%}.ms-u-xxxlPull7{right:58.333333333333336%}.ms-u-xxxlPull6{right:50%}.ms-u-xxxlPull5{right:41.66666666666667%}.ms-u-xxxlPull4{right:33.33333333333333%}.ms-u-xxxlPull3{right:25%}.ms-u-xxxlPull2{right:16.666666666666664%}.ms-u-xxxlPull1{right:8.333333333333332%}.ms-u-xxxlPull0{right:auto}.ms-u-xxxlPush12{left:100%}.ms-u-xxxlPush11{left:91.66666666666666%}.ms-u-xxxlPush10{left:83.33333333333334%}.ms-u-xxxlPush9{left:75%}.ms-u-xxxlPush8{left:66.66666666666666%}.ms-u-xxxlPush7{left:58.333333333333336%}.ms-u-xxxlPush6{left:50%}.ms-u-xxxlPush5{left:41.66666666666667%}.ms-u-xxxlPush4{left:33.33333333333333%}.ms-u-xxxlPush3{left:25%}.ms-u-xxxlPush2{left:16.666666666666664%}.ms-u-xxxlPush1{left:8.333333333333332%}.ms-u-xxxlPush0{left:auto}.ms-u-xxxlOffset11{margin-left:91.66666666666666%}.ms-u-xxxlOffset10{margin-left:83.33333333333334%}.ms-u-xxxlOffset9{margin-left:75%}.ms-u-xxxlOffset8{margin-left:66.66666666666666%}.ms-u-xxxlOffset7{margin-left:58.333333333333336%}.ms-u-xxxlOffset6{margin-left:50%}.ms-u-xxxlOffset5{margin-left:41.66666666666667%}.ms-u-xxxlOffset4{margin-left:33.33333333333333%}.ms-u-xxxlOffset3{margin-left:25%}.ms-u-xxxlOffset2{margin-left:16.666666666666664%}.ms-u-xxxlOffset1{margin-left:8.333333333333332%}.ms-u-xxxlOffset0{margin-left:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-left:8px;padding-right:8px;box-sizing:border-box;float:left}.ms-Grid-col .ms-Grid{padding:0}
\ No newline at end of file
diff --git a/dist/css/fabric.rtl.css b/dist/css/fabric.rtl.css
new file mode 100644
index 000000000..467533c19
--- /dev/null
+++ b/dist/css/fabric.rtl.css
@@ -0,0 +1,6265 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+
+.ms-u-borderBox,
+.ms-u-borderBox:before,
+.ms-u-borderBox:after {
+ box-sizing: border-box;
+}
+
+.ms-u-clearfix {
+ *zoom: 1;
+}
+
+.ms-u-clearfix:before,
+.ms-u-clearfix:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-u-clearfix:after {
+ clear: both;
+}
+
+.ms-u-normalize {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.ms-bgColor-themeDark,
+.ms-bgColor-themeDark--hover:hover {
+ background-color: #005a9e;
+}
+
+.ms-bgColor-themeDarkAlt,
+.ms-bgColor-themeDarkAlt--hover:hover {
+ background-color: #106ebe;
+}
+
+.ms-bgColor-themeDarker,
+.ms-bgColor-themeDarker--hover:hover {
+ background-color: #004578;
+}
+
+.ms-bgColor-themePrimary,
+.ms-bgColor-themePrimary--hover:hover {
+ background-color: #0078d7;
+}
+
+.ms-bgColor-themeSecondary,
+.ms-bgColor-themeSecondary--hover:hover {
+ background-color: #2b88d8;
+}
+
+.ms-bgColor-themeTertiary,
+.ms-bgColor-themeTertiary--hover:hover {
+ background-color: #71afe5;
+}
+
+.ms-bgColor-themeLight,
+.ms-bgColor-themeLight--hover:hover {
+ background-color: #c7e0f4;
+}
+
+.ms-bgColor-themeLighter,
+.ms-bgColor-themeLighter--hover:hover {
+ background-color: #deecf9;
+}
+
+.ms-bgColor-themeLighterAlt,
+.ms-bgColor-themeLighterAlt--hover:hover {
+ background-color: #eff6fc;
+}
+
+.ms-bgColor-black,
+.ms-bgColor-black--hover:hover {
+ background-color: #000000;
+}
+
+.ms-bgColor-neutralDark,
+.ms-bgColor-neutralDark--hover:hover {
+ background-color: #212121;
+}
+
+.ms-bgColor-neutralPrimary,
+.ms-bgColor-neutralPrimary--hover:hover {
+ background-color: #333333;
+}
+
+.ms-bgColor-neutralSecondary,
+.ms-bgColor-neutralSecondary--hover:hover {
+ background-color: #666666;
+}
+
+.ms-bgColor-neutralSecondaryAlt,
+.ms-bgColor-neutralSecondaryAlt--hover:hover {
+ background-color: #767676;
+}
+
+.ms-bgColor-neutralTertiary,
+.ms-bgColor-neutralTertiary--hover:hover {
+ background-color: #a6a6a6;
+}
+
+.ms-bgColor-neutralTertiaryAlt,
+.ms-bgColor-neutralTertiaryAlt--hover:hover {
+ background-color: #c8c8c8;
+}
+
+.ms-bgColor-neutralLight,
+.ms-bgColor-neutralLight--hover:hover {
+ background-color: #eaeaea;
+}
+
+.ms-bgColor-neutralLighter,
+.ms-bgColor-neutralLighter--hover:hover {
+ background-color: #f4f4f4;
+}
+
+.ms-bgColor-neutralLighterAlt,
+.ms-bgColor-neutralLighterAlt--hover:hover {
+ background-color: #f8f8f8;
+}
+
+.ms-bgColor-white,
+.ms-bgColor-white--hover:hover {
+ background-color: #ffffff;
+}
+
+.ms-bgColor-yellow {
+ background-color: #ffb900;
+}
+
+.ms-bgColor-yellowLight {
+ background-color: #fff100;
+}
+
+.ms-bgColor-orange {
+ background-color: #d83b01;
+}
+
+.ms-bgColor-orangeLight {
+ background-color: #ea4300;
+}
+
+.ms-bgColor-orangeLighter {
+ background-color: #ff8c00;
+}
+
+.ms-bgColor-redDark {
+ background-color: #a80000;
+}
+
+.ms-bgColor-red {
+ background-color: #e81123;
+}
+
+.ms-bgColor-magentaDark {
+ background-color: #5c005c;
+}
+
+.ms-bgColor-magenta {
+ background-color: #b4009e;
+}
+
+.ms-bgColor-magentaLight {
+ background-color: #e3008c;
+}
+
+.ms-bgColor-purpleDark {
+ background-color: #32145a;
+}
+
+.ms-bgColor-purple {
+ background-color: #5c2d91;
+}
+
+.ms-bgColor-purpleLight {
+ background-color: #b4a0ff;
+}
+
+.ms-bgColor-blueDark {
+ background-color: #002050;
+}
+
+.ms-bgColor-blueMid {
+ background-color: #00188f;
+}
+
+.ms-bgColor-blue {
+ background-color: #0078d7;
+}
+
+.ms-bgColor-blueLight {
+ background-color: #00bcf2;
+}
+
+.ms-bgColor-tealDark {
+ background-color: #004b50;
+}
+
+.ms-bgColor-teal {
+ background-color: #008272;
+}
+
+.ms-bgColor-tealLight {
+ background-color: #00b294;
+}
+
+.ms-bgColor-greenDark {
+ background-color: #004b1c;
+}
+
+.ms-bgColor-green {
+ background-color: #107c10;
+}
+
+.ms-bgColor-greenLight {
+ background-color: #bad80a;
+}
+
+.ms-bgColor-info {
+ background-color: #f4f4f4;
+}
+
+.ms-bgColor-success {
+ background-color: #dff6dd;
+}
+
+.ms-bgColor-alert {
+ background-color: #f4f4f4;
+}
+
+.ms-bgColor-error {
+ background-color: #fde7e9;
+}
+
+.ms-borderColor-themeDark,
+.ms-borderColor-themeDark--hover:hover {
+ border-color: #005a9e;
+}
+
+.ms-borderColor-themeDarkAlt,
+.ms-borderColor-themeDarkAlt--hover:hover {
+ border-color: #106ebe;
+}
+
+.ms-borderColor-themeDarker,
+.ms-borderColor-themeDarker--hover:hover {
+ border-color: #004578;
+}
+
+.ms-borderColor-themePrimary,
+.ms-borderColor-themePrimary--hover:hover {
+ border-color: #0078d7;
+}
+
+.ms-borderColor-themeSecondary,
+.ms-borderColor-themeSecondary--hover:hover {
+ border-color: #2b88d8;
+}
+
+.ms-borderColor-themeTertiary,
+.ms-borderColor-themeTertiary--hover:hover {
+ border-color: #71afe5;
+}
+
+.ms-borderColor-themeLight,
+.ms-borderColor-themeLight--hover:hover {
+ border-color: #c7e0f4;
+}
+
+.ms-borderColor-themeLighter,
+.ms-borderColor-themeLighter--hover:hover {
+ border-color: #deecf9;
+}
+
+.ms-borderColor-themeLighterAlt,
+.ms-borderColor-themeLighterAlt--hover:hover {
+ border-color: #eff6fc;
+}
+
+.ms-borderColor-black,
+.ms-borderColor-black--hover:hover {
+ border-color: #000000;
+}
+
+.ms-borderColor-neutralDark,
+.ms-borderColor-neutralDark--hover:hover {
+ border-color: #212121;
+}
+
+.ms-borderColor-neutralPrimary,
+.ms-borderColor-neutralPrimary--hover:hover {
+ border-color: #333333;
+}
+
+.ms-borderColor-neutralSecondary,
+.ms-borderColor-neutralSecondary--hover:hover {
+ border-color: #666666;
+}
+
+.ms-borderColor-neutralSecondaryAlt,
+.ms-borderColor-neutralSecondaryAlt--hover:hover {
+ border-color: #767676;
+}
+
+.ms-borderColor-neutralTertiary,
+.ms-borderColor-neutralTertiary--hover:hover {
+ border-color: #a6a6a6;
+}
+
+.ms-borderColor-neutralTertiaryAlt,
+.ms-borderColor-neutralTertiaryAlt--hover:hover {
+ border-color: #c8c8c8;
+}
+
+.ms-borderColor-neutralLight,
+.ms-borderColor-neutralLight--hover:hover {
+ border-color: #eaeaea;
+}
+
+.ms-borderColor-neutralLighter,
+.ms-borderColor-neutralLighter--hover:hover {
+ border-color: #f4f4f4;
+}
+
+.ms-borderColor-neutralLighterAlt,
+.ms-borderColor-neutralLighterAlt--hover:hover {
+ border-color: #f8f8f8;
+}
+
+.ms-borderColor-white,
+.ms-borderColor-white--hover:hover {
+ border-color: #ffffff;
+}
+
+.ms-borderColor-yellow {
+ border-color: #ffb900;
+}
+
+.ms-borderColor-yellowLight {
+ border-color: #fff100;
+}
+
+.ms-borderColor-orange {
+ border-color: #d83b01;
+}
+
+.ms-borderColor-orangeLight {
+ border-color: #ea4300;
+}
+
+.ms-borderColor-orangeLighter {
+ border-color: #ff8c00;
+}
+
+.ms-borderColor-redDark {
+ border-color: #a80000;
+}
+
+.ms-borderColor-red {
+ border-color: #e81123;
+}
+
+.ms-borderColor-magentaDark {
+ border-color: #5c005c;
+}
+
+.ms-borderColor-magenta {
+ border-color: #b4009e;
+}
+
+.ms-borderColor-magentaLight {
+ border-color: #e3008c;
+}
+
+.ms-borderColor-purpleDark {
+ border-color: #32145a;
+}
+
+.ms-borderColor-purple {
+ border-color: #5c2d91;
+}
+
+.ms-borderColor-purpleLight {
+ border-color: #b4a0ff;
+}
+
+.ms-borderColor-blueDark {
+ border-color: #002050;
+}
+
+.ms-borderColor-blueMid {
+ border-color: #00188f;
+}
+
+.ms-borderColor-blue {
+ border-color: #0078d7;
+}
+
+.ms-borderColor-blueLight {
+ border-color: #00bcf2;
+}
+
+.ms-borderColor-tealDark {
+ border-color: #004b50;
+}
+
+.ms-borderColor-teal {
+ border-color: #008272;
+}
+
+.ms-borderColor-tealLight {
+ border-color: #00b294;
+}
+
+.ms-borderColor-greenDark {
+ border-color: #004b1c;
+}
+
+.ms-borderColor-green {
+ border-color: #107c10;
+}
+
+.ms-borderColor-greenLight {
+ border-color: #bad80a;
+}
+
+.ms-borderColor-info {
+ border-color: #107c10;
+}
+
+.ms-borderColor-success {
+ border-color: #107c10;
+}
+
+.ms-borderColor-alert {
+ border-color: #d83b01;
+}
+
+.ms-borderColor-error {
+ border-color: #a80000;
+}
+
+.ms-borderColorTop-themePrimary,
+.ms-borderColorTop-themePrimary--hover:hover {
+ border-top-color: #0078d7;
+}
+
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+@font-face {
+ font-family: 'Leelawadee UI Bold';
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Leelawadee UI';
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Leelawadee UI Semilight';
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Arabic';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Arabic';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Arabic';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Arabic';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Cyrillic';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Cyrillic';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Cyrillic';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Cyrillic';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light EastEuropean';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular EastEuropean';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold EastEuropean';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight EastEuropean';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Greek';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Greek';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Greek';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Greek';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Hebrew';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Hebrew';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Hebrew';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Hebrew';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light Vietnamese';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular Vietnamese';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold Vietnamese';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight Vietnamese';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Light WestEuropean';
+ src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Regular WestEuropean';
+ src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semibold WestEuropean';
+ src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Segoe UI Semilight WestEuropean';
+ src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.ms-font-su {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 42px;
+ font-weight: normal;
+}
+
+.ms-font-xxl {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 28px;
+ font-weight: normal;
+}
+
+.ms-font-xl {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ font-weight: normal;
+}
+
+.ms-font-l {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ font-weight: normal;
+}
+
+.ms-font-m-plus {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+}
+
+.ms-font-m {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+}
+
+.ms-font-s-plus {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 13px;
+ font-weight: normal;
+}
+
+.ms-font-s {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+}
+
+.ms-font-xs {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ font-weight: normal;
+}
+
+.ms-font-mi {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 10px;
+ font-weight: normal;
+}
+
+.ms-fontWeight-light,
+.ms-fontWeight-light--hover:hover {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-fontWeight-semilight,
+.ms-fontWeight-semilight--hover:hover {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-fontWeight-regular,
+.ms-fontWeight-regular--hover:hover {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-fontWeight-semibold,
+.ms-fontWeight-semibold--hover:hover {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-fontSize-su {
+ font-size: 42px;
+}
+
+.ms-fontSize-xxl {
+ font-size: 28px;
+}
+
+.ms-fontSize-xl {
+ font-size: 21px;
+}
+
+.ms-fontSize-l {
+ font-size: 17px;
+}
+
+.ms-fontSize-mPlus {
+ font-size: 15px;
+}
+
+.ms-fontSize-m {
+ font-size: 14px;
+}
+
+.ms-fontSize-sPlus {
+ font-size: 13px;
+}
+
+.ms-fontSize-s {
+ font-size: 12px;
+}
+
+.ms-fontSize-xs {
+ font-size: 11px;
+}
+
+.ms-fontSize-mi {
+ font-size: 10px;
+}
+
+.ms-fontColor-themeDarker,
+.ms-fontColor-themeDarker--hover:hover {
+ color: #004578;
+}
+
+.ms-fontColor-themeDark,
+.ms-fontColor-themeDark--hover:hover {
+ color: #005a9e;
+}
+
+.ms-fontColor-themeDarkAlt,
+.ms-fontColor-themeDarkAlt--hover:hover {
+ color: #106ebe;
+}
+
+.ms-fontColor-themePrimary,
+.ms-fontColor-themePrimary--hover:hover {
+ color: #0078d7;
+}
+
+.ms-fontColor-themeSecondary,
+.ms-fontColor-themeSecondary--hover:hover {
+ color: #2b88d8;
+}
+
+.ms-fontColor-themeTertiary,
+.ms-fontColor-themeTertiary--hover:hover {
+ color: #71afe5;
+}
+
+.ms-fontColor-themeLight,
+.ms-fontColor-themeLight--hover:hover {
+ color: #c7e0f4;
+}
+
+.ms-fontColor-themeLighter,
+.ms-fontColor-themeLighter--hover:hover {
+ color: #deecf9;
+}
+
+.ms-fontColor-themeLighterAlt,
+.ms-fontColor-themeLighterAlt--hover:hover {
+ color: #eff6fc;
+}
+
+.ms-fontColor-black,
+.ms-fontColor-black--hover:hover {
+ color: #000000;
+}
+
+.ms-fontColor-neutralDark,
+.ms-fontColor-neutralDark--hover:hover {
+ color: #212121;
+}
+
+.ms-fontColor-neutralPrimary,
+.ms-fontColor-neutralPrimary--hover:hover {
+ color: #333333;
+}
+
+.ms-fontColor-neutralSecondary,
+.ms-fontColor-neutralSecondary--hover:hover {
+ color: #666666;
+}
+
+.ms-fontColor-neutralSecondaryAlt,
+.ms-fontColor-neutralSecondaryAlt--hover:hover {
+ color: #767676;
+}
+
+.ms-fontColor-neutralTertiary,
+.ms-fontColor-neutralTertiary--hover:hover {
+ color: #a6a6a6;
+}
+
+.ms-fontColor-neutralTertiaryAlt,
+.ms-fontColor-neutralTertiaryAlt--hover:hover {
+ color: #c8c8c8;
+}
+
+.ms-fontColor-neutralLight,
+.ms-fontColor-neutralLight--hover:hover {
+ color: #eaeaea;
+}
+
+.ms-fontColor-neutralLighter,
+.ms-fontColor-neutralLighter--hover:hover {
+ color: #f4f4f4;
+}
+
+.ms-fontColor-neutralLighterAlt,
+.ms-fontColor-neutralLighterAlt--hover:hover {
+ color: #f8f8f8;
+}
+
+.ms-fontColor-white,
+.ms-fontColor-white--hover:hover {
+ color: #ffffff;
+}
+
+.ms-fontColor-yellow,
+.ms-fontColor-yellow--hover:hover {
+ color: #ffb900;
+}
+
+.ms-fontColor-yellowLight,
+.ms-fontColor-yellowLight--hover:hover {
+ color: #fff100;
+}
+
+.ms-fontColor-orange,
+.ms-fontColor-orange--hover:hover {
+ color: #d83b01;
+}
+
+.ms-fontColor-orangeLight,
+.ms-fontColor-orangeLight--hover:hover {
+ color: #ea4300;
+}
+
+.ms-fontColor-orangeLighter,
+.ms-fontColor-orangeLighter--hover:hover {
+ color: #ff8c00;
+}
+
+.ms-fontColor-redDark,
+.ms-fontColor-redDark--hover:hover {
+ color: #a80000;
+}
+
+.ms-fontColor-red,
+.ms-fontColor-red--hover:hover {
+ color: #e81123;
+}
+
+.ms-fontColor-magentaDark,
+.ms-fontColor-magentaDark--hover:hover {
+ color: #5c005c;
+}
+
+.ms-fontColor-magenta,
+.ms-fontColor-magenta--hover:hover {
+ color: #b4009e;
+}
+
+.ms-fontColor-magentaLight,
+.ms-fontColor-magentaLight--hover:hover {
+ color: #e3008c;
+}
+
+.ms-fontColor-purpleDark,
+.ms-fontColor-purpleDark--hover:hover {
+ color: #32145a;
+}
+
+.ms-fontColor-purple,
+.ms-fontColor-purple--hover:hover {
+ color: #5c2d91;
+}
+
+.ms-fontColor-purpleLight,
+.ms-fontColor-purpleLight--hover:hover {
+ color: #b4a0ff;
+}
+
+.ms-fontColor-blueDark,
+.ms-fontColor-blueDark--hover:hover {
+ color: #002050;
+}
+
+.ms-fontColor-blueMid,
+.ms-fontColor-blueMid--hover:hover {
+ color: #00188f;
+}
+
+.ms-fontColor-blue,
+.ms-fontColor-blue--hover:hover {
+ color: #0078d7;
+}
+
+.ms-fontColor-blueLight,
+.ms-fontColor-blueLight--hover:hover {
+ color: #00bcf2;
+}
+
+.ms-fontColor-tealDark,
+.ms-fontColor-tealDark--hover:hover {
+ color: #004b50;
+}
+
+.ms-fontColor-teal,
+.ms-fontColor-teal--hover:hover {
+ color: #008272;
+}
+
+.ms-fontColor-tealLight,
+.ms-fontColor-tealLight--hover:hover {
+ color: #00b294;
+}
+
+.ms-fontColor-greenDark,
+.ms-fontColor-greenDark--hover:hover {
+ color: #004b1c;
+}
+
+.ms-fontColor-green,
+.ms-fontColor-green--hover:hover {
+ color: #107c10;
+}
+
+.ms-fontColor-greenLight,
+.ms-fontColor-greenLight--hover:hover {
+ color: #bad80a;
+}
+
+.ms-fontColor-info,
+.ms-fontColor-info--hover:hover {
+ color: #107c10;
+}
+
+.ms-fontColor-success,
+.ms-fontColor-success--hover:hover {
+ color: #107c10;
+}
+
+.ms-fontColor-alert,
+.ms-fontColor-alert--hover:hover {
+ color: #d83b01;
+}
+
+.ms-fontColor-error,
+.ms-fontColor-error--hover:hover {
+ color: #a80000;
+}
+
+*[lang='ja-JP'] .ms-font-mi,
+*[lang='ja-JP'] .ms-font-xs,
+*[lang='ja-JP'] .ms-font-s,
+*[lang='ja-JP'] .ms-font-s-plus,
+*[lang='ja-JP'] .ms-font-m,
+*[lang='ja-JP'] .ms-font-m-plus,
+*[lang='ja-JP'] .ms-font-l,
+*[lang='ja-JP'] .ms-font-xl,
+*[lang='ja-JP'] .ms-font-xxl,
+*[lang='ja-JP'] .ms-font-su,
+*[lang='ja-JP'] .ms-fontWeight-light,
+*[lang='ja-JP'] .ms-fontWeight-light-hover:hover,
+*[lang='ja-JP'] .ms-fontWeight-semilight,
+*[lang='ja-JP'] .ms-fontWeight-semilight-hover:hover,
+*[lang='ja-JP'] .ms-fontWeight-regular,
+*[lang='ja-JP'] .ms-fontWeight-regular-hover:hover,
+*[lang='ja-JP'] .ms-fontWeight-semibold,
+*[lang='ja-JP'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ko-KR'] .ms-font-mi,
+*[lang='ko-KR'] .ms-font-xs,
+*[lang='ko-KR'] .ms-font-s,
+*[lang='ko-KR'] .ms-font-s-plus,
+*[lang='ko-KR'] .ms-font-m,
+*[lang='ko-KR'] .ms-font-m-plus,
+*[lang='ko-KR'] .ms-font-l,
+*[lang='ko-KR'] .ms-font-xl,
+*[lang='ko-KR'] .ms-font-xxl,
+*[lang='ko-KR'] .ms-font-su,
+*[lang='ko-KR'] .ms-fontWeight-light,
+*[lang='ko-KR'] .ms-fontWeight-light-hover:hover,
+*[lang='ko-KR'] .ms-fontWeight-semilight,
+*[lang='ko-KR'] .ms-fontWeight-semilight-hover:hover,
+*[lang='ko-KR'] .ms-fontWeight-regular,
+*[lang='ko-KR'] .ms-fontWeight-regular-hover:hover,
+*[lang='ko-KR'] .ms-fontWeight-semibold,
+*[lang='ko-KR'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Malgun Gothic', Gulim, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ch-ZHS'] .ms-font-mi,
+*[lang='ch-ZHS'] .ms-font-xs,
+*[lang='ch-ZHS'] .ms-font-s,
+*[lang='ch-ZHS'] .ms-font-s-plus,
+*[lang='ch-ZHS'] .ms-font-m,
+*[lang='ch-ZHS'] .ms-font-m-plus,
+*[lang='ch-ZHS'] .ms-font-l,
+*[lang='ch-ZHS'] .ms-font-xl,
+*[lang='ch-ZHS'] .ms-font-xxl,
+*[lang='ch-ZHS'] .ms-font-su,
+*[lang='ch-ZHS'] .ms-fontWeight-light,
+*[lang='ch-ZHS'] .ms-fontWeight-light-hover:hover,
+*[lang='ch-ZHS'] .ms-fontWeight-semilight,
+*[lang='ch-ZHS'] .ms-fontWeight-semilight-hover:hover,
+*[lang='ch-ZHS'] .ms-fontWeight-regular,
+*[lang='ch-ZHS'] .ms-fontWeight-regular-hover:hover,
+*[lang='ch-ZHS'] .ms-fontWeight-semibold,
+*[lang='ch-ZHS'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ch-ZHT'] .ms-font-mi,
+*[lang='ch-ZHT'] .ms-font-xs,
+*[lang='ch-ZHT'] .ms-font-s,
+*[lang='ch-ZHT'] .ms-font-s-plus,
+*[lang='ch-ZHT'] .ms-font-m,
+*[lang='ch-ZHT'] .ms-font-m-plus,
+*[lang='ch-ZHT'] .ms-font-l,
+*[lang='ch-ZHT'] .ms-font-xl,
+*[lang='ch-ZHT'] .ms-font-xxl,
+*[lang='ch-ZHT'] .ms-font-su,
+*[lang='ch-ZHT'] .ms-fontWeight-light,
+*[lang='ch-ZHT'] .ms-fontWeight-light-hover:hover,
+*[lang='ch-ZHT'] .ms-fontWeight-semilight,
+*[lang='ch-ZHT'] .ms-fontWeight-semilight-hover:hover,
+*[lang='ch-ZHT'] .ms-fontWeight-regular,
+*[lang='ch-ZHT'] .ms-fontWeight-regular-hover:hover,
+*[lang='ch-ZHT'] .ms-fontWeight-semibold,
+*[lang='ch-ZHT'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Microsoft Jhenghei', Pmingliu, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hi-IN'] .ms-font-mi,
+*[lang='hi-IN'] .ms-font-xs,
+*[lang='hi-IN'] .ms-font-s,
+*[lang='hi-IN'] .ms-font-s-plus,
+*[lang='hi-IN'] .ms-font-m,
+*[lang='hi-IN'] .ms-font-m-plus,
+*[lang='hi-IN'] .ms-font-l,
+*[lang='hi-IN'] .ms-font-xl,
+*[lang='hi-IN'] .ms-font-xxl,
+*[lang='hi-IN'] .ms-font-su,
+*[lang='hi-IN'] .ms-fontWeight-light,
+*[lang='hi-IN'] .ms-fontWeight-light-hover:hover,
+*[lang='hi-IN'] .ms-fontWeight-semilight,
+*[lang='hi-IN'] .ms-fontWeight-semilight-hover:hover,
+*[lang='hi-IN'] .ms-fontWeight-regular,
+*[lang='hi-IN'] .ms-fontWeight-regular-hover:hover,
+*[lang='hi-IN'] .ms-fontWeight-semibold,
+*[lang='hi-IN'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Nirmala UI', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='th-TH'] .ms-font-xl,
+*[lang='th-TH'] .ms-font-xxl,
+*[lang='th-TH'] .ms-fontWeight-light,
+*[lang='th-TH'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Leelawadee UI Semilight', 'Kmer UI', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='th-TH'] .ms-font-l,
+*[lang='th-TH'] .ms-font-su,
+*[lang='th-TH'] .ms-fontWeight-semilight,
+*[lang='th-TH'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Leelawadee UI Semilight', 'Kmer UI', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='th-TH'] .ms-fontWeight-regular,
+*[lang='th-TH'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Leelawadee UI Regular', 'Kmer UI', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='th-TH'] .ms-font-mi,
+*[lang='th-TH'] .ms-fontWeight-semibold,
+*[lang='th-TH'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Leelawadee UI Bold', 'Kmer UI', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ar'] .ms-font-xl,
+*[lang='ar'] .ms-font-xxl,
+*[lang='ar'] .ms-fontWeight-light,
+*[lang='ar'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Arabic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ar'] .ms-font-l,
+*[lang='ar'] .ms-font-su,
+*[lang='ar'] .ms-fontWeight-semilight,
+*[lang='ar'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Arabic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ar'] .ms-fontWeight-regular,
+*[lang='ar'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Arabic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ar'] .ms-font-mi,
+*[lang='ar'] .ms-fontWeight-semibold,
+*[lang='ar'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Arabic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='bg-BG'] .ms-font-xl,
+*[lang='bg-BG'] .ms-font-xxl,
+*[lang='bg-BG'] .ms-fontWeight-light,
+*[lang='bg-BG'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='bg-BG'] .ms-font-l,
+*[lang='bg-BG'] .ms-font-su,
+*[lang='bg-BG'] .ms-fontWeight-semilight,
+*[lang='bg-BG'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='bg-BG'] .ms-fontWeight-regular,
+*[lang='bg-BG'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='bg-BG'] .ms-font-mi,
+*[lang='bg-BG'] .ms-fontWeight-semibold,
+*[lang='bg-BG'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ru-RU'] .ms-font-xl,
+*[lang='ru-RU'] .ms-font-xxl,
+*[lang='ru-RU'] .ms-fontWeight-light,
+*[lang='ru-RU'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ru-RU'] .ms-font-l,
+*[lang='ru-RU'] .ms-font-su,
+*[lang='ru-RU'] .ms-fontWeight-semilight,
+*[lang='ru-RU'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ru-RU'] .ms-fontWeight-regular,
+*[lang='ru-RU'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='ru-RU'] .ms-font-mi,
+*[lang='ru-RU'] .ms-fontWeight-semibold,
+*[lang='ru-RU'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='uk-UA'] .ms-font-xl,
+*[lang='uk-UA'] .ms-font-xxl,
+*[lang='uk-UA'] .ms-fontWeight-light,
+*[lang='uk-UA'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='uk-UA'] .ms-font-l,
+*[lang='uk-UA'] .ms-font-su,
+*[lang='uk-UA'] .ms-fontWeight-semilight,
+*[lang='uk-UA'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='uk-UA'] .ms-fontWeight-regular,
+*[lang='uk-UA'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='uk-UA'] .ms-font-mi,
+*[lang='uk-UA'] .ms-fontWeight-semibold,
+*[lang='uk-UA'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='cs-CZ'] .ms-font-xl,
+*[lang='cs-CZ'] .ms-font-xxl,
+*[lang='cs-CZ'] .ms-fontWeight-light,
+*[lang='cs-CZ'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='cs-CZ'] .ms-font-l,
+*[lang='cs-CZ'] .ms-font-su,
+*[lang='cs-CZ'] .ms-fontWeight-semilight,
+*[lang='cs-CZ'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='cs-CZ'] .ms-fontWeight-regular,
+*[lang='cs-CZ'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='cs-CZ'] .ms-font-mi,
+*[lang='cs-CZ'] .ms-fontWeight-semibold,
+*[lang='cs-CZ'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='et-EE'] .ms-font-xl,
+*[lang='et-EE'] .ms-font-xxl,
+*[lang='et-EE'] .ms-fontWeight-light,
+*[lang='et-EE'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='et-EE'] .ms-font-l,
+*[lang='et-EE'] .ms-font-su,
+*[lang='et-EE'] .ms-fontWeight-semilight,
+*[lang='et-EE'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='et-EE'] .ms-fontWeight-regular,
+*[lang='et-EE'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='et-EE'] .ms-font-mi,
+*[lang='et-EE'] .ms-fontWeight-semibold,
+*[lang='et-EE'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hr-HR'] .ms-font-xl,
+*[lang='hr-HR'] .ms-font-xxl,
+*[lang='hr-HR'] .ms-fontWeight-light,
+*[lang='hr-HR'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hr-HR'] .ms-font-l,
+*[lang='hr-HR'] .ms-font-su,
+*[lang='hr-HR'] .ms-fontWeight-semilight,
+*[lang='hr-HR'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hr-HR'] .ms-fontWeight-regular,
+*[lang='hr-HR'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hr-HR'] .ms-font-mi,
+*[lang='hr-HR'] .ms-fontWeight-semibold,
+*[lang='hr-HR'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hu-HU'] .ms-font-xl,
+*[lang='hu-HU'] .ms-font-xxl,
+*[lang='hu-HU'] .ms-fontWeight-light,
+*[lang='hu-HU'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hu-HU'] .ms-font-l,
+*[lang='hu-HU'] .ms-font-su,
+*[lang='hu-HU'] .ms-fontWeight-semilight,
+*[lang='hu-HU'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hu-HU'] .ms-fontWeight-regular,
+*[lang='hu-HU'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='hu-HU'] .ms-font-mi,
+*[lang='hu-HU'] .ms-fontWeight-semibold,
+*[lang='hu-HU'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-LT'] .ms-font-xl,
+*[lang='lt-LT'] .ms-font-xxl,
+*[lang='lt-LT'] .ms-fontWeight-light,
+*[lang='lt-LT'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-LT'] .ms-font-l,
+*[lang='lt-LT'] .ms-font-su,
+*[lang='lt-LT'] .ms-fontWeight-semilight,
+*[lang='lt-LT'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-LT'] .ms-fontWeight-regular,
+*[lang='lt-LT'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-LT'] .ms-font-mi,
+*[lang='lt-LT'] .ms-fontWeight-semibold,
+*[lang='lt-LT'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lv-LV'] .ms-font-xl,
+*[lang='lv-LV'] .ms-font-xxl,
+*[lang='lv-LV'] .ms-fontWeight-light,
+*[lang='lv-LV'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lv-LV'] .ms-font-l,
+*[lang='lv-LV'] .ms-font-su,
+*[lang='lv-LV'] .ms-fontWeight-semilight,
+*[lang='lv-LV'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lv-LV'] .ms-fontWeight-regular,
+*[lang='lv-LV'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lv-LV'] .ms-font-mi,
+*[lang='lv-LV'] .ms-fontWeight-semibold,
+*[lang='lv-LV'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='pl-PL'] .ms-font-xl,
+*[lang='pl-PL'] .ms-font-xxl,
+*[lang='pl-PL'] .ms-fontWeight-light,
+*[lang='pl-PL'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='pl-PL'] .ms-font-l,
+*[lang='pl-PL'] .ms-font-su,
+*[lang='pl-PL'] .ms-fontWeight-semilight,
+*[lang='pl-PL'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='pl-PL'] .ms-fontWeight-regular,
+*[lang='pl-PL'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='pl-PL'] .ms-font-mi,
+*[lang='pl-PL'] .ms-fontWeight-semibold,
+*[lang='pl-PL'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-sr-SP'] .ms-font-xl,
+*[lang='lt-sr-SP'] .ms-font-xxl,
+*[lang='lt-sr-SP'] .ms-fontWeight-light,
+*[lang='lt-sr-SP'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-sr-SP'] .ms-font-l,
+*[lang='lt-sr-SP'] .ms-font-su,
+*[lang='lt-sr-SP'] .ms-fontWeight-semilight,
+*[lang='lt-sr-SP'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-sr-SP'] .ms-fontWeight-regular,
+*[lang='lt-sr-SP'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='lt-sr-SP'] .ms-font-mi,
+*[lang='lt-sr-SP'] .ms-fontWeight-semibold,
+*[lang='lt-sr-SP'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='tr-TR'] .ms-font-xl,
+*[lang='tr-TR'] .ms-font-xxl,
+*[lang='tr-TR'] .ms-fontWeight-light,
+*[lang='tr-TR'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='tr-TR'] .ms-font-l,
+*[lang='tr-TR'] .ms-font-su,
+*[lang='tr-TR'] .ms-fontWeight-semilight,
+*[lang='tr-TR'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='tr-TR'] .ms-fontWeight-regular,
+*[lang='tr-TR'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='tr-TR'] .ms-font-mi,
+*[lang='tr-TR'] .ms-fontWeight-semibold,
+*[lang='tr-TR'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='sk-SK'] .ms-font-xl,
+*[lang='sk-SK'] .ms-font-xxl,
+*[lang='sk-SK'] .ms-fontWeight-light,
+*[lang='sk-SK'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='sk-SK'] .ms-font-l,
+*[lang='sk-SK'] .ms-font-su,
+*[lang='sk-SK'] .ms-fontWeight-semilight,
+*[lang='sk-SK'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='sk-SK'] .ms-fontWeight-regular,
+*[lang='sk-SK'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='sk-SK'] .ms-font-mi,
+*[lang='sk-SK'] .ms-fontWeight-semibold,
+*[lang='sk-SK'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='kk-KZ'] .ms-font-xl,
+*[lang='kk-KZ'] .ms-font-xxl,
+*[lang='kk-KZ'] .ms-fontWeight-light,
+*[lang='kk-KZ'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='kk-KZ'] .ms-font-l,
+*[lang='kk-KZ'] .ms-font-su,
+*[lang='kk-KZ'] .ms-fontWeight-semilight,
+*[lang='kk-KZ'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='kk-KZ'] .ms-fontWeight-regular,
+*[lang='kk-KZ'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='kk-KZ'] .ms-font-mi,
+*[lang='kk-KZ'] .ms-fontWeight-semibold,
+*[lang='kk-KZ'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='el-GR'] .ms-font-xl,
+*[lang='el-GR'] .ms-font-xxl,
+*[lang='el-GR'] .ms-fontWeight-light,
+*[lang='el-GR'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Greek', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='el-GR'] .ms-font-l,
+*[lang='el-GR'] .ms-font-su,
+*[lang='el-GR'] .ms-fontWeight-semilight,
+*[lang='el-GR'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Greek', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='el-GR'] .ms-fontWeight-regular,
+*[lang='el-GR'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Greek', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='el-GR'] .ms-font-mi,
+*[lang='el-GR'] .ms-fontWeight-semibold,
+*[lang='el-GR'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Greek', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='he-IL'] .ms-font-xl,
+*[lang='he-IL'] .ms-font-xxl,
+*[lang='he-IL'] .ms-fontWeight-light,
+*[lang='he-IL'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Hebrew', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='he-IL'] .ms-font-l,
+*[lang='he-IL'] .ms-font-su,
+*[lang='he-IL'] .ms-fontWeight-semilight,
+*[lang='he-IL'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Hebrew', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='he-IL'] .ms-fontWeight-regular,
+*[lang='he-IL'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Hebrew', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='he-IL'] .ms-font-mi,
+*[lang='he-IL'] .ms-fontWeight-semibold,
+*[lang='he-IL'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Hebrew', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='vi-VN'] .ms-font-xl,
+*[lang='vi-VN'] .ms-font-xxl,
+*[lang='vi-VN'] .ms-fontWeight-light,
+*[lang='vi-VN'] .ms-fontWeight-light-hover:hover {
+ font-family: 'Segoe UI Light Vietnamese', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='vi-VN'] .ms-font-l,
+*[lang='vi-VN'] .ms-font-su,
+*[lang='vi-VN'] .ms-fontWeight-semilight,
+*[lang='vi-VN'] .ms-fontWeight-semilight-hover:hover {
+ font-family: 'Segoe UI Semilight Vietnamese', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='vi-VN'] .ms-fontWeight-regular,
+*[lang='vi-VN'] .ms-fontweight-regular-hover:hover {
+ font-family: 'Segoe UI Regular Vietnamese', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+*[lang='vi-VN'] .ms-font-mi,
+*[lang='vi-VN'] .ms-fontWeight-semibold,
+*[lang='vi-VN'] .ms-fontWeight-semibold-hover:hover {
+ font-family: 'Segoe UI Semibold Vietnamese', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+@font-face {
+ font-family: 'Office365Icons';
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?');
+ src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff?') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf?') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg?#office365icons') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.ms-Icon {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+}
+
+.ms-Icon--circleEmpty:before {
+ content: '\e000';
+}
+
+.ms-Icon--circleFill:before {
+ content: '\e001';
+}
+
+.ms-Icon--placeholder:before {
+ content: '\e002';
+}
+
+.ms-Icon--star:before {
+ content: '\e003';
+}
+
+.ms-Icon--plus:before {
+ content: '\e004';
+}
+
+.ms-Icon--minus:before {
+ content: '\e005';
+}
+
+.ms-Icon--question:before {
+ content: '\e006';
+}
+
+.ms-Icon--exclamation:before {
+ content: '\e007';
+}
+
+.ms-Icon--person:before {
+ content: '\e008';
+}
+
+.ms-Icon--mail:before {
+ content: '\e009';
+}
+
+.ms-Icon--infoCircle:before {
+ content: '\e00a';
+}
+
+.ms-Icon--alert:before {
+ content: '\e00b';
+}
+
+.ms-Icon--xCircle:before {
+ content: '\e00c';
+}
+
+.ms-Icon--mailOpen:before {
+ content: '\e00d';
+}
+
+.ms-Icon--people:before {
+ content: '\e00e';
+}
+
+.ms-Icon--bell:before {
+ content: '\e010';
+}
+
+.ms-Icon--calendar:before {
+ content: '\e011';
+}
+
+.ms-Icon--scheduling:before {
+ content: '\e012';
+}
+
+.ms-Icon--event:before {
+ content: '\e013';
+}
+
+.ms-Icon--folder:before {
+ content: '\e014';
+}
+
+.ms-Icon--documents:before {
+ content: '\e015';
+}
+
+.ms-Icon--onedrive:before {
+ content: '\e016';
+}
+
+.ms-Icon--chat:before {
+ content: '\e017';
+}
+
+.ms-Icon--sites:before {
+ content: '\e018';
+}
+
+.ms-Icon--listBullets:before {
+ content: '\e019';
+}
+
+.ms-Icon--calendarWeek:before {
+ content: '\e01a';
+}
+
+.ms-Icon--calendarWorkWeek:before {
+ content: '\e01b';
+}
+
+.ms-Icon--calendarDay:before {
+ content: '\e01c';
+}
+
+.ms-Icon--folderMove:before {
+ content: '\e01d';
+}
+
+.ms-Icon--panel:before {
+ content: '\e01e';
+}
+
+.ms-Icon--popout:before {
+ content: '\e01f';
+}
+
+.ms-Icon--menu:before {
+ content: '\e020';
+}
+
+.ms-Icon--home:before {
+ content: '\e021';
+}
+
+.ms-Icon--favorites:before {
+ content: '\e022';
+}
+
+.ms-Icon--phone:before {
+ content: '\e023';
+}
+
+.ms-Icon--mailSend:before {
+ content: '\e024';
+}
+
+.ms-Icon--save:before {
+ content: '\e025';
+}
+
+.ms-Icon--trash:before {
+ content: '\e026';
+}
+
+.ms-Icon--pencil:before {
+ content: '\e027';
+}
+
+.ms-Icon--flag:before {
+ content: '\e028';
+}
+
+.ms-Icon--reply:before {
+ content: '\e029';
+}
+
+.ms-Icon--miniatures:before {
+ content: '\e02a';
+}
+
+.ms-Icon--voicemail:before {
+ content: '\e02b';
+}
+
+.ms-Icon--play:before {
+ content: '\e02c';
+}
+
+.ms-Icon--pause:before {
+ content: '\e02d';
+}
+
+.ms-Icon--onlineAdd:before {
+ content: '\e02e';
+}
+
+.ms-Icon--onlineJoin:before {
+ content: '\e02f';
+}
+
+.ms-Icon--replyAll:before {
+ content: '\e030';
+}
+
+.ms-Icon--attachment:before {
+ content: '\e031';
+}
+
+.ms-Icon--drm:before {
+ content: '\e032';
+}
+
+.ms-Icon--pinDown:before {
+ content: '\e033';
+}
+
+.ms-Icon--refresh:before {
+ content: '\e034';
+}
+
+.ms-Icon--gear:before {
+ content: '\e035';
+}
+
+.ms-Icon--smiley:before {
+ content: '\e036';
+}
+
+.ms-Icon--info:before {
+ content: '\e037';
+}
+
+.ms-Icon--lock:before {
+ content: '\e038';
+}
+
+.ms-Icon--search:before {
+ content: '\e039';
+}
+
+.ms-Icon--questionReverse:before {
+ content: '\e03a';
+}
+
+.ms-Icon--notRecurring:before {
+ content: '\e03b';
+}
+
+.ms-Icon--tasks:before {
+ content: '\e040';
+}
+
+.ms-Icon--check:before {
+ content: '\e041';
+}
+
+.ms-Icon--x:before {
+ content: '\e042';
+}
+
+.ms-Icon--ellipsis:before {
+ content: '\e045';
+}
+
+.ms-Icon--dot:before {
+ content: '\e046';
+}
+
+.ms-Icon--arrowUp:before {
+ content: '\e047';
+}
+
+.ms-Icon--arrowDown:before {
+ content: '\e048';
+}
+
+.ms-Icon--arrowLeft:before {
+ content: '\e049';
+}
+
+.ms-Icon--arrowRight:before {
+ content: '\e04a';
+}
+
+.ms-Icon--download:before {
+ content: '\e04b';
+}
+
+.ms-Icon--directions:before {
+ content: '\e04c';
+}
+
+.ms-Icon--microphone:before {
+ content: '\e04f';
+}
+
+.ms-Icon--caretUp:before {
+ content: '\e051';
+}
+
+.ms-Icon--caretDown:before {
+ content: '\e052';
+}
+
+.ms-Icon--caretLeft:before {
+ content: '\e053';
+}
+
+.ms-Icon--caretRight:before {
+ content: '\e054';
+}
+
+.ms-Icon--caretUpLeft:before {
+ content: '\e05a';
+}
+
+.ms-Icon--caretUpRight:before {
+ content: '\e05b';
+}
+
+.ms-Icon--caretDownRight:before {
+ content: '\e05c';
+}
+
+.ms-Icon--caretDownLeft:before {
+ content: '\e05d';
+}
+
+.ms-Icon--note:before {
+ content: '\e06a';
+}
+
+.ms-Icon--noteReply:before {
+ content: '\e06b';
+}
+
+.ms-Icon--noteForward:before {
+ content: '\e06c';
+}
+
+.ms-Icon--key:before {
+ content: '\e06f';
+}
+
+.ms-Icon--tile:before {
+ content: '\e070';
+}
+
+.ms-Icon--taskRecurring:before {
+ content: '\e071';
+}
+
+.ms-Icon--starEmpty:before {
+ content: '\e073';
+}
+
+.ms-Icon--upload:before {
+ content: '\e076';
+}
+
+.ms-Icon--wrench:before {
+ content: '\e077';
+}
+
+.ms-Icon--share:before {
+ content: '\e078';
+}
+
+.ms-Icon--documentReply:before {
+ content: '\e079';
+}
+
+.ms-Icon--documentForward:before {
+ content: '\e07a';
+}
+
+.ms-Icon--partner:before {
+ content: '\e080';
+}
+
+.ms-Icon--reactivate:before {
+ content: '\e084';
+}
+
+.ms-Icon--sort:before {
+ content: '\e085';
+}
+
+.ms-Icon--personAdd:before {
+ content: '\e086';
+}
+
+.ms-Icon--chevronUp:before {
+ content: '\e087';
+}
+
+.ms-Icon--chevronDown:before {
+ content: '\e088';
+}
+
+.ms-Icon--chevronLeft:before {
+ content: '\e089';
+}
+
+.ms-Icon--chevronRight:before {
+ content: '\e08a';
+}
+
+.ms-Icon--peopleAdd:before {
+ content: '\e08c';
+}
+
+.ms-Icon--newsfeed:before {
+ content: '\e08d';
+}
+
+.ms-Icon--notebook:before {
+ content: '\e08e';
+}
+
+.ms-Icon--link:before {
+ content: '\e08f';
+}
+
+.ms-Icon--chevronsUp:before {
+ content: '\e090';
+}
+
+.ms-Icon--chevronsDown:before {
+ content: '\e091';
+}
+
+.ms-Icon--chevronsLeft:before {
+ content: '\e092';
+}
+
+.ms-Icon--chevronsRight:before {
+ content: '\e093';
+}
+
+.ms-Icon--clutter:before {
+ content: '\e09a';
+}
+
+.ms-Icon--subscribe:before {
+ content: '\e09c';
+}
+
+.ms-Icon--unsubscribe:before {
+ content: '\e09d';
+}
+
+.ms-Icon--personRemove:before {
+ content: '\e09e';
+}
+
+.ms-Icon--receiptForward:before {
+ content: '\e0a0';
+}
+
+.ms-Icon--receiptReply:before {
+ content: '\e0a1';
+}
+
+.ms-Icon--receiptCheck:before {
+ content: '\e0a2';
+}
+
+.ms-Icon--peopleRemove:before {
+ content: '\e0a3';
+}
+
+.ms-Icon--merge:before {
+ content: '\e0a4';
+}
+
+.ms-Icon--split:before {
+ content: '\e0a5';
+}
+
+.ms-Icon--eventCancel:before {
+ content: '\e0a6';
+}
+
+.ms-Icon--eventShare:before {
+ content: '\e0a7';
+}
+
+.ms-Icon--today:before {
+ content: '\e0a9';
+}
+
+.ms-Icon--oofReply:before {
+ content: '\e0aa';
+}
+
+.ms-Icon--voicemailReply:before {
+ content: '\e0ac';
+}
+
+.ms-Icon--voicemailForward:before {
+ content: '\e0ad';
+}
+
+.ms-Icon--ribbon:before {
+ content: '\e0af';
+}
+
+.ms-Icon--contact:before {
+ content: '\e0b0';
+}
+
+.ms-Icon--eye:before {
+ content: '\e0b1';
+}
+
+.ms-Icon--glasses:before {
+ content: '\e0b2';
+}
+
+.ms-Icon--print:before {
+ content: '\e100';
+}
+
+.ms-Icon--room:before {
+ content: '\e101';
+}
+
+.ms-Icon--post:before {
+ content: '\e102';
+}
+
+.ms-Icon--toggle:before {
+ content: '\e103';
+}
+
+.ms-Icon--touch:before {
+ content: '\e104';
+}
+
+.ms-Icon--clock:before {
+ content: '\e105';
+}
+
+.ms-Icon--fax:before {
+ content: '\e106';
+}
+
+.ms-Icon--lightning:before {
+ content: '\e110';
+}
+
+.ms-Icon--dialpad:before {
+ content: '\e111';
+}
+
+.ms-Icon--phoneTransfer:before {
+ content: '\e112';
+}
+
+.ms-Icon--phoneAdd:before {
+ content: '\e113';
+}
+
+.ms-Icon--late:before {
+ content: '\e114';
+}
+
+.ms-Icon--chatAdd:before {
+ content: '\e115';
+}
+
+.ms-Icon--conflict:before {
+ content: '\e116';
+}
+
+.ms-Icon--navigate:before {
+ content: '\e117';
+}
+
+.ms-Icon--camera:before {
+ content: '\e119';
+}
+
+.ms-Icon--filter:before {
+ content: '\e11a';
+}
+
+.ms-Icon--fullscreen:before {
+ content: '\e11b';
+}
+
+.ms-Icon--new:before {
+ content: '\e11c';
+}
+
+.ms-Icon--mailEmpty:before {
+ content: '\e11d';
+}
+
+.ms-Icon--editBox:before {
+ content: '\e11e';
+}
+
+.ms-Icon--waffle:before {
+ content: '\e11f';
+}
+
+.ms-Icon--work:before {
+ content: '\e120';
+}
+
+.ms-Icon--eventRecurring:before {
+ content: '\e121';
+}
+
+.ms-Icon--cart:before {
+ content: '\e122';
+}
+
+.ms-Icon--socialListening:before {
+ content: '\e123';
+}
+
+.ms-Icon--mapMarker:before {
+ content: '\e124';
+}
+
+.ms-Icon--org:before {
+ content: '\e125';
+}
+
+.ms-Icon--replyAlt:before {
+ content: '\e150';
+}
+
+.ms-Icon--replyAllAlt:before {
+ content: '\e152';
+}
+
+.ms-Icon--eventInfo:before {
+ content: '\e154';
+}
+
+.ms-Icon--group:before {
+ content: '\e155';
+}
+
+.ms-Icon--money:before {
+ content: '\e161';
+}
+
+.ms-Icon--graph:before {
+ content: '\e162';
+}
+
+.ms-Icon--noteEdit:before {
+ content: '\e163';
+}
+
+.ms-Icon--dashboard:before {
+ content: '\e164';
+}
+
+.ms-Icon--mailEdit:before {
+ content: '\e165';
+}
+
+.ms-Icon--pinLeft:before {
+ content: '\e167';
+}
+
+.ms-Icon--heart:before {
+ content: '\e16a';
+}
+
+.ms-Icon--heartEmpty:before {
+ content: '\e16b';
+}
+
+.ms-Icon--picture:before {
+ content: '\e16c';
+}
+
+.ms-Icon--cake:before {
+ content: '\e16d';
+}
+
+.ms-Icon--books:before {
+ content: '\e16e';
+}
+
+.ms-Icon--chart:before {
+ content: '\e16f';
+}
+
+.ms-Icon--video:before {
+ content: '\e170';
+}
+
+.ms-Icon--soccer:before {
+ content: '\e171';
+}
+
+.ms-Icon--meal:before {
+ content: '\e172';
+}
+
+.ms-Icon--balloon:before {
+ content: '\e173';
+}
+
+.ms-Icon--cat:before {
+ content: '\e174';
+}
+
+.ms-Icon--dog:before {
+ content: '\e175';
+}
+
+.ms-Icon--bag:before {
+ content: '\e176';
+}
+
+.ms-Icon--music:before {
+ content: '\e177';
+}
+
+.ms-Icon--stopwatch:before {
+ content: '\e178';
+}
+
+.ms-Icon--coffee:before {
+ content: '\e179';
+}
+
+.ms-Icon--briefcase:before {
+ content: '\e17a';
+}
+
+.ms-Icon--pill:before {
+ content: '\e17b';
+}
+
+.ms-Icon--trophy:before {
+ content: '\e17c';
+}
+
+.ms-Icon--firstAid:before {
+ content: '\e17d';
+}
+
+.ms-Icon--plane:before {
+ content: '\e17e';
+}
+
+.ms-Icon--page:before {
+ content: '\e17f';
+}
+
+.ms-Icon--car:before {
+ content: '\e180';
+}
+
+.ms-Icon--dogAlt:before {
+ content: '\e181';
+}
+
+.ms-Icon--document:before {
+ content: '\e182';
+}
+
+.ms-Icon--metadata:before {
+ content: '\e183';
+}
+
+.ms-Icon--pointItem:before {
+ content: '\e184';
+}
+
+.ms-Icon--text:before {
+ content: '\e185';
+}
+
+.ms-Icon--fieldText:before {
+ content: '\e186';
+}
+
+.ms-Icon--fieldNumber:before {
+ content: '\e187';
+}
+
+.ms-Icon--dropdown:before {
+ content: '\e188';
+}
+
+.ms-Icon--radioButton:before {
+ content: '\e189';
+}
+
+.ms-Icon--checkbox:before {
+ content: '\e18a';
+}
+
+.ms-Icon--story:before {
+ content: '\e18b';
+}
+
+.ms-Icon--bold:before {
+ content: '\e18c';
+}
+
+.ms-Icon--italic:before {
+ content: '\e18d';
+}
+
+.ms-Icon--underline:before {
+ content: '\e18e';
+}
+
+.ms-Icon--quote:before {
+ content: '\e18f';
+}
+
+.ms-Icon--styleRemove:before {
+ content: '\e190';
+}
+
+.ms-Icon--pictureAdd:before {
+ content: '\e191';
+}
+
+.ms-Icon--pictureRemove:before {
+ content: '\e192';
+}
+
+.ms-Icon--desktop:before {
+ content: '\e193';
+}
+
+.ms-Icon--tablet:before {
+ content: '\e194';
+}
+
+.ms-Icon--mobile:before {
+ content: '\e195';
+}
+
+.ms-Icon--table:before {
+ content: '\e196';
+}
+
+.ms-Icon--hide:before {
+ content: '\e197';
+}
+
+.ms-Icon--shield:before {
+ content: '\e198';
+}
+
+.ms-Icon--header:before {
+ content: '\e19a';
+}
+
+.ms-Icon--paint:before {
+ content: '\e19b';
+}
+
+.ms-Icon--support:before {
+ content: '\e19c';
+}
+
+.ms-Icon--settings:before {
+ content: '\e19d';
+}
+
+.ms-Icon--creditCard:before {
+ content: '\e19e';
+}
+
+.ms-Icon--reload:before {
+ content: '\e19f';
+}
+
+.ms-Icon--peopleSecurity:before {
+ content: '\e200';
+}
+
+.ms-Icon--fieldTextBox:before {
+ content: '\e203';
+}
+
+.ms-Icon--multiChoice:before {
+ content: '\e204';
+}
+
+.ms-Icon--fieldMail:before {
+ content: '\e205';
+}
+
+.ms-Icon--contactForm:before {
+ content: '\e206';
+}
+
+.ms-Icon--circleHalfFilled:before {
+ content: '\e207';
+}
+
+.ms-Icon--documentPDF:before {
+ content: '\e208';
+}
+
+.ms-Icon--bookmark:before {
+ content: '\e209';
+}
+
+.ms-Icon--circleUnfilled:before {
+ content: '\e20b';
+}
+
+.ms-Icon--circleFilled:before {
+ content: '\e20c';
+}
+
+.ms-Icon--textBox:before {
+ content: '\e20e';
+}
+
+.ms-Icon--drop:before {
+ content: '\e20f';
+}
+
+.ms-Icon--sun:before {
+ content: '\e210';
+}
+
+.ms-Icon--lifesaver:before {
+ content: '\e211';
+}
+
+.ms-Icon--lifesaverLock:before {
+ content: '\e212';
+}
+
+.ms-Icon--mailUnread:before {
+ content: '\e213';
+}
+
+.ms-Icon--mailRead:before {
+ content: '\e214';
+}
+
+.ms-Icon--inboxCheck:before {
+ content: '\e215';
+}
+
+.ms-Icon--folderSearch:before {
+ content: '\e216';
+}
+
+.ms-Icon--collapse:before {
+ content: '\e217';
+}
+
+.ms-Icon--expand:before {
+ content: '\e218';
+}
+
+.ms-Icon--ascending:before {
+ content: '\e219';
+}
+
+.ms-Icon--descending:before {
+ content: '\e21a';
+}
+
+.ms-Icon--filterClear:before {
+ content: '\e21b';
+}
+
+.ms-Icon--checkboxEmpty:before {
+ content: '\e21c';
+}
+
+.ms-Icon--checkboxMixed:before {
+ content: '\e21d';
+}
+
+.ms-Icon--boards:before {
+ content: '\e21e';
+}
+
+.ms-Icon--checkboxCheck:before {
+ content: '\e21f';
+}
+
+.ms-Icon--frowny:before {
+ content: '\e220';
+}
+
+.ms-Icon--lightBulb:before {
+ content: '\e221';
+}
+
+.ms-Icon--globe:before {
+ content: '\e222';
+}
+
+.ms-Icon--deviceWipe:before {
+ content: '\e223';
+}
+
+.ms-Icon--listCheck:before {
+ content: '\e226';
+}
+
+.ms-Icon--listGroup:before {
+ content: '\e227';
+}
+
+.ms-Icon--timeline:before {
+ content: '\e228';
+}
+
+.ms-Icon--fontIncrease:before {
+ content: '\e229';
+}
+
+.ms-Icon--fontDecrease:before {
+ content: '\e22a';
+}
+
+.ms-Icon--fontColor:before {
+ content: '\e22b';
+}
+
+.ms-Icon--mailCheck:before {
+ content: '\e22c';
+}
+
+.ms-Icon--mailDown:before {
+ content: '\e22d';
+}
+
+.ms-Icon--listCheckbox:before {
+ content: '\e22e';
+}
+
+.ms-Icon--sunAdd:before {
+ content: '\e22f';
+}
+
+.ms-Icon--sunQuestion:before {
+ content: '\e230';
+}
+
+.ms-Icon--chevronThinUp:before {
+ content: '\e231';
+}
+
+.ms-Icon--chevronThinDown:before {
+ content: '\e232';
+}
+
+.ms-Icon--chevronThinLeft:before {
+ content: '\e233';
+}
+
+.ms-Icon--chevronThinRight:before {
+ content: '\e234';
+}
+
+.ms-Icon--chevronThickUp:before {
+ content: '\e235';
+}
+
+.ms-Icon--chevronThickDown:before {
+ content: '\e236';
+}
+
+.ms-Icon--chevronThickLeft:before {
+ content: '\e237';
+}
+
+.ms-Icon--chevronThickRight:before {
+ content: '\e238';
+}
+
+.ms-Icon--linkRemove:before {
+ content: '\e239';
+}
+
+.ms-Icon--alertOutline:before {
+ content: '\e23b';
+}
+
+.ms-Icon--documentLandscape:before {
+ content: '\e23c';
+}
+
+.ms-Icon--documentAdd:before {
+ content: '\e23d';
+}
+
+.ms-Icon--toggleMiddle:before {
+ content: '\e23e';
+}
+
+.ms-Icon--embed:before {
+ content: '\e23f';
+}
+
+.ms-Icon--listNumbered:before {
+ content: '\e240';
+}
+
+.ms-Icon--peopleCheck:before {
+ content: '\e242';
+}
+
+.ms-Icon--caretUpOutline:before {
+ content: '\e243';
+}
+
+.ms-Icon--caretDownOutline:before {
+ content: '\e244';
+}
+
+.ms-Icon--caretLeftOutline:before {
+ content: '\e245';
+}
+
+.ms-Icon--caretRightOutline:before {
+ content: '\e246';
+}
+
+.ms-Icon--mailSync:before {
+ content: '\e248';
+}
+
+.ms-Icon--mailError:before {
+ content: '\e249';
+}
+
+.ms-Icon--mailPause:before {
+ content: '\e24a';
+}
+
+.ms-Icon--peopleSync:before {
+ content: '\e24b';
+}
+
+.ms-Icon--peopleError:before {
+ content: '\e24c';
+}
+
+.ms-Icon--peoplePause:before {
+ content: '\e24d';
+}
+
+.ms-Icon--circleBall:before {
+ content: '\e24e';
+}
+
+.ms-Icon--circleBalloons:before {
+ content: '\e24f';
+}
+
+.ms-Icon--circleCar:before {
+ content: '\e250';
+}
+
+.ms-Icon--circleCat:before {
+ content: '\e251';
+}
+
+.ms-Icon--circleCoffee:before {
+ content: '\e252';
+}
+
+.ms-Icon--circleDog:before {
+ content: '\e253';
+}
+
+.ms-Icon--circleLightning:before {
+ content: '\e254';
+}
+
+.ms-Icon--circlePill:before {
+ content: '\e255';
+}
+
+.ms-Icon--circlePlane:before {
+ content: '\e256';
+}
+
+.ms-Icon--circlePoodle:before {
+ content: '\e257';
+}
+
+.ms-Icon--checkPeople:before {
+ content: '\e259';
+}
+
+.ms-Icon--documentSearch:before {
+ content: '\e25a';
+}
+
+.ms-Icon--sortLines:before {
+ content: '\e25c';
+}
+
+.ms-Icon--calendarPublic:before {
+ content: '\e25d';
+}
+
+.ms-Icon--contactPublic:before {
+ content: '\e25e';
+}
+
+.ms-Icon--classNotebook:before {
+ content: '\e25f';
+}
+
+.ms-Icon--triangleUp:before {
+ content: '\e260';
+}
+
+.ms-Icon--triangleRight:before {
+ content: '\e261';
+}
+
+.ms-Icon--triangleDown:before {
+ content: '\e262';
+}
+
+.ms-Icon--triangleLeft:before {
+ content: '\e263';
+}
+
+.ms-Icon--triangleEmptyUp:before {
+ content: '\e264';
+}
+
+.ms-Icon--triangleEmptyRight:before {
+ content: '\e265';
+}
+
+.ms-Icon--triangleEmptyDown:before {
+ content: '\e266';
+}
+
+.ms-Icon--triangleEmptyLeft:before {
+ content: '\e267';
+}
+
+.ms-Icon--filePDF:before {
+ content: '\e268';
+}
+
+.ms-Icon--fileImage:before {
+ content: '\e26c';
+}
+
+.ms-Icon--fileDocument:before {
+ content: '\e26d';
+}
+
+.ms-Icon--listGroup2:before {
+ content: '\e26e';
+}
+
+.ms-Icon--copy:before {
+ content: '\e26f';
+}
+
+.ms-Icon--creditCardOutline:before {
+ content: '\e270';
+}
+
+.ms-Icon--mailPublic:before {
+ content: '\e272';
+}
+
+.ms-Icon--folderPublic:before {
+ content: '\e273';
+}
+
+.ms-Icon--teamwork:before {
+ content: '\e274';
+}
+
+.ms-Icon--move:before {
+ content: '\e275';
+}
+
+.ms-Icon--classroom:before {
+ content: '\e276';
+}
+
+.ms-Icon--menu2:before {
+ content: '\e277';
+}
+
+.ms-Icon--plus2:before {
+ content: '\e278';
+}
+
+.ms-Icon--tag:before {
+ content: '\e279';
+}
+
+.ms-Icon--arrowUp2:before {
+ content: '\e27a';
+}
+
+.ms-Icon--arrowDown2:before {
+ content: '\e27b';
+}
+
+.ms-Icon--circlePlus:before {
+ content: '\e27c';
+}
+
+.ms-Icon--circleInfo:before {
+ content: '\e27d';
+}
+
+.ms-Icon--section:before {
+ content: '\e27e';
+}
+
+.ms-Icon--sections:before {
+ content: '\e27f';
+}
+
+.ms-Icon--at:before {
+ content: '\e282';
+}
+
+.ms-Icon--arrowUpRight:before {
+ content: '\e283';
+}
+
+.ms-Icon--arrowDownRight:before {
+ content: '\e284';
+}
+
+.ms-Icon--arrowDownLeft:before {
+ content: '\e285';
+}
+
+.ms-Icon--arrowUpLeft:before {
+ content: '\e286';
+}
+
+.ms-Icon--bundle:before {
+ content: '\e287';
+}
+
+.ms-Icon--pictureEdit:before {
+ content: '\e288';
+}
+
+.ms-Icon--protectionCenter:before {
+ content: '\e289';
+}
+
+.ms-Icon--alert2:before {
+ content: '\e28a';
+}
+
+.ms-Icon--circle {
+ position: relative;
+ display: inline-block;
+ font-size: 1rem;
+ width: 1em;
+ height: 1em;
+ margin: 0 0 0 0.5em;
+ padding: 0;
+ text-align: right;
+ -webkit-font-smoothing: antialiased;
+}
+
+.ms-Icon--circle:before,
+.ms-Icon--circle:after {
+ line-height: 1;
+ font-size: inherit;
+}
+
+.ms-Icon--circle:before {
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ position: absolute;
+}
+
+.ms-Icon--circle:after {
+ content: '\e000';
+ position: absolute;
+ top: 0;
+ right: 0;
+ -webkit-transform: scale(2);
+ -ms-transform: scale(2);
+ transform: scale(2);
+ -webkit-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ z-index: 0;
+}
+
+.ms-Icon--circle.ms-Icon--star:before {
+ top: -2%;
+ right: 1%;
+}
+
+.ms-Icon--circle.ms-Icon--person:before {
+ top: -2%;
+ right: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--alert:before {
+ top: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--mailOpen:before {
+ top: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--people:before {
+ top: -4%;
+ right: -7%;
+}
+
+.ms-Icon--circle.ms-Icon--bell:before {
+ top: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--scheduling:before {
+ top: -3%;
+ right: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--documents:before {
+ top: -1%;
+ right: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--listBullets:before {
+ top: -1%;
+ right: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--panel:before {
+ right: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--popout:before {
+ top: -2%;
+ right: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--home:before {
+ top: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--favorites:before {
+ top: -2%;
+ right: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--phone:before {
+ top: -2%;
+ right: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--mailSend:before {
+ right: -10%;
+}
+
+.ms-Icon--circle.ms-Icon--pencil:before {
+ top: -2%;
+ right: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--flag:before {
+ right: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--miniatures:before {
+ right: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--voicemail:before {
+ top: 2%;
+ right: -7%;
+}
+
+.ms-Icon--circle.ms-Icon--onlineAdd:before {
+ top: -1%;
+ right: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--pinDown:before {
+ top: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--gear:before {
+ right: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--check:before {
+ top: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--ellipsis:before {
+ top: 2%;
+ right: -12%;
+}
+
+.ms-Icon--circle.ms-Icon--directions:before {
+ right: 10%;
+}
+
+.ms-Icon--circle.ms-Icon--microphone:before {
+ top: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--caretDown:before {
+ top: 5%;
+ right: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--caretLeft:before {
+ right: -6%;
+}
+
+.ms-Icon--circle.ms-Icon--caretRight:before {
+ right: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--caretUpLeft:before {
+ top: 5%;
+ right: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--caretUpRight:before {
+ top: 5%;
+ right: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--caretDownRight:before {
+ right: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--caretDownLeft:before {
+ right: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--note:before {
+ top: 2%;
+ right: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--noteReply:before {
+ top: 6%;
+ right: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--noteForward:before {
+ top: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--key:before {
+ top: 5%;
+ right: 1%;
+}
+
+.ms-Icon--circle.ms-Icon--tile:before {
+ top: -1%;
+ right: -18%;
+}
+
+.ms-Icon--circle.ms-Icon--taskRecurring:before {
+ top: 2%;
+ right: -1%;
+}
+
+.ms-Icon--circle.ms-Icon--starEmpty:before {
+ top: -4%;
+ right: 1%;
+}
+
+.ms-Icon--circle.ms-Icon--documentReply:before {
+ top: -2%;
+ right: 7%;
+}
+
+.ms-Icon--circle.ms-Icon--documentForward:before {
+ right: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--partner:before {
+ top: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--reactivate:before {
+ top: -2%;
+ right: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--sort:before {
+ right: -19%;
+}
+
+.ms-Icon--circle.ms-Icon--personAdd:before {
+ top: -2%;
+ right: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronDown:before {
+ top: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronLeft:before {
+ right: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronRight:before {
+ right: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleAdd:before {
+ top: -5%;
+ right: -12%;
+}
+
+.ms-Icon--circle.ms-Icon--newsfeed:before {
+ right: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--notebook:before {
+ right: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--link:before {
+ top: 2%;
+ right: -18%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronsDown:before {
+ top: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronsLeft:before {
+ right: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--chevronsRight:before {
+ right: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--personRemove:before {
+ right: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--receiptForward:before {
+ right: -20%;
+}
+
+.ms-Icon--circle.ms-Icon--receiptReply:before {
+ right: -20%;
+}
+
+.ms-Icon--circle.ms-Icon--receiptCheck:before {
+ right: -20%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleRemove:before {
+ top: -3%;
+ right: -12%;
+}
+
+.ms-Icon--circle.ms-Icon--merge:before {
+ top: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--split:before {
+ top: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--eventCancel:before {
+ right: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--today:before {
+ top: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--oofReply:before {
+ right: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--voicemailReply:before {
+ top: 4%;
+ right: -25%;
+}
+
+.ms-Icon--circle.ms-Icon--voicemailForward:before {
+ top: 4%;
+ right: -20%;
+}
+
+.ms-Icon--circle.ms-Icon--eye:before {
+ top: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--post:before {
+ top: -4%;
+ right: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--fax:before {
+ top: -3%;
+ right: -2%;
+}
+
+.ms-Icon--circle.ms-Icon--lightning:before {
+ top: 2%;
+ right: 1%;
+}
+
+.ms-Icon--circle.ms-Icon--filter:before {
+ top: 7%;
+}
+
+.ms-Icon--circle.ms-Icon--cart:before {
+ right: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--socialListening:before {
+ top: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--mapMarker:before {
+ top: 2%;
+}
+
+.ms-Icon--circle.ms-Icon--replyAllAlt:before {
+ right: -16%;
+}
+
+.ms-Icon--circle.ms-Icon--group:before {
+ right: -33%;
+}
+
+.ms-Icon--circle.ms-Icon--money:before {
+ right: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--noteEdit:before {
+ right: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--mailEdit:before {
+ top: 3%;
+ right: 7%;
+}
+
+.ms-Icon--circle.ms-Icon--pinLeft:before {
+ right: -6%;
+}
+
+.ms-Icon--circle.ms-Icon--heart:before {
+ top: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--heartEmpty:before {
+ top: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--cake:before {
+ top: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--books:before {
+ right: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--video:before {
+ top: -3%;
+ right: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--balloon:before {
+ top: 4%;
+ right: -1%;
+}
+
+.ms-Icon--circle.ms-Icon--music:before {
+ top: -2%;
+ right: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--stopwatch:before {
+ top: -3%;
+ right: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--coffee:before {
+ top: -3%;
+ right: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--plane:before {
+ right: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--dogAlt:before {
+ right: -15%;
+}
+
+.ms-Icon--circle.ms-Icon--metadata:before {
+ top: -4%;
+ right: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--text:before {
+ top: -4%;
+ right: 10%;
+}
+
+.ms-Icon--circle.ms-Icon--fieldText:before {
+ right: -14%;
+}
+
+.ms-Icon--circle.ms-Icon--fieldNumber:before {
+ right: -14%;
+}
+
+.ms-Icon--circle.ms-Icon--dropdown:before {
+ right: -14%;
+}
+
+.ms-Icon--circle.ms-Icon--story:before {
+ right: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--bold:before {
+ right: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--underline:before {
+ top: 4%;
+}
+
+.ms-Icon--circle.ms-Icon--quote:before {
+ right: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--styleRemove:before {
+ top: 4%;
+ right: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--pictureAdd:before {
+ right: -6%;
+}
+
+.ms-Icon--circle.ms-Icon--pictureRemove:before {
+ right: -6%;
+}
+
+.ms-Icon--circle.ms-Icon--mobile:before {
+ right: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--hide:before {
+ top: -4%;
+}
+
+.ms-Icon--circle.ms-Icon--header:before {
+ right: -9%;
+}
+
+.ms-Icon--circle.ms-Icon--msn:before {
+ right: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleCheck:before {
+ right: -7%;
+ top: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--caretDownOutline:before {
+ top: 6%;
+}
+
+.ms-Icon--circle.ms-Icon--caretLeftOutline:before {
+ right: -5%;
+}
+
+.ms-Icon--circle.ms-Icon--caretRightOutline:before {
+ right: 5%;
+}
+
+.ms-Icon--circle.ms-Icon--sway:before {
+ right: -3%;
+}
+
+.ms-Icon--circle.ms-Icon--mailSync:before {
+ right: 8%;
+ top: 3%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleSync:before {
+ right: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--peopleError:before {
+ right: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--peoplePause:before {
+ right: -8%;
+}
+
+.ms-Icon--circle.ms-Icon--documentSearch:before {
+ right: 8%;
+}
+
+.ms-Icon--circle.ms-Icon--dynamicsMarketing:before {
+ right: -8%;
+}
+
+.ms-Icon--question,
+.ms-Icon--calendar,
+.ms-Icon--folder,
+.ms-Icon--chat,
+.ms-Icon--listBullets,
+.ms-Icon--folderMove,
+.ms-Icon--mailSend,
+.ms-Icon--reply,
+.ms-Icon--play,
+.ms-Icon--replyAll,
+.ms-Icon--refresh,
+.ms-Icon--questionReverse,
+.ms-Icon--notRecurring,
+.ms-Icon--tasks,
+.ms-Icon--check,
+.ms-Icon--arrowLeft,
+.ms-Icon--arrowRight,
+.ms-Icon--directions,
+.ms-Icon--caretLeft,
+.ms-Icon--caretRight,
+.ms-Icon--caretUpLeft,
+.ms-Icon--caretUpRight,
+.ms-Icon--caretDownRight,
+.ms-Icon--caretDownLeft,
+.ms-Icon--note,
+.ms-Icon--noteReply,
+.ms-Icon--noteForward,
+.ms-Icon--taskRecurring,
+.ms-Icon--documentReply,
+.ms-Icon--documentForward,
+.ms-Icon--reactivate,
+.ms-Icon--chevronLeft,
+.ms-Icon--chevronRight,
+.ms-Icon--notebook,
+.ms-Icon--chevronsLeft,
+.ms-Icon--chevronsRight,
+.ms-Icon--receiptForward,
+.ms-Icon--receiptReply,
+.ms-Icon--receiptCheck,
+.ms-Icon--eventShare,
+.ms-Icon--oofReply,
+.ms-Icon--voicemailReply,
+.ms-Icon--voicemailForward,
+.ms-Icon--post,
+.ms-Icon--toggle,
+.ms-Icon--late,
+.ms-Icon--eventRecurring,
+.ms-Icon--cart,
+.ms-Icon--socialListening,
+.ms-Icon--replyAlt,
+.ms-Icon--replyAllAlt,
+.ms-Icon--graph,
+.ms-Icon--pinLeft,
+.ms-Icon--chart,
+.ms-Icon--page,
+.ms-Icon--document,
+.ms-Icon--metadata,
+.ms-Icon--pointItem,
+.ms-Icon--dropdown,
+.ms-Icon--checkbox,
+.ms-Icon--reload,
+.ms-Icon--multiChoice,
+.ms-Icon--contactForm,
+.ms-Icon--inboxCheck,
+.ms-Icon--checkboxCheck,
+.ms-Icon--folderSearch,
+.ms-Icon--listCheck,
+.ms-Icon--listGroup,
+.ms-Icon--timeline
+.ms-Icon--mailCheck,
+.ms-Icon--listCheckbox,
+.ms-Icon--sunQuestion,
+.ms-Icon--chevronThinLeft,
+.ms-Icon--chevronThinRight,
+.ms-Icon--chevronThickLeft,
+.ms-Icon--chevronThickRight,
+.ms-Icon--documentLandscape,
+.ms-Icon--peopleCheck,
+.ms-Icon--caretLeftOutline,
+.ms-Icon--caretRightOutline,
+.ms-Icon--mailSync,
+.ms-Icon--peopleSync,
+.ms-Icon--checkPeople,
+.ms-Icon--sortLines,
+.ms-Icon--triangleRight:before,
+.ms-Icon--triangleLeft:before,
+.ms-Icon--contactPublic:before,
+.ms-Icon--triangleEmptyRight:before,
+.ms-Icon--triangleEmptyLeft:before,
+.ms-Icon--fileDocument:before,
+.ms-Icon--listGroup2:before,
+.ms-Icon--copy:before,
+.ms-Icon--sections:before,
+.ms-Icon--arrowUpRight:before,
+.ms-Icon--arrowDownRight:before,
+.ms-Icon--arrowDownLeft:before,
+.ms-Icon--arrowUpLeft:before,
+.ms-Icon--bundle:before {
+ -webkit-transform: scaleX(-1);
+ -ms-transform: scaleX(-1);
+ transform: scaleX(-1);
+}
+
+.ms-u-slideRightIn10 {
+ -webkit-animation-name: fadeIn, slideRightIn10;
+ animation-name: fadeIn, slideRightIn10;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightIn10 {
+ from {
+ -webkit-transform: translate3d(-10px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightIn10 {
+ from {
+ -webkit-transform: translate3d(-10px, 0px, 0px);
+ transform: translate3d(-10px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightIn20 {
+ -webkit-animation-name: fadeIn, slideRightIn20;
+ animation-name: fadeIn, slideRightIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightIn20 {
+ from {
+ -webkit-transform: translate3d(-20px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightIn20 {
+ from {
+ -webkit-transform: translate3d(-20px, 0px, 0px);
+ transform: translate3d(-20px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightIn40 {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightIn40 {
+ from {
+ -webkit-transform: translate3d(-40px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightIn40 {
+ from {
+ -webkit-transform: translate3d(-40px, 0px, 0px);
+ transform: translate3d(-40px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftIn10 {
+ -webkit-animation-name: fadeIn, slideLeftIn10;
+ animation-name: fadeIn, slideLeftIn10;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftIn10 {
+ from {
+ -webkit-transform: translate3d(10px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftIn10 {
+ from {
+ -webkit-transform: translate3d(10px, 0px, 0px);
+ transform: translate3d(10px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftIn20 {
+ -webkit-animation-name: fadeIn, slideLeftIn20;
+ animation-name: fadeIn, slideLeftIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftIn20 {
+ from {
+ -webkit-transform: translate3d(20px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftIn20 {
+ from {
+ -webkit-transform: translate3d(20px, 0px, 0px);
+ transform: translate3d(20px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftIn40 {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftIn40 {
+ from {
+ -webkit-transform: translate3d(40px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftIn40 {
+ from {
+ -webkit-transform: translate3d(40px, 0px, 0px);
+ transform: translate3d(40px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightIn400 {
+ -webkit-animation-name: fadeIn, slideRightIn400;
+ animation-name: fadeIn, slideRightIn400;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightIn400 {
+ from {
+ -webkit-transform: translate3d(-400px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightIn400 {
+ from {
+ -webkit-transform: translate3d(-400px, 0px, 0px);
+ transform: translate3d(-400px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftIn400 {
+ -webkit-animation-name: fadeIn, slideLeft400;
+ animation-name: fadeIn, slideLeft400;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeft400 {
+ from {
+ -webkit-transform: translate3d(400px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeft400 {
+ from {
+ -webkit-transform: translate3d(400px, 0px, 0px);
+ transform: translate3d(400px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideUpIn20 {
+ -webkit-animation-name: fadeIn, slideUpIn20;
+ animation-name: fadeIn, slideUpIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideUpIn20 {
+ from {
+ -webkit-transform: translate3d(0px, 20px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideUpIn20 {
+ from {
+ -webkit-transform: translate3d(0px, 20px, 0px);
+ transform: translate3d(0px, 20px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideUpIn10 {
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideUpIn10 {
+ from {
+ -webkit-transform: translate3d(0px, 10px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideUpIn10 {
+ from {
+ -webkit-transform: translate3d(0px, 10px, 0px);
+ transform: translate3d(0px, 10px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideDownIn20 {
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideDownIn20 {
+ from {
+ -webkit-transform: translate3d(0px, -20px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideDownIn20 {
+ from {
+ -webkit-transform: translate3d(0px, -20px, 0px);
+ transform: translate3d(0px, -20px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideDownIn10 {
+ -webkit-animation-name: fadeIn, slideDownIn10;
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideDownIn10 {
+ from {
+ -webkit-transform: translate3d(0px, -10px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+@keyframes slideDownIn10 {
+ from {
+ -webkit-transform: translate3d(0px, -10px, 0px);
+ transform: translate3d(0px, -10px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightOut40 {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightOut40 {
+ from {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(40px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightOut40 {
+ from {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ transform: translate3d(0px, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(40px, 0px, 0px);
+ transform: translate3d(40px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftOut40 {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftOut40 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(-40px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftOut40 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(-40px, 0px, 0px);
+ transform: translate3d(-40px, 0px, 0px);
+ }
+}
+
+.ms-u-slideRightOut400 {
+ -webkit-animation-name: fadeOut, slideRightOut400;
+ animation-name: fadeOut, slideRightOut400;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideRightOut400 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(400px, 0px, 0px);
+ }
+}
+
+@keyframes slideRightOut400 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(400px, 0px, 0px);
+ transform: translate3d(400px, 0px, 0px);
+ }
+}
+
+.ms-u-slideLeftOut400 {
+ -webkit-animation-name: fadeOut, slideLeftOut400;
+ animation-name: fadeOut, slideLeftOut400;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideLeftOut400 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(-400px, 0px, 0px);
+ }
+}
+
+@keyframes slideLeftOut400 {
+ from {
+ -webkit-transform: translate3d(0, 0px, 0px);
+ transform: translate3d(0, 0px, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(-400px, 0px, 0px);
+ transform: translate3d(-400px, 0px, 0px);
+ }
+}
+
+.ms-u-slideUpOut20 {
+ -webkit-animation-name: fadeOut, slideUpOut20;
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideUpOut20 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, -20px, 0px);
+ }
+}
+
+@keyframes slideUpOut20 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, -20px, 0px);
+ transform: translate3d(0px, -20px, 0px);
+ }
+}
+
+.ms-u-slideUpOut10 {
+ -webkit-animation-name: fadeOut, slideUpOut10;
+ animation-name: fadeOut, slideUpOut10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideUpOut10 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, -10px, 0px);
+ }
+}
+
+@keyframes slideUpOut10 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, -10px, 0px);
+ transform: translate3d(0px, -10px, 0px);
+ }
+}
+
+.ms-u-slideDownOut20 {
+ -webkit-animation-name: fadeOut, slideDownOut20;
+ animation-name: fadeOut, slideDownOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideDownOut20 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 20px, 0px);
+ }
+}
+
+@keyframes slideDownOut20 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 20px, 0px);
+ transform: translate3d(0px, 20px, 0px);
+ }
+}
+
+.ms-u-slideDownOut10 {
+ -webkit-animation-name: fadeOut, slideDownOut10;
+ animation-name: fadeOut, slideDownOut10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideDownOut10 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 10px, 0px);
+ }
+}
+
+@keyframes slideDownOut10 {
+ from {
+ -webkit-transform: translate3d(0px, 0, 0px);
+ transform: translate3d(0px, 0, 0px);
+ }
+
+ to {
+ -webkit-transform: translate3d(0px, 10px, 0px);
+ transform: translate3d(0px, 10px, 0px);
+ }
+}
+
+.ms-u-scaleUpIn100 {
+ -webkit-animation-name: fadeIn, scaleUp100;
+ animation-name: fadeIn, scaleUp100;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes scaleUp100 {
+ from {
+ -webkit-transform: scale3d(0.98, 0.98, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes scaleUp100 {
+ from {
+ -webkit-transform: scale3d(0.98, 0.98, 1);
+ transform: scale3d(0.98, 0.98, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.ms-u-scaleDownIn100 {
+ -webkit-animation-name: fadeIn, scaleDown100;
+ animation-name: fadeIn, scaleDown100;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes scaleDown100 {
+ from {
+ -webkit-transform: scale3d(1.03, 1.03, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes scaleDown100 {
+ from {
+ -webkit-transform: scale3d(1.03, 1.03, 1);
+ transform: scale3d(1.03, 1.03, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.ms-u-scaleUpOut103 {
+ -webkit-animation-name: fadeOut, scaleUp103;
+ animation-name: fadeOut, scaleUp103;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes scaleUp103 {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1.03, 1.03, 1);
+ }
+}
+
+@keyframes scaleUp103 {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1.03, 1.03, 1);
+ transform: scale3d(1.03, 1.03, 1);
+ }
+}
+
+.ms-u-scaleDownOut98 {
+ -webkit-animation-name: fadeOut, scaleDown98;
+ animation-name: fadeOut, scaleDown98;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes scaleDown98 {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(0.98, 0.98, 1);
+ }
+}
+
+@keyframes scaleDown98 {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(0.98, 0.98, 1);
+ transform: scale3d(0.98, 0.98, 1);
+ }
+}
+
+.ms-u-fadeIn400 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-fadeIn100 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-u-fadeIn200 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-u-fadeIn500 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.467s;
+ animation-duration: 0.467s;
+}
+
+@-webkit-keyframes fadeIn {
+ from {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.ms-u-fadeOut400 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-fadeOut100 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-u-fadeOut200 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-u-fadeOut500 {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.467s;
+ animation-duration: 0.467s;
+}
+
+@-webkit-keyframes fadeOut {
+ from {
+ opacity: 1;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.ms-u-rotate90deg {
+ -webkit-animation-name: rotate90;
+ animation-name: rotate90;
+ -webkit-animation-duration: 0.1s;
+ -moz-animation-duration: 0.1s;
+ -ms-animation-duration: 0.1s;
+ -o-animation-duration: 0.1s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes rotate90 {
+ from {
+ -webkit-transform: rotateZ(0deg);
+ }
+
+ to {
+ -webkit-transform: rotateZ(90deg);
+ }
+}
+
+@keyframes rotate90 {
+ from {
+ -webkit-transform: rotateZ(0deg);
+ transform: rotateZ(0deg);
+ }
+
+ to {
+ -webkit-transform: rotateZ(90deg);
+ transform: rotateZ(90deg);
+ }
+}
+
+.ms-u-rotateN90deg {
+ -webkit-animation-name: rotateN90;
+ animation-name: rotateN90;
+ -webkit-animation-duration: 0.1s;
+ -moz-animation-duration: 0.1s;
+ -ms-animation-duration: 0.1s;
+ -o-animation-duration: 0.1s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@-webkit-keyframes rotateN90 {
+ from {
+ -webkit-transform: rotateZ(90deg);
+ }
+
+ to {
+ -webkit-transform: rotateZ(0deg);
+ }
+}
+
+@keyframes rotateN90 {
+ from {
+ -webkit-transform: rotateZ(90deg);
+ transform: rotateZ(90deg);
+ }
+
+ to {
+ -webkit-transform: rotateZ(0deg);
+ transform: rotateZ(0deg);
+ }
+}
+
+.ms-u-expandCollapse400 {
+ transition: height 0.367s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-u-expandCollapse200 {
+ transition: height 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-u-expandCollapse100 {
+ transition: height 0.1s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-u-delay100 {
+ -webkit-animation-delay: 0.167s;
+ animation-delay: 0.167s;
+}
+
+.ms-u-delay200 {
+ -webkit-animation-delay: 0.267s;
+ animation-delay: 0.267s;
+}
+
+.ms-u-slideRightIn10 {
+ -webkit-animation-name: fadeIn, slideLeft10;
+ animation-name: fadeIn, slideLeft10;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideRightIn20 {
+ -webkit-animation-name: fadeIn, slideLeft20;
+ animation-name: fadeIn, slideLeft20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideRightIn40 {
+ -webkit-animation-name: fadeIn, slideLeft40;
+ animation-name: fadeIn, slideLeft40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideLeftIn10 {
+ -webkit-animation-name: fadeIn, slideRight10;
+ animation-name: fadeIn, slideRight10;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideLeftIn20 {
+ -webkit-animation-name: fadeIn, slideRight20;
+ animation-name: fadeIn, slideRight20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideLeftIn40 {
+ -webkit-animation-name: fadeIn, slideRight40;
+ animation-name: fadeIn, slideRight40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideRightIn400 {
+ -webkit-animation-name: fadeIn, slideLeft400;
+ animation-name: fadeIn, slideLeft400;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideLeftIn400 {
+ -webkit-animation-name: fadeIn, slideRight400;
+ animation-name: fadeIn, slideRight400;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideRightOut40 {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideLeftOut40 {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideRightOut400 {
+ -webkit-animation-name: fadeOut, slideLeftOut400;
+ animation-name: fadeOut, slideLeftOut400;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-slideLeftOut400 {
+ -webkit-animation-name: fadeOut, slideRightOut400;
+ animation-name: fadeOut, slideRightOut400;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-rotate90deg {
+ -webkit-animation-name: rotateN90;
+ animation-name: rotateN90;
+ -webkit-animation-duration: 0.1s;
+ -moz-animation-duration: 0.1s;
+ -ms-animation-duration: 0.1s;
+ -o-animation-duration: 0.1s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-u-rotateN90deg {
+ -webkit-animation-name: rotate90;
+ animation-name: rotate90;
+ -webkit-animation-duration: 0.1s;
+ -moz-animation-duration: 0.1s;
+ -ms-animation-duration: 0.1s;
+ -o-animation-duration: 0.1s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+@media (max-width: 479px) {
+ .ms-u-hiddenSm,
+ .ms-u-hiddenMdDown,
+ .ms-u-hiddenLgDown,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 480px) and (max-width: 639px) {
+ .ms-u-hiddenMd,
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenMdDown,
+ .ms-u-hiddenLgDown,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 640px) and (max-width: 1023px) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLg,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenLgDown,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 1024px) and (max-width: 1365px) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenXl,
+ .ms-u-hiddenXlUp,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 1366px) and (max-width: 1919px) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenXlUp,
+ .ms-u-hiddenXxl,
+ .ms-u-hiddenXxlUp,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+@media (min-width: 1920px) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenXlUp,
+ .ms-u-hiddenXxlUp,
+ .ms-u-hiddenXxxl {
+ display: none !important;
+ }
+}
+
+.ms-u-sm12 {
+ width: 100%;
+}
+
+.ms-u-sm11 {
+ width: 91.66666666666666%;
+}
+
+.ms-u-sm10 {
+ width: 83.33333333333334%;
+}
+
+.ms-u-sm9 {
+ width: 75%;
+}
+
+.ms-u-sm8 {
+ width: 66.66666666666666%;
+}
+
+.ms-u-sm7 {
+ width: 58.333333333333336%;
+}
+
+.ms-u-sm6 {
+ width: 50%;
+}
+
+.ms-u-sm5 {
+ width: 41.66666666666667%;
+}
+
+.ms-u-sm4 {
+ width: 33.33333333333333%;
+}
+
+.ms-u-sm3 {
+ width: 25%;
+}
+
+.ms-u-sm2 {
+ width: 16.666666666666664%;
+}
+
+.ms-u-sm1 {
+ width: 8.333333333333332%;
+}
+
+.ms-u-smPull12 {
+ left: 100%;
+}
+
+.ms-u-smPull11 {
+ left: 91.66666666666666%;
+}
+
+.ms-u-smPull10 {
+ left: 83.33333333333334%;
+}
+
+.ms-u-smPull9 {
+ left: 75%;
+}
+
+.ms-u-smPull8 {
+ left: 66.66666666666666%;
+}
+
+.ms-u-smPull7 {
+ left: 58.333333333333336%;
+}
+
+.ms-u-smPull6 {
+ left: 50%;
+}
+
+.ms-u-smPull5 {
+ left: 41.66666666666667%;
+}
+
+.ms-u-smPull4 {
+ left: 33.33333333333333%;
+}
+
+.ms-u-smPull3 {
+ left: 25%;
+}
+
+.ms-u-smPull2 {
+ left: 16.666666666666664%;
+}
+
+.ms-u-smPull1 {
+ left: 8.333333333333332%;
+}
+
+.ms-u-smPull0 {
+ left: auto;
+}
+
+.ms-u-smPush12 {
+ right: 100%;
+}
+
+.ms-u-smPush11 {
+ right: 91.66666666666666%;
+}
+
+.ms-u-smPush10 {
+ right: 83.33333333333334%;
+}
+
+.ms-u-smPush9 {
+ right: 75%;
+}
+
+.ms-u-smPush8 {
+ right: 66.66666666666666%;
+}
+
+.ms-u-smPush7 {
+ right: 58.333333333333336%;
+}
+
+.ms-u-smPush6 {
+ right: 50%;
+}
+
+.ms-u-smPush5 {
+ right: 41.66666666666667%;
+}
+
+.ms-u-smPush4 {
+ right: 33.33333333333333%;
+}
+
+.ms-u-smPush3 {
+ right: 25%;
+}
+
+.ms-u-smPush2 {
+ right: 16.666666666666664%;
+}
+
+.ms-u-smPush1 {
+ right: 8.333333333333332%;
+}
+
+.ms-u-smPush0 {
+ right: auto;
+}
+
+.ms-u-smOffset11 {
+ margin-right: 91.66666666666666%;
+}
+
+.ms-u-smOffset10 {
+ margin-right: 83.33333333333334%;
+}
+
+.ms-u-smOffset9 {
+ margin-right: 75%;
+}
+
+.ms-u-smOffset8 {
+ margin-right: 66.66666666666666%;
+}
+
+.ms-u-smOffset7 {
+ margin-right: 58.333333333333336%;
+}
+
+.ms-u-smOffset6 {
+ margin-right: 50%;
+}
+
+.ms-u-smOffset5 {
+ margin-right: 41.66666666666667%;
+}
+
+.ms-u-smOffset4 {
+ margin-right: 33.33333333333333%;
+}
+
+.ms-u-smOffset3 {
+ margin-right: 25%;
+}
+
+.ms-u-smOffset2 {
+ margin-right: 16.666666666666664%;
+}
+
+.ms-u-smOffset1 {
+ margin-right: 8.333333333333332%;
+}
+
+.ms-u-smOffset0 {
+ margin-right: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-u-md12 {
+ width: 100%;
+ }
+
+ .ms-u-md11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-md10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-md9 {
+ width: 75%;
+ }
+
+ .ms-u-md8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-md7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-md6 {
+ width: 50%;
+ }
+
+ .ms-u-md5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-md4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-md3 {
+ width: 25%;
+ }
+
+ .ms-u-md2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-md1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-mdPull12 {
+ left: 100%;
+ }
+
+ .ms-u-mdPull11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-mdPull10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-mdPull9 {
+ left: 75%;
+ }
+
+ .ms-u-mdPull8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-mdPull7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-mdPull6 {
+ left: 50%;
+ }
+
+ .ms-u-mdPull5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-mdPull4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-mdPull3 {
+ left: 25%;
+ }
+
+ .ms-u-mdPull2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-mdPull1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-mdPull0 {
+ left: auto;
+ }
+
+ .ms-u-mdPush12 {
+ right: 100%;
+ }
+
+ .ms-u-mdPush11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-mdPush10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-mdPush9 {
+ right: 75%;
+ }
+
+ .ms-u-mdPush8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-mdPush7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-mdPush6 {
+ right: 50%;
+ }
+
+ .ms-u-mdPush5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-mdPush4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-mdPush3 {
+ right: 25%;
+ }
+
+ .ms-u-mdPush2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-mdPush1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-mdPush0 {
+ right: auto;
+ }
+
+ .ms-u-mdOffset11 {
+ margin-right: 91.66666666666666%;
+ }
+
+ .ms-u-mdOffset10 {
+ margin-right: 83.33333333333334%;
+ }
+
+ .ms-u-mdOffset9 {
+ margin-right: 75%;
+ }
+
+ .ms-u-mdOffset8 {
+ margin-right: 66.66666666666666%;
+ }
+
+ .ms-u-mdOffset7 {
+ margin-right: 58.333333333333336%;
+ }
+
+ .ms-u-mdOffset6 {
+ margin-right: 50%;
+ }
+
+ .ms-u-mdOffset5 {
+ margin-right: 41.66666666666667%;
+ }
+
+ .ms-u-mdOffset4 {
+ margin-right: 33.33333333333333%;
+ }
+
+ .ms-u-mdOffset3 {
+ margin-right: 25%;
+ }
+
+ .ms-u-mdOffset2 {
+ margin-right: 16.666666666666664%;
+ }
+
+ .ms-u-mdOffset1 {
+ margin-right: 8.333333333333332%;
+ }
+
+ .ms-u-mdOffset0 {
+ margin-right: 0;
+ }
+}
+
+@media (min-width: 640px) {
+ .ms-u-lg12 {
+ width: 100%;
+ }
+
+ .ms-u-lg11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-lg10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-lg9 {
+ width: 75%;
+ }
+
+ .ms-u-lg8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-lg7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-lg6 {
+ width: 50%;
+ }
+
+ .ms-u-lg5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-lg4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-lg3 {
+ width: 25%;
+ }
+
+ .ms-u-lg2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-lg1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-lgPull12 {
+ left: 100%;
+ }
+
+ .ms-u-lgPull11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-lgPull10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-lgPull9 {
+ left: 75%;
+ }
+
+ .ms-u-lgPull8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-lgPull7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-lgPull6 {
+ left: 50%;
+ }
+
+ .ms-u-lgPull5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-lgPull4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-lgPull3 {
+ left: 25%;
+ }
+
+ .ms-u-lgPull2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-lgPull1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-lgPull0 {
+ left: auto;
+ }
+
+ .ms-u-lgPush12 {
+ right: 100%;
+ }
+
+ .ms-u-lgPush11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-lgPush10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-lgPush9 {
+ right: 75%;
+ }
+
+ .ms-u-lgPush8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-lgPush7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-lgPush6 {
+ right: 50%;
+ }
+
+ .ms-u-lgPush5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-lgPush4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-lgPush3 {
+ right: 25%;
+ }
+
+ .ms-u-lgPush2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-lgPush1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-lgPush0 {
+ right: auto;
+ }
+
+ .ms-u-lgOffset11 {
+ margin-right: 91.66666666666666%;
+ }
+
+ .ms-u-lgOffset10 {
+ margin-right: 83.33333333333334%;
+ }
+
+ .ms-u-lgOffset9 {
+ margin-right: 75%;
+ }
+
+ .ms-u-lgOffset8 {
+ margin-right: 66.66666666666666%;
+ }
+
+ .ms-u-lgOffset7 {
+ margin-right: 58.333333333333336%;
+ }
+
+ .ms-u-lgOffset6 {
+ margin-right: 50%;
+ }
+
+ .ms-u-lgOffset5 {
+ margin-right: 41.66666666666667%;
+ }
+
+ .ms-u-lgOffset4 {
+ margin-right: 33.33333333333333%;
+ }
+
+ .ms-u-lgOffset3 {
+ margin-right: 25%;
+ }
+
+ .ms-u-lgOffset2 {
+ margin-right: 16.666666666666664%;
+ }
+
+ .ms-u-lgOffset1 {
+ margin-right: 8.333333333333332%;
+ }
+
+ .ms-u-lgOffset0 {
+ margin-right: 0;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ms-u-xl12 {
+ width: 100%;
+ }
+
+ .ms-u-xl11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-xl10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-xl9 {
+ width: 75%;
+ }
+
+ .ms-u-xl8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-xl7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-xl6 {
+ width: 50%;
+ }
+
+ .ms-u-xl5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-xl4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-xl3 {
+ width: 25%;
+ }
+
+ .ms-u-xl2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-xl1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-xlPull12 {
+ left: 100%;
+ }
+
+ .ms-u-xlPull11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-xlPull10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-xlPull9 {
+ left: 75%;
+ }
+
+ .ms-u-xlPull8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-xlPull7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-xlPull6 {
+ left: 50%;
+ }
+
+ .ms-u-xlPull5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-xlPull4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-xlPull3 {
+ left: 25%;
+ }
+
+ .ms-u-xlPull2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-xlPull1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-xlPull0 {
+ left: auto;
+ }
+
+ .ms-u-xlPush12 {
+ right: 100%;
+ }
+
+ .ms-u-xlPush11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-xlPush10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-xlPush9 {
+ right: 75%;
+ }
+
+ .ms-u-xlPush8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-xlPush7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-xlPush6 {
+ right: 50%;
+ }
+
+ .ms-u-xlPush5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-xlPush4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-xlPush3 {
+ right: 25%;
+ }
+
+ .ms-u-xlPush2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-xlPush1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-xlPush0 {
+ right: auto;
+ }
+
+ .ms-u-xlOffset11 {
+ margin-right: 91.66666666666666%;
+ }
+
+ .ms-u-xlOffset10 {
+ margin-right: 83.33333333333334%;
+ }
+
+ .ms-u-xlOffset9 {
+ margin-right: 75%;
+ }
+
+ .ms-u-xlOffset8 {
+ margin-right: 66.66666666666666%;
+ }
+
+ .ms-u-xlOffset7 {
+ margin-right: 58.333333333333336%;
+ }
+
+ .ms-u-xlOffset6 {
+ margin-right: 50%;
+ }
+
+ .ms-u-xlOffset5 {
+ margin-right: 41.66666666666667%;
+ }
+
+ .ms-u-xlOffset4 {
+ margin-right: 33.33333333333333%;
+ }
+
+ .ms-u-xlOffset3 {
+ margin-right: 25%;
+ }
+
+ .ms-u-xlOffset2 {
+ margin-right: 16.666666666666664%;
+ }
+
+ .ms-u-xlOffset1 {
+ margin-right: 8.333333333333332%;
+ }
+
+ .ms-u-xlOffset0 {
+ margin-right: 0;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-u-xxl12 {
+ width: 100%;
+ }
+
+ .ms-u-xxl11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-xxl10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-xxl9 {
+ width: 75%;
+ }
+
+ .ms-u-xxl8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-xxl7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-xxl6 {
+ width: 50%;
+ }
+
+ .ms-u-xxl5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-xxl4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-xxl3 {
+ width: 25%;
+ }
+
+ .ms-u-xxl2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-xxl1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-xxlPull12 {
+ left: 100%;
+ }
+
+ .ms-u-xxlPull11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-xxlPull10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-xxlPull9 {
+ left: 75%;
+ }
+
+ .ms-u-xxlPull8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-xxlPull7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-xxlPull6 {
+ left: 50%;
+ }
+
+ .ms-u-xxlPull5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-xxlPull4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-xxlPull3 {
+ left: 25%;
+ }
+
+ .ms-u-xxlPull2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-xxlPull1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-xxlPull0 {
+ left: auto;
+ }
+
+ .ms-u-xxlPush12 {
+ right: 100%;
+ }
+
+ .ms-u-xxlPush11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-xxlPush10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-xxlPush9 {
+ right: 75%;
+ }
+
+ .ms-u-xxlPush8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-xxlPush7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-xxlPush6 {
+ right: 50%;
+ }
+
+ .ms-u-xxlPush5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-xxlPush4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-xxlPush3 {
+ right: 25%;
+ }
+
+ .ms-u-xxlPush2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-xxlPush1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-xxlPush0 {
+ right: auto;
+ }
+
+ .ms-u-xxlOffset11 {
+ margin-right: 91.66666666666666%;
+ }
+
+ .ms-u-xxlOffset10 {
+ margin-right: 83.33333333333334%;
+ }
+
+ .ms-u-xxlOffset9 {
+ margin-right: 75%;
+ }
+
+ .ms-u-xxlOffset8 {
+ margin-right: 66.66666666666666%;
+ }
+
+ .ms-u-xxlOffset7 {
+ margin-right: 58.333333333333336%;
+ }
+
+ .ms-u-xxlOffset6 {
+ margin-right: 50%;
+ }
+
+ .ms-u-xxlOffset5 {
+ margin-right: 41.66666666666667%;
+ }
+
+ .ms-u-xxlOffset4 {
+ margin-right: 33.33333333333333%;
+ }
+
+ .ms-u-xxlOffset3 {
+ margin-right: 25%;
+ }
+
+ .ms-u-xxlOffset2 {
+ margin-right: 16.666666666666664%;
+ }
+
+ .ms-u-xxlOffset1 {
+ margin-right: 8.333333333333332%;
+ }
+
+ .ms-u-xxlOffset0 {
+ margin-right: 0;
+ }
+}
+
+@media (min-width: 1920px) {
+ .ms-u-xxxl12 {
+ width: 100%;
+ }
+
+ .ms-u-xxxl11 {
+ width: 91.66666666666666%;
+ }
+
+ .ms-u-xxxl10 {
+ width: 83.33333333333334%;
+ }
+
+ .ms-u-xxxl9 {
+ width: 75%;
+ }
+
+ .ms-u-xxxl8 {
+ width: 66.66666666666666%;
+ }
+
+ .ms-u-xxxl7 {
+ width: 58.333333333333336%;
+ }
+
+ .ms-u-xxxl6 {
+ width: 50%;
+ }
+
+ .ms-u-xxxl5 {
+ width: 41.66666666666667%;
+ }
+
+ .ms-u-xxxl4 {
+ width: 33.33333333333333%;
+ }
+
+ .ms-u-xxxl3 {
+ width: 25%;
+ }
+
+ .ms-u-xxxl2 {
+ width: 16.666666666666664%;
+ }
+
+ .ms-u-xxxl1 {
+ width: 8.333333333333332%;
+ }
+
+ .ms-u-xxxlPull12 {
+ left: 100%;
+ }
+
+ .ms-u-xxxlPull11 {
+ left: 91.66666666666666%;
+ }
+
+ .ms-u-xxxlPull10 {
+ left: 83.33333333333334%;
+ }
+
+ .ms-u-xxxlPull9 {
+ left: 75%;
+ }
+
+ .ms-u-xxxlPull8 {
+ left: 66.66666666666666%;
+ }
+
+ .ms-u-xxxlPull7 {
+ left: 58.333333333333336%;
+ }
+
+ .ms-u-xxxlPull6 {
+ left: 50%;
+ }
+
+ .ms-u-xxxlPull5 {
+ left: 41.66666666666667%;
+ }
+
+ .ms-u-xxxlPull4 {
+ left: 33.33333333333333%;
+ }
+
+ .ms-u-xxxlPull3 {
+ left: 25%;
+ }
+
+ .ms-u-xxxlPull2 {
+ left: 16.666666666666664%;
+ }
+
+ .ms-u-xxxlPull1 {
+ left: 8.333333333333332%;
+ }
+
+ .ms-u-xxxlPull0 {
+ left: auto;
+ }
+
+ .ms-u-xxxlPush12 {
+ right: 100%;
+ }
+
+ .ms-u-xxxlPush11 {
+ right: 91.66666666666666%;
+ }
+
+ .ms-u-xxxlPush10 {
+ right: 83.33333333333334%;
+ }
+
+ .ms-u-xxxlPush9 {
+ right: 75%;
+ }
+
+ .ms-u-xxxlPush8 {
+ right: 66.66666666666666%;
+ }
+
+ .ms-u-xxxlPush7 {
+ right: 58.333333333333336%;
+ }
+
+ .ms-u-xxxlPush6 {
+ right: 50%;
+ }
+
+ .ms-u-xxxlPush5 {
+ right: 41.66666666666667%;
+ }
+
+ .ms-u-xxxlPush4 {
+ right: 33.33333333333333%;
+ }
+
+ .ms-u-xxxlPush3 {
+ right: 25%;
+ }
+
+ .ms-u-xxxlPush2 {
+ right: 16.666666666666664%;
+ }
+
+ .ms-u-xxxlPush1 {
+ right: 8.333333333333332%;
+ }
+
+ .ms-u-xxxlPush0 {
+ right: auto;
+ }
+
+ .ms-u-xxxlOffset11 {
+ margin-right: 91.66666666666666%;
+ }
+
+ .ms-u-xxxlOffset10 {
+ margin-right: 83.33333333333334%;
+ }
+
+ .ms-u-xxxlOffset9 {
+ margin-right: 75%;
+ }
+
+ .ms-u-xxxlOffset8 {
+ margin-right: 66.66666666666666%;
+ }
+
+ .ms-u-xxxlOffset7 {
+ margin-right: 58.333333333333336%;
+ }
+
+ .ms-u-xxxlOffset6 {
+ margin-right: 50%;
+ }
+
+ .ms-u-xxxlOffset5 {
+ margin-right: 41.66666666666667%;
+ }
+
+ .ms-u-xxxlOffset4 {
+ margin-right: 33.33333333333333%;
+ }
+
+ .ms-u-xxxlOffset3 {
+ margin-right: 25%;
+ }
+
+ .ms-u-xxxlOffset2 {
+ margin-right: 16.666666666666664%;
+ }
+
+ .ms-u-xxxlOffset1 {
+ margin-right: 8.333333333333332%;
+ }
+
+ .ms-u-xxxlOffset0 {
+ margin-right: 0;
+ }
+}
+
+.ms-Grid {
+ box-sizing: border-box;
+ *zoom: 1;
+ padding: 0 8px;
+}
+
+.ms-Grid:before,
+.ms-Grid:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-Grid:after {
+ clear: both;
+}
+
+.ms-Grid-row {
+ margin: 0 -8px;
+ box-sizing: border-box;
+ *zoom: 1;
+}
+
+.ms-Grid-row:before,
+.ms-Grid-row:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-Grid-row:after {
+ clear: both;
+}
+
+.ms-Grid-col {
+ position: relative;
+ min-height: 1px;
+ padding-right: 8px;
+ padding-left: 8px;
+ box-sizing: border-box;
+ float: right;
+}
+
+.ms-Grid-col .ms-Grid {
+ padding: 0;
+}
diff --git a/dist/css/fabric.rtl.min.css b/dist/css/fabric.rtl.min.css
new file mode 100644
index 000000000..48b4bcabd
--- /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 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-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-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2b88d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#71afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#c7e0f4}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-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-alert{background-color:#f4f4f4}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2b88d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#71afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#c7e0f4}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-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-borderColor-info,.ms-borderColor-success{border-color:#107c10}.ms-borderColor-alert{border-color:#d83b01}.ms-borderColor-error{border-color:#a80000}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}@font-face{font-family:Leelawadee UI Bold;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI Semilight;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Arabic;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Arabic;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Arabic;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Arabic;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Cyrillic;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Cyrillic;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Cyrillic;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Cyrillic;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light EastEuropean;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular EastEuropean;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold EastEuropean;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight EastEuropean;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Greek;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Greek;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Greek;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Greek;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Hebrew;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Hebrew;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Hebrew;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Hebrew;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Vietnamese;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Vietnamese;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Vietnamese;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Vietnamese;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light WestEuropean;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular WestEuropean;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold WestEuropean;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight WestEuropean;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-xxl{font-size:28px}.ms-font-xl{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-font-l,.ms-font-xl{color:#333;font-weight:400}.ms-font-l{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px}.ms-font-mi,.ms-font-xs{color:#333;font-weight:400}.ms-font-mi{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:10px}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2b88d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#71afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#c7e0f4}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-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,.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}[lang=ja-JP] .ms-font-l,[lang=ja-JP] .ms-font-m,[lang=ja-JP] .ms-font-m-plus,[lang=ja-JP] .ms-font-mi,[lang=ja-JP] .ms-font-s,[lang=ja-JP] .ms-font-s-plus,[lang=ja-JP] .ms-font-su,[lang=ja-JP] .ms-font-xl,[lang=ja-JP] .ms-font-xs,[lang=ja-JP] .ms-font-xxl,[lang=ja-JP] .ms-fontWeight-light,[lang=ja-JP] .ms-fontWeight-light-hover:hover,[lang=ja-JP] .ms-fontWeight-regular,[lang=ja-JP] .ms-fontWeight-regular-hover:hover,[lang=ja-JP] .ms-fontWeight-semibold,[lang=ja-JP] .ms-fontWeight-semibold-hover:hover,[lang=ja-JP] .ms-fontWeight-semilight,[lang=ja-JP] .ms-fontWeight-semilight-hover:hover{font-family:Yu Gothic,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,Tahoma,Arial,sans-serif}[lang=ko-KR] .ms-font-l,[lang=ko-KR] .ms-font-m,[lang=ko-KR] .ms-font-m-plus,[lang=ko-KR] .ms-font-mi,[lang=ko-KR] .ms-font-s,[lang=ko-KR] .ms-font-s-plus,[lang=ko-KR] .ms-font-su,[lang=ko-KR] .ms-font-xl,[lang=ko-KR] .ms-font-xs,[lang=ko-KR] .ms-font-xxl,[lang=ko-KR] .ms-fontWeight-light,[lang=ko-KR] .ms-fontWeight-light-hover:hover,[lang=ko-KR] .ms-fontWeight-regular,[lang=ko-KR] .ms-fontWeight-regular-hover:hover,[lang=ko-KR] .ms-fontWeight-semibold,[lang=ko-KR] .ms-fontWeight-semibold-hover:hover,[lang=ko-KR] .ms-fontWeight-semilight,[lang=ko-KR] .ms-fontWeight-semilight-hover:hover{font-family:Malgun Gothic,Gulim,Segoe UI,Tahoma,Arial,sans-serif}[lang=ch-ZHS] .ms-font-l,[lang=ch-ZHS] .ms-font-m,[lang=ch-ZHS] .ms-font-m-plus,[lang=ch-ZHS] .ms-font-mi,[lang=ch-ZHS] .ms-font-s,[lang=ch-ZHS] .ms-font-s-plus,[lang=ch-ZHS] .ms-font-su,[lang=ch-ZHS] .ms-font-xl,[lang=ch-ZHS] .ms-font-xs,[lang=ch-ZHS] .ms-font-xxl,[lang=ch-ZHS] .ms-fontWeight-light,[lang=ch-ZHS] .ms-fontWeight-light-hover:hover,[lang=ch-ZHS] .ms-fontWeight-regular,[lang=ch-ZHS] .ms-fontWeight-regular-hover:hover,[lang=ch-ZHS] .ms-fontWeight-semibold,[lang=ch-ZHS] .ms-fontWeight-semibold-hover:hover,[lang=ch-ZHS] .ms-fontWeight-semilight,[lang=ch-ZHS] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Yahei,Verdana,Simsun,Segoe UI,Tahoma,Arial,sans-serif}[lang=ch-ZHT] .ms-font-l,[lang=ch-ZHT] .ms-font-m,[lang=ch-ZHT] .ms-font-m-plus,[lang=ch-ZHT] .ms-font-mi,[lang=ch-ZHT] .ms-font-s,[lang=ch-ZHT] .ms-font-s-plus,[lang=ch-ZHT] .ms-font-su,[lang=ch-ZHT] .ms-font-xl,[lang=ch-ZHT] .ms-font-xs,[lang=ch-ZHT] .ms-font-xxl,[lang=ch-ZHT] .ms-fontWeight-light,[lang=ch-ZHT] .ms-fontWeight-light-hover:hover,[lang=ch-ZHT] .ms-fontWeight-regular,[lang=ch-ZHT] .ms-fontWeight-regular-hover:hover,[lang=ch-ZHT] .ms-fontWeight-semibold,[lang=ch-ZHT] .ms-fontWeight-semibold-hover:hover,[lang=ch-ZHT] .ms-fontWeight-semilight,[lang=ch-ZHT] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Jhenghei,Pmingliu,Segoe UI,Tahoma,Arial,sans-serif}[lang=hi-IN] .ms-font-l,[lang=hi-IN] .ms-font-m,[lang=hi-IN] .ms-font-m-plus,[lang=hi-IN] .ms-font-mi,[lang=hi-IN] .ms-font-s,[lang=hi-IN] .ms-font-s-plus,[lang=hi-IN] .ms-font-su,[lang=hi-IN] .ms-font-xl,[lang=hi-IN] .ms-font-xs,[lang=hi-IN] .ms-font-xxl,[lang=hi-IN] .ms-fontWeight-light,[lang=hi-IN] .ms-fontWeight-light-hover:hover,[lang=hi-IN] .ms-fontWeight-regular,[lang=hi-IN] .ms-fontWeight-regular-hover:hover,[lang=hi-IN] .ms-fontWeight-semibold,[lang=hi-IN] .ms-fontWeight-semibold-hover:hover,[lang=hi-IN] .ms-fontWeight-semilight,[lang=hi-IN] .ms-fontWeight-semilight-hover:hover{font-family:Nirmala UI,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-font-l,[lang=th-TH] .ms-font-su,[lang=th-TH] .ms-font-xl,[lang=th-TH] .ms-font-xxl,[lang=th-TH] .ms-fontWeight-light,[lang=th-TH] .ms-fontWeight-light-hover:hover,[lang=th-TH] .ms-fontWeight-semilight,[lang=th-TH] .ms-fontWeight-semilight-hover:hover{font-family:Leelawadee UI Semilight,Kmer UI,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-fontWeight-regular,[lang=th-TH] .ms-fontweight-regular-hover:hover{font-family:Leelawadee UI Regular,Kmer UI,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-font-mi,[lang=th-TH] .ms-fontWeight-semibold,[lang=th-TH] .ms-fontWeight-semibold-hover:hover{font-family:Leelawadee UI Bold,Kmer UI,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-xl,[lang=ar] .ms-font-xxl,[lang=ar] .ms-fontWeight-light,[lang=ar] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Arabic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-l,[lang=ar] .ms-font-su,[lang=ar] .ms-fontWeight-semilight,[lang=ar] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Arabic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-fontWeight-regular,[lang=ar] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Arabic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-mi,[lang=ar] .ms-fontWeight-semibold,[lang=ar] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Arabic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-xl,[lang=bg-BG] .ms-font-xxl,[lang=bg-BG] .ms-fontWeight-light,[lang=bg-BG] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-l,[lang=bg-BG] .ms-font-su,[lang=bg-BG] .ms-fontWeight-semilight,[lang=bg-BG] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-fontWeight-regular,[lang=bg-BG] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-mi,[lang=bg-BG] .ms-fontWeight-semibold,[lang=bg-BG] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-xl,[lang=ru-RU] .ms-font-xxl,[lang=ru-RU] .ms-fontWeight-light,[lang=ru-RU] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-l,[lang=ru-RU] .ms-font-su,[lang=ru-RU] .ms-fontWeight-semilight,[lang=ru-RU] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-fontWeight-regular,[lang=ru-RU] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-mi,[lang=ru-RU] .ms-fontWeight-semibold,[lang=ru-RU] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-xl,[lang=uk-UA] .ms-font-xxl,[lang=uk-UA] .ms-fontWeight-light,[lang=uk-UA] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-l,[lang=uk-UA] .ms-font-su,[lang=uk-UA] .ms-fontWeight-semilight,[lang=uk-UA] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-fontWeight-regular,[lang=uk-UA] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-mi,[lang=uk-UA] .ms-fontWeight-semibold,[lang=uk-UA] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-xl,[lang=cs-CZ] .ms-font-xxl,[lang=cs-CZ] .ms-fontWeight-light,[lang=cs-CZ] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-l,[lang=cs-CZ] .ms-font-su,[lang=cs-CZ] .ms-fontWeight-semilight,[lang=cs-CZ] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-fontWeight-regular,[lang=cs-CZ] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-mi,[lang=cs-CZ] .ms-fontWeight-semibold,[lang=cs-CZ] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-xl,[lang=et-EE] .ms-font-xxl,[lang=et-EE] .ms-fontWeight-light,[lang=et-EE] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-l,[lang=et-EE] .ms-font-su,[lang=et-EE] .ms-fontWeight-semilight,[lang=et-EE] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-fontWeight-regular,[lang=et-EE] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-mi,[lang=et-EE] .ms-fontWeight-semibold,[lang=et-EE] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-xl,[lang=hr-HR] .ms-font-xxl,[lang=hr-HR] .ms-fontWeight-light,[lang=hr-HR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-l,[lang=hr-HR] .ms-font-su,[lang=hr-HR] .ms-fontWeight-semilight,[lang=hr-HR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-fontWeight-regular,[lang=hr-HR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-mi,[lang=hr-HR] .ms-fontWeight-semibold,[lang=hr-HR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-xl,[lang=hu-HU] .ms-font-xxl,[lang=hu-HU] .ms-fontWeight-light,[lang=hu-HU] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-l,[lang=hu-HU] .ms-font-su,[lang=hu-HU] .ms-fontWeight-semilight,[lang=hu-HU] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-fontWeight-regular,[lang=hu-HU] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-mi,[lang=hu-HU] .ms-fontWeight-semibold,[lang=hu-HU] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-xl,[lang=lt-LT] .ms-font-xxl,[lang=lt-LT] .ms-fontWeight-light,[lang=lt-LT] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-l,[lang=lt-LT] .ms-font-su,[lang=lt-LT] .ms-fontWeight-semilight,[lang=lt-LT] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-fontWeight-regular,[lang=lt-LT] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-mi,[lang=lt-LT] .ms-fontWeight-semibold,[lang=lt-LT] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-xl,[lang=lv-LV] .ms-font-xxl,[lang=lv-LV] .ms-fontWeight-light,[lang=lv-LV] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-l,[lang=lv-LV] .ms-font-su,[lang=lv-LV] .ms-fontWeight-semilight,[lang=lv-LV] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-fontWeight-regular,[lang=lv-LV] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-mi,[lang=lv-LV] .ms-fontWeight-semibold,[lang=lv-LV] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-xl,[lang=pl-PL] .ms-font-xxl,[lang=pl-PL] .ms-fontWeight-light,[lang=pl-PL] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-l,[lang=pl-PL] .ms-font-su,[lang=pl-PL] .ms-fontWeight-semilight,[lang=pl-PL] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-fontWeight-regular,[lang=pl-PL] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-mi,[lang=pl-PL] .ms-fontWeight-semibold,[lang=pl-PL] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-xl,[lang=lt-sr-SP] .ms-font-xxl,[lang=lt-sr-SP] .ms-fontWeight-light,[lang=lt-sr-SP] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-l,[lang=lt-sr-SP] .ms-font-su,[lang=lt-sr-SP] .ms-fontWeight-semilight,[lang=lt-sr-SP] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-fontWeight-regular,[lang=lt-sr-SP] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-mi,[lang=lt-sr-SP] .ms-fontWeight-semibold,[lang=lt-sr-SP] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-xl,[lang=tr-TR] .ms-font-xxl,[lang=tr-TR] .ms-fontWeight-light,[lang=tr-TR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-l,[lang=tr-TR] .ms-font-su,[lang=tr-TR] .ms-fontWeight-semilight,[lang=tr-TR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-fontWeight-regular,[lang=tr-TR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-mi,[lang=tr-TR] .ms-fontWeight-semibold,[lang=tr-TR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-xl,[lang=sk-SK] .ms-font-xxl,[lang=sk-SK] .ms-fontWeight-light,[lang=sk-SK] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-l,[lang=sk-SK] .ms-font-su,[lang=sk-SK] .ms-fontWeight-semilight,[lang=sk-SK] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-fontWeight-regular,[lang=sk-SK] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-mi,[lang=sk-SK] .ms-fontWeight-semibold,[lang=sk-SK] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-xl,[lang=kk-KZ] .ms-font-xxl,[lang=kk-KZ] .ms-fontWeight-light,[lang=kk-KZ] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-l,[lang=kk-KZ] .ms-font-su,[lang=kk-KZ] .ms-fontWeight-semilight,[lang=kk-KZ] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-fontWeight-regular,[lang=kk-KZ] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-mi,[lang=kk-KZ] .ms-fontWeight-semibold,[lang=kk-KZ] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-xl,[lang=el-GR] .ms-font-xxl,[lang=el-GR] .ms-fontWeight-light,[lang=el-GR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Greek,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-l,[lang=el-GR] .ms-font-su,[lang=el-GR] .ms-fontWeight-semilight,[lang=el-GR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Greek,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-fontWeight-regular,[lang=el-GR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Greek,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-mi,[lang=el-GR] .ms-fontWeight-semibold,[lang=el-GR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Greek,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-xl,[lang=he-IL] .ms-font-xxl,[lang=he-IL] .ms-fontWeight-light,[lang=he-IL] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Hebrew,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-l,[lang=he-IL] .ms-font-su,[lang=he-IL] .ms-fontWeight-semilight,[lang=he-IL] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Hebrew,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-fontWeight-regular,[lang=he-IL] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Hebrew,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-mi,[lang=he-IL] .ms-fontWeight-semibold,[lang=he-IL] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Hebrew,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-xl,[lang=vi-VN] .ms-font-xxl,[lang=vi-VN] .ms-fontWeight-light,[lang=vi-VN] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Vietnamese,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-l,[lang=vi-VN] .ms-font-su,[lang=vi-VN] .ms-fontWeight-semilight,[lang=vi-VN] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Vietnamese,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-fontWeight-regular,[lang=vi-VN] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Vietnamese,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-mi,[lang=vi-VN] .ms-fontWeight-semibold,[lang=vi-VN] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Vietnamese,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@font-face{font-family:Office365Icons;src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot);src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg#office365icons) format('svg');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none}.ms-Icon--circleEmpty:before{content:'\e000'}.ms-Icon--circleFill:before{content:'\e001'}.ms-Icon--placeholder:before{content:'\e002'}.ms-Icon--star:before{content:'\e003'}.ms-Icon--plus:before{content:'\e004'}.ms-Icon--minus:before{content:'\e005'}.ms-Icon--question:before{content:'\e006'}.ms-Icon--exclamation:before{content:'\e007'}.ms-Icon--person:before{content:'\e008'}.ms-Icon--mail:before{content:'\e009'}.ms-Icon--infoCircle:before{content:'\e00a'}.ms-Icon--alert:before{content:'\e00b'}.ms-Icon--xCircle:before{content:'\e00c'}.ms-Icon--mailOpen:before{content:'\e00d'}.ms-Icon--people:before{content:'\e00e'}.ms-Icon--bell:before{content:'\e010'}.ms-Icon--calendar:before{content:'\e011'}.ms-Icon--scheduling:before{content:'\e012'}.ms-Icon--event:before{content:'\e013'}.ms-Icon--folder:before{content:'\e014'}.ms-Icon--documents:before{content:'\e015'}.ms-Icon--onedrive:before{content:'\e016'}.ms-Icon--chat:before{content:'\e017'}.ms-Icon--sites:before{content:'\e018'}.ms-Icon--listBullets:before{content:'\e019'}.ms-Icon--calendarWeek:before{content:'\e01a'}.ms-Icon--calendarWorkWeek:before{content:'\e01b'}.ms-Icon--calendarDay:before{content:'\e01c'}.ms-Icon--folderMove:before{content:'\e01d'}.ms-Icon--panel:before{content:'\e01e'}.ms-Icon--popout:before{content:'\e01f'}.ms-Icon--menu:before{content:'\e020'}.ms-Icon--home:before{content:'\e021'}.ms-Icon--favorites:before{content:'\e022'}.ms-Icon--phone:before{content:'\e023'}.ms-Icon--mailSend:before{content:'\e024'}.ms-Icon--save:before{content:'\e025'}.ms-Icon--trash:before{content:'\e026'}.ms-Icon--pencil:before{content:'\e027'}.ms-Icon--flag:before{content:'\e028'}.ms-Icon--reply:before{content:'\e029'}.ms-Icon--miniatures:before{content:'\e02a'}.ms-Icon--voicemail:before{content:'\e02b'}.ms-Icon--play:before{content:'\e02c'}.ms-Icon--pause:before{content:'\e02d'}.ms-Icon--onlineAdd:before{content:'\e02e'}.ms-Icon--onlineJoin:before{content:'\e02f'}.ms-Icon--replyAll:before{content:'\e030'}.ms-Icon--attachment:before{content:'\e031'}.ms-Icon--drm:before{content:'\e032'}.ms-Icon--pinDown:before{content:'\e033'}.ms-Icon--refresh:before{content:'\e034'}.ms-Icon--gear:before{content:'\e035'}.ms-Icon--smiley:before{content:'\e036'}.ms-Icon--info:before{content:'\e037'}.ms-Icon--lock:before{content:'\e038'}.ms-Icon--search:before{content:'\e039'}.ms-Icon--questionReverse:before{content:'\e03a'}.ms-Icon--notRecurring:before{content:'\e03b'}.ms-Icon--tasks:before{content:'\e040'}.ms-Icon--check:before{content:'\e041'}.ms-Icon--x:before{content:'\e042'}.ms-Icon--ellipsis:before{content:'\e045'}.ms-Icon--dot:before{content:'\e046'}.ms-Icon--arrowUp:before{content:'\e047'}.ms-Icon--arrowDown:before{content:'\e048'}.ms-Icon--arrowLeft:before{content:'\e049'}.ms-Icon--arrowRight:before{content:'\e04a'}.ms-Icon--download:before{content:'\e04b'}.ms-Icon--directions:before{content:'\e04c'}.ms-Icon--microphone:before{content:'\e04f'}.ms-Icon--caretUp:before{content:'\e051'}.ms-Icon--caretDown:before{content:'\e052'}.ms-Icon--caretLeft:before{content:'\e053'}.ms-Icon--caretRight:before{content:'\e054'}.ms-Icon--caretUpLeft:before{content:'\e05a'}.ms-Icon--caretUpRight:before{content:'\e05b'}.ms-Icon--caretDownRight:before{content:'\e05c'}.ms-Icon--caretDownLeft:before{content:'\e05d'}.ms-Icon--note:before{content:'\e06a'}.ms-Icon--noteReply:before{content:'\e06b'}.ms-Icon--noteForward:before{content:'\e06c'}.ms-Icon--key:before{content:'\e06f'}.ms-Icon--tile:before{content:'\e070'}.ms-Icon--taskRecurring:before{content:'\e071'}.ms-Icon--starEmpty:before{content:'\e073'}.ms-Icon--upload:before{content:'\e076'}.ms-Icon--wrench:before{content:'\e077'}.ms-Icon--share:before{content:'\e078'}.ms-Icon--documentReply:before{content:'\e079'}.ms-Icon--documentForward:before{content:'\e07a'}.ms-Icon--partner:before{content:'\e080'}.ms-Icon--reactivate:before{content:'\e084'}.ms-Icon--sort:before{content:'\e085'}.ms-Icon--personAdd:before{content:'\e086'}.ms-Icon--chevronUp:before{content:'\e087'}.ms-Icon--chevronDown:before{content:'\e088'}.ms-Icon--chevronLeft:before{content:'\e089'}.ms-Icon--chevronRight:before{content:'\e08a'}.ms-Icon--peopleAdd:before{content:'\e08c'}.ms-Icon--newsfeed:before{content:'\e08d'}.ms-Icon--notebook:before{content:'\e08e'}.ms-Icon--link:before{content:'\e08f'}.ms-Icon--chevronsUp:before{content:'\e090'}.ms-Icon--chevronsDown:before{content:'\e091'}.ms-Icon--chevronsLeft:before{content:'\e092'}.ms-Icon--chevronsRight:before{content:'\e093'}.ms-Icon--clutter:before{content:'\e09a'}.ms-Icon--subscribe:before{content:'\e09c'}.ms-Icon--unsubscribe:before{content:'\e09d'}.ms-Icon--personRemove:before{content:'\e09e'}.ms-Icon--receiptForward:before{content:'\e0a0'}.ms-Icon--receiptReply:before{content:'\e0a1'}.ms-Icon--receiptCheck:before{content:'\e0a2'}.ms-Icon--peopleRemove:before{content:'\e0a3'}.ms-Icon--merge:before{content:'\e0a4'}.ms-Icon--split:before{content:'\e0a5'}.ms-Icon--eventCancel:before{content:'\e0a6'}.ms-Icon--eventShare:before{content:'\e0a7'}.ms-Icon--today:before{content:'\e0a9'}.ms-Icon--oofReply:before{content:'\e0aa'}.ms-Icon--voicemailReply:before{content:'\e0ac'}.ms-Icon--voicemailForward:before{content:'\e0ad'}.ms-Icon--ribbon:before{content:'\e0af'}.ms-Icon--contact:before{content:'\e0b0'}.ms-Icon--eye:before{content:'\e0b1'}.ms-Icon--glasses:before{content:'\e0b2'}.ms-Icon--print:before{content:'\e100'}.ms-Icon--room:before{content:'\e101'}.ms-Icon--post:before{content:'\e102'}.ms-Icon--toggle:before{content:'\e103'}.ms-Icon--touch:before{content:'\e104'}.ms-Icon--clock:before{content:'\e105'}.ms-Icon--fax:before{content:'\e106'}.ms-Icon--lightning:before{content:'\e110'}.ms-Icon--dialpad:before{content:'\e111'}.ms-Icon--phoneTransfer:before{content:'\e112'}.ms-Icon--phoneAdd:before{content:'\e113'}.ms-Icon--late:before{content:'\e114'}.ms-Icon--chatAdd:before{content:'\e115'}.ms-Icon--conflict:before{content:'\e116'}.ms-Icon--navigate:before{content:'\e117'}.ms-Icon--camera:before{content:'\e119'}.ms-Icon--filter:before{content:'\e11a'}.ms-Icon--fullscreen:before{content:'\e11b'}.ms-Icon--new:before{content:'\e11c'}.ms-Icon--mailEmpty:before{content:'\e11d'}.ms-Icon--editBox:before{content:'\e11e'}.ms-Icon--waffle:before{content:'\e11f'}.ms-Icon--work:before{content:'\e120'}.ms-Icon--eventRecurring:before{content:'\e121'}.ms-Icon--cart:before{content:'\e122'}.ms-Icon--socialListening:before{content:'\e123'}.ms-Icon--mapMarker:before{content:'\e124'}.ms-Icon--org:before{content:'\e125'}.ms-Icon--replyAlt:before{content:'\e150'}.ms-Icon--replyAllAlt:before{content:'\e152'}.ms-Icon--eventInfo:before{content:'\e154'}.ms-Icon--group:before{content:'\e155'}.ms-Icon--money:before{content:'\e161'}.ms-Icon--graph:before{content:'\e162'}.ms-Icon--noteEdit:before{content:'\e163'}.ms-Icon--dashboard:before{content:'\e164'}.ms-Icon--mailEdit:before{content:'\e165'}.ms-Icon--pinLeft:before{content:'\e167'}.ms-Icon--heart:before{content:'\e16a'}.ms-Icon--heartEmpty:before{content:'\e16b'}.ms-Icon--picture:before{content:'\e16c'}.ms-Icon--cake:before{content:'\e16d'}.ms-Icon--books:before{content:'\e16e'}.ms-Icon--chart:before{content:'\e16f'}.ms-Icon--video:before{content:'\e170'}.ms-Icon--soccer:before{content:'\e171'}.ms-Icon--meal:before{content:'\e172'}.ms-Icon--balloon:before{content:'\e173'}.ms-Icon--cat:before{content:'\e174'}.ms-Icon--dog:before{content:'\e175'}.ms-Icon--bag:before{content:'\e176'}.ms-Icon--music:before{content:'\e177'}.ms-Icon--stopwatch:before{content:'\e178'}.ms-Icon--coffee:before{content:'\e179'}.ms-Icon--briefcase:before{content:'\e17a'}.ms-Icon--pill:before{content:'\e17b'}.ms-Icon--trophy:before{content:'\e17c'}.ms-Icon--firstAid:before{content:'\e17d'}.ms-Icon--plane:before{content:'\e17e'}.ms-Icon--page:before{content:'\e17f'}.ms-Icon--car:before{content:'\e180'}.ms-Icon--dogAlt:before{content:'\e181'}.ms-Icon--document:before{content:'\e182'}.ms-Icon--metadata:before{content:'\e183'}.ms-Icon--pointItem:before{content:'\e184'}.ms-Icon--text:before{content:'\e185'}.ms-Icon--fieldText:before{content:'\e186'}.ms-Icon--fieldNumber:before{content:'\e187'}.ms-Icon--dropdown:before{content:'\e188'}.ms-Icon--radioButton:before{content:'\e189'}.ms-Icon--checkbox:before{content:'\e18a'}.ms-Icon--story:before{content:'\e18b'}.ms-Icon--bold:before{content:'\e18c'}.ms-Icon--italic:before{content:'\e18d'}.ms-Icon--underline:before{content:'\e18e'}.ms-Icon--quote:before{content:'\e18f'}.ms-Icon--styleRemove:before{content:'\e190'}.ms-Icon--pictureAdd:before{content:'\e191'}.ms-Icon--pictureRemove:before{content:'\e192'}.ms-Icon--desktop:before{content:'\e193'}.ms-Icon--tablet:before{content:'\e194'}.ms-Icon--mobile:before{content:'\e195'}.ms-Icon--table:before{content:'\e196'}.ms-Icon--hide:before{content:'\e197'}.ms-Icon--shield:before{content:'\e198'}.ms-Icon--header:before{content:'\e19a'}.ms-Icon--paint:before{content:'\e19b'}.ms-Icon--support:before{content:'\e19c'}.ms-Icon--settings:before{content:'\e19d'}.ms-Icon--creditCard:before{content:'\e19e'}.ms-Icon--reload:before{content:'\e19f'}.ms-Icon--peopleSecurity:before{content:'\e200'}.ms-Icon--fieldTextBox:before{content:'\e203'}.ms-Icon--multiChoice:before{content:'\e204'}.ms-Icon--fieldMail:before{content:'\e205'}.ms-Icon--contactForm:before{content:'\e206'}.ms-Icon--circleHalfFilled:before{content:'\e207'}.ms-Icon--documentPDF:before{content:'\e208'}.ms-Icon--bookmark:before{content:'\e209'}.ms-Icon--circleUnfilled:before{content:'\e20b'}.ms-Icon--circleFilled:before{content:'\e20c'}.ms-Icon--textBox:before{content:'\e20e'}.ms-Icon--drop:before{content:'\e20f'}.ms-Icon--sun:before{content:'\e210'}.ms-Icon--lifesaver:before{content:'\e211'}.ms-Icon--lifesaverLock:before{content:'\e212'}.ms-Icon--mailUnread:before{content:'\e213'}.ms-Icon--mailRead:before{content:'\e214'}.ms-Icon--inboxCheck:before{content:'\e215'}.ms-Icon--folderSearch:before{content:'\e216'}.ms-Icon--collapse:before{content:'\e217'}.ms-Icon--expand:before{content:'\e218'}.ms-Icon--ascending:before{content:'\e219'}.ms-Icon--descending:before{content:'\e21a'}.ms-Icon--filterClear:before{content:'\e21b'}.ms-Icon--checkboxEmpty:before{content:'\e21c'}.ms-Icon--checkboxMixed:before{content:'\e21d'}.ms-Icon--boards:before{content:'\e21e'}.ms-Icon--checkboxCheck:before{content:'\e21f'}.ms-Icon--frowny:before{content:'\e220'}.ms-Icon--lightBulb:before{content:'\e221'}.ms-Icon--globe:before{content:'\e222'}.ms-Icon--deviceWipe:before{content:'\e223'}.ms-Icon--listCheck:before{content:'\e226'}.ms-Icon--listGroup:before{content:'\e227'}.ms-Icon--timeline:before{content:'\e228'}.ms-Icon--fontIncrease:before{content:'\e229'}.ms-Icon--fontDecrease:before{content:'\e22a'}.ms-Icon--fontColor:before{content:'\e22b'}.ms-Icon--mailCheck:before{content:'\e22c'}.ms-Icon--mailDown:before{content:'\e22d'}.ms-Icon--listCheckbox:before{content:'\e22e'}.ms-Icon--sunAdd:before{content:'\e22f'}.ms-Icon--sunQuestion:before{content:'\e230'}.ms-Icon--chevronThinUp:before{content:'\e231'}.ms-Icon--chevronThinDown:before{content:'\e232'}.ms-Icon--chevronThinLeft:before{content:'\e233'}.ms-Icon--chevronThinRight:before{content:'\e234'}.ms-Icon--chevronThickUp:before{content:'\e235'}.ms-Icon--chevronThickDown:before{content:'\e236'}.ms-Icon--chevronThickLeft:before{content:'\e237'}.ms-Icon--chevronThickRight:before{content:'\e238'}.ms-Icon--linkRemove:before{content:'\e239'}.ms-Icon--alertOutline:before{content:'\e23b'}.ms-Icon--documentLandscape:before{content:'\e23c'}.ms-Icon--documentAdd:before{content:'\e23d'}.ms-Icon--toggleMiddle:before{content:'\e23e'}.ms-Icon--embed:before{content:'\e23f'}.ms-Icon--listNumbered:before{content:'\e240'}.ms-Icon--peopleCheck:before{content:'\e242'}.ms-Icon--caretUpOutline:before{content:'\e243'}.ms-Icon--caretDownOutline:before{content:'\e244'}.ms-Icon--caretLeftOutline:before{content:'\e245'}.ms-Icon--caretRightOutline:before{content:'\e246'}.ms-Icon--mailSync:before{content:'\e248'}.ms-Icon--mailError:before{content:'\e249'}.ms-Icon--mailPause:before{content:'\e24a'}.ms-Icon--peopleSync:before{content:'\e24b'}.ms-Icon--peopleError:before{content:'\e24c'}.ms-Icon--peoplePause:before{content:'\e24d'}.ms-Icon--circleBall:before{content:'\e24e'}.ms-Icon--circleBalloons:before{content:'\e24f'}.ms-Icon--circleCar:before{content:'\e250'}.ms-Icon--circleCat:before{content:'\e251'}.ms-Icon--circleCoffee:before{content:'\e252'}.ms-Icon--circleDog:before{content:'\e253'}.ms-Icon--circleLightning:before{content:'\e254'}.ms-Icon--circlePill:before{content:'\e255'}.ms-Icon--circlePlane:before{content:'\e256'}.ms-Icon--circlePoodle:before{content:'\e257'}.ms-Icon--checkPeople:before{content:'\e259'}.ms-Icon--documentSearch:before{content:'\e25a'}.ms-Icon--sortLines:before{content:'\e25c'}.ms-Icon--calendarPublic:before{content:'\e25d'}.ms-Icon--contactPublic:before{content:'\e25e'}.ms-Icon--classNotebook:before{content:'\e25f'}.ms-Icon--triangleUp:before{content:'\e260'}.ms-Icon--triangleRight:before{content:'\e261'}.ms-Icon--triangleDown:before{content:'\e262'}.ms-Icon--triangleLeft:before{content:'\e263'}.ms-Icon--triangleEmptyUp:before{content:'\e264'}.ms-Icon--triangleEmptyRight:before{content:'\e265'}.ms-Icon--triangleEmptyDown:before{content:'\e266'}.ms-Icon--triangleEmptyLeft:before{content:'\e267'}.ms-Icon--filePDF:before{content:'\e268'}.ms-Icon--fileImage:before{content:'\e26c'}.ms-Icon--fileDocument:before{content:'\e26d'}.ms-Icon--listGroup2:before{content:'\e26e'}.ms-Icon--copy:before{content:'\e26f'}.ms-Icon--creditCardOutline:before{content:'\e270'}.ms-Icon--mailPublic:before{content:'\e272'}.ms-Icon--folderPublic:before{content:'\e273'}.ms-Icon--teamwork:before{content:'\e274'}.ms-Icon--move:before{content:'\e275'}.ms-Icon--classroom:before{content:'\e276'}.ms-Icon--menu2:before{content:'\e277'}.ms-Icon--plus2:before{content:'\e278'}.ms-Icon--tag:before{content:'\e279'}.ms-Icon--arrowUp2:before{content:'\e27a'}.ms-Icon--arrowDown2:before{content:'\e27b'}.ms-Icon--circlePlus:before{content:'\e27c'}.ms-Icon--circleInfo:before{content:'\e27d'}.ms-Icon--section:before{content:'\e27e'}.ms-Icon--sections:before{content:'\e27f'}.ms-Icon--at:before{content:'\e282'}.ms-Icon--arrowUpRight:before{content:'\e283'}.ms-Icon--arrowDownRight:before{content:'\e284'}.ms-Icon--arrowDownLeft:before{content:'\e285'}.ms-Icon--arrowUpLeft:before{content:'\e286'}.ms-Icon--bundle:before{content:'\e287'}.ms-Icon--pictureEdit:before{content:'\e288'}.ms-Icon--protectionCenter:before{content:'\e289'}.ms-Icon--alert2:before{content:'\e28a'}.ms-Icon--circle{position:relative;display:inline-block;font-size:1rem;width:1em;height:1em;margin:0 0 0 .5em;padding:0;text-align:right;-webkit-font-smoothing:antialiased}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;right:0;-webkit-transform:scale(2);transform:scale(2);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;z-index:0}.ms-Icon--circle.ms-Icon--star:before{top:-2%;right:1%}.ms-Icon--circle.ms-Icon--person:before{top:-2%;right:-3%}.ms-Icon--circle.ms-Icon--alert:before{top:-4%}.ms-Icon--circle.ms-Icon--mailOpen:before{top:-5%}.ms-Icon--circle.ms-Icon--people:before{top:-4%;right:-7%}.ms-Icon--circle.ms-Icon--bell:before{top:-3%}.ms-Icon--circle.ms-Icon--scheduling:before{top:-3%;right:6%}.ms-Icon--circle.ms-Icon--documents:before{top:-1%;right:-2%}.ms-Icon--circle.ms-Icon--listBullets:before{top:-1%;right:5%}.ms-Icon--circle.ms-Icon--panel:before{right:-2%}.ms-Icon--circle.ms-Icon--popout:before{top:-2%;right:-2%}.ms-Icon--circle.ms-Icon--home:before{top:-4%}.ms-Icon--circle.ms-Icon--favorites:before{top:-2%;right:2%}.ms-Icon--circle.ms-Icon--phone:before{top:-2%;right:-2%}.ms-Icon--circle.ms-Icon--mailSend:before{right:-10%}.ms-Icon--circle.ms-Icon--pencil:before{top:-2%;right:3%}.ms-Icon--circle.ms-Icon--flag:before{right:3%}.ms-Icon--circle.ms-Icon--miniatures:before{right:-3%}.ms-Icon--circle.ms-Icon--voicemail:before{top:2%;right:-7%}.ms-Icon--circle.ms-Icon--onlineAdd:before{top:-1%;right:2%}.ms-Icon--circle.ms-Icon--pinDown:before{top:5%}.ms-Icon--circle.ms-Icon--gear:before{right:2%}.ms-Icon--circle.ms-Icon--check:before{top:3%}.ms-Icon--circle.ms-Icon--ellipsis:before{top:2%;right:-12%}.ms-Icon--circle.ms-Icon--directions:before{right:10%}.ms-Icon--circle.ms-Icon--microphone:before{top:-3%}.ms-Icon--circle.ms-Icon--caretDown:before{top:5%;right:2%}.ms-Icon--circle.ms-Icon--caretLeft:before{right:-6%}.ms-Icon--circle.ms-Icon--caretRight:before{right:6%}.ms-Icon--circle.ms-Icon--caretUpLeft:before{top:5%;right:5%}.ms-Icon--circle.ms-Icon--caretUpRight:before{top:5%;right:-3%}.ms-Icon--circle.ms-Icon--caretDownRight:before{right:-3%}.ms-Icon--circle.ms-Icon--caretDownLeft:before{right:4%}.ms-Icon--circle.ms-Icon--note:before{top:2%;right:-3%}.ms-Icon--circle.ms-Icon--noteReply:before{top:6%;right:3%}.ms-Icon--circle.ms-Icon--noteForward:before{top:6%}.ms-Icon--circle.ms-Icon--key:before{top:5%;right:1%}.ms-Icon--circle.ms-Icon--tile:before{top:-1%;right:-18%}.ms-Icon--circle.ms-Icon--taskRecurring:before{top:2%;right:-1%}.ms-Icon--circle.ms-Icon--starEmpty:before{top:-4%;right:1%}.ms-Icon--circle.ms-Icon--documentReply:before{top:-2%;right:7%}.ms-Icon--circle.ms-Icon--documentForward:before{right:5%}.ms-Icon--circle.ms-Icon--partner:before{top:-2%}.ms-Icon--circle.ms-Icon--reactivate:before{top:-2%;right:6%}.ms-Icon--circle.ms-Icon--sort:before{right:-19%}.ms-Icon--circle.ms-Icon--personAdd:before{top:-2%;right:6%}.ms-Icon--circle.ms-Icon--chevronDown:before{top:4%}.ms-Icon--circle.ms-Icon--chevronLeft:before{right:-5%}.ms-Icon--circle.ms-Icon--chevronRight:before{right:4%}.ms-Icon--circle.ms-Icon--peopleAdd:before{top:-5%;right:-12%}.ms-Icon--circle.ms-Icon--newsfeed:before,.ms-Icon--circle.ms-Icon--notebook:before{right:-4%}.ms-Icon--circle.ms-Icon--link:before{top:2%;right:-18%}.ms-Icon--circle.ms-Icon--chevronsDown:before{top:5%}.ms-Icon--circle.ms-Icon--chevronsLeft:before{right:-5%}.ms-Icon--circle.ms-Icon--chevronsRight:before{right:4%}.ms-Icon--circle.ms-Icon--personRemove:before{right:5%}.ms-Icon--circle.ms-Icon--receiptCheck:before,.ms-Icon--circle.ms-Icon--receiptForward:before,.ms-Icon--circle.ms-Icon--receiptReply:before{right:-20%}.ms-Icon--circle.ms-Icon--peopleRemove:before{top:-3%;right:-12%}.ms-Icon--circle.ms-Icon--merge:before,.ms-Icon--circle.ms-Icon--split:before{top:2%}.ms-Icon--circle.ms-Icon--eventCancel:before{right:-2%}.ms-Icon--circle.ms-Icon--today:before{top:-2%}.ms-Icon--circle.ms-Icon--oofReply:before{right:5%}.ms-Icon--circle.ms-Icon--voicemailReply:before{top:4%;right:-25%}.ms-Icon--circle.ms-Icon--voicemailForward:before{top:4%;right:-20%}.ms-Icon--circle.ms-Icon--eye:before{top:-4%}.ms-Icon--circle.ms-Icon--post:before{top:-4%;right:4%}.ms-Icon--circle.ms-Icon--fax:before{top:-3%;right:-2%}.ms-Icon--circle.ms-Icon--lightning:before{top:2%;right:1%}.ms-Icon--circle.ms-Icon--filter:before{top:7%}.ms-Icon--circle.ms-Icon--cart:before{right:3%}.ms-Icon--circle.ms-Icon--mapMarker:before,.ms-Icon--circle.ms-Icon--socialListening:before{top:2%}.ms-Icon--circle.ms-Icon--replyAllAlt:before{right:-16%}.ms-Icon--circle.ms-Icon--group:before{right:-33%}.ms-Icon--circle.ms-Icon--money:before{right:-8%}.ms-Icon--circle.ms-Icon--noteEdit:before{right:4%}.ms-Icon--circle.ms-Icon--mailEdit:before{top:3%;right:7%}.ms-Icon--circle.ms-Icon--pinLeft:before{right:-6%}.ms-Icon--circle.ms-Icon--heart:before,.ms-Icon--circle.ms-Icon--heartEmpty:before{top:5%}.ms-Icon--circle.ms-Icon--cake:before{top:-5%}.ms-Icon--circle.ms-Icon--books:before{right:-8%}.ms-Icon--circle.ms-Icon--video:before{top:-3%;right:3%}.ms-Icon--circle.ms-Icon--balloon:before{top:4%;right:-1%}.ms-Icon--circle.ms-Icon--music:before{top:-2%;right:-5%}.ms-Icon--circle.ms-Icon--coffee:before,.ms-Icon--circle.ms-Icon--stopwatch:before{top:-3%;right:3%}.ms-Icon--circle.ms-Icon--plane:before{right:4%}.ms-Icon--circle.ms-Icon--dogAlt:before{right:-15%}.ms-Icon--circle.ms-Icon--metadata:before{top:-4%;right:4%}.ms-Icon--circle.ms-Icon--text:before{top:-4%;right:10%}.ms-Icon--circle.ms-Icon--dropdown:before,.ms-Icon--circle.ms-Icon--fieldNumber:before,.ms-Icon--circle.ms-Icon--fieldText:before{right:-14%}.ms-Icon--circle.ms-Icon--story:before{right:-5%}.ms-Icon--circle.ms-Icon--bold:before{right:4%}.ms-Icon--circle.ms-Icon--underline:before{top:4%}.ms-Icon--circle.ms-Icon--quote:before{right:-4%}.ms-Icon--circle.ms-Icon--styleRemove:before{top:4%;right:5%}.ms-Icon--circle.ms-Icon--pictureAdd:before,.ms-Icon--circle.ms-Icon--pictureRemove:before{right:-6%}.ms-Icon--circle.ms-Icon--mobile:before{right:-3%}.ms-Icon--circle.ms-Icon--hide:before{top:-4%}.ms-Icon--circle.ms-Icon--header:before{right:-9%}.ms-Icon--circle.ms-Icon--msn:before{right:3%}.ms-Icon--circle.ms-Icon--peopleCheck:before{right:-7%;top:-3%}.ms-Icon--circle.ms-Icon--caretDownOutline:before{top:6%}.ms-Icon--circle.ms-Icon--caretLeftOutline:before{right:-5%}.ms-Icon--circle.ms-Icon--caretRightOutline:before{right:5%}.ms-Icon--circle.ms-Icon--sway:before{right:-3%}.ms-Icon--circle.ms-Icon--mailSync:before{right:8%;top:3%}.ms-Icon--circle.ms-Icon--peopleError:before,.ms-Icon--circle.ms-Icon--peoplePause:before,.ms-Icon--circle.ms-Icon--peopleSync:before{right:-8%}.ms-Icon--circle.ms-Icon--documentSearch:before{right:8%}.ms-Icon--circle.ms-Icon--dynamicsMarketing:before{right:-8%}.ms-Icon--arrowDownLeft:before,.ms-Icon--arrowDownRight:before,.ms-Icon--arrowLeft,.ms-Icon--arrowRight,.ms-Icon--arrowUpLeft:before,.ms-Icon--arrowUpRight:before,.ms-Icon--bundle:before,.ms-Icon--calendar,.ms-Icon--caretDownLeft,.ms-Icon--caretDownRight,.ms-Icon--caretLeft,.ms-Icon--caretLeftOutline,.ms-Icon--caretRight,.ms-Icon--caretRightOutline,.ms-Icon--caretUpLeft,.ms-Icon--caretUpRight,.ms-Icon--cart,.ms-Icon--chart,.ms-Icon--chat,.ms-Icon--check,.ms-Icon--checkbox,.ms-Icon--checkboxCheck,.ms-Icon--checkPeople,.ms-Icon--chevronLeft,.ms-Icon--chevronRight,.ms-Icon--chevronsLeft,.ms-Icon--chevronsRight,.ms-Icon--chevronThickLeft,.ms-Icon--chevronThickRight,.ms-Icon--chevronThinLeft,.ms-Icon--chevronThinRight,.ms-Icon--contactForm,.ms-Icon--contactPublic:before,.ms-Icon--copy:before,.ms-Icon--directions,.ms-Icon--document,.ms-Icon--documentForward,.ms-Icon--documentLandscape,.ms-Icon--documentReply,.ms-Icon--dropdown,.ms-Icon--eventRecurring,.ms-Icon--eventShare,.ms-Icon--fileDocument:before,.ms-Icon--folder,.ms-Icon--folderMove,.ms-Icon--folderSearch,.ms-Icon--graph,.ms-Icon--inboxCheck,.ms-Icon--late,.ms-Icon--listBullets,.ms-Icon--listCheck,.ms-Icon--listCheckbox,.ms-Icon--listGroup,.ms-Icon--listGroup2:before,.ms-Icon--mailSend,.ms-Icon--mailSync,.ms-Icon--metadata,.ms-Icon--multiChoice,.ms-Icon--note,.ms-Icon--notebook,.ms-Icon--noteForward,.ms-Icon--noteReply,.ms-Icon--notRecurring,.ms-Icon--oofReply,.ms-Icon--page,.ms-Icon--peopleCheck,.ms-Icon--peopleSync,.ms-Icon--pinLeft,.ms-Icon--play,.ms-Icon--pointItem,.ms-Icon--post,.ms-Icon--question,.ms-Icon--questionReverse,.ms-Icon--reactivate,.ms-Icon--receiptCheck,.ms-Icon--receiptForward,.ms-Icon--receiptReply,.ms-Icon--refresh,.ms-Icon--reload,.ms-Icon--reply,.ms-Icon--replyAll,.ms-Icon--replyAllAlt,.ms-Icon--replyAlt,.ms-Icon--sections:before,.ms-Icon--socialListening,.ms-Icon--sortLines,.ms-Icon--sunQuestion,.ms-Icon--taskRecurring,.ms-Icon--tasks,.ms-Icon--timeline .ms-Icon--mailCheck,.ms-Icon--toggle,.ms-Icon--triangleEmptyLeft:before,.ms-Icon--triangleEmptyRight:before,.ms-Icon--triangleLeft:before,.ms-Icon--triangleRight:before,.ms-Icon--voicemailForward,.ms-Icon--voicemailReply{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.ms-u-slideRightIn10{-webkit-animation-name:y,a;animation-name:y,a;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes a{0%{-webkit-transform:translate3d(-10px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes a{0%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn20{-webkit-animation-name:y,b;animation-name:y,b;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes b{0%{-webkit-transform:translate3d(-20px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes b{0%{-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn40{-webkit-animation-name:y,c;animation-name:y,c;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes c{0%{-webkit-transform:translate3d(-40px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes c{0%{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn10{-webkit-animation-name:y,d;animation-name:y,d;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes d{0%{-webkit-transform:translate3d(10px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes d{0%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn20{-webkit-animation-name:y,e;animation-name:y,e;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes e{0%{-webkit-transform:translate3d(20px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes e{0%{-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn40{-webkit-animation-name:y,f;animation-name:y,f;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes f{0%{-webkit-transform:translate3d(40px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes f{0%{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn400{-webkit-animation-name:y,g;animation-name:y,g;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes g{0%{-webkit-transform:translate3d(-400px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes g{0%{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn400{-webkit-animation-name:y,h;animation-name:y,h;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes h{0%{-webkit-transform:translate3d(400px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes h{0%{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideUpIn20{-webkit-animation-name:y,i;animation-name:y,i;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes i{0%{-webkit-transform:translate3d(0,20px,0)}to{-webkit-transform:translateZ(0)}}@keyframes i{0%{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideUpIn10{-webkit-animation-name:y,j;animation-name:y,j;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes j{0%{-webkit-transform:translate3d(0,10px,0)}to{-webkit-transform:translateZ(0)}}@keyframes j{0%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideDownIn20{-webkit-animation-name:y,k;animation-name:y,k;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes k{0%{-webkit-transform:translate3d(0,-20px,0)}to{-webkit-transform:translateZ(0)}}@keyframes k{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideDownIn10{-webkit-animation-name:y,l;animation-name:y,l;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes l{0%{-webkit-transform:translate3d(0,-10px,0)}to{-webkit-transform:translateZ(0)}}@keyframes l{0%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightOut40{-webkit-animation-name:z,m;animation-name:z,m;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes m{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(40px,0,0)}}@keyframes m{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{-webkit-animation-name:z,n;animation-name:z,n;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes n{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(-40px,0,0)}}@keyframes n{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{-webkit-animation-name:z,o;animation-name:z,o;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes o{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(400px,0,0)}}@keyframes o{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{-webkit-animation-name:z,p;animation-name:z,p;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes p{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(-400px,0,0)}}@keyframes p{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{-webkit-animation-name:z,q;animation-name:z,q;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes q{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,-20px,0)}}@keyframes q{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{-webkit-animation-name:z,r;animation-name:z,r;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes r{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,-10px,0)}}@keyframes r{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{-webkit-animation-name:z,s;animation-name:z,s;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes s{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,20px,0)}}@keyframes s{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{-webkit-animation-name:z,t;animation-name:z,t;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes t{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,10px,0)}}@keyframes t{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{-webkit-animation-name:y,u;animation-name:y,u;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes u{0%{-webkit-transform:scale3d(.98,.98,1)}to{-webkit-transform:scaleX(1)}}@keyframes u{0%{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.ms-u-scaleDownIn100{-webkit-animation-name:y,v;animation-name:y,v;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes v{0%{-webkit-transform:scale3d(1.03,1.03,1)}to{-webkit-transform:scaleX(1)}}@keyframes v{0%{-webkit-transform:scale3d(1.03,1.03,1);transform:scale3d(1.03,1.03,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.ms-u-scaleUpOut103{-webkit-animation-name:z,w;animation-name:z,w;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes w{0%{-webkit-transform:scaleX(1)}to{-webkit-transform:scale3d(1.03,1.03,1)}}@keyframes w{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scale3d(1.03,1.03,1);transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{-webkit-animation-name:z,x;animation-name:z,x;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes x{0%{-webkit-transform:scaleX(1)}to{-webkit-transform:scale3d(.98,.98,1)}}@keyframes x{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeIn100{-webkit-animation-duration:.167s;animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.467s;animation-duration:.467s}@-webkit-keyframes y{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}@keyframes y{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeOut100{-webkit-animation-duration:.1s;animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.467s;animation-duration:.467s}@-webkit-keyframes z{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@keyframes z{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{-webkit-animation-name:A;animation-name:A;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes A{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(90deg)}}@keyframes A{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.ms-u-rotateN90deg{-webkit-animation-name:B;animation-name:B;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes B{0%{-webkit-transform:rotate(90deg)}to{-webkit-transform:rotate(0deg)}}@keyframes B{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(0deg);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{-webkit-animation-delay:.167s;animation-delay:.167s}.ms-u-delay200{-webkit-animation-delay:.267s;animation-delay:.267s}.ms-u-slideRightIn10{-webkit-animation-name:y,slideLeft10;animation-name:y,slideLeft10;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;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{-webkit-animation-name:y,slideLeft20;animation-name:y,slideLeft20;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideRightIn40{-webkit-animation-name:y,slideLeft40;animation-name:y,slideLeft40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;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{-webkit-animation-name:y,slideRight10;animation-name:y,slideRight10;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftIn20{-webkit-animation-name:y,slideRight20;animation-name:y,slideRight20;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;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{-webkit-animation-name:y,slideRight40;animation-name:y,slideRight40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideRightIn400{-webkit-animation-name:y,h;animation-name:y,h;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;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{-webkit-animation-name:y,slideRight400;animation-name:y,slideRight400;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideRightOut40{-webkit-animation-name:z,n;animation-name:z,n;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;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{-webkit-animation-name:z,m;animation-name:z,m;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideRightOut400{-webkit-animation-name:z,p;animation-name:z,p;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;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{-webkit-animation-name:z,o;animation-name:z,o;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-rotate90deg{-webkit-animation-name:B;animation-name:B;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;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{-webkit-animation-name:A;animation-name:A;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{left:100%}.ms-u-smPull11{left:91.66666666666666%}.ms-u-smPull10{left:83.33333333333334%}.ms-u-smPull9{left:75%}.ms-u-smPull8{left:66.66666666666666%}.ms-u-smPull7{left:58.333333333333336%}.ms-u-smPull6{left:50%}.ms-u-smPull5{left:41.66666666666667%}.ms-u-smPull4{left:33.33333333333333%}.ms-u-smPull3{left:25%}.ms-u-smPull2{left:16.666666666666664%}.ms-u-smPull1{left:8.333333333333332%}.ms-u-smPull0{left:auto}.ms-u-smPush12{right:100%}.ms-u-smPush11{right:91.66666666666666%}.ms-u-smPush10{right:83.33333333333334%}.ms-u-smPush9{right:75%}.ms-u-smPush8{right:66.66666666666666%}.ms-u-smPush7{right:58.333333333333336%}.ms-u-smPush6{right:50%}.ms-u-smPush5{right:41.66666666666667%}.ms-u-smPush4{right:33.33333333333333%}.ms-u-smPush3{right:25%}.ms-u-smPush2{right:16.666666666666664%}.ms-u-smPush1{right:8.333333333333332%}.ms-u-smPush0{right:auto}.ms-u-smOffset11{margin-right:91.66666666666666%}.ms-u-smOffset10{margin-right:83.33333333333334%}.ms-u-smOffset9{margin-right:75%}.ms-u-smOffset8{margin-right:66.66666666666666%}.ms-u-smOffset7{margin-right:58.333333333333336%}.ms-u-smOffset6{margin-right:50%}.ms-u-smOffset5{margin-right:41.66666666666667%}.ms-u-smOffset4{margin-right:33.33333333333333%}.ms-u-smOffset3{margin-right:25%}.ms-u-smOffset2{margin-right:16.666666666666664%}.ms-u-smOffset1{margin-right:8.333333333333332%}.ms-u-smOffset0{margin-right:0}@media (min-width:480px){.ms-u-md12{width:100%}.ms-u-md11{width:91.66666666666666%}.ms-u-md10{width:83.33333333333334%}.ms-u-md9{width:75%}.ms-u-md8{width:66.66666666666666%}.ms-u-md7{width:58.333333333333336%}.ms-u-md6{width:50%}.ms-u-md5{width:41.66666666666667%}.ms-u-md4{width:33.33333333333333%}.ms-u-md3{width:25%}.ms-u-md2{width:16.666666666666664%}.ms-u-md1{width:8.333333333333332%}.ms-u-mdPull12{left:100%}.ms-u-mdPull11{left:91.66666666666666%}.ms-u-mdPull10{left:83.33333333333334%}.ms-u-mdPull9{left:75%}.ms-u-mdPull8{left:66.66666666666666%}.ms-u-mdPull7{left:58.333333333333336%}.ms-u-mdPull6{left:50%}.ms-u-mdPull5{left:41.66666666666667%}.ms-u-mdPull4{left:33.33333333333333%}.ms-u-mdPull3{left:25%}.ms-u-mdPull2{left:16.666666666666664%}.ms-u-mdPull1{left:8.333333333333332%}.ms-u-mdPull0{left:auto}.ms-u-mdPush12{right:100%}.ms-u-mdPush11{right:91.66666666666666%}.ms-u-mdPush10{right:83.33333333333334%}.ms-u-mdPush9{right:75%}.ms-u-mdPush8{right:66.66666666666666%}.ms-u-mdPush7{right:58.333333333333336%}.ms-u-mdPush6{right:50%}.ms-u-mdPush5{right:41.66666666666667%}.ms-u-mdPush4{right:33.33333333333333%}.ms-u-mdPush3{right:25%}.ms-u-mdPush2{right:16.666666666666664%}.ms-u-mdPush1{right:8.333333333333332%}.ms-u-mdPush0{right:auto}.ms-u-mdOffset11{margin-right:91.66666666666666%}.ms-u-mdOffset10{margin-right:83.33333333333334%}.ms-u-mdOffset9{margin-right:75%}.ms-u-mdOffset8{margin-right:66.66666666666666%}.ms-u-mdOffset7{margin-right:58.333333333333336%}.ms-u-mdOffset6{margin-right:50%}.ms-u-mdOffset5{margin-right:41.66666666666667%}.ms-u-mdOffset4{margin-right:33.33333333333333%}.ms-u-mdOffset3{margin-right:25%}.ms-u-mdOffset2{margin-right:16.666666666666664%}.ms-u-mdOffset1{margin-right:8.333333333333332%}.ms-u-mdOffset0{margin-right:0}}@media (min-width:640px){.ms-u-lg12{width:100%}.ms-u-lg11{width:91.66666666666666%}.ms-u-lg10{width:83.33333333333334%}.ms-u-lg9{width:75%}.ms-u-lg8{width:66.66666666666666%}.ms-u-lg7{width:58.333333333333336%}.ms-u-lg6{width:50%}.ms-u-lg5{width:41.66666666666667%}.ms-u-lg4{width:33.33333333333333%}.ms-u-lg3{width:25%}.ms-u-lg2{width:16.666666666666664%}.ms-u-lg1{width:8.333333333333332%}.ms-u-lgPull12{left:100%}.ms-u-lgPull11{left:91.66666666666666%}.ms-u-lgPull10{left:83.33333333333334%}.ms-u-lgPull9{left:75%}.ms-u-lgPull8{left:66.66666666666666%}.ms-u-lgPull7{left:58.333333333333336%}.ms-u-lgPull6{left:50%}.ms-u-lgPull5{left:41.66666666666667%}.ms-u-lgPull4{left:33.33333333333333%}.ms-u-lgPull3{left:25%}.ms-u-lgPull2{left:16.666666666666664%}.ms-u-lgPull1{left:8.333333333333332%}.ms-u-lgPull0{left:auto}.ms-u-lgPush12{right:100%}.ms-u-lgPush11{right:91.66666666666666%}.ms-u-lgPush10{right:83.33333333333334%}.ms-u-lgPush9{right:75%}.ms-u-lgPush8{right:66.66666666666666%}.ms-u-lgPush7{right:58.333333333333336%}.ms-u-lgPush6{right:50%}.ms-u-lgPush5{right:41.66666666666667%}.ms-u-lgPush4{right:33.33333333333333%}.ms-u-lgPush3{right:25%}.ms-u-lgPush2{right:16.666666666666664%}.ms-u-lgPush1{right:8.333333333333332%}.ms-u-lgPush0{right:auto}.ms-u-lgOffset11{margin-right:91.66666666666666%}.ms-u-lgOffset10{margin-right:83.33333333333334%}.ms-u-lgOffset9{margin-right:75%}.ms-u-lgOffset8{margin-right:66.66666666666666%}.ms-u-lgOffset7{margin-right:58.333333333333336%}.ms-u-lgOffset6{margin-right:50%}.ms-u-lgOffset5{margin-right:41.66666666666667%}.ms-u-lgOffset4{margin-right:33.33333333333333%}.ms-u-lgOffset3{margin-right:25%}.ms-u-lgOffset2{margin-right:16.666666666666664%}.ms-u-lgOffset1{margin-right:8.333333333333332%}.ms-u-lgOffset0{margin-right:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}.ms-u-xl11{width:91.66666666666666%}.ms-u-xl10{width:83.33333333333334%}.ms-u-xl9{width:75%}.ms-u-xl8{width:66.66666666666666%}.ms-u-xl7{width:58.333333333333336%}.ms-u-xl6{width:50%}.ms-u-xl5{width:41.66666666666667%}.ms-u-xl4{width:33.33333333333333%}.ms-u-xl3{width:25%}.ms-u-xl2{width:16.666666666666664%}.ms-u-xl1{width:8.333333333333332%}.ms-u-xlPull12{left:100%}.ms-u-xlPull11{left:91.66666666666666%}.ms-u-xlPull10{left:83.33333333333334%}.ms-u-xlPull9{left:75%}.ms-u-xlPull8{left:66.66666666666666%}.ms-u-xlPull7{left:58.333333333333336%}.ms-u-xlPull6{left:50%}.ms-u-xlPull5{left:41.66666666666667%}.ms-u-xlPull4{left:33.33333333333333%}.ms-u-xlPull3{left:25%}.ms-u-xlPull2{left:16.666666666666664%}.ms-u-xlPull1{left:8.333333333333332%}.ms-u-xlPull0{left:auto}.ms-u-xlPush12{right:100%}.ms-u-xlPush11{right:91.66666666666666%}.ms-u-xlPush10{right:83.33333333333334%}.ms-u-xlPush9{right:75%}.ms-u-xlPush8{right:66.66666666666666%}.ms-u-xlPush7{right:58.333333333333336%}.ms-u-xlPush6{right:50%}.ms-u-xlPush5{right:41.66666666666667%}.ms-u-xlPush4{right:33.33333333333333%}.ms-u-xlPush3{right:25%}.ms-u-xlPush2{right:16.666666666666664%}.ms-u-xlPush1{right:8.333333333333332%}.ms-u-xlPush0{right:auto}.ms-u-xlOffset11{margin-right:91.66666666666666%}.ms-u-xlOffset10{margin-right:83.33333333333334%}.ms-u-xlOffset9{margin-right:75%}.ms-u-xlOffset8{margin-right:66.66666666666666%}.ms-u-xlOffset7{margin-right:58.333333333333336%}.ms-u-xlOffset6{margin-right:50%}.ms-u-xlOffset5{margin-right:41.66666666666667%}.ms-u-xlOffset4{margin-right:33.33333333333333%}.ms-u-xlOffset3{margin-right:25%}.ms-u-xlOffset2{margin-right:16.666666666666664%}.ms-u-xlOffset1{margin-right:8.333333333333332%}.ms-u-xlOffset0{margin-right:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}.ms-u-xxl11{width:91.66666666666666%}.ms-u-xxl10{width:83.33333333333334%}.ms-u-xxl9{width:75%}.ms-u-xxl8{width:66.66666666666666%}.ms-u-xxl7{width:58.333333333333336%}.ms-u-xxl6{width:50%}.ms-u-xxl5{width:41.66666666666667%}.ms-u-xxl4{width:33.33333333333333%}.ms-u-xxl3{width:25%}.ms-u-xxl2{width:16.666666666666664%}.ms-u-xxl1{width:8.333333333333332%}.ms-u-xxlPull12{left:100%}.ms-u-xxlPull11{left:91.66666666666666%}.ms-u-xxlPull10{left:83.33333333333334%}.ms-u-xxlPull9{left:75%}.ms-u-xxlPull8{left:66.66666666666666%}.ms-u-xxlPull7{left:58.333333333333336%}.ms-u-xxlPull6{left:50%}.ms-u-xxlPull5{left:41.66666666666667%}.ms-u-xxlPull4{left:33.33333333333333%}.ms-u-xxlPull3{left:25%}.ms-u-xxlPull2{left:16.666666666666664%}.ms-u-xxlPull1{left:8.333333333333332%}.ms-u-xxlPull0{left:auto}.ms-u-xxlPush12{right:100%}.ms-u-xxlPush11{right:91.66666666666666%}.ms-u-xxlPush10{right:83.33333333333334%}.ms-u-xxlPush9{right:75%}.ms-u-xxlPush8{right:66.66666666666666%}.ms-u-xxlPush7{right:58.333333333333336%}.ms-u-xxlPush6{right:50%}.ms-u-xxlPush5{right:41.66666666666667%}.ms-u-xxlPush4{right:33.33333333333333%}.ms-u-xxlPush3{right:25%}.ms-u-xxlPush2{right:16.666666666666664%}.ms-u-xxlPush1{right:8.333333333333332%}.ms-u-xxlPush0{right:auto}.ms-u-xxlOffset11{margin-right:91.66666666666666%}.ms-u-xxlOffset10{margin-right:83.33333333333334%}.ms-u-xxlOffset9{margin-right:75%}.ms-u-xxlOffset8{margin-right:66.66666666666666%}.ms-u-xxlOffset7{margin-right:58.333333333333336%}.ms-u-xxlOffset6{margin-right:50%}.ms-u-xxlOffset5{margin-right:41.66666666666667%}.ms-u-xxlOffset4{margin-right:33.33333333333333%}.ms-u-xxlOffset3{margin-right:25%}.ms-u-xxlOffset2{margin-right:16.666666666666664%}.ms-u-xxlOffset1{margin-right:8.333333333333332%}.ms-u-xxlOffset0{margin-right:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}.ms-u-xxxl11{width:91.66666666666666%}.ms-u-xxxl10{width:83.33333333333334%}.ms-u-xxxl9{width:75%}.ms-u-xxxl8{width:66.66666666666666%}.ms-u-xxxl7{width:58.333333333333336%}.ms-u-xxxl6{width:50%}.ms-u-xxxl5{width:41.66666666666667%}.ms-u-xxxl4{width:33.33333333333333%}.ms-u-xxxl3{width:25%}.ms-u-xxxl2{width:16.666666666666664%}.ms-u-xxxl1{width:8.333333333333332%}.ms-u-xxxlPull12{left:100%}.ms-u-xxxlPull11{left:91.66666666666666%}.ms-u-xxxlPull10{left:83.33333333333334%}.ms-u-xxxlPull9{left:75%}.ms-u-xxxlPull8{left:66.66666666666666%}.ms-u-xxxlPull7{left:58.333333333333336%}.ms-u-xxxlPull6{left:50%}.ms-u-xxxlPull5{left:41.66666666666667%}.ms-u-xxxlPull4{left:33.33333333333333%}.ms-u-xxxlPull3{left:25%}.ms-u-xxxlPull2{left:16.666666666666664%}.ms-u-xxxlPull1{left:8.333333333333332%}.ms-u-xxxlPull0{left:auto}.ms-u-xxxlPush12{right:100%}.ms-u-xxxlPush11{right:91.66666666666666%}.ms-u-xxxlPush10{right:83.33333333333334%}.ms-u-xxxlPush9{right:75%}.ms-u-xxxlPush8{right:66.66666666666666%}.ms-u-xxxlPush7{right:58.333333333333336%}.ms-u-xxxlPush6{right:50%}.ms-u-xxxlPush5{right:41.66666666666667%}.ms-u-xxxlPush4{right:33.33333333333333%}.ms-u-xxxlPush3{right:25%}.ms-u-xxxlPush2{right:16.666666666666664%}.ms-u-xxxlPush1{right:8.333333333333332%}.ms-u-xxxlPush0{right:auto}.ms-u-xxxlOffset11{margin-right:91.66666666666666%}.ms-u-xxxlOffset10{margin-right:83.33333333333334%}.ms-u-xxxlOffset9{margin-right:75%}.ms-u-xxxlOffset8{margin-right:66.66666666666666%}.ms-u-xxxlOffset7{margin-right:58.333333333333336%}.ms-u-xxxlOffset6{margin-right:50%}.ms-u-xxxlOffset5{margin-right:41.66666666666667%}.ms-u-xxxlOffset4{margin-right:33.33333333333333%}.ms-u-xxxlOffset3{margin-right:25%}.ms-u-xxxlOffset2{margin-right:16.666666666666664%}.ms-u-xxxlOffset1{margin-right:8.333333333333332%}.ms-u-xxxlOffset0{margin-right:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-right:8px;padding-left:8px;box-sizing:border-box;float:right}.ms-Grid-col .ms-Grid{padding:0}
\ No newline at end of file
diff --git a/dist/js/jquery.fabric.js b/dist/js/jquery.fabric.js
new file mode 100644
index 000000000..c9e266d69
--- /dev/null
+++ b/dist/js/jquery.fabric.js
@@ -0,0 +1,2451 @@
+//Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Breadcrumb component
+ *
+ * Shows the user's current location in a hierarchy and provides a means of navigating upward.
+ *
+ */
+
+/**
+ * @namespace fabric
+ */
+var fabric = fabric || {};
+/**
+ *
+ * @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.
+ */
+fabric.Breadcrumb = function(container) {
+ this.breadcrumb = container;
+ this.breadcrumbList = container.querySelector('.ms-Breadcrumb-list');
+ this.listItems = container.querySelectorAll('.ms-Breadcrumb-listItem');
+ this.contextMenu = container.querySelector('.ms-ContextualMenu');
+ this.overflowButton = container.querySelector('.ms-Breadcrumb-overflowButton');
+ this.overflowMenu = container.querySelector('.ms-Breadcrumb-overflowMenu');
+ this.itemCollection = [];
+ this.currentMaxItems = 0;
+ this.init();
+
+};
+
+fabric.Breadcrumb.prototype = (function() {
+
+ //medium breakpoint
+ var MEDIUM = 639;
+
+ /**
+ * initializes component
+ */
+ var init = function() {
+ _setListeners.call(this);
+ _createItemCollection.call(this);
+ _onResize.call(this, null);
+ };
+
+ /**
+ * Adds a breadcrumb item to a breadcrumb
+ * @param itemLabel {String} the item's text label
+ * @param itemLink {String} the item's href link
+ * @param tabIndex {number} the item's tabIndex
+ */
+ var addItem = function(itemLabel, itemLink, tabIndex) {
+ this.itemCollection.push({text: itemLabel, link: itemLink, tabIndex: tabIndex});
+ _updateBreadcrumbs.call(this);
+ };
+
+ /**
+ * Removes a breadcrumb item by item label in the breadcrumbs list
+ * @param itemLabel {String} the item's text label
+ */
+ var removeItemByLabel = function(itemLabel) {
+ var i = this.itemCollection.length;
+ while (i--) {
+ if (this.itemCollection[i].text === itemLabel) {
+ this.itemCollection.splice(i, 1);
+ }
+ }
+ _updateBreadcrumbs.call(this);
+ };
+
+ /**
+ * removes a breadcrumb item by position in the breadcrumbs list
+ * index starts at 0
+ * @param itemLabel {String} the item's text label
+ * @param itemLink {String} the item's href link
+ * @param tabIndex {number} the item's tabIndex
+ */
+ var removeItemByPosition = function(value) {
+ this.itemCollection.splice(value, 1);
+ _updateBreadcrumbs.call(this);
+ };
+
+ /**
+ * create internal model of list items from DOM
+ */
+ var _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({text: text, link: link, tabIndex: tabIndex});
+ }
+ };
+
+ /**
+ * Re-render lists on resize
+ *
+ */
+ var _onResize = function() {
+ _closeOverflow.call(this, null);
+ _renderListOnResize.call(this);
+ };
+
+ /**
+ * render breadcrumbs and overflow menus on resize
+ */
+ var _renderListOnResize = function() {
+ var maxItems = window.innerWidth > MEDIUM ? 4 : 2;
+ if (maxItems !== this.currentMaxItems) {
+ _updateBreadcrumbs.call(this);
+ }
+
+ this.currentMaxItems = maxItems;
+ };
+
+ /**
+ * creates the overflow menu
+ */
+ var _addItemsToOverflow = function(maxItems) {
+ _resetList.call(this, this.contextMenu);
+ var end = this.itemCollection.length - maxItems;
+ var overflowItems = this.itemCollection.slice(0, end);
+ var contextMenu = this.contextMenu;
+ overflowItems.forEach(function(item) {
+ var li = document.createElement('li');
+ li.className = 'ms-ContextualMenu-item';
+ if(!isNaN(item.tabIndex)) {
+ li.setAttribute('tabindex', item.tabIndex);
+ }
+ var a = document.createElement('a');
+ a.className = 'ms-ContextualMenu-link';
+ if (item.link !== null) {
+ a.setAttribute('href', item.link);
+ }
+ a.textContent = item.text;
+ li.appendChild(a);
+ contextMenu.appendChild(li);
+ });
+ };
+
+ /**
+ * creates the breadcrumbs
+ */
+ var _addBreadcrumbItems = function(maxItems) {
+ _resetList.call(this, this.breadcrumbList);
+ var i = this.itemCollection.length - maxItems;
+ i = i < 0 ? 0 : i;
+ if (i >= 0) {
+ for (i; i < this.itemCollection.length; i++) {
+ var listItem = document.createElement('li');
+ var item = this.itemCollection[i];
+ var a = document.createElement('a');
+ var chevron = document.createElement('i');
+ listItem.className = 'ms-Breadcrumb-listItem';
+ a.className = 'ms-Breadcrumb-itemLink';
+ if (item.link !== null) {
+ a.setAttribute('href', item.link);
+ }
+ if (!isNaN(item.tabIndex)) {
+ a.setAttribute('tabindex', item.tabIndex);
+ }
+ a.textContent = item.text;
+ chevron.className = 'ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight';
+ listItem.appendChild(a);
+ listItem.appendChild(chevron);
+ this.breadcrumbList.appendChild(listItem);
+ }
+ }
+ };
+
+ /**
+ * resets a list by removing its children
+ */
+ var _resetList = function(list) {
+ while (list.firstChild) {
+ list.removeChild(list.firstChild);
+ }
+ };
+
+ /**
+ * opens the overflow menu
+ */
+ var _openOverflow = function(event) {
+ if (this.overflowMenu.className.indexOf(' is-open') === -1) {
+ this.overflowMenu.className += ' is-open';
+ removeOutlinesOnClick.call(this, event);
+ // force focus rect onto overflow button
+ this.overflowButton.focus();
+ }
+ };
+
+ var _overflowKeyPress = function(event) {
+ if (event.keyCode === 13) {
+ _openOverflow.call(this, event);
+ }
+ };
+
+ /**
+ * closes the overflow menu
+ */
+ var _closeOverflow = function(event) {
+ if (!event || event.target !== this.overflowButton) {
+ _removeClass.call(this, this.overflowMenu, ' is-open');
+ }
+ };
+
+ /**
+ * utility that removes a class from an element
+ */
+ var _removeClass = function (element, value) {
+ var index = element.className.indexOf(value);
+ if (index > -1) {
+ element.className = element.className.substring(0, index);
+ }
+ };
+
+ /**
+ * sets handlers for resize and button click events
+ */
+ var _setListeners = function() {
+ window.addEventListener('resize', _onResize.bind(this), false);
+ document.addEventListener('click', _closeOverflow.bind(this), false);
+ this.overflowButton.addEventListener('click', _openOverflow.bind(this), false);
+ this.overflowButton.addEventListener('keypress', _overflowKeyPress.bind(this), false);
+ this.breadcrumbList.addEventListener('click', removeOutlinesOnClick.bind(this), false);
+ };
+
+ /**
+ * removes focus outlines so they don't linger after click
+ */
+ var removeOutlinesOnClick = function(event) {
+ event.target.blur();
+ };
+
+ /**
+ * updates the breadcrumbs and overflow menu
+ */
+ var _updateBreadcrumbs = function() {
+ var maxItems = window.innerWidth > MEDIUM ? 4 : 2;
+ if (this.itemCollection.length > maxItems) {
+ this.breadcrumb.className += ' is-overflow';
+ } else {
+ _removeClass.call(this, this.breadcrumb, ' is-overflow');
+ }
+
+ _addBreadcrumbItems.call(this, maxItems);
+ _addItemsToOverflow.call(this, maxItems);
+ };
+
+ return {
+ init: init,
+ addItem: addItem,
+ removeItemByLabel: removeItemByLabel,
+ removeItemByPosition: removeItemByPosition
+ };
+
+}());
+
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Command Bar Plugin
+ */
+
+(function ($) {
+ $.fn.CommandBar = function () {
+
+ var createMenuItem = function(text) {
+ var item = '';
+
+ return item;
+ };
+
+ var saveCommands = function($commands, $commandWidth, $commandarea) {
+ var commands = [];
+ $commands.each(function() {
+ var $Item = $(this);
+ var $rightOffset = ($Item.position().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.position().left; // Added padding of 10
+ commands.push({ jquery: $Item, rightOffset: $rightOffset});
+ });
+
+ return commands;
+ };
+
+ var processCommands = function(commands, width, overflowwidth) {
+ var overFlowCommands = [];
+
+ for(var i=0; i < commands.length; i++) {
+ var $Item = commands[i].jquery;
+ var rightOffset = commands[i].rightOffset;
+
+ // If the command is outside the right boundaries add to overflow items
+ if(!$Item.hasClass('ms-CommandBarItem-overflow')) {
+ if((rightOffset + overflowwidth) > width) {
+ overFlowCommands.push($Item);
+ } else {
+ // Make sure item is displayed
+ $Item.removeClass('is-hidden');
+ }
+ }
+ }
+ return overFlowCommands;
+ };
+
+ var processOverflow = function(overFlowCommands, $oCommand, $menu) {
+ var overflowStrings = '';
+
+ if(overFlowCommands.length > 0) {
+ $oCommand.addClass("is-visible");
+ // Empty menu
+ $menu.html('');
+
+ // Add overflowed commands to ContextualMenu
+ for(var i = 0; i < overFlowCommands.length; i++) {
+ var $Item = $(overFlowCommands[i]);
+ // Hide Element in CommandBar
+ $Item.addClass('is-hidden');
+ var commandBarItemText = $Item.find('.ms-CommandBarItem-commandText').text();
+ overflowStrings += createMenuItem(commandBarItemText);
+ }
+ $menu.html(overflowStrings);
+ } else {
+ $oCommand.removeClass("is-visible");
+ }
+ };
+
+ /** Go through each CommandBar we've been given. */
+ return this.each(function () {
+ var $CommandBar = $(this);
+ var $CommandMainArea = $CommandBar.find('.ms-CommandBar-mainArea');
+ var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem').not('.ms-CommandBarItem-overflow');
+ var $OverflowCommand = $CommandBar.find('.ms-CommandBarItem-overflow');
+ var $OverflowCommandWidth = $CommandBar.find('.ms-CommandBarItem-overflow').outerWidth();
+ var $OverflowMenu = $CommandBar.find('.ms-CommandBar-overflowMenu');
+ var $SearchBox = $CommandBar.find('.ms-CommandBarSearch');
+ var mobileSwitch = false;
+ var overFlowCommands;
+ var allCommands;
+
+ // Go through process and save commands
+ allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+
+ // Initiate process commands and add commands to overflow on load
+ overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
+ processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
+
+ // Set Search Behavior
+ if($(window).width() < 640) {
+
+ $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+ });
+
+ }
+
+ // Add resize event handler on commandBar
+ $(window).resize(function() {
+ var overFlowCommands;
+
+ if($(window).width() < 640 && mobileSwitch === false) {
+ // Go through process and save commands
+ allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+
+ mobileSwitch = true;
+
+ // Search Behavior
+ $('.ms-CommandBarSearch-iconSearchWrapper').unbind();
+ $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+ });
+
+ } else if($(window).width() > 639 && mobileSwitch === true) {
+ // Go through process and save commands
+ allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+
+ mobileSwitch = false;
+ $('.ms-CommandBarSearch').unbind();
+
+ }
+
+ // Initiate process commands and add commands to overflow on load
+ overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
+ processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
+
+ });
+
+ // Hook up contextual menu
+ $OverflowCommand.click(function() {
+ $OverflowMenu.toggleClass('is-open');
+ });
+
+ $OverflowCommand.focusout(function() {
+ $OverflowMenu.removeClass('is-open');
+ });
+
+ $SearchBox.find('.ms-CommandBarSearch-input').click(function() {
+ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+ });
+
+ $SearchBox.find('.ms-CommandBarSearch-input').on('focus', function() {
+ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+ });
+
+ // When clicking the x clear the SearchBox and put state back to normal
+ $SearchBox.find('.ms-CommandBarSearch-iconClearWrapper').click(function() {
+ var $input = $(this).parent().find('.ms-CommandBarSearch-input');
+ $input.val('');
+ $input.parent().removeClass('is-active');
+ });
+
+ $SearchBox.parent().find('.ms-CommandBarSearch-input').blur(function() {
+ var $input = $(this);
+ $input.val('');
+ $input.parent().removeClass('is-active');
+ });
+
+ });
+ };
+})(jQuery);
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Contextual Menu Plugin
+ */
+(function ($) {
+ $.fn.ContextualMenu = function () {
+
+ /** Go through each nav bar we've been given. */
+ return this.each(function () {
+
+ var $contextualMenu = $(this);
+
+
+ // Set selected states.
+ $contextualMenu.on('click', '.ms-ContextualMenu-link:not(.is-disabled)', function(event) {
+ event.preventDefault();
+
+ // Check if multiselect - set selected states
+ if ( $contextualMenu.hasClass('ms-ContextualMenu--multiselect') ) {
+
+ // If already selected, remove selection; if not, add selection
+ if ( $(this).hasClass('is-selected') ) {
+ $(this).removeClass('is-selected');
+ }
+ else {
+ $(this).addClass('is-selected');
+ }
+
+ }
+ // All other contextual menu variants
+ else {
+
+ // Deselect all of the items and close any menus.
+ $('.ms-ContextualMenu-link')
+ .removeClass('is-selected')
+ .siblings('.ms-ContextualMenu')
+ .removeClass('is-open');
+
+ // Select this item.
+ $(this).addClass('is-selected');
+
+ // If this item has a menu, open it.
+ if ($(this).hasClass('ms-ContextualMenu-link--hasMenu')) {
+ $(this).siblings('.ms-ContextualMenu:first').addClass('is-open');
+
+ // Open the menu without bubbling up the click event,
+ // which can cause the menu to close.
+ event.stopPropagation();
+ }
+
+ }
+
+
+ });
+
+ });
+ };
+})(jQuery);
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+(function ($) {
+
+ /**
+ * DatePicker Plugin
+ */
+
+ $.fn.DatePicker = function (options) {
+
+ return this.each(function () {
+
+ /** Set up variables and run the Pickadate plugin. */
+ var $datePicker = $(this);
+ 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
+ today: '',
+ clear: '',
+ close: '',
+
+ // Events
+ onStart: function() {
+ initCustomView($datePicker);
+ },
+
+ // Classes
+ klass: {
+
+ // The element states
+ input: 'ms-DatePicker-input',
+ active: 'ms-DatePicker-input--active',
+
+ // The root picker and states
+ picker: 'ms-DatePicker-picker',
+ opened: 'ms-DatePicker-picker--opened',
+ focused: 'ms-DatePicker-picker--focused',
+
+ // The picker holder
+ holder: 'ms-DatePicker-holder',
+
+ // The picker frame, wrapper, and box
+ frame: 'ms-DatePicker-frame',
+ wrap: 'ms-DatePicker-wrap',
+ box: 'ms-DatePicker-dayPicker',
+
+ // The picker header
+ header: 'ms-DatePicker-header',
+
+ // Month & year labels
+ month: 'ms-DatePicker-month',
+ year: 'ms-DatePicker-year',
+
+ // Table of dates
+ table: 'ms-DatePicker-table',
+
+ // Weekday labels
+ weekdays: 'ms-DatePicker-weekday',
+
+ // Day states
+ day: 'ms-DatePicker-day',
+ disabled: 'ms-DatePicker-day--disabled',
+ selected: 'ms-DatePicker-day--selected',
+ highlighted: 'ms-DatePicker-day--highlighted',
+ now: 'ms-DatePicker-day--today',
+ infocus: 'ms-DatePicker-day--infocus',
+ outfocus: 'ms-DatePicker-day--outfocus',
+
+ }
+ },options||{}));
+ var $picker = $dateField.pickadate('picker');
+
+ /** Respond to built-in picker events. */
+ $picker.on({
+ render: function() {
+ updateCustomView($datePicker);
+ },
+ open: function() {
+ scrollUp($datePicker);
+ }
+ });
+
+ });
+ };
+
+ /**
+ * After the Pickadate plugin starts, this function
+ * adds additional controls to the picker view.
+ */
+ function initCustomView($datePicker) {
+
+ /** Get some variables 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. */
+ updateCustomView($datePicker);
+
+ /** Move back one month. */
+ $monthControls.on('click', '.js-prevMonth', function(event) {
+ event.preventDefault();
+ var newMonth = $picker.get('highlight').month - 1;
+ changeHighlightedDate($picker, null, newMonth, null);
+ });
+
+ /** Move ahead one month. */
+ $monthControls.on('click', '.js-nextMonth', function(event) {
+ event.preventDefault();
+ var newMonth = $picker.get('highlight').month + 1;
+ changeHighlightedDate($picker, null, newMonth, null);
+ });
+
+ /** Move back one year. */
+ $monthPicker.on('click', '.js-prevYear', function(event) {
+ event.preventDefault();
+ var newYear = $picker.get('highlight').year - 1;
+ changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Move ahead one year. */
+ $monthPicker.on('click', '.js-nextYear', function(event) {
+ event.preventDefault();
+ var newYear = $picker.get('highlight').year + 1;
+ changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Move back one decade. */
+ $yearPicker.on('click', '.js-prevDecade', function(event) {
+ event.preventDefault();
+ var newYear = $picker.get('highlight').year - 10;
+ changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Move ahead one decade. */
+ $yearPicker.on('click', '.js-nextDecade', function(event) {
+ event.preventDefault();
+ var newYear = $picker.get('highlight').year + 10;
+ changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Go to the current date, shown in the day picking view. */
+ $goToday.click(function(event) {
+ event.preventDefault();
+
+ /** Select the current date, while keeping the picker open. */
+ var now = new Date();
+ $picker.set('select', [now.getFullYear(), now.getMonth(), now.getDate()]);
+
+ /** Switch to the default (calendar) view. */
+ $datePicker.removeClass('is-pickingMonths').removeClass('is-pickingYears');
+
+ });
+
+ /** Change the highlighted month. */
+ $monthPicker.on('click', '.js-changeDate', function(event) {
+ event.preventDefault();
+
+ /** Get the requested date from the data attributes. */
+ var newYear = $(this).attr('data-year');
+ var newMonth = $(this).attr('data-month');
+ var newDay = $(this).attr('data-day');
+
+ /** Update the date. */
+ changeHighlightedDate($picker, newYear, newMonth, newDay);
+
+ /** If we've been in the "picking months" state on mobile, remove that state so we show the calendar again. */
+ if ($datePicker.hasClass('is-pickingMonths')) {
+ $datePicker.removeClass('is-pickingMonths');
+ }
+ });
+
+ /** Change the highlighted year. */
+ $yearPicker.on('click', '.js-changeDate', function(event) {
+ event.preventDefault();
+
+ /** Get the requested date from the data attributes. */
+ var newYear = $(this).attr('data-year');
+ var newMonth = $(this).attr('data-month');
+ var newDay = $(this).attr('data-day');
+
+ /** Update the date. */
+ changeHighlightedDate($picker, newYear, newMonth, newDay);
+
+ /** If we've been in the "picking years" state on mobile, remove that state so we show the calendar again. */
+ if ($datePicker.hasClass('is-pickingYears')) {
+ $datePicker.removeClass('is-pickingYears');
+ }
+ });
+
+ /** Switch to the default state. */
+ $monthPicker.on('click', '.js-showDayPicker', function() {
+ $datePicker.removeClass('is-pickingMonths');
+ $datePicker.removeClass('is-pickingYears');
+ });
+
+ /** Switch to the is-pickingMonths state. */
+ $monthControls.on('click', '.js-showMonthPicker', function() {
+ $datePicker.toggleClass('is-pickingMonths');
+ });
+
+ /** Switch to the is-pickingYears state. */
+ $monthPicker.on('click', '.js-showYearPicker', function() {
+ $datePicker.toggleClass('is-pickingYears');
+ });
+
+ }
+
+ /** Change the highlighted date. */
+ function changeHighlightedDate($picker, newYear, newMonth, newDay) {
+
+ /** All letiables are optional. If not provided, default to the current value. */
+ if (typeof newYear === "undefined" || newYear === null) {
+ newYear = $picker.get("highlight").year;
+ }
+ if (typeof newMonth === "undefined" || newMonth === null) {
+ newMonth = $picker.get("highlight").month;
+ }
+ if (typeof newDay === "undefined" || newDay === null) {
+ newDay = $picker.get("highlight").date;
+ }
+
+ /** Update it. */
+ $picker.set('highlight', [newYear, newMonth, newDay]);
+
+ }
+
+
+ /** Whenever the picker renders, do our own rendering on the custom controls. */
+ function updateCustomView($datePicker) {
+
+ /** Get some variables 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. */
+ function scrollUp($datePicker) {
+ $('html, body').animate({
+ scrollTop: $datePicker.offset().top
+ }, 367);
+ }
+
+})(jQuery);
+
+!function(a){"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):this.Picker=a(jQuery)}(function(a){function b(f,g,h,k){function l(){return b._.node("div",b._.node("div",b._.node("div",b._.node("div",w.component.nodes(r.open),t.box),t.wrap),t.frame),t.holder)}function m(){u.data(g,w).addClass(t.input).val(u.data("value")?w.get("select",s.format):f.value).on("focus."+r.id+" click."+r.id,p),s.editable||u.on("keydown."+r.id,function(a){var b=a.keyCode,c=/^(8|46)$/.test(b);return 27==b?(w.close(),!1):void((32==b||c||!r.open&&w.component.key[b])&&(a.preventDefault(),a.stopPropagation(),c?w.clear().close():w.open()))}),e(f,{haspopup:!0,expanded:!1,readonly:!1,owns:f.id+"_root"+(w._hidden?" "+w._hidden.id:"")})}function n(){w.$root.on({focusin:function(a){w.$root.removeClass(t.focused),a.stopPropagation()},"mousedown click":function(b){var c=b.target;c!=w.$root.children()[0]&&(b.stopPropagation(),"mousedown"!=b.type||a(c).is(":input")||"OPTION"==c.nodeName||(b.preventDefault(),f.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var b=a(this),c=b.data(),d=b.hasClass(t.navDisabled)||b.hasClass(t.disabled),e=document.activeElement;e=e&&(e.type||e.href)&&e,(d||e&&!a.contains(w.$root[0],e))&&f.focus(),!d&&c.nav?w.set("highlight",w.component.item.highlight,{nav:c.nav}):!d&&"pick"in c?w.set("select",c.pick).close(!0):c.clear?w.clear().close(!0):c.close&&w.close(!0)}),e(w.$root[0],"hidden",!0)}function o(){var b;s.hiddenName===!0?(b=f.name,f.name=""):(b=["string"==typeof s.hiddenPrefix?s.hiddenPrefix:"","string"==typeof s.hiddenSuffix?s.hiddenSuffix:"_submit"],b=b[0]+f.name+b[1]),w._hidden=a(' ")[0],u.on("change."+r.id,function(){w._hidden.value=f.value?w.get("select",s.formatSubmit):""}).after(w._hidden)}function p(a){a.stopPropagation(),"focus"==a.type&&w.$root.addClass(t.focused),w.open()}if(!f)return b;var q=!1,r={id:f.id||"P"+Math.abs(~~(Math.random()*new Date))},s=h?a.extend(!0,{},h.defaults,k):k||{},t=a.extend({},b.klasses(),s.klass),u=a(f),v=function(){return this.start()},w=v.prototype={constructor:v,$node:u,start:function(){return r&&r.start?w:(r.methods={},r.start=!0,r.open=!1,r.type=f.type,f.autofocus=f==document.activeElement,f.readOnly=!s.editable,f.id=f.id||r.id,"text"!=f.type&&(f.type="text"),w.component=new h(w,s),w.$root=a(b._.node("div",l(),t.picker,'id="'+f.id+'_root"')),n(),s.formatSubmit&&o(),m(),s.container?a(s.container).append(w.$root):u.after(w.$root),w.on({start:w.component.onStart,render:w.component.onRender,stop:w.component.onStop,open:w.component.onOpen,close:w.component.onClose,set:w.component.onSet}).on({start:s.onStart,render:s.onRender,stop:s.onStop,open:s.onOpen,close:s.onClose,set:s.onSet}),q=c(w.$root.children()[0]),f.autofocus&&w.open(),w.trigger("start").trigger("render"))},render:function(a){return a?w.$root.html(l()):w.$root.find("."+t.box).html(w.component.nodes(r.open)),w.trigger("render")},stop:function(){return r.start?(w.close(),w._hidden&&w._hidden.parentNode.removeChild(w._hidden),w.$root.remove(),u.removeClass(t.input).removeData(g),setTimeout(function(){u.off("."+r.id)},0),f.type=r.type,f.readOnly=!1,w.trigger("stop"),r.methods={},r.start=!1,w):w},open:function(c){return r.open?w:(u.addClass(t.active),e(f,"expanded",!0),setTimeout(function(){w.$root.addClass(t.opened),e(w.$root[0],"hidden",!1)},0),c!==!1&&(r.open=!0,q&&j.css("overflow","hidden").css("padding-right","+="+d()),u.trigger("focus"),i.on("click."+r.id+" focusin."+r.id,function(a){var b=a.target;b!=f&&b!=document&&3!=a.which&&w.close(b===w.$root.children()[0])}).on("keydown."+r.id,function(c){var d=c.keyCode,e=w.component.key[d],g=c.target;27==d?w.close(!0):g!=f||!e&&13!=d?a.contains(w.$root[0],g)&&13==d&&(c.preventDefault(),g.click()):(c.preventDefault(),e?b._.trigger(w.component.key.go,w,[b._.trigger(e)]):w.$root.find("."+t.highlighted).hasClass(t.disabled)||w.set("select",w.component.item.highlight).close())})),w.trigger("open"))},close:function(a){return a&&(u.off("focus."+r.id).trigger("focus"),setTimeout(function(){u.on("focus."+r.id,p)},0)),u.removeClass(t.active),e(f,"expanded",!1),setTimeout(function(){w.$root.removeClass(t.opened+" "+t.focused),e(w.$root[0],"hidden",!0)},0),r.open?(r.open=!1,q&&j.css("overflow","").css("padding-right","-="+d()),i.off("."+r.id),w.trigger("close")):w},clear:function(a){return w.set("clear",null,a)},set:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(d=g&&a.isPlainObject(c)?c:d||{},b){g||(h[b]=c);for(e in h)f=h[e],e in w.component.item&&(void 0===f&&(f=null),w.component.set(e,f,d)),("select"==e||"clear"==e)&&u.val("clear"==e?"":w.get(e,s.format)).trigger("change");w.render()}return d.muted?w:w.trigger("set",h)},get:function(a,c){if(a=a||"value",null!=r[a])return r[a];if("value"==a)return f.value;if(a in w.component.item){if("string"==typeof c){var d=w.component.get(a);return d?b._.trigger(w.component.formats.toString,w.component,[c,d]):""}return w.component.get(a)}},on:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(b){g||(h[b]=c);for(e in h)f=h[e],d&&(e="_"+e),r.methods[e]=r.methods[e]||[],r.methods[e].push(f)}return w},off:function(){var a,b,c=arguments;for(a=0,namesCount=c.length;namesCount>a;a+=1)b=c[a],b in r.methods&&delete r.methods[b];return w},trigger:function(a,c){var d=function(a){var d=r.methods[a];d&&d.map(function(a){b._.trigger(a,w,[c])})};return d("_"+a),d(a),w}};return new v}function c(a){var b,c="position";return a.currentStyle?b=a.currentStyle[c]:window.getComputedStyle&&(b=getComputedStyle(a)[c]),"fixed"==b}function d(){if(j.height()<=h.height())return 0;var b=a('
').appendTo("body"),c=b[0].offsetWidth;b.css("overflow","scroll");var d=a('
').appendTo(b),e=d[0].offsetWidth;return b.remove(),c-e}function e(b,c,d){if(a.isPlainObject(c))for(var e in c)f(b,e,c[e]);else f(b,c,d)}function f(a,b,c){a.setAttribute(("role"==b?"":"aria-")+b,c)}function g(b,c){a.isPlainObject(b)||(b={attribute:c}),c="";for(var d in b){var e=("role"==d?"":"aria-")+d,f=b[d];c+=null==f?"":e+'="'+b[d]+'"'}return c}var h=a(window),i=a(document),j=a(document.documentElement);return b.klasses=function(a){return a=a||"picker",{picker:a,opened:a+"--opened",focused:a+"--focused",input:a+"__input",active:a+"__input--active",holder:a+"__holder",frame:a+"__frame",wrap:a+"__wrap",box:a+"__box"}},b._={group:function(a){for(var c,d="",e=b._.trigger(a.min,a);e<=b._.trigger(a.max,a,[e]);e+=a.i)c=b._.trigger(a.item,a,[e]),d+=b._.node(a.node,c[0],c[1],c[2]);return d},node:function(b,c,d,e){return c?(c=a.isArray(c)?c.join(""):c,d=d?' class="'+d+'"':"",e=e?" "+e:"","<"+b+d+e+">"+c+""+b+">"):""},lead:function(a){return(10>a?"0":"")+a},trigger:function(a,b,c){return"function"==typeof a?a.apply(b,c||[]):a},digits:function(a){return/\d/.test(a[1])?2:1},isDate:function(a){return{}.toString.call(a).indexOf("Date")>-1&&this.isInteger(a.getUTCDate())},isInteger:function(a){return{}.toString.call(a).indexOf("Number")>-1&&a%1===0},ariaAttr:g},b.extend=function(c,d){a.fn[c]=function(e,f){var g=this.data(c);return"picker"==e?g:g&&"string"==typeof e?b._.trigger(g[e],g,[f]):this.each(function(){var f=a(this);f.data(c)||new b(this,c,d,e)})},a.fn[c].defaults=d.defaults},b}),function(a){"function"==typeof define&&define.amd?define(["picker","jquery"],a):"object"==typeof exports?module.exports=a(require("./picker.js"),require("jquery")):a(Picker,jQuery)}(function(a,b){function c(a,b){var c=this,d=a.$node[0],e=d.value,f=a.$node.data("value"),g=f||e,h=f?b.formatSubmit:b.format,i=function(){return d.currentStyle?"rtl"==d.currentStyle.direction:"rtl"==getComputedStyle(a.$root[0]).direction};c.settings=b,c.$node=a.$node,c.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},c.item={},c.item.clear=null,c.item.disable=(b.disable||[]).slice(0),c.item.enable=-function(a){return a[0]===!0?a.shift():-1}(c.item.disable),c.set("min",b.min).set("max",b.max).set("now"),g?c.set("select",g,{format:h}):c.set("select",null).set("highlight",c.item.now),c.key={40:7,38:-7,39:function(){return i()?-1:1},37:function(){return i()?1:-1},go:function(a){var b=c.item.highlight,d=new Date(Date.UTC(b.year,b.month,b.date+a));c.set("highlight",d,{interval:a}),this.render()}},a.on("render",function(){a.$root.find("."+b.klass.selectMonth).on("change",function(){var c=this.value;c&&(a.set("highlight",[a.get("view").year,c,a.get("highlight").date]),a.$root.find("."+b.klass.selectMonth).trigger("focus"))}),a.$root.find("."+b.klass.selectYear).on("change",function(){var c=this.value;c&&(a.set("highlight",[c,a.get("view").month,a.get("highlight").date]),a.$root.find("."+b.klass.selectYear).trigger("focus"))})},1).on("open",function(){var d="";c.disabled(c.get("now"))&&(d=":not(."+b.klass.buttonToday+")"),a.$root.find("button"+d+", select").attr("disabled",!1)},1).on("close",function(){a.$root.find("button, select").attr("disabled",!0)},1)}var d=7,e=6,f=a._;c.prototype.set=function(a,b,c){var d=this,e=d.item;return null===b?("clear"==a&&(a="select"),e[a]=b,d):(e["enable"==a?"disable":"flip"==a?"enable":a]=d.queue[a].split(" ").map(function(e){return b=d[e](a,b,c)}).pop(),"select"==a?d.set("highlight",e.select,c):"highlight"==a?d.set("view",e.highlight,c):a.match(/^(flip|min|max|disable|enable)$/)&&(e.select&&d.disabled(e.select)&&d.set("select",e.select,c),e.highlight&&d.disabled(e.highlight)&&d.set("highlight",e.highlight,c)),d)},c.prototype.get=function(a){return this.item[a]},c.prototype.create=function(a,c,d){var e,g=this;return c=void 0===c?a:c,c==-1/0||1/0==c?e=c:b.isPlainObject(c)&&f.isInteger(c.pick)?c=c.obj:b.isArray(c)?(c=new Date(Date.UTC(c[0],c[1],c[2])),c=f.isDate(c)?c:g.create().obj):c=f.isInteger(c)?g.normalize(new Date(c),d):f.isDate(c)?g.normalize(c,d):g.now(a,c,d),{year:e||c.getUTCFullYear(),month:e||c.getUTCMonth(),date:e||c.getUTCDate(),day:e||c.getUTCDay(),obj:e||c,pick:e||c.getTime()}},c.prototype.createRange=function(a,c){var d=this,e=function(a){return a===!0||b.isArray(a)||f.isDate(a)?d.create(a):a};return f.isInteger(a)||(a=e(a)),f.isInteger(c)||(c=e(c)),f.isInteger(a)&&b.isPlainObject(c)?a=[c.year,c.month,c.date+a]:f.isInteger(c)&&b.isPlainObject(a)&&(c=[a.year,a.month,a.date+c]),{from:e(a),to:e(c)}},c.prototype.withinRange=function(a,b){return a=this.createRange(a.from,a.to),b.pick>=a.from.pick&&b.pick<=a.to.pick},c.prototype.overlapRanges=function(a,b){var c=this;return a=c.createRange(a.from,a.to),b=c.createRange(b.from,b.to),c.withinRange(a,b.from)||c.withinRange(a,b.to)||c.withinRange(b,a.from)||c.withinRange(b,a.to)},c.prototype.now=function(a,b,c){return b=new Date,c&&c.rel&&b.setUTCDate(b.getUTCDate()+c.rel),this.normalize(b,c)},c.prototype.navigate=function(a,c,d){var e,f,g,h,i=b.isArray(c),j=b.isPlainObject(c),k=this.item.view;if(i||j){for(j?(f=c.year,g=c.month,h=c.date):(f=+c[0],g=+c[1],h=+c[2]),d&&d.nav&&k&&k.month!==g&&(f=k.year,g=k.month),e=new Date(Date.UTC(f,g+(d&&d.nav?d.nav:0),1)),f=e.getUTCFullYear(),g=e.getUTCMonth();new Date(Date.UTC(f,g,h)).getUTCMonth()!==g;)h-=1;c=[f,g,h]}return c},c.prototype.normalize=function(a){return a.setUTCHours(0,0,0,0),a},c.prototype.measure=function(a,b){var c=this;return b?"string"==typeof b?b=c.parse(a,b):f.isInteger(b)&&(b=c.now(a,b,{rel:b})):b="min"==a?-1/0:1/0,b},c.prototype.viewset=function(a,b){return this.create([b.year,b.month,1])},c.prototype.validate=function(a,c,d){var e,g,h,i,j=this,k=c,l=d&&d.interval?d.interval:1,m=-1===j.item.enable,n=j.item.min,o=j.item.max,p=m&&j.item.disable.filter(function(a){if(b.isArray(a)){var d=j.create(a).pick;dc.pick&&(g=!0)}return f.isInteger(a)}).length;if((!d||!d.nav)&&(!m&&j.disabled(c)||m&&j.disabled(c)&&(p||e||g)||!m&&(c.pick<=n.pick||c.pick>=o.pick)))for(m&&!p&&(!g&&l>0||!e&&0>l)&&(l*=-1);j.disabled(c)&&(Math.abs(l)>1&&(c.monthk.month)&&(c=k,l=l>0?1:-1),c.pick<=n.pick?(h=!0,l=1,c=j.create([n.year,n.month,n.date+(c.pick===n.pick?0:-1)])):c.pick>=o.pick&&(i=!0,l=-1,c=j.create([o.year,o.month,o.date+(c.pick===o.pick?0:1)])),!h||!i);)c=j.create([c.year,c.month,c.date+l]);return c},c.prototype.disabled=function(a){var c=this,d=c.item.disable.filter(function(d){return f.isInteger(d)?a.day===(c.settings.firstDay?d:d-1)%7:b.isArray(d)||f.isDate(d)?a.pick===c.create(d).pick:b.isPlainObject(d)?c.withinRange(d,a):void 0});return d=d.length&&!d.filter(function(a){return b.isArray(a)&&"inverted"==a[3]||b.isPlainObject(a)&&a.inverted}).length,-1===c.item.enable?!d:d||a.pickc.item.max.pick},c.prototype.parse=function(a,b,c){var d=this,e={};return b&&"string"==typeof b?(c&&c.format||(c=c||{},c.format=d.settings.format),d.formats.toArray(c.format).map(function(a){var c=d.formats[a],g=c?f.trigger(c,d,[b,e]):a.replace(/^!/,"").length;c&&(e[a]=b.substr(0,g)),b=b.substr(g)}),[e.yyyy||e.yy,+(e.mm||e.m)-1,e.dd||e.d]):b},c.prototype.formats=function(){function a(a,b,c){var d=a.match(/\w+/)[0];return c.mm||c.m||(c.m=b.indexOf(d)+1),d.length}function b(a){return a.match(/\w+/)[0].length}return{d:function(a,b){return a?f.digits(a):b.date},dd:function(a,b){return a?2:f.lead(b.date)},ddd:function(a,c){return a?b(a):this.settings.weekdaysShort[c.day]},dddd:function(a,c){return a?b(a):this.settings.weekdaysFull[c.day]},m:function(a,b){return a?f.digits(a):b.month+1},mm:function(a,b){return a?2:f.lead(b.month+1)},mmm:function(b,c){var d=this.settings.monthsShort;return b?a(b,d,c):d[c.month]},mmmm:function(b,c){var d=this.settings.monthsFull;return b?a(b,d,c):d[c.month]},yy:function(a,b){return a?2:(""+b.year).slice(2)},yyyy:function(a,b){return a?4:b.year},toArray:function(a){return a.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(a,b){var c=this;return c.formats.toArray(a).map(function(a){return f.trigger(c.formats[a],c,[0,b])||a.replace(/^!/,"")}).join("")}}}(),c.prototype.isDateExact=function(a,c){var d=this;return f.isInteger(a)&&f.isInteger(c)||"boolean"==typeof a&&"boolean"==typeof c?a===c:(f.isDate(a)||b.isArray(a))&&(f.isDate(c)||b.isArray(c))?d.create(a).pick===d.create(c).pick:b.isPlainObject(a)&&b.isPlainObject(c)?d.isDateExact(a.from,c.from)&&d.isDateExact(a.to,c.to):!1},c.prototype.isDateOverlap=function(a,c){var d=this,e=d.settings.firstDay?1:0;return f.isInteger(a)&&(f.isDate(c)||b.isArray(c))?(a=a%7+e,a===d.create(c).day+1):f.isInteger(c)&&(f.isDate(a)||b.isArray(a))?(c=c%7+e,c===d.create(a).day+1):b.isPlainObject(a)&&b.isPlainObject(c)?d.overlapRanges(a,c):!1},c.prototype.flipEnable=function(a){var b=this.item;b.enable=a||(-1==b.enable?1:-1)},c.prototype.deactivate=function(a,c){var d=this,e=d.item.disable.slice(0);return"flip"==c?d.flipEnable():c===!1?(d.flipEnable(1),e=[]):c===!0?(d.flipEnable(-1),e=[]):c.map(function(a){for(var c,g=0;gi;i+=1){if(h=e[i],d.isDateExact(h,a)){c=e[i]=null,j=!0;break}if(d.isDateOverlap(h,a)){b.isPlainObject(a)?(a.inverted=!0,c=a):b.isArray(a)?(c=a,c[3]||c.push("inverted")):f.isDate(a)&&(c=[a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),"inverted"]);break}}if(c)for(i=0;g>i;i+=1)if(d.isDateExact(e[i],a)){e[i]=null;break}if(j)for(i=0;g>i;i+=1)if(d.isDateOverlap(e[i],a)){e[i]=null;break}c&&e.push(c)}),e.filter(function(a){return null!=a})},c.prototype.nodes=function(a){var b=this,c=b.settings,g=b.item,h=g.now,i=g.select,j=g.highlight,k=g.view,l=g.disable,m=g.min,n=g.max,o=function(a,b){return c.firstDay&&(a.push(a.shift()),b.push(b.shift())),f.node("thead",f.node("tr",f.group({min:0,max:d-1,i:1,node:"th",item:function(d){return[a[d],c.klass.weekdays,'scope=col title="'+b[d]+'"']}})))}((c.showWeekdaysFull?c.weekdaysFull:c.weekdaysShort).slice(0),c.weekdaysFull.slice(0)),p=function(a){return f.node("div"," ",c.klass["nav"+(a?"Next":"Prev")]+(a&&k.year>=n.year&&k.month>=n.month||!a&&k.year<=m.year&&k.month<=m.month?" "+c.klass.navDisabled:""),"data-nav="+(a||-1)+" "+f.ariaAttr({role:"button",components:b.$node[0].id+"_table"})+' title="'+(a?c.labelMonthNext:c.labelMonthPrev)+'"')},q=function(){var d=c.showMonthsShort?c.monthsShort:c.monthsFull;return c.selectMonths?f.node("select",f.group({min:0,max:11,i:1,node:"option",item:function(a){return[d[a],0,"value="+a+(k.month==a?" selected":"")+(k.year==m.year&&an.month?" disabled":"")]}}),c.klass.selectMonth,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelMonthSelect+'"'):f.node("div",d[k.month],c.klass.month)},r=function(){var d=k.year,e=c.selectYears===!0?5:~~(c.selectYears/2);if(e){var g=m.year,h=n.year,i=d-e,j=d+e;if(g>i&&(j+=g-i,i=g),j>h){var l=i-g,o=j-h;i-=l>o?o:l,j=h}return f.node("select",f.group({min:i,max:j,i:1,node:"option",item:function(a){return[a,0,"value="+a+(d==a?" selected":"")]}}),c.klass.selectYear,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelYearSelect+'"')}return f.node("div",d,c.klass.year)};return f.node("div",(c.selectYears?r()+q():q()+r())+p()+p(1),c.klass.header)+f.node("table",o+f.node("tbody",f.group({min:0,max:e-1,i:1,node:"tr",item:function(a){var e=c.firstDay&&0===b.create([k.year,k.month,1]).day?-7:0;return[f.group({min:d*a-k.day+e+1,max:function(){return this.min+d-1},i:1,node:"td",item:function(a){a=b.create([k.year,k.month,a+(c.firstDay?1:0)]);var d=i&&i.pick==a.pick,e=j&&j.pick==a.pick,g=l&&b.disabled(a)||a.pickn.pick;return[f.node("div",a.date,function(b){return b.push(k.month==a.month?c.klass.infocus:c.klass.outfocus),h.pick==a.pick&&b.push(c.klass.now),d&&b.push(c.klass.selected),e&&b.push(c.klass.highlighted),g&&b.push(c.klass.disabled),b.join(" ")}([c.klass.day]),"data-pick="+a.pick+" "+f.ariaAttr({role:"gridcell",selected:d&&b.$node.val()===f.trigger(b.formats.toString,b,[c.format,a])?!0:null,activedescendant:e?!0:null,disabled:g?!0:null})),"",f.ariaAttr({role:"presentation"})]}})]}})),c.klass.table,'id="'+b.$node[0].id+'_table" '+f.ariaAttr({role:"grid",components:b.$node[0].id,readonly:!0}))+f.node("div",f.node("button",c.today,c.klass.buttonToday,"type=button data-pick="+h.pick+(a&&!b.disabled(h)?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.clear,c.klass.buttonClear,"type=button data-clear=1"+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.close,c.klass.buttonClose,"type=button data-close=true "+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id})),c.klass.footer)},c.defaults=function(a){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:a+"table",header:a+"header",navPrev:a+"nav--prev",navNext:a+"nav--next",navDisabled:a+"nav--disabled",month:a+"month",year:a+"year",selectMonth:a+"select--month",selectYear:a+"select--year",weekdays:a+"weekday",day:a+"day",disabled:a+"day--disabled",selected:a+"day--selected",highlighted:a+"day--highlighted",now:a+"day--today",infocus:a+"day--infocus",outfocus:a+"day--outfocus",footer:a+"footer",buttonClear:a+"button--clear",buttonToday:a+"button--today",buttonClose:a+"button--close"}}}(a.klasses().picker+"__"),a.extend("pickadate",c)});
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Dialog Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Dialog components.
+ *
+ * @param {jQuery Object} One or more .ms-Dialog components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.Dialog = function () {
+
+ /** Iterate through the sample buttons, which can be used to open the Dialogs. */
+ $(".js-DialogAction--open").each(function () {
+ /** Open the associated dialog on click. */
+ $(this).on('click', function () {
+ var target = $(this).data("target");
+ $(target).show();
+ });
+ });
+
+
+ return this.each(function () {
+ var dialog = this;
+
+ /** Have the dialogs hidden for their initial state */
+ $(dialog).hide();
+
+ /** Have the close buttons close the Dialog. */
+ $(dialog).find(".js-DialogAction--close").each(function() {
+ $(this).on('click', function () {
+ $(dialog).hide();
+ });
+ });
+
+ /** Have the action buttons close the Dialog, though you would usually do some specific action per button. */
+ $(dialog).find(".ms-Dialog-action").on('click', function () {
+ $(dialog).hide();
+ });
+
+ });
+ };
+})(jQuery);
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Dropdown Plugin
+ *
+ * Given .ms-Dropdown containers with generic elements inside, this plugin hides the original
+ * dropdown and creates a new "fake" dropdown that can more easily be styled across browsers.
+ *
+ * @param {jQuery Object} One or more .ms-Dropdown containers, each with a dropdown (.ms-Dropdown-select)
+ * @return {jQuery Object} The same containers (allows for chaining)
+ */
+(function ($) {
+ $.fn.Dropdown = function () {
+
+ /** Go through each dropdown we've been given. */
+ return this.each(function () {
+
+ var $dropdownWrapper = $(this),
+ $originalDropdown = $dropdownWrapper.children('.ms-Dropdown-select'),
+ $originalDropdownOptions = $originalDropdown.children('option'),
+ newDropdownTitle = '',
+ newDropdownItems = '',
+ newDropdownSource = '';
+
+ /** Go through the options to fill up newDropdownTitle and newDropdownItems. */
+ $originalDropdownOptions.each(function (index, option) {
+
+ /** If the option is selected, it should be the new dropdown's title. */
+ if (option.selected) {
+ newDropdownTitle = option.text;
+ }
+
+ /** Add this option to the list of items. */
+ newDropdownItems += '' + option.text + ' ';
+
+ });
+
+ /** Insert the replacement dropdown. */
+ newDropdownSource = '' + newDropdownTitle + ' ';
+ $dropdownWrapper.append(newDropdownSource);
+
+ function _openDropdown(evt) {
+ if (!$dropdownWrapper.hasClass('is-disabled')) {
+
+ /** First, let's close any open dropdowns on this page. */
+ $dropdownWrapper.find('.is-open').removeClass('is-open');
+
+ /** Stop the click event from propagating, which would just close the dropdown immediately. */
+ evt.stopPropagation();
+
+ /** Before opening, size the items list to match the dropdown. */
+ var dropdownWidth = $(this).parents(".ms-Dropdown").width();
+ $(this).next(".ms-Dropdown-items").css('width', dropdownWidth + 'px');
+
+ /** Go ahead and open that dropdown. */
+ $dropdownWrapper.toggleClass('is-open');
+ $('.ms-Dropdown').each(function(){
+ if ($(this)[0] !== $dropdownWrapper[0]) {
+ $(this).removeClass('is-open');
+ }
+ });
+
+ /** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */
+ $(document).bind("click.dropdown", function() {
+ $dropdownWrapper.removeClass('is-open');
+ $(document).unbind('click.dropdown');
+ });
+ }
+ }
+
+ /** Toggle open/closed state of the dropdown when clicking its title. */
+ $dropdownWrapper.on('click', '.ms-Dropdown-title', function(event) {
+ _openDropdown(event);
+ });
+
+ /** Keyboard accessibility */
+ $dropdownWrapper.on('keyup', function(event) {
+ var keyCode = event.keyCode || event.which;
+ // Open dropdown on enter or arrow up or arrow down and focus on first option
+ if (!$(this).hasClass('is-open')) {
+ if (keyCode === 13 || keyCode === 38 || keyCode === 40) {
+ _openDropdown(event);
+ if (!$(this).find('.ms-Dropdown-item').hasClass('is-selected')) {
+ $(this).find('.ms-Dropdown-item:first').addClass('is-selected');
+ }
+ }
+ }
+ else if ($(this).hasClass('is-open')) {
+ // Up arrow focuses previous option
+ if (keyCode === 38) {
+ if ($(this).find('.ms-Dropdown-item.is-selected').prev().siblings().size() > 0) {
+ $(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').prev().addClass('is-selected');
+ }
+ }
+ // Down arrow focuses next option
+ if (keyCode === 40) {
+ if ($(this).find('.ms-Dropdown-item.is-selected').next().siblings().size() > 0) {
+ $(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').next().addClass('is-selected');
+ }
+ }
+ // Enter to select item
+ if (keyCode === 13) {
+ if (!$dropdownWrapper.hasClass('is-disabled')) {
+
+ // Item text
+ var selectedItemText = $(this).find('.ms-Dropdown-item.is-selected').text();
+
+ $(this).find('.ms-Dropdown-title').html(selectedItemText);
+
+ /** Update the original dropdown. */
+ $originalDropdown.find("option").each(function(key, value) {
+ if (value.text === selectedItemText) {
+ $(this).prop('selected', true);
+ } else {
+ $(this).prop('selected', false);
+ }
+ });
+ $originalDropdown.change();
+
+ $(this).removeClass('is-open');
+ }
+ }
+ }
+
+ // Close dropdown on esc
+ if (keyCode === 27) {
+ $(this).removeClass('is-open');
+ }
+ });
+
+ /** Select an option from the dropdown. */
+ $dropdownWrapper.on('click', '.ms-Dropdown-item', function () {
+ if (!$dropdownWrapper.hasClass('is-disabled') && !$(this).hasClass('is-disabled')) {
+
+ /** Deselect all items and select this one. */
+ $(this).siblings('.ms-Dropdown-item').removeClass('is-selected');
+ $(this).addClass('is-selected');
+
+ /** Update the replacement dropdown's title. */
+ $(this).parents().siblings('.ms-Dropdown-title').html($(this).text());
+
+ /** Update the original dropdown. */
+ var selectedItemText = $(this).text();
+ $originalDropdown.find("option").each(function(key, value) {
+ if (value.text === selectedItemText) {
+ $(this).prop('selected', true);
+ } else {
+ $(this).prop('selected', false);
+ }
+ });
+ $originalDropdown.change();
+ }
+ });
+
+ });
+ };
+})(jQuery);
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Facepile Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Facepile components.
+ *
+ * @param {jQuery Object} One or more .ms-Facepile components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.Facepile = function () {
+
+ /** Iterate through each Facepile provided. */
+ return this.each(function () {
+ $('.ms-PeoplePicker').PeoplePicker();
+ $('.ms-Panel').Panel();
+
+ var $Facepile = $(this);
+ var $membersList = $(".ms-Facepile-members");
+ var $membersCount = $(".ms-Facepile-members > .ms-Facepile-itemBtn").length;
+ var $panel = $('.ms-Facepile-panel.ms-Panel');
+ var $panelMain = $panel.find(".ms-Panel-main");
+ var $picker = $('.ms-PeoplePicker.ms-PeoplePicker--Facepile');
+ var $pickerMembers = $picker.find('.ms-PeoplePicker-selectedPeople');
+ var $personaCard = $('.ms-Facepile').find('.ms-PersonaCard');
+
+
+ /** Increment member count and show/hide overflow text */
+ var incrementMembers = function() {
+ /** Increment person count by one */
+ $membersCount += 1;
+
+ /** Display a maxiumum of 5 people */
+ $(".ms-Facepile-members").children(":gt(4)").hide();
+
+ /** Display counter after 5 people are present */
+ if ($membersCount > 5) {
+ $(".ms-Facepile-itemBtn--overflow").addClass("is-active");
+
+ var remainingMembers = $membersCount - 5;
+ $(".ms-Facepile-overflowText").text("+" + remainingMembers);
+ }
+ };
+
+ /** Open panel with people picker */
+ $Facepile.on("click", ".js-addPerson", function() {
+ $panelMain.css({display: "block"});
+ $panel.toggleClass("is-open")
+ .addClass("ms-Panel-animateIn")
+ .removeClass('ms-Facepile-panel--overflow ms-Panel--right')
+ .addClass('ms-Facepile-panel--addPerson');
+
+ /** Close any open persona cards */
+ $personaCard.removeClass('is-active').hide();
+ });
+
+ $panel.on("click", ".js-togglePanel", function() {
+ $panel.toggleClass("is-open")
+ .addClass("ms-Panel-animateIn");
+ });
+
+ /** Open oveflow panel with list of members */
+ $Facepile.on("click", ".js-overflowPanel", function() {
+ $panelMain.css({display: "block"});
+ $panel.toggleClass("is-open")
+ .addClass("ms-Panel-animateIn")
+ .removeClass('ms-Facepile-panel--addPerson')
+ .addClass('ms-Facepile-panel--overflow ms-Panel--right');
+ });
+
+ /** Display person count on page load */
+ $(document).ready(function() {
+ $(".ms-Facepile-overflowText").text("+" + $membersCount);
+ });
+
+ /** Show selected members from PeoplePicker in the Facepile */
+ $('.ms-PeoplePicker-result').on('click', function() {
+ var $this = $(this);
+ var name = $this.find(".ms-Persona-primaryText").html();
+ var title = $this.find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var nameArray = name.split(' ');
+ var nameInitials = '';
+ for (var i = 0; i < nameArray.length; i++) {
+ nameInitials += nameArray[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $this.find('.ms-Persona-initials').attr('class');
+ var selectedImage = (function() {
+ if ($this.find('.ms-Persona-image').length) {
+ var selectedImageSrc = $this.find('.ms-Persona-image').attr('src');
+ return ' ';
+ } else {
+ return '';
+ }
+ })();
+
+ var FacepileItem =
+ '' +
+ '' +
+ '
' +
+ '
' + selectedInitials + '
' +
+ selectedImage +
+ '
' +
+ '
' +
+ '
' +
+ '
' + name + '
' +
+ '
' + title + '
' +
+ '
' +
+ '
' +
+ ' ';
+
+ /** Add new item to members list in Facepile */
+ $membersList.prepend(FacepileItem);
+
+ /** Increment member count */
+ incrementMembers();
+ });
+
+ /** Remove members in panel people picker */
+ $pickerMembers.on('click', '.js-selectedRemove', function() {
+ var memberText = $(this).parent().find('.ms-Persona-primaryText').text();
+
+ var $FacepileMember = $membersList.find(".ms-Persona-primaryText:contains(" + memberText + ")").first();
+
+ if ($FacepileMember) {
+ $FacepileMember.parent().closest('.ms-Facepile-itemBtn').remove();
+
+ $membersCount -= 1;
+
+ /** Display a maxiumum of 5 people */
+ $(".ms-Facepile-members").children(":lt(5)").show();
+
+ /** Display counter after 5 people are present */
+ if ($membersCount <= 5) {
+ $(".ms-Facepile-itemBtn--overflow").removeClass("is-active");
+ } else {
+ var remainingMembers = $membersCount - 5;
+ $(".ms-Facepile-overflowText").text("+" + remainingMembers);
+ }
+ }
+ });
+
+ /** Show persona card when selecting a Facepile item */
+ $membersList.on('click', '.ms-Facepile-itemBtn', function() {
+ var selectedName = $(this).find(".ms-Persona-primaryText").html();
+ var selectedTitle = $(this).find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var name = selectedName.split(' ');
+ var nameInitials = '';
+ for (var i = 0; i < name.length; i++) {
+ nameInitials += name[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $(this).find('.ms-Persona-initials').attr('class');
+ var selectedImage = $(this).find('.ms-Persona-image').attr('src');
+ var $card = $('.ms-PersonaCard');
+ var $cardName = $card.find('.ms-Persona-primaryText');
+ var $cardTitle = $card.find('.ms-Persona-secondaryText');
+ var $cardInitials = $card.find('.ms-Persona-initials');
+ var $cardImage = $card.find('.ms-Persona-image');
+
+ /** Close any open persona cards */
+ $personaCard.removeClass('is-active');
+
+ /** Add data to persona card */
+ $cardName.text(selectedName);
+ $cardTitle.text(selectedTitle);
+ $cardInitials.text(selectedInitials);
+ $cardInitials.removeClass();
+ $cardInitials.addClass(selectedClasses);
+ $cardImage.attr('src', selectedImage);
+
+ /** Show persona card */
+ setTimeout(function() { $personaCard.addClass('is-active'); }, 100);
+
+ /** Align persona card on md and above screens */
+ if ($(window).width() > 480) {
+ var itemPosition = $(this).offset().left;
+ var correctedPosition = itemPosition - 26;
+
+ $personaCard.css({'left': correctedPosition});
+ } else {
+ $personaCard.css({'left': 0, 'top': 'auto', 'position': 'fixed'});
+ }
+ });
+
+ /** Dismiss persona card when clicking on the document */
+ $(document).on('click', function(e) {
+ var $memberBtn = $('.ms-Facepile-itemBtn--member');
+
+ if (!$memberBtn.is(e.target) && $memberBtn.has(e.target).length === 0 && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) {
+ $personaCard.removeClass('is-active');
+ $personaCard.removeAttr('style');
+ } else {
+ $personaCard.addClass('is-active');
+ }
+ });
+
+ });
+ };
+})(jQuery);
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * MessageBanner component
+ *
+ * A component to display error messages
+ *
+ */
+
+/**
+ * @namespace fabric
+ */
+var fabric = fabric || {};
+/**
+ *
+ * @param {HTMLElement} container - the target container for an instance of MessageBanner
+ * @constructor
+ */
+fabric.MessageBanner = function(container) {
+ this.container = container;
+ this.init();
+};
+
+fabric.MessageBanner.prototype = (function() {
+
+ var _clipper;
+ var _bufferSize;
+ var _textContainerMaxWidth = 700;
+ var _clientWidth;
+ var _textWidth;
+ var _initTextWidth;
+ var _chevronButton;
+ var _errorBanner;
+ var _actionButton;
+ var _closeButton;
+ var _bufferElementsWidth = 88;
+ var _bufferElementsWidthSmall = 35;
+ var SMALL_BREAK_POINT = 480;
+
+ /**
+ * sets styles on resize
+ */
+ var _onResize = function() {
+ _clientWidth = _errorBanner.offsetWidth;
+ if(window.innerWidth >= SMALL_BREAK_POINT ) {
+ _resizeRegular();
+ } else {
+ _resizeSmall();
+ }
+ };
+
+ /**
+ * resize above 480 pixel breakpoint
+ */
+ var _resizeRegular = function() {
+ if ((_clientWidth - _bufferSize) > _initTextWidth && _initTextWidth < _textContainerMaxWidth) {
+ _textWidth = "auto";
+ _chevronButton.className = "ms-MessageBanner-expand";
+ _collapse();
+ } else {
+ _textWidth = Math.min((_clientWidth - _bufferSize), _textContainerMaxWidth) + "px";
+ if(_chevronButton.className.indexOf("is-visible") === -1) {
+ _chevronButton.className += " is-visible";
+ }
+ }
+ _clipper.style.width = _textWidth;
+ };
+
+ /**
+ * resize below 480 pixel breakpoint
+ */
+ var _resizeSmall = function() {
+ if (_clientWidth - (_bufferElementsWidthSmall + _closeButton.offsetWidth) > _initTextWidth) {
+ _textWidth = "auto";
+ _collapse();
+ } else {
+ _textWidth = (_clientWidth - (_bufferElementsWidthSmall + _closeButton.offsetWidth)) + "px";
+ }
+ _clipper.style.width = _textWidth;
+ };
+ /**
+ * caches elements and values of the component
+ */
+ var _cacheDOM = function(context) {
+ _errorBanner = context.container;
+ _clipper = context.container.querySelector('.ms-MessageBanner-clipper');
+ _chevronButton = context.container.querySelector('.ms-MessageBanner-expand');
+ _actionButton = context.container.querySelector('.ms-MessageBanner-action');
+ _bufferSize = _actionButton.offsetWidth + _bufferElementsWidth;
+ _closeButton = context.container.querySelector('.ms-MessageBanner-close');
+ };
+
+ /**
+ * expands component to show full error message
+ */
+ var _expand = function() {
+ var icon = _chevronButton.querySelector('.ms-Icon');
+ _errorBanner.className += " is-expanded";
+ icon.className = "ms-Icon ms-Icon--chevronsUp";
+ };
+
+ /**
+ * collapses component to only show truncated message
+ */
+ var _collapse = function() {
+ var icon = _chevronButton.querySelector('.ms-Icon');
+ _errorBanner.className = "ms-MessageBanner";
+ icon.className = "ms-Icon ms-Icon--chevronsDown";
+ };
+
+ var _toggleExpansion = function() {
+ if (_errorBanner.className.indexOf("is-expanded") > -1) {
+ _collapse();
+ } else {
+ _expand();
+ }
+ };
+
+ /**
+ * hides banner when close button is clicked
+ */
+ var _hideBanner = function() {
+ if(_errorBanner.className.indexOf("hide") === -1) {
+ _errorBanner.className += " hide";
+ setTimeout(function() {
+ _errorBanner.className = "ms-MessageBanner is-hidden";
+ }, 500);
+ }
+ };
+
+ /**
+ * shows banner if the banner is hidden
+ */
+ var _showBanner = function() {
+ _errorBanner.className = "ms-MessageBanner";
+ };
+
+ /**
+ * sets handlers for resize and button click events
+ */
+ var _setListeners = function() {
+ window.addEventListener('resize', _onResize, false);
+ _chevronButton.addEventListener("click", _toggleExpansion, false);
+ _closeButton.addEventListener("click", _hideBanner, false);
+ };
+
+ /**
+ * initializes component
+ */
+ var init = function() {
+ _cacheDOM(this);
+ _setListeners();
+ _clientWidth = _errorBanner.offsetWidth;
+ _initTextWidth = _clipper.offsetWidth;
+ _onResize(null);
+ };
+
+ return {
+ init: init,
+ showBanner: _showBanner
+ };
+}());
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * List Item Plugin
+ *
+ * Adds basic demonstration functionality to .ms-ListItem components.
+ *
+ * @param {jQuery Object} One or more .ms-ListItem components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.ListItem = function () {
+
+ /** Go through each panel we've been given. */
+ return this.each(function () {
+
+ var $listItem = $(this);
+
+ /** Detect clicks on selectable list items. */
+ $listItem.on('click', '.js-toggleSelection', function() {
+ $(this).parents('.ms-ListItem').toggleClass('is-selected');
+ });
+
+ });
+
+ };
+})(jQuery);
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Nav Bar Plugin
+ */
+(function ($) {
+ $.fn.NavBar = function () {
+
+ /** Go through each nav bar we've been given. */
+ return this.each(function () {
+
+ var $navBar = $(this);
+
+ // Open the nav bar on mobile.
+ $navBar.on('click', '.js-openMenu', function(event) {
+ event.stopPropagation();
+ $navBar.toggleClass('is-open');
+ });
+
+ // Close the nav bar on mobile.
+ $navBar.click(function() {
+ if ($navBar.hasClass('is-open')) {
+ $navBar.removeClass('is-open');
+ }
+ });
+
+ // Set selected states and open/close menus.
+ $navBar.on('click', '.ms-NavBar-item:not(.is-disabled)', function(event) {
+ var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');
+ event.stopPropagation();
+
+ // Prevent default actions from firing if links are not found.
+ if ($(this).children('.ms-NavBar-link').length === 0) {
+ event.preventDefault();
+ }
+
+ // Deselect all of the items.
+ $(this).siblings('.ms-NavBar-item').removeClass('is-selected');
+
+ // Close and blur the search box if it doesn't have text.
+ if ($searchBox.length > 0 && $searchBox.val().length === 0) {
+ $('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
+ }
+
+ // Does the selected item have a menu?
+ if ($(this).hasClass('ms-NavBar-item--hasMenu')) {
+
+ // First, close any neighboring menus.
+ $(this).siblings('.ms-NavBar-item--hasMenu').children('.ms-ContextualMenu:first').removeClass('is-open');
+
+ // Toggle 'is-open' to open or close it.
+ $(this).children('.ms-ContextualMenu:first').toggleClass('is-open');
+
+ // Toggle 'is-selected' to indicate whether it is active.
+ $(this).toggleClass('is-selected');
+ } else {
+ // Doesn't have a menu, so just select the item.
+ $(this).addClass('is-selected');
+
+ // Close the submenu and any open contextual menus.
+ $navBar.removeClass('is-open').find('.ms-ContextualMenu').removeClass('is-open');
+ }
+
+ // Is this the search box? Open it up and focus on the search field.
+ if ($(this).hasClass('ms-NavBar-item--search')) {
+ $(this).addClass('is-open');
+ $(this).find('.ms-TextField-field').focus();
+
+ // Close any open menus.
+ $navBar.find('.ms-ContextualMenu:first').removeClass('is-open');
+ }
+ });
+
+ // Prevent contextual menus from being hidden when clicking on them.
+ $navBar.on('click', '.ms-NavBar-item .ms-ContextualMenu', function(event) {
+ event.stopPropagation();
+
+ // Collapse the mobile "panel" for nav items.
+ $(this).removeClass('is-open');
+ $navBar.removeClass('is-open').find('.ms-NavBar-item--hasMenu').removeClass('is-selected');
+ });
+
+ // Hide any menus and close the search box when clicking anywhere in the document.
+ $(document).on('click', 'html', function() {
+ var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');
+ $navBar.find('.ms-NavBar-item').removeClass('is-selected').find('.ms-ContextualMenu').removeClass('is-open');
+
+ // Close and blur the search box if it doesn't have text.
+ if ($searchBox.length > 0 && $searchBox.val().length === 0) {
+ $navBar.find('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
+ }
+ });
+ });
+ };
+})(jQuery);
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Panel Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Panel components.
+ *
+ * @param {jQuery Object} One or more .ms-Panel components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.Panel = function () {
+
+ var pfx = ["webkit", "moz", "MS", "o", ""];
+
+ // Prefix function
+ function prefixedEvent(element, type, callback) {
+ for (var p = 0; p < pfx.length; p++) {
+ if (!pfx[p]) { type = type.toLowerCase(); }
+ element.addEventListener(pfx[p]+type, callback, false);
+ }
+ }
+
+ /** Go through each panel we've been given. */
+ return this.each(function () {
+
+ var $panel = $(this);
+ var $panelMain = $panel.find(".ms-Panel-main");
+
+ /** Hook to open the panel. */
+ $(".ms-PanelAction-close").on("click", function() {
+
+ // Display Panel first, to allow animations
+ $panel.addClass("ms-Panel-animateOut");
+
+ });
+
+ $(".ms-PanelAction-open").on("click", function() {
+
+ // Display Panel first, to allow animations
+ $panel.addClass("is-open");
+
+ // Add animation class
+ $panel.addClass("ms-Panel-animateIn");
+
+ });
+
+ prefixedEvent($panelMain[0], 'AnimationEnd', function(event) {
+ if (event.animationName.indexOf('Out') > -1) {
+
+ // Hide and Prevent ms-Panel-main from being interactive
+ $panel.removeClass('is-open');
+
+ // Remove animating classes for the next time we open panel
+ $panel.removeClass('ms-Panel-animateIn ms-Panel-animateOut');
+
+ }
+ });
+
+ // Pivots for sample page to show variant panel sizes
+ $(".panelVariant-item").on("click", function() {
+ var className = $(this).find('span').attr('class');
+
+ $(".panelVariant-item").removeClass('is-selected');
+ $(this).addClass('is-selected');
+
+ switch (className) {
+ case 'is-default':
+ $('.ms-Panel').removeClass().addClass('ms-Panel');
+ break;
+ case 'is-left':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--left');
+ break;
+ case 'is-lightDismiss':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lightDismiss');
+ break;
+ case 'is-md':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--md');
+ break;
+ case 'is-lgFixed':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lg ms-Panel--fixed');
+ break;
+ case 'is-lg':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lg');
+ break;
+ case 'is-xl':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--xl');
+ break;
+ }
+ });
+ });
+
+ };
+})(jQuery);
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+var fabric = fabric || {};
+
+/**
+ * People Picker Plugin
+ *
+ * Adds basic demonstration functionality to .ms-PeoplePicker components.
+ *
+ * @param {jQuery Object} One or more .ms-PeoplePicker components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+
+(function ($) {
+ $.fn.PeoplePicker = function () {
+
+ /** Iterate through each people picker provided. */
+ return this.each(function () {
+
+ var $peoplePicker = $(this);
+ var $searchField = $peoplePicker.find(".ms-PeoplePicker-searchField");
+ var $results = $peoplePicker.find(".ms-PeoplePicker-results");
+ var $selected = $peoplePicker.find('.ms-PeoplePicker-selected');
+ var $selectedPeople = $peoplePicker.find(".ms-PeoplePicker-selectedPeople");
+ var $selectedCount = $peoplePicker.find(".ms-PeoplePicker-selectedCount");
+ var $peopleList = $peoplePicker.find(".ms-PeoplePicker-peopleList");
+ var isActive = false;
+ var spinner;
+ var $personaCard = $('.ms-PeoplePicker').find('.ms-PersonaCard');
+
+ // Run when focused or clicked
+ function peoplePickerActive(event) {
+ /** Scroll the view so that the people picker is at the top. */
+ $('html, body').animate({
+ scrollTop: $peoplePicker.offset().top
+ }, 367);
+
+ /** Start by closing any open people pickers. */
+ if ( $peoplePicker.hasClass('is-active') ) {
+ $peoplePicker.removeClass("is-active");
+ }
+
+ /** Display a maxiumum of 5 people in Facepile variant */
+ if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile') && $searchField.val() === "") {
+ $peopleList.children(":gt(4)").hide();
+ }
+
+ /** Animate results and members in Facepile variant. */
+ if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
+ // $results.addClass('ms-u-slideDownIn20');
+ $selectedPeople.addClass('ms-u-slideDownIn20');
+ setTimeout(function() { $results.removeClass('ms-u-slideDownIn20'); $selectedPeople.removeClass('ms-u-slideDownIn20');}, 1000);
+ }
+
+ isActive = true;
+
+ /** Stop the click event from propagating, which would just close the dropdown immediately. */
+ event.stopPropagation();
+
+ /** Before opening, size the results panel to match the people picker. */
+ if (!$peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
+ $results.width($peoplePicker.width() - 2);
+ }
+
+ /** Show the $results by setting the people picker to active. */
+ $peoplePicker.addClass("is-active");
+
+ /** Temporarily bind an event to the document that will close the people picker when clicking anywhere. */
+ $(document).bind("click.peoplepicker", function() {
+ $peoplePicker.removeClass('is-active');
+ if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
+ $peoplePicker.removeClass('is-searching');
+ $('.ms-PeoplePicker-selected').show();
+ $('.ms-PeoplePicker-searchMore').removeClass('is-active');
+ $searchField.val("");
+ }
+ $(document).unbind('click.peoplepicker');
+ isActive = false;
+ });
+ }
+
+ /** Set to active when focusing on the input. */
+ $peoplePicker.on('focus', '.ms-PeoplePicker-searchField', function(event) {
+ peoplePickerActive(event);
+ });
+
+ /** Set to active when clicking on the input. */
+ $peoplePicker.on('click', '.ms-PeoplePicker-searchField', function(event) {
+ peoplePickerActive(event);
+ });
+
+ /** Keep the people picker active when clicking within it. */
+ $(this).click(function (event) {
+ event.stopPropagation();
+ });
+
+ /** Add the selected person to the text field or selected list and close the people picker. */
+ $results.on('click', '.ms-PeoplePicker-result', function () {
+ var $this = $(this);
+ var selectedName = $this.find(".ms-Persona-primaryText").html();
+ var selectedTitle = $this.find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var name = selectedName.split(' ');
+ var nameInitials = '';
+
+ for (var i = 0; i < name.length; i++) {
+ nameInitials += name[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $this.find('.ms-Persona-initials').attr('class');
+ var selectedImage = (function() {
+ if ($this.find('.ms-Persona-image').length) {
+ var selectedImageSrc = $this.find('.ms-Persona-image').attr('src');
+ return ' ';
+ } else {
+ return '';
+ }
+ })();
+
+ /** Token html */
+ var personaHTML = '' +
+ '
' +
+ '
' +
+ '
' + selectedInitials + '
' +
+ selectedImage +
+ '
' +
+ '
' +
+ '
' +
+ '
' + selectedName + '
' +
+ '
' +
+ '
' +
+ '
' +
+ ' ' +
+ ' ' +
+ '
';
+ /** List item html */
+ var personaListItem = '' +
+ '' +
+ '
' +
+ '
' + selectedInitials + '
' +
+ selectedImage +
+ '
' +
+ '
' +
+ '
' +
+ '
' + selectedName + '
' +
+ '
' + selectedTitle + '
' +
+ '
' +
+ '
' +
+ ' ' +
+ ' ';
+ /** Tokenize selected persona if not Facepile or memberslist variants */
+ if (!$peoplePicker.hasClass('ms-PeoplePicker--Facepile') && !$peoplePicker.hasClass('ms-PeoplePicker--membersList') ) {
+ $searchField.before(personaHTML);
+ $peoplePicker.removeClass("is-active");
+ resizeSearchField($peoplePicker);
+ }
+ /** Add selected persona to a list if Facepile or memberslist variants */
+ else {
+ if (!$selected.hasClass('is-active')) {
+ $selected.addClass('is-active');
+ }
+ /** Prepend persona list item html to selected people list */
+ $selectedPeople.prepend(personaListItem);
+ /** Close the picker */
+ $peoplePicker.removeClass("is-active");
+ /** Get the total amount of selected personas and display that number */
+ var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length;
+ $selectedCount.html(count);
+ /** Return picker back to default state:
+ - Show only the first five results in the people list for when the picker is reopened
+ - Make searchMore inactive
+ - Clear any search field text
+ */
+ $peopleList.children().show();
+ $peopleList.children(":gt(4)").hide();
+
+ $('.ms-PeoplePicker-searchMore').removeClass('is-active');
+ $searchField.val("");
+ }
+ });
+
+ /** Remove the persona when clicking the personaRemove button. */
+ $peoplePicker.on('click', '.ms-PeoplePicker-personaRemove', function() {
+ $(this).parents('.ms-PeoplePicker-persona').remove();
+
+ /** Make the search field 100% width if all personas have been removed */
+ if ( $('.ms-PeoplePicker-persona').length === 0 ) {
+ $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth('100%');
+ } else {
+ resizeSearchField($peoplePicker);
+ }
+ });
+
+ /** Trigger additional searching when clicking the search more area. */
+ $results.on('click', '.js-searchMore', function() {
+ var $searchMore = $(this);
+ var primaryLabel = $searchMore.find(".ms-PeoplePicker-searchMorePrimary");
+ var originalPrimaryLabelText = primaryLabel.html();
+ var searchFieldText = $searchField.val();
+
+ /** Change to searching state. */
+ $searchMore.addClass("is-searching");
+ primaryLabel.html("Searching for " + searchFieldText);
+
+ /** Attach Spinner */
+ if (!spinner) {
+ spinner = new fabric.Spinner($searchMore.get(0));
+ } else {
+ spinner.start();
+ }
+
+ /** Show all results in Facepile variant */
+ if($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
+ setTimeout(function() {$peopleList.children().show();}, 1500);
+ }
+
+ /** Return the original state. */
+ setTimeout(function() {
+ $searchMore.removeClass("is-searching");
+ primaryLabel.html(originalPrimaryLabelText);
+ spinner.stop();
+ }, 1500);
+ });
+
+ /** Remove a result using the action icon. */
+ $results.on('click', '.js-resultRemove', function(event) {
+ event.stopPropagation();
+ $(this).parent(".ms-PeoplePicker-result").remove();
+ });
+
+ /** Expand a result if more details are available. */
+ $results.on('click', '.js-resultExpand', function(event) {
+ event.stopPropagation();
+ $(this).parent(".ms-PeoplePicker-result").toggleClass("is-expanded");
+ });
+
+ /** Remove a selected person using the action icon. */
+ $selectedPeople.on('click', '.js-selectedRemove', function(event) {
+ event.stopPropagation();
+ $(this).parent(".ms-PeoplePicker-selectedPerson").remove();
+ var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length;
+ $selectedCount.html(count);
+ if ($peoplePicker.find('.ms-PeoplePicker-selectedPerson').length === 0) {
+ $selected.removeClass('is-active');
+ }
+ });
+
+ var filterResults = function(results, currentSuggestion, currentValueExists) {
+ return results.find('.ms-Persona-primaryText').filter(function() {
+ if (currentValueExists) {
+ return $(this).text().toLowerCase() === currentSuggestion;
+ } else {
+ return $(this).text().toLowerCase() !== currentSuggestion;
+ }
+ }).parents('.ms-PeoplePicker-peopleListItem');
+ };
+
+ /** Search people picker items */
+ $peoplePicker.on('keyup', '.ms-PeoplePicker-searchField', function(evt) {
+ var suggested = [];
+ var newSuggestions = [];
+ var $pickerResult = $results.find('.ms-Persona-primaryText');
+
+ $peoplePicker.addClass('is-searching');
+
+ /** Hide members */
+ $selected.hide();
+
+ /** Show 5 results */
+ $peopleList.children(":lt(5)").show();
+
+ /** Show searchMore button */
+ $('.ms-PeoplePicker-searchMore').addClass('is-active');
+
+ /** Get array of suggested people */
+ $pickerResult.each(function() { suggested.push($(this).text()); });
+
+ /** Iterate over array to find matches and show matching items */
+ for (var i = 0; i < suggested.length; i++) {
+ var currentPersona = suggested[i].toLowerCase();
+ var currentValue = evt.target.value.toLowerCase();
+ var currentSuggestion;
+
+ if (currentPersona.indexOf(currentValue) > -1) {
+ currentSuggestion = suggested[i].toLowerCase();
+
+ newSuggestions.push(suggested[i]);
+
+ filterResults($results, currentSuggestion, true).show();
+ } else {
+ filterResults($results, currentSuggestion, false).hide();
+ }
+ }
+
+ /** Show members and hide searchmore when field is empty */
+ if ($(this).val() === "") {
+ $peoplePicker.removeClass('is-searching');
+ $selected.show();
+ $('.ms-PeoplePicker-searchMore').removeClass('is-active');
+ $selectedPeople.addClass('ms-u-slideDownIn20');
+ setTimeout(function() { $selectedPeople.removeClass('ms-u-slideDownIn20');}, 1000);
+ $peopleList.children(":gt(4)").hide();
+ }
+ });
+
+ /** Show persona card when clicking a persona in the members list */
+ $selectedPeople.on('click', '.ms-Persona', function() {
+ var selectedName = $(this).find(".ms-Persona-primaryText").html();
+ var selectedTitle = $(this).find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var name = selectedName.split(' ');
+ var nameInitials = '';
+
+ for (var i = 0; i < name.length; i++) {
+ nameInitials += name[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $(this).find('.ms-Persona-initials').attr('class');
+ var selectedImage = $(this).find('.ms-Persona-image').attr('src');
+ var $card = $('.ms-PersonaCard');
+ var $cardName = $card.find('.ms-Persona-primaryText');
+ var $cardTitle = $card.find('.ms-Persona-secondaryText');
+ var $cardInitials = $card.find('.ms-Persona-initials');
+ var $cardImage = $card.find('.ms-Persona-image');
+
+ /** Close any open persona cards */
+ $personaCard.removeClass('is-active');
+
+ /** Add data to persona card */
+ $cardName.text(selectedName);
+ $cardTitle.text(selectedTitle);
+ $cardInitials.text(selectedInitials);
+ $cardInitials.removeClass();
+ $cardInitials.addClass(selectedClasses);
+ $cardImage.attr('src', selectedImage);
+
+ /** Show persona card */
+ setTimeout(function() {
+ $personaCard.addClass('is-active');
+ setTimeout(function(){$personaCard.css({'animation-name': 'none'});}, 300);
+ }, 100);
+
+ /** Align persona card on md and above screens */
+ if ($(window).width() > 480) {
+ var itemPositionTop = $(this).offset().top;
+ var correctedPositionTop = itemPositionTop + 10;
+
+ $personaCard.css({'top': correctedPositionTop, 'left': 0});
+ } else {
+ $personaCard.css({'top': 'auto'});
+ }
+ });
+
+ /** Dismiss persona card when clicking on the document */
+ $(document).on('click', function(e) {
+ var $memberBtn = $('.ms-PeoplePicker-selectedPerson').find('.ms-Persona');
+
+ if (!$memberBtn.is(e.target) && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) {
+ $personaCard.removeClass('is-active');
+ setTimeout(function(){$personaCard.removeAttr('style');}, 300);
+ } else {
+ $personaCard.addClass('is-active');
+ }
+ });
+ });
+ };
+
+ /** Resize the search field to match the search box */
+ function resizeSearchField($peoplePicker) {
+ var $searchBox = $peoplePicker.find('.ms-PeoplePicker-searchBox');
+
+ // Where is the right edge of the search box?
+ var searchBoxLeftEdge = $searchBox.position().left;
+ var searchBoxWidth = $searchBox.outerWidth();
+ var searchBoxRightEdge = searchBoxLeftEdge + searchBoxWidth;
+
+ // Where is the right edge of the last persona component?
+ var $lastPersona = $searchBox.find('.ms-PeoplePicker-persona:last');
+ var lastPersonaLeftEdge = $lastPersona.offset().left;
+ var lastPersonaWidth = $lastPersona.outerWidth();
+ var lastPersonaRightEdge = lastPersonaLeftEdge + lastPersonaWidth;
+
+ // Adjust the width of the field to fit the remaining space.
+ var newFieldWidth = searchBoxRightEdge - lastPersonaRightEdge - 7;
+
+ // Don't let the field get too tiny.
+ if (newFieldWidth < 100) {
+ newFieldWidth = "100%";
+ }
+
+ // Set the width of the search field
+ $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth(newFieldWidth);
+ }
+})(jQuery);
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Persona Card Plugin
+ *
+ * Adds basic demonstration functionality to .ms-PersonaCard components.
+ *
+ * @param {jQuery Object} One or more .ms-PersonaCard components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.PersonaCard = function () {
+
+ /** Go through each file picker we've been given. */
+ return this.each(function () {
+
+ var $personaCard = $(this);
+
+ /** When selecting an action, show its details. */
+ $personaCard.on('click', '.ms-PersonaCard-action', function() {
+
+ /** Select the correct tab. */
+ $personaCard.find('.ms-PersonaCard-action').removeClass('is-active');
+ $(this).addClass('is-active');
+
+ /** Function for switching selected item into view by adding a class to ul. */
+ var updateForItem = function(wrapper, item) {
+ var previousItem = wrapper.className + "";
+ var detail = item.charAt(0).toUpperCase() + item.slice(1);
+ var nextItem = "ms-PersonaCard-detail" + detail;
+ if (previousItem !== nextItem){
+ wrapper.classList.remove(previousItem);
+ wrapper.classList.add(nextItem);
+ }
+ };
+
+ /** Get id of selected item */
+ var el = $(this).attr('id');
+ /** Add detail class to ul to switch it into view. */
+ updateForItem($(this).parent().next().find('#detailList')[0], el);
+
+ /** Display the corresponding details. */
+ var requestedAction = $(this).attr('id');
+ $personaCard.find('.ms-PersonaCard-actionDetails').removeClass('is-active');
+ $personaCard.find('#' + requestedAction + '.ms-PersonaCard-actionDetails').addClass('is-active');
+
+ });
+
+ /** Toggle more details. */
+ $personaCard.on('click', '.ms-PersonaCard-detailExpander', function() {
+ $(this).parent('.ms-PersonaCard-actionDetails').toggleClass('is-collapsed');
+ });
+
+ });
+
+ };
+})(jQuery);
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * ProgressIndicator component
+ *
+ * A component for outputting determinate progress
+ *
+ */
+
+/**
+ * @namespace fabric
+ */
+var fabric = fabric || {};
+/**
+ *
+ * @param {HTMLDivElement} container - the target container for an instance of ProgressIndicator
+ * @constructor
+ */
+fabric.ProgressIndicator = function(container) {
+ this.container = container;
+ this.cacheDOM();
+};
+
+fabric.ProgressIndicator.prototype = (function() {
+
+ var _progress;
+ var _width;
+ var _itemName;
+ var _total;
+ var _itemDescription;
+ var _progressBar;
+
+ /**
+ * Sets the progress percentage for a determinate
+ * operation. Either use this or setProgress
+ * and setTotal as setProgressPercent assumes
+ * you've done a percentage calculation before
+ * injecting it into the function
+ * @param {number} percent - a floating point number from 0 to 1
+ */
+ var setProgressPercent = function(percent) {
+ _progressBar.style.width = Math.round(_width * percent) + "px";
+ };
+
+ /**
+ * Sets the progress for a determinate operation.
+ * Use this in combination with setTotal.
+ * @param {number} progress
+ */
+ var setProgress = function(progress) {
+ _progress = progress;
+ var percentage = _progress / _total;
+ this.setProgressPercent(percentage);
+ };
+
+ /**
+ * Sets the total file size, etc. for a
+ * determinate operation. Use this in
+ * combination with setProgress
+ * @param {number} total
+ */
+ var setTotal = function(total) {
+ _total = total;
+ };
+
+ /**
+ * Sets the text for the title or label
+ * of an instance
+ * @param {string} name
+ */
+ var setName = function(name) {
+ _itemName.innerHTML = name;
+ };
+
+ /**
+ * Sets the text for a description
+ * of an instance
+ * @param {string} name
+ */
+ var setDescription = function(description) {
+ _itemDescription.innerHTML = description;
+ };
+
+ /**
+ * caches elements and values of the component
+ *
+ */
+ var cacheDOM = function() {
+ _itemName = this.container.querySelector('.ms-ProgressIndicator-itemName') || null; //an itemName element is optional
+ _itemDescription = this.container.querySelector('.ms-ProgressIndicator-itemDescription') || null; //an itemDescription element is optional
+ _progressBar = this.container.querySelector('.ms-ProgressIndicator-progressBar');
+ _width = this.container.querySelector('.ms-ProgressIndicator-itemProgress').offsetWidth;
+ };
+
+ return {
+ setProgressPercent: setProgressPercent,
+ setName: setName,
+ setDescription: setDescription,
+ setProgress: setProgress,
+ setTotal: setTotal,
+ cacheDOM: cacheDOM
+ };
+}());
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Pivot Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Pivot components.
+ *
+ * @param {jQuery Object} One or more .ms-Pivot components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.Pivot = function () {
+
+ /** Go through each pivot we've been given. */
+ return this.each(function () {
+
+ var $pivotContainer = $(this);
+
+ /** When clicking/tapping a link, select it. */
+ $pivotContainer.on('click', '.ms-Pivot-link', function(event) {
+ event.preventDefault();
+ /** Check if current selection has elipses child element **/
+ var $elipsisCheck = $(this).find('.ms-Pivot-ellipsis');
+
+ /** Only execute when no elipses element can be found **/
+ if($elipsisCheck.length === 0){
+
+ $(this).siblings('.ms-Pivot-link').removeClass('is-selected');
+ $(this).addClass('is-selected');
+ }
+
+ });
+
+ });
+
+ };
+})(jQuery);
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * SearchBox Plugin
+ *
+ * Adds basic demonstration functionality to .ms-SearchBox components.
+ *
+ * @param {jQuery Object} One or more .ms-SearchBox components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.SearchBox = function () {
+
+ /** Iterate through each text field provided. */
+ return this.each(function () {
+ // Set cancel to false
+ var cancel = false;
+ var $searchField = $(this).find('.ms-SearchBox-field');
+
+ /** SearchBox focus - hide label and show cancel button */
+ $searchField.on('focus', function() {
+ /** Hide the label on focus. */
+ $(this).siblings('.ms-SearchBox-label').hide();
+ // Show cancel button by adding is-active class
+ $(this).parent('.ms-SearchBox').addClass('is-active');
+ });
+
+ /** 'hovering' class allows for more fine grained control of hover state */
+ $searchField.on('mouseover', function() {
+ $searchField.addClass('hovering');
+ });
+
+ $searchField.on('mouseout', function() {
+ $searchField.removeClass('hovering');
+ });
+
+ // If cancel button is selected, change cancel value to true
+ $(this).find('.ms-SearchBox-closeButton').on('mousedown', function() {
+ cancel = true;
+ });
+
+ /** Show the label again when leaving the field. */
+ $(this).find('.ms-SearchBox-field').on('blur', function() {
+
+ // If cancel button is selected remove the text and show the label
+ if (cancel) {
+ $(this).val('');
+ $searchField.addClass('hovering');
+ }
+
+ var $searchBox = $(this).parent('.ms-SearchBox');
+ // Prevents inputfield from gaining focus too soon
+ setTimeout(function() {
+ // Remove is-active class - hides cancel button
+ $searchBox.removeClass('is-active');
+ }, 10);
+
+ /** Only do this if no text was entered. */
+ if ($(this).val().length === 0 ) {
+ $(this).siblings('.ms-SearchBox-label').show();
+ }
+
+ // Reset cancel to false
+ cancel = false;
+ });
+ });
+
+ };
+})(jQuery);
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Spinner Component
+ *
+ * An animating activity indicator.
+ *
+ */
+
+/**
+ * @namespace fabric
+ */
+var fabric = fabric || {};
+
+/**
+ * @param {HTMLDOMElement} target - The element the Spinner will attach itself to.
+ */
+
+fabric.Spinner = function(target) {
+
+ var _target = target;
+ var eightSize = 0.2;
+ var circleObjects = [];
+ var animationSpeed = 90;
+ var interval;
+ var spinner;
+ var numCircles;
+ var offsetSize;
+ var fadeIncrement = 0;
+ var parentSize = 20;
+
+ /**
+ * @function start - starts or restarts the animation sequence
+ * @memberOf fabric.Spinner
+ */
+ function start() {
+ stop();
+ interval = setInterval(function() {
+ var i = circleObjects.length;
+ while(i--) {
+ _fade(circleObjects[i]);
+ }
+ }, animationSpeed);
+ }
+
+ /**
+ * @function stop - stops the animation sequence
+ * @memberOf fabric.Spinner
+ */
+ function stop() {
+ clearInterval(interval);
+ }
+
+ //private methods
+
+ function _init() {
+ _setTargetElement();
+ _setPropertiesForSize();
+ _createCirclesAndArrange();
+ _initializeOpacities();
+ start();
+ }
+
+ function _initializeOpacities() {
+ var i = 0;
+ var j = 1;
+ var opacity;
+ fadeIncrement = 1 / numCircles;
+
+ for (i; i < numCircles; i++) {
+ var circleObject = circleObjects[i];
+ opacity = (fadeIncrement * j++);
+ _setOpacity(circleObject.element, opacity);
+ }
+ }
+
+ function _fade(circleObject) {
+ var opacity = _getOpacity(circleObject.element) - fadeIncrement;
+
+ if (opacity <= 0) {
+ opacity = 1;
+ }
+
+ _setOpacity(circleObject.element, opacity);
+ }
+
+ function _getOpacity(element) {
+ return parseFloat(window.getComputedStyle(element).getPropertyValue("opacity"));
+ }
+
+ function _setOpacity(element, opacity) {
+ element.style.opacity = opacity;
+ }
+
+ function _createCircle() {
+ var circle = document.createElement('div');
+ circle.className = "ms-Spinner-circle";
+ circle.style.width = circle.style.height = parentSize * offsetSize + "px";
+ return circle;
+ }
+
+ function _createCirclesAndArrange() {
+
+ var angle = 0;
+ var offset = parentSize * offsetSize;
+ var step = (2 * Math.PI) / numCircles;
+ var i = numCircles;
+ var circleObject;
+ var radius = (parentSize - offset) * 0.5;
+
+ while (i--) {
+ var circle = _createCircle();
+ var x = Math.round(parentSize * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5;
+ var y = Math.round(parentSize * 0.5 + radius * Math.sin(angle) - circle.clientHeight * 0.5) - offset * 0.5;
+ spinner.appendChild(circle);
+ circle.style.left = x + 'px';
+ circle.style.top = y + 'px';
+ angle += step;
+ circleObject = { element:circle, j:i };
+ circleObjects.push(circleObject);
+ }
+ }
+
+ function _setPropertiesForSize() {
+ if (spinner.className.indexOf("large") > -1) {
+ parentSize = 28;
+ eightSize = 0.179;
+ }
+
+ offsetSize = eightSize;
+ numCircles = 8;
+ }
+
+ function _setTargetElement() {
+ //for backwards compatibility
+ if (_target.className.indexOf("ms-Spinner") === -1) {
+ spinner = document.createElement("div");
+ spinner.className = "ms-Spinner";
+ _target.appendChild(spinner);
+ } else {
+ spinner = _target;
+ }
+ }
+
+ _init();
+
+ return {
+ start:start,
+ stop:stop
+ };
+};
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Text Field Plugin
+ *
+ * Adds basic demonstration functionality to .ms-TextField components.
+ *
+ * @param {jQuery Object} One or more .ms-TextField components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.TextField = function () {
+
+ /** Iterate through each text field provided. */
+ return this.each(function () {
+
+ /** Does it have a placeholder? */
+ if ($(this).hasClass("ms-TextField--placeholder")) {
+
+ /** Hide the label on click. */
+ $(this).on('click', function () {
+ $(this).find('.ms-Label').hide();
+ });
+
+ /** Hide the label on focus. */
+ $(this).find('.ms-TextField-field').on('focus', function () {
+ $(this).siblings('.ms-Label').hide();
+ });
+
+ /** Show the label again when leaving the field. */
+ $(this).find('.ms-TextField-field').on('blur', function () {
+
+ /** Only do this if no text was entered. */
+ if ($(this).val().length === 0) {
+ $(this).siblings('.ms-Label').show();
+ }
+ });
+ }
+
+ /** Underlined - adding/removing a focus class */
+ if ($(this).hasClass('ms-TextField--underlined')) {
+
+ /** Add is-active class - changes border color to theme primary */
+ $(this).find('.ms-TextField-field').on('focus', function() {
+ $(this).parent('.ms-TextField--underlined').addClass('is-active');
+ });
+
+ /** Remove is-active on blur of textfield */
+ $(this).find('.ms-TextField-field').on('blur', function() {
+ $(this).parent('.ms-TextField--underlined').removeClass('is-active');
+ });
+ }
+
+ });
+ };
+})(jQuery);
diff --git a/dist/js/jquery.fabric.min.js b/dist/js/jquery.fabric.min.js
new file mode 100644
index 000000000..0449e1478
--- /dev/null
+++ b/dist/js/jquery.fabric.min.js
@@ -0,0 +1,2 @@
+var fabric=fabric||{};fabric.Breadcrumb=function(e){this.breadcrumb=e,this.breadcrumbList=e.querySelector(".ms-Breadcrumb-list"),this.listItems=e.querySelectorAll(".ms-Breadcrumb-listItem"),this.contextMenu=e.querySelector(".ms-ContextualMenu"),this.overflowButton=e.querySelector(".ms-Breadcrumb-overflowButton"),this.overflowMenu=e.querySelector(".ms-Breadcrumb-overflowMenu"),this.itemCollection=[],this.currentMaxItems=0,this.init()},fabric.Breadcrumb.prototype=function(){var e=639,t=function(){p.call(this),a.call(this),o.call(this,null)},i=function(e,t,i){this.itemCollection.push({text:e,link:t,tabIndex:i}),g.call(this)},n=function(e){for(var t=this.itemCollection.length;t--;)this.itemCollection[t].text===e&&this.itemCollection.splice(t,1);g.call(this)},s=function(e){this.itemCollection.splice(e,1),g.call(this)},a=function(){var e,t,i,n,s=this.listItems.length,a=0;for(a;s>a;a++)e=this.listItems[a].querySelector(".ms-Breadcrumb-itemLink"),t=e.textContent,i=e.getAttribute("href"),n=parseInt(e.getAttribute("tabindex"),10),this.itemCollection.push({text:t,link:i,tabIndex:n})},o=function(){h.call(this,null),r.call(this)},r=function(){var t=window.innerWidth>e?4:2;t!==this.currentMaxItems&&g.call(this),this.currentMaxItems=t},l=function(e){d.call(this,this.contextMenu);var t=this.itemCollection.length-e,i=this.itemCollection.slice(0,t),n=this.contextMenu;i.forEach(function(e){var t=document.createElement("li");t.className="ms-ContextualMenu-item",isNaN(e.tabIndex)||t.setAttribute("tabindex",e.tabIndex);var i=document.createElement("a");i.className="ms-ContextualMenu-link",null!==e.link&&i.setAttribute("href",e.link),i.textContent=e.text,t.appendChild(i),n.appendChild(t)})},c=function(e){d.call(this,this.breadcrumbList);var t=this.itemCollection.length-e;if(t=0>t?0:t,t>=0)for(t;t-1&&(e.className=e.className.substring(0,i))},p=function(){window.addEventListener("resize",o.bind(this),!1),document.addEventListener("click",h.bind(this),!1),this.overflowButton.addEventListener("click",m.bind(this),!1),this.overflowButton.addEventListener("keypress",u.bind(this),!1),this.breadcrumbList.addEventListener("click",v.bind(this),!1)},v=function(e){e.target.blur()},g=function(){var t=window.innerWidth>e?4:2;this.itemCollection.length>t?this.breadcrumb.className+=" is-overflow":f.call(this,this.breadcrumb," is-overflow"),c.call(this,t),l.call(this,t)};return{init:t,addItem:i,removeItemByLabel:n,removeItemByPosition:s}}(),function(e){e.fn.CommandBar=function(){var t=function(e){var t='"},i=function(t,i,n){var s=[];return t.each(function(){var t=e(this),a=t.position().left+t.outerWidth()+i+10-n.position().left;s.push({jquery:t,rightOffset:a})}),s},n=function(e,t,i){for(var n=[],s=0;st?n.push(a):a.removeClass("is-hidden"))}return n},s=function(i,n,s){var a="";if(i.length>0){n.addClass("is-visible"),s.html("");for(var o=0;o639&&h===!0&&(a=i(l,d,r),h=!1,e(".ms-CommandBarSearch").unbind()),t=n(a,r.innerWidth(),d),s(t,c,m)}),c.click(function(){m.toggleClass("is-open")}),c.focusout(function(){m.removeClass("is-open")}),u.find(".ms-CommandBarSearch-input").click(function(){e(this).closest(".ms-CommandBarSearch").addClass("is-active")}),u.find(".ms-CommandBarSearch-input").on("focus",function(){e(this).closest(".ms-CommandBarSearch").addClass("is-active")}),u.find(".ms-CommandBarSearch-iconClearWrapper").click(function(){var t=e(this).parent().find(".ms-CommandBarSearch-input");t.val(""),t.parent().removeClass("is-active")}),u.parent().find(".ms-CommandBarSearch-input").blur(function(){var t=e(this);t.val(""),t.parent().removeClass("is-active")})})}}(jQuery),function(e){e.fn.ContextualMenu=function(){return this.each(function(){var t=e(this);t.on("click",".ms-ContextualMenu-link:not(.is-disabled)",function(i){i.preventDefault(),t.hasClass("ms-ContextualMenu--multiselect")?e(this).hasClass("is-selected")?e(this).removeClass("is-selected"):e(this).addClass("is-selected"):(e(".ms-ContextualMenu-link").removeClass("is-selected").siblings(".ms-ContextualMenu").removeClass("is-open"),e(this).addClass("is-selected"),e(this).hasClass("ms-ContextualMenu-link--hasMenu")&&(e(this).siblings(".ms-ContextualMenu:first").addClass("is-open"),i.stopPropagation()))})})}}(jQuery),function(e){function t(t){var s=t.find(".ms-DatePicker-monthComponents"),a=t.find(".ms-DatePicker-goToday"),o=t.find(".ms-DatePicker-monthPicker"),r=t.find(".ms-DatePicker-yearPicker"),l=t.find(".ms-DatePicker-wrap"),c=t.find(".ms-TextField-field").pickadate("picker");s.appendTo(l),a.appendTo(l),o.appendTo(l),r.appendTo(l),n(t),s.on("click",".js-prevMonth",function(e){e.preventDefault();var t=c.get("highlight").month-1;i(c,null,t,null)}),s.on("click",".js-nextMonth",function(e){e.preventDefault();var t=c.get("highlight").month+1;i(c,null,t,null)}),o.on("click",".js-prevYear",function(e){e.preventDefault();var t=c.get("highlight").year-1;i(c,t,null,null)}),o.on("click",".js-nextYear",function(e){e.preventDefault();var t=c.get("highlight").year+1;i(c,t,null,null)}),r.on("click",".js-prevDecade",function(e){e.preventDefault();var t=c.get("highlight").year-10;i(c,t,null,null)}),r.on("click",".js-nextDecade",function(e){e.preventDefault();var t=c.get("highlight").year+10;i(c,t,null,null)}),a.click(function(e){e.preventDefault();var i=new Date;c.set("select",[i.getFullYear(),i.getMonth(),i.getDate()]),t.removeClass("is-pickingMonths").removeClass("is-pickingYears")}),o.on("click",".js-changeDate",function(n){n.preventDefault();var s=e(this).attr("data-year"),a=e(this).attr("data-month"),o=e(this).attr("data-day");i(c,s,a,o),t.hasClass("is-pickingMonths")&&t.removeClass("is-pickingMonths")}),r.on("click",".js-changeDate",function(n){n.preventDefault();var s=e(this).attr("data-year"),a=e(this).attr("data-month"),o=e(this).attr("data-day");i(c,s,a,o),t.hasClass("is-pickingYears")&&t.removeClass("is-pickingYears")}),o.on("click",".js-showDayPicker",function(){t.removeClass("is-pickingMonths"),t.removeClass("is-pickingYears")}),s.on("click",".js-showMonthPicker",function(){t.toggleClass("is-pickingMonths")}),o.on("click",".js-showYearPicker",function(){t.toggleClass("is-pickingYears")})}function i(e,t,i,n){"undefined"!=typeof t&&null!==t||(t=e.get("highlight").year),"undefined"!=typeof i&&null!==i||(i=e.get("highlight").month),"undefined"!=typeof n&&null!==n||(n=e.get("highlight").date),e.set("highlight",[t,i,n])}function n(e){var t=e.find(".ms-DatePicker-monthPicker"),i=e.find(".ms-DatePicker-yearPicker"),n=e.find(".ms-TextField-field").pickadate("picker");t.find(".ms-DatePicker-currentYear").text(n.get("view").year),t.find(".ms-DatePicker-monthOption").removeClass("is-highlighted"),t.find('.ms-DatePicker-monthOption[data-month="'+n.get("highlight").month+'"]').addClass("is-highlighted"),i.find(".ms-DatePicker-currentDecade").remove(),i.find(".ms-DatePicker-optionGrid").remove();var s=n.get("highlight").year-11,a=s+" - "+(s+11),o=''+a+"
";o+='';for(var r=s;s+12>r;r++)o+=''+r+" ";o+="
",i.append(o),i.find(".ms-DatePicker-yearOption").removeClass("is-highlighted"),i.find('.ms-DatePicker-yearOption[data-year="'+n.get("highlight").year+'"]').addClass("is-highlighted")}function s(t){e("html, body").animate({scrollTop:t.offset().top},367)}e.fn.DatePicker=function(i){return this.each(function(){var a=e(this),o=a.find(".ms-TextField-field").pickadate(e.extend({weekdaysShort:["S","M","T","W","T","F","S"],today:"",clear:"",close:"",onStart:function(){t(a)},klass:{input:"ms-DatePicker-input",active:"ms-DatePicker-input--active",picker:"ms-DatePicker-picker",opened:"ms-DatePicker-picker--opened",focused:"ms-DatePicker-picker--focused",holder:"ms-DatePicker-holder",frame:"ms-DatePicker-frame",wrap:"ms-DatePicker-wrap",box:"ms-DatePicker-dayPicker",header:"ms-DatePicker-header",month:"ms-DatePicker-month",year:"ms-DatePicker-year",table:"ms-DatePicker-table",weekdays:"ms-DatePicker-weekday",day:"ms-DatePicker-day",disabled:"ms-DatePicker-day--disabled",selected:"ms-DatePicker-day--selected",highlighted:"ms-DatePicker-day--highlighted",now:"ms-DatePicker-day--today",infocus:"ms-DatePicker-day--infocus",outfocus:"ms-DatePicker-day--outfocus"}},i||{})),r=o.pickadate("picker");r.on({render:function(){n(a)},open:function(){s(a)}})})}}(jQuery),!function(e){"function"==typeof define&&define.amd?define("picker",["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):this.Picker=e(jQuery)}(function(e){function t(a,o,r,d){function m(){return t._.node("div",t._.node("div",t._.node("div",t._.node("div",b.component.nodes(g.open),P.box),P.wrap),P.frame),P.holder)}function u(){y.data(o,b).addClass(P.input).val(y.data("value")?b.get("select",k.format):a.value).on("focus."+g.id+" click."+g.id,p),k.editable||y.on("keydown."+g.id,function(e){var t=e.keyCode,i=/^(8|46)$/.test(t);return 27==t?(b.close(),!1):void((32==t||i||!g.open&&b.component.key[t])&&(e.preventDefault(),e.stopPropagation(),i?b.clear().close():b.open()))}),s(a,{haspopup:!0,expanded:!1,readonly:!1,owns:a.id+"_root"+(b._hidden?" "+b._hidden.id:"")})}function h(){b.$root.on({focusin:function(e){b.$root.removeClass(P.focused),e.stopPropagation()},"mousedown click":function(t){var i=t.target;i!=b.$root.children()[0]&&(t.stopPropagation(),"mousedown"!=t.type||e(i).is(":input")||"OPTION"==i.nodeName||(t.preventDefault(),a.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var t=e(this),i=t.data(),n=t.hasClass(P.navDisabled)||t.hasClass(P.disabled),s=document.activeElement;s=s&&(s.type||s.href)&&s,(n||s&&!e.contains(b.$root[0],s))&&a.focus(),!n&&i.nav?b.set("highlight",b.component.item.highlight,{nav:i.nav}):!n&&"pick"in i?b.set("select",i.pick).close(!0):i.clear?b.clear().close(!0):i.close&&b.close(!0)}),s(b.$root[0],"hidden",!0)}function f(){var t;k.hiddenName===!0?(t=a.name,a.name=""):(t=["string"==typeof k.hiddenPrefix?k.hiddenPrefix:"","string"==typeof k.hiddenSuffix?k.hiddenSuffix:"_submit"],t=t[0]+a.name+t[1]),b._hidden=e(' ")[0],y.on("change."+g.id,function(){b._hidden.value=a.value?b.get("select",k.formatSubmit):""}).after(b._hidden)}function p(e){e.stopPropagation(),"focus"==e.type&&b.$root.addClass(P.focused),b.open()}if(!a)return t;var v=!1,g={id:a.id||"P"+Math.abs(~~(Math.random()*new Date))},k=r?e.extend(!0,{},r.defaults,d):d||{},P=e.extend({},t.klasses(),k.klass),y=e(a),C=function(){return this.start()},b=C.prototype={constructor:C,$node:y,start:function(){return g&&g.start?b:(g.methods={},g.start=!0,g.open=!1,g.type=a.type,a.autofocus=a==document.activeElement,a.readOnly=!k.editable,a.id=a.id||g.id,"text"!=a.type&&(a.type="text"),b.component=new r(b,k),b.$root=e(t._.node("div",m(),P.picker,'id="'+a.id+'_root"')),h(),k.formatSubmit&&f(),u(),k.container?e(k.container).append(b.$root):y.after(b.$root),b.on({start:b.component.onStart,render:b.component.onRender,stop:b.component.onStop,open:b.component.onOpen,close:b.component.onClose,set:b.component.onSet}).on({start:k.onStart,render:k.onRender,stop:k.onStop,open:k.onOpen,close:k.onClose,set:k.onSet}),v=i(b.$root.children()[0]),a.autofocus&&b.open(),b.trigger("start").trigger("render"))},render:function(e){return e?b.$root.html(m()):b.$root.find("."+P.box).html(b.component.nodes(g.open)),b.trigger("render")},stop:function(){return g.start?(b.close(),b._hidden&&b._hidden.parentNode.removeChild(b._hidden),b.$root.remove(),y.removeClass(P.input).removeData(o),setTimeout(function(){y.off("."+g.id)},0),a.type=g.type,a.readOnly=!1,b.trigger("stop"),g.methods={},g.start=!1,b):b},open:function(i){return g.open?b:(y.addClass(P.active),s(a,"expanded",!0),setTimeout(function(){b.$root.addClass(P.opened),s(b.$root[0],"hidden",!1)},0),i!==!1&&(g.open=!0,v&&c.css("overflow","hidden").css("padding-right","+="+n()),y.trigger("focus"),l.on("click."+g.id+" focusin."+g.id,function(e){var t=e.target;t!=a&&t!=document&&3!=e.which&&b.close(t===b.$root.children()[0])}).on("keydown."+g.id,function(i){var n=i.keyCode,s=b.component.key[n],o=i.target;27==n?b.close(!0):o!=a||!s&&13!=n?e.contains(b.$root[0],o)&&13==n&&(i.preventDefault(),o.click()):(i.preventDefault(),s?t._.trigger(b.component.key.go,b,[t._.trigger(s)]):b.$root.find("."+P.highlighted).hasClass(P.disabled)||b.set("select",b.component.item.highlight).close())})),b.trigger("open"))},close:function(e){return e&&(y.off("focus."+g.id).trigger("focus"),setTimeout(function(){y.on("focus."+g.id,p)},0)),y.removeClass(P.active),s(a,"expanded",!1),setTimeout(function(){b.$root.removeClass(P.opened+" "+P.focused),s(b.$root[0],"hidden",!0)},0),g.open?(g.open=!1,v&&c.css("overflow","").css("padding-right","-="+n()),l.off("."+g.id),b.trigger("close")):b},clear:function(e){return b.set("clear",null,e)},set:function(t,i,n){var s,a,o=e.isPlainObject(t),r=o?t:{};if(n=o&&e.isPlainObject(i)?i:n||{},t){o||(r[t]=i);for(s in r)a=r[s],s in b.component.item&&(void 0===a&&(a=null),b.component.set(s,a,n)),("select"==s||"clear"==s)&&y.val("clear"==s?"":b.get(s,k.format)).trigger("change");b.render()}return n.muted?b:b.trigger("set",r)},get:function(e,i){if(e=e||"value",null!=g[e])return g[e];if("value"==e)return a.value;if(e in b.component.item){if("string"==typeof i){var n=b.component.get(e);return n?t._.trigger(b.component.formats.toString,b.component,[i,n]):""}return b.component.get(e)}},on:function(t,i,n){var s,a,o=e.isPlainObject(t),r=o?t:{};if(t){o||(r[t]=i);for(s in r)a=r[s],n&&(s="_"+s),g.methods[s]=g.methods[s]||[],g.methods[s].push(a)}return b},off:function(){var e,t,i=arguments;for(e=0,namesCount=i.length;namesCount>e;e+=1)t=i[e],t in g.methods&&delete g.methods[t];return b},trigger:function(e,i){var n=function(e){var n=g.methods[e];n&&n.map(function(e){t._.trigger(e,b,[i])})};return n("_"+e),n(e),b}};return new C}function i(e){var t,i="position";return e.currentStyle?t=e.currentStyle[i]:window.getComputedStyle&&(t=getComputedStyle(e)[i]),"fixed"==t}function n(){if(c.height()<=r.height())return 0;var t=e('
').appendTo("body"),i=t[0].offsetWidth;t.css("overflow","scroll");var n=e('
').appendTo(t),s=n[0].offsetWidth;return t.remove(),i-s}function s(t,i,n){if(e.isPlainObject(i))for(var s in i)a(t,s,i[s]);else a(t,i,n)}function a(e,t,i){e.setAttribute(("role"==t?"":"aria-")+t,i)}function o(t,i){e.isPlainObject(t)||(t={attribute:i}),i="";for(var n in t){var s=("role"==n?"":"aria-")+n,a=t[n];i+=null==a?"":s+'="'+t[n]+'"'}return i}var r=e(window),l=e(document),c=e(document.documentElement);return t.klasses=function(e){return e=e||"picker",{picker:e,opened:e+"--opened",focused:e+"--focused",input:e+"__input",active:e+"__input--active",holder:e+"__holder",frame:e+"__frame",wrap:e+"__wrap",box:e+"__box"}},t._={group:function(e){for(var i,n="",s=t._.trigger(e.min,e);s<=t._.trigger(e.max,e,[s]);s+=e.i)i=t._.trigger(e.item,e,[s]),n+=t._.node(e.node,i[0],i[1],i[2]);return n},node:function(t,i,n,s){return i?(i=e.isArray(i)?i.join(""):i,n=n?' class="'+n+'"':"",s=s?" "+s:"","<"+t+n+s+">"+i+""+t+">"):""},lead:function(e){return(10>e?"0":"")+e},trigger:function(e,t,i){return"function"==typeof e?e.apply(t,i||[]):e},digits:function(e){return/\d/.test(e[1])?2:1},isDate:function(e){return{}.toString.call(e).indexOf("Date")>-1&&this.isInteger(e.getUTCDate())},isInteger:function(e){return{}.toString.call(e).indexOf("Number")>-1&&e%1===0},ariaAttr:o},t.extend=function(i,n){e.fn[i]=function(s,a){var o=this.data(i);return"picker"==s?o:o&&"string"==typeof s?t._.trigger(o[s],o,[a]):this.each(function(){var a=e(this);a.data(i)||new t(this,i,n,s)})},e.fn[i].defaults=n.defaults},t}),function(e){"function"==typeof define&&define.amd?define(["picker","jquery"],e):"object"==typeof exports?module.exports=e(require("./picker.js"),require("jquery")):e(Picker,jQuery)}(function(e,t){function i(e,t){var i=this,n=e.$node[0],s=n.value,a=e.$node.data("value"),o=a||s,r=a?t.formatSubmit:t.format,l=function(){return n.currentStyle?"rtl"==n.currentStyle.direction:"rtl"==getComputedStyle(e.$root[0]).direction};i.settings=t,i.$node=e.$node,i.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"},i.item={},i.item.clear=null,i.item.disable=(t.disable||[]).slice(0),i.item.enable=-function(e){return e[0]===!0?e.shift():-1}(i.item.disable),i.set("min",t.min).set("max",t.max).set("now"),o?i.set("select",o,{format:r}):i.set("select",null).set("highlight",i.item.now),i.key={40:7,38:-7,39:function(){return l()?-1:1},37:function(){return l()?1:-1},go:function(e){var t=i.item.highlight,n=new Date(Date.UTC(t.year,t.month,t.date+e));i.set("highlight",n,{interval:e}),this.render()}},e.on("render",function(){e.$root.find("."+t.klass.selectMonth).on("change",function(){var i=this.value;i&&(e.set("highlight",[e.get("view").year,i,e.get("highlight").date]),e.$root.find("."+t.klass.selectMonth).trigger("focus"))}),e.$root.find("."+t.klass.selectYear).on("change",function(){var i=this.value;i&&(e.set("highlight",[i,e.get("view").month,e.get("highlight").date]),e.$root.find("."+t.klass.selectYear).trigger("focus"))})},1).on("open",function(){var n="";i.disabled(i.get("now"))&&(n=":not(."+t.klass.buttonToday+")"),e.$root.find("button"+n+", select").attr("disabled",!1)},1).on("close",function(){e.$root.find("button, select").attr("disabled",!0)},1)}var n=7,s=6,a=e._;i.prototype.set=function(e,t,i){var n=this,s=n.item;return null===t?("clear"==e&&(e="select"),s[e]=t,n):(s["enable"==e?"disable":"flip"==e?"enable":e]=n.queue[e].split(" ").map(function(s){return t=n[s](e,t,i)}).pop(),"select"==e?n.set("highlight",s.select,i):"highlight"==e?n.set("view",s.highlight,i):e.match(/^(flip|min|max|disable|enable)$/)&&(s.select&&n.disabled(s.select)&&n.set("select",s.select,i),s.highlight&&n.disabled(s.highlight)&&n.set("highlight",s.highlight,i)),n)},i.prototype.get=function(e){return this.item[e]},i.prototype.create=function(e,i,n){var s,o=this;return i=void 0===i?e:i,i==-1/0||1/0==i?s=i:t.isPlainObject(i)&&a.isInteger(i.pick)?i=i.obj:t.isArray(i)?(i=new Date(Date.UTC(i[0],i[1],i[2])),i=a.isDate(i)?i:o.create().obj):i=a.isInteger(i)?o.normalize(new Date(i),n):a.isDate(i)?o.normalize(i,n):o.now(e,i,n),{year:s||i.getUTCFullYear(),month:s||i.getUTCMonth(),date:s||i.getUTCDate(),day:s||i.getUTCDay(),obj:s||i,pick:s||i.getTime()}},i.prototype.createRange=function(e,i){var n=this,s=function(e){return e===!0||t.isArray(e)||a.isDate(e)?n.create(e):e};return a.isInteger(e)||(e=s(e)),a.isInteger(i)||(i=s(i)),a.isInteger(e)&&t.isPlainObject(i)?e=[i.year,i.month,i.date+e]:a.isInteger(i)&&t.isPlainObject(e)&&(i=[e.year,e.month,e.date+i]),{from:s(e),to:s(i)}},i.prototype.withinRange=function(e,t){return e=this.createRange(e.from,e.to),t.pick>=e.from.pick&&t.pick<=e.to.pick},i.prototype.overlapRanges=function(e,t){var i=this;return e=i.createRange(e.from,e.to),t=i.createRange(t.from,t.to),i.withinRange(e,t.from)||i.withinRange(e,t.to)||i.withinRange(t,e.from)||i.withinRange(t,e.to)},i.prototype.now=function(e,t,i){return t=new Date,i&&i.rel&&t.setUTCDate(t.getUTCDate()+i.rel),this.normalize(t,i)},i.prototype.navigate=function(e,i,n){var s,a,o,r,l=t.isArray(i),c=t.isPlainObject(i),d=this.item.view;if(l||c){for(c?(a=i.year,o=i.month,r=i.date):(a=+i[0],o=+i[1],r=+i[2]),n&&n.nav&&d&&d.month!==o&&(a=d.year,o=d.month),s=new Date(Date.UTC(a,o+(n&&n.nav?n.nav:0),1)),a=s.getUTCFullYear(),o=s.getUTCMonth();new Date(Date.UTC(a,o,r)).getUTCMonth()!==o;)r-=1;i=[a,o,r]}return i},i.prototype.normalize=function(e){return e.setUTCHours(0,0,0,0),e},i.prototype.measure=function(e,t){var i=this;return t?"string"==typeof t?t=i.parse(e,t):a.isInteger(t)&&(t=i.now(e,t,{rel:t})):t="min"==e?-1/0:1/0,t},i.prototype.viewset=function(e,t){return this.create([t.year,t.month,1])},i.prototype.validate=function(e,i,n){var s,o,r,l,c=this,d=i,m=n&&n.interval?n.interval:1,u=-1===c.item.enable,h=c.item.min,f=c.item.max,p=u&&c.item.disable.filter(function(e){if(t.isArray(e)){var n=c.create(e).pick;ni.pick&&(o=!0)}return a.isInteger(e)}).length;if((!n||!n.nav)&&(!u&&c.disabled(i)||u&&c.disabled(i)&&(p||s||o)||!u&&(i.pick<=h.pick||i.pick>=f.pick)))for(u&&!p&&(!o&&m>0||!s&&0>m)&&(m*=-1);c.disabled(i)&&(Math.abs(m)>1&&(i.monthd.month)&&(i=d,m=m>0?1:-1),i.pick<=h.pick?(r=!0,m=1,i=c.create([h.year,h.month,h.date+(i.pick===h.pick?0:-1)])):i.pick>=f.pick&&(l=!0,m=-1,i=c.create([f.year,f.month,f.date+(i.pick===f.pick?0:1)])),!r||!l);)i=c.create([i.year,i.month,i.date+m]);return i},i.prototype.disabled=function(e){var i=this,n=i.item.disable.filter(function(n){return a.isInteger(n)?e.day===(i.settings.firstDay?n:n-1)%7:t.isArray(n)||a.isDate(n)?e.pick===i.create(n).pick:t.isPlainObject(n)?i.withinRange(n,e):void 0});return n=n.length&&!n.filter(function(e){return t.isArray(e)&&"inverted"==e[3]||t.isPlainObject(e)&&e.inverted}).length,-1===i.item.enable?!n:n||e.picki.item.max.pick},i.prototype.parse=function(e,t,i){var n=this,s={};return t&&"string"==typeof t?(i&&i.format||(i=i||{},i.format=n.settings.format),n.formats.toArray(i.format).map(function(e){var i=n.formats[e],o=i?a.trigger(i,n,[t,s]):e.replace(/^!/,"").length;i&&(s[e]=t.substr(0,o)),t=t.substr(o)}),[s.yyyy||s.yy,+(s.mm||s.m)-1,s.dd||s.d]):t},i.prototype.formats=function(){function e(e,t,i){var n=e.match(/\w+/)[0];return i.mm||i.m||(i.m=t.indexOf(n)+1),n.length}function t(e){return e.match(/\w+/)[0].length}return{d:function(e,t){return e?a.digits(e):t.date},dd:function(e,t){return e?2:a.lead(t.date)},ddd:function(e,i){return e?t(e):this.settings.weekdaysShort[i.day]},dddd:function(e,i){return e?t(e):this.settings.weekdaysFull[i.day]},m:function(e,t){return e?a.digits(e):t.month+1},mm:function(e,t){return e?2:a.lead(t.month+1)},mmm:function(t,i){var n=this.settings.monthsShort;return t?e(t,n,i):n[i.month]},mmmm:function(t,i){var n=this.settings.monthsFull;return t?e(t,n,i):n[i.month]},yy:function(e,t){return e?2:(""+t.year).slice(2)},yyyy:function(e,t){return e?4:t.year},toArray:function(e){return e.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(e,t){var i=this;return i.formats.toArray(e).map(function(e){return a.trigger(i.formats[e],i,[0,t])||e.replace(/^!/,"")}).join("")}}}(),i.prototype.isDateExact=function(e,i){var n=this;return a.isInteger(e)&&a.isInteger(i)||"boolean"==typeof e&&"boolean"==typeof i?e===i:(a.isDate(e)||t.isArray(e))&&(a.isDate(i)||t.isArray(i))?n.create(e).pick===n.create(i).pick:t.isPlainObject(e)&&t.isPlainObject(i)?n.isDateExact(e.from,i.from)&&n.isDateExact(e.to,i.to):!1},i.prototype.isDateOverlap=function(e,i){var n=this,s=n.settings.firstDay?1:0;return a.isInteger(e)&&(a.isDate(i)||t.isArray(i))?(e=e%7+s,e===n.create(i).day+1):a.isInteger(i)&&(a.isDate(e)||t.isArray(e))?(i=i%7+s,i===n.create(e).day+1):t.isPlainObject(e)&&t.isPlainObject(i)?n.overlapRanges(e,i):!1},i.prototype.flipEnable=function(e){var t=this.item;t.enable=e||(-1==t.enable?1:-1)},i.prototype.deactivate=function(e,i){var n=this,s=n.item.disable.slice(0);return"flip"==i?n.flipEnable():i===!1?(n.flipEnable(1),s=[]):i===!0?(n.flipEnable(-1),s=[]):i.map(function(e){for(var i,o=0;ol;l+=1){if(r=s[l],n.isDateExact(r,e)){i=s[l]=null,c=!0;break}if(n.isDateOverlap(r,e)){t.isPlainObject(e)?(e.inverted=!0,i=e):t.isArray(e)?(i=e,i[3]||i.push("inverted")):a.isDate(e)&&(i=[e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate(),"inverted"]);break}}if(i)for(l=0;o>l;l+=1)if(n.isDateExact(s[l],e)){s[l]=null;break}if(c)for(l=0;o>l;l+=1)if(n.isDateOverlap(s[l],e)){s[l]=null;break}i&&s.push(i)}),s.filter(function(e){return null!=e})},i.prototype.nodes=function(e){var t=this,i=t.settings,o=t.item,r=o.now,l=o.select,c=o.highlight,d=o.view,m=o.disable,u=o.min,h=o.max,f=function(e,t){return i.firstDay&&(e.push(e.shift()),t.push(t.shift())),a.node("thead",a.node("tr",a.group({min:0,max:n-1,i:1,node:"th",item:function(n){return[e[n],i.klass.weekdays,'scope=col title="'+t[n]+'"']}})))}((i.showWeekdaysFull?i.weekdaysFull:i.weekdaysShort).slice(0),i.weekdaysFull.slice(0)),p=function(e){return a.node("div"," ",i.klass["nav"+(e?"Next":"Prev")]+(e&&d.year>=h.year&&d.month>=h.month||!e&&d.year<=u.year&&d.month<=u.month?" "+i.klass.navDisabled:""),"data-nav="+(e||-1)+" "+a.ariaAttr({role:"button",components:t.$node[0].id+"_table"})+' title="'+(e?i.labelMonthNext:i.labelMonthPrev)+'"')},v=function(){var n=i.showMonthsShort?i.monthsShort:i.monthsFull;return i.selectMonths?a.node("select",a.group({min:0,max:11,i:1,node:"option",item:function(e){return[n[e],0,"value="+e+(d.month==e?" selected":"")+(d.year==u.year&&eh.month?" disabled":"")]}}),i.klass.selectMonth,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+i.labelMonthSelect+'"'):a.node("div",n[d.month],i.klass.month)},g=function(){var n=d.year,s=i.selectYears===!0?5:~~(i.selectYears/2);if(s){var o=u.year,r=h.year,l=n-s,c=n+s;if(o>l&&(c+=o-l,l=o),c>r){var m=l-o,f=c-r;l-=m>f?f:m,c=r}return a.node("select",a.group({min:l,max:c,i:1,node:"option",item:function(e){return[e,0,"value="+e+(n==e?" selected":"")]}}),i.klass.selectYear,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+i.labelYearSelect+'"')}return a.node("div",n,i.klass.year)};return a.node("div",(i.selectYears?g()+v():v()+g())+p()+p(1),i.klass.header)+a.node("table",f+a.node("tbody",a.group({min:0,max:s-1,i:1,node:"tr",item:function(e){var s=i.firstDay&&0===t.create([d.year,d.month,1]).day?-7:0;return[a.group({min:n*e-d.day+s+1,max:function(){return this.min+n-1},i:1,node:"td",item:function(e){e=t.create([d.year,d.month,e+(i.firstDay?1:0)]);var n=l&&l.pick==e.pick,s=c&&c.pick==e.pick,o=m&&t.disabled(e)||e.pickh.pick;return[a.node("div",e.date,function(t){return t.push(d.month==e.month?i.klass.infocus:i.klass.outfocus),r.pick==e.pick&&t.push(i.klass.now),n&&t.push(i.klass.selected),s&&t.push(i.klass.highlighted),o&&t.push(i.klass.disabled),t.join(" ")}([i.klass.day]),"data-pick="+e.pick+" "+a.ariaAttr({role:"gridcell",selected:n&&t.$node.val()===a.trigger(t.formats.toString,t,[i.format,e])?!0:null,activedescendant:s?!0:null,disabled:o?!0:null})),"",a.ariaAttr({role:"presentation"})]}})]}})),i.klass.table,'id="'+t.$node[0].id+'_table" '+a.ariaAttr({role:"grid",components:t.$node[0].id,readonly:!0}))+a.node("div",a.node("button",i.today,i.klass.buttonToday,"type=button data-pick="+r.pick+(e&&!t.disabled(r)?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",i.clear,i.klass.buttonClear,"type=button data-clear=1"+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",i.close,i.klass.buttonClose,"type=button data-close=true "+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id})),i.klass.footer)},i.defaults=function(e){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:e+"table",header:e+"header",navPrev:e+"nav--prev",navNext:e+"nav--next",navDisabled:e+"nav--disabled",month:e+"month",year:e+"year",selectMonth:e+"select--month",selectYear:e+"select--year",weekdays:e+"weekday",day:e+"day",disabled:e+"day--disabled",selected:e+"day--selected",highlighted:e+"day--highlighted",now:e+"day--today",infocus:e+"day--infocus",outfocus:e+"day--outfocus",footer:e+"footer",buttonClear:e+"button--clear",buttonToday:e+"button--today",buttonClose:e+"button--close"}}}(e.klasses().picker+"__"),e.extend("pickadate",i)}),function(e){e.fn.Dialog=function(){return e(".js-DialogAction--open").each(function(){e(this).on("click",function(){var t=e(this).data("target");e(t).show()})}),this.each(function(){var t=this;e(t).hide(),e(t).find(".js-DialogAction--close").each(function(){e(this).on("click",function(){e(t).hide()})}),e(t).find(".ms-Dialog-action").on("click",function(){e(t).hide()})})}}(jQuery),function(e){e.fn.Dropdown=function(){return this.each(function(){function t(t){if(!i.hasClass("is-disabled")){i.find(".is-open").removeClass("is-open"),t.stopPropagation();var n=e(this).parents(".ms-Dropdown").width();e(this).next(".ms-Dropdown-items").css("width",n+"px"),i.toggleClass("is-open"),e(".ms-Dropdown").each(function(){e(this)[0]!==i[0]&&e(this).removeClass("is-open")}),e(document).bind("click.dropdown",function(){i.removeClass("is-open"),e(document).unbind("click.dropdown")})}}var i=e(this),n=i.children(".ms-Dropdown-select"),s=n.children("option"),a="",o="",r="";s.each(function(e,t){t.selected&&(a=t.text),o+='"+t.text+" "}),r=''+a+' ",i.append(r),i.on("click",".ms-Dropdown-title",function(e){t(e)}),i.on("keyup",function(s){var a=s.keyCode||s.which;if(e(this).hasClass("is-open")){if(e(this).hasClass("is-open")&&(38===a&&e(this).find(".ms-Dropdown-item.is-selected").prev().siblings().size()>0&&e(this).find(".ms-Dropdown-item.is-selected").removeClass("is-selected").prev().addClass("is-selected"),
+40===a&&e(this).find(".ms-Dropdown-item.is-selected").next().siblings().size()>0&&e(this).find(".ms-Dropdown-item.is-selected").removeClass("is-selected").next().addClass("is-selected"),13===a&&!i.hasClass("is-disabled"))){var o=e(this).find(".ms-Dropdown-item.is-selected").text();e(this).find(".ms-Dropdown-title").html(o),n.find("option").each(function(t,i){i.text===o?e(this).prop("selected",!0):e(this).prop("selected",!1)}),n.change(),e(this).removeClass("is-open")}}else 13!==a&&38!==a&&40!==a||(t(s),e(this).find(".ms-Dropdown-item").hasClass("is-selected")||e(this).find(".ms-Dropdown-item:first").addClass("is-selected"));27===a&&e(this).removeClass("is-open")}),i.on("click",".ms-Dropdown-item",function(){if(!i.hasClass("is-disabled")&&!e(this).hasClass("is-disabled")){e(this).siblings(".ms-Dropdown-item").removeClass("is-selected"),e(this).addClass("is-selected"),e(this).parents().siblings(".ms-Dropdown-title").html(e(this).text());var t=e(this).text();n.find("option").each(function(i,n){n.text===t?e(this).prop("selected",!0):e(this).prop("selected",!1)}),n.change()}})})}}(jQuery),function(e){e.fn.Facepile=function(){return this.each(function(){e(".ms-PeoplePicker").PeoplePicker(),e(".ms-Panel").Panel();var t=e(this),i=e(".ms-Facepile-members"),n=e(".ms-Facepile-members > .ms-Facepile-itemBtn").length,s=e(".ms-Facepile-panel.ms-Panel"),a=s.find(".ms-Panel-main"),o=e(".ms-PeoplePicker.ms-PeoplePicker--Facepile"),r=o.find(".ms-PeoplePicker-selectedPeople"),l=e(".ms-Facepile").find(".ms-PersonaCard"),c=function(){if(n+=1,e(".ms-Facepile-members").children(":gt(4)").hide(),n>5){e(".ms-Facepile-itemBtn--overflow").addClass("is-active");var t=n-5;e(".ms-Facepile-overflowText").text("+"+t)}};t.on("click",".js-addPerson",function(){a.css({display:"block"}),s.toggleClass("is-open").addClass("ms-Panel-animateIn").removeClass("ms-Facepile-panel--overflow ms-Panel--right").addClass("ms-Facepile-panel--addPerson"),l.removeClass("is-active").hide()}),s.on("click",".js-togglePanel",function(){s.toggleClass("is-open").addClass("ms-Panel-animateIn")}),t.on("click",".js-overflowPanel",function(){a.css({display:"block"}),s.toggleClass("is-open").addClass("ms-Panel-animateIn").removeClass("ms-Facepile-panel--addPerson").addClass("ms-Facepile-panel--overflow ms-Panel--right")}),e(document).ready(function(){e(".ms-Facepile-overflowText").text("+"+n)}),e(".ms-PeoplePicker-result").on("click",function(){var t=e(this),n=t.find(".ms-Persona-primaryText").html(),s=t.find(".ms-Persona-secondaryText").html(),a=function(){for(var e=n.split(" "),t="",i=0;i'}return""}(),l=' ";i.prepend(l),c()}),r.on("click",".js-selectedRemove",function(){var t=e(this).parent().find(".ms-Persona-primaryText").text(),s=i.find(".ms-Persona-primaryText:contains("+t+")").first();if(s)if(s.parent().closest(".ms-Facepile-itemBtn").remove(),n-=1,e(".ms-Facepile-members").children(":lt(5)").show(),5>=n)e(".ms-Facepile-itemBtn--overflow").removeClass("is-active");else{var a=n-5;e(".ms-Facepile-overflowText").text("+"+a)}}),i.on("click",".ms-Facepile-itemBtn",function(){var t=e(this).find(".ms-Persona-primaryText").html(),i=e(this).find(".ms-Persona-secondaryText").html(),n=function(){for(var e=t.split(" "),i="",n=0;n480){var u=e(this).offset().left,h=u-26;l.css({left:h})}else l.css({left:0,top:"auto",position:"fixed"})}),e(document).on("click",function(t){var i=e(".ms-Facepile-itemBtn--member");i.is(t.target)||0!==i.has(t.target).length||l.is(t.target)||0!==l.has(t.target).length?l.addClass("is-active"):(l.removeClass("is-active"),l.removeAttr("style"))})})}}(jQuery);var fabric=fabric||{};fabric.MessageBanner=function(e){this.container=e,this.init()},fabric.MessageBanner.prototype=function(){var e,t,i,n,s,a,o,r,l,c=700,d=88,m=35,u=480,h=function(){i=o.offsetWidth,window.innerWidth>=u?f():p()},f=function(){i-t>s&&c>s?(n="auto",a.className="ms-MessageBanner-expand",k()):(n=Math.min(i-t,c)+"px",-1===a.className.indexOf("is-visible")&&(a.className+=" is-visible")),e.style.width=n},p=function(){i-(m+l.offsetWidth)>s?(n="auto",k()):n=i-(m+l.offsetWidth)+"px",e.style.width=n},v=function(i){o=i.container,e=i.container.querySelector(".ms-MessageBanner-clipper"),a=i.container.querySelector(".ms-MessageBanner-expand"),r=i.container.querySelector(".ms-MessageBanner-action"),t=r.offsetWidth+d,l=i.container.querySelector(".ms-MessageBanner-close")},g=function(){var e=a.querySelector(".ms-Icon");o.className+=" is-expanded",e.className="ms-Icon ms-Icon--chevronsUp"},k=function(){var e=a.querySelector(".ms-Icon");o.className="ms-MessageBanner",e.className="ms-Icon ms-Icon--chevronsDown"},P=function(){o.className.indexOf("is-expanded")>-1?k():g()},y=function(){-1===o.className.indexOf("hide")&&(o.className+=" hide",setTimeout(function(){o.className="ms-MessageBanner is-hidden"},500))},C=function(){o.className="ms-MessageBanner"},b=function(){window.addEventListener("resize",h,!1),a.addEventListener("click",P,!1),l.addEventListener("click",y,!1)},x=function(){v(this),b(),i=o.offsetWidth,s=e.offsetWidth,h(null)};return{init:x,showBanner:C}}(),function(e){e.fn.ListItem=function(){return this.each(function(){var t=e(this);t.on("click",".js-toggleSelection",function(){e(this).parents(".ms-ListItem").toggleClass("is-selected")})})}}(jQuery),function(e){e.fn.NavBar=function(){return this.each(function(){var t=e(this);t.on("click",".js-openMenu",function(e){e.stopPropagation(),t.toggleClass("is-open")}),t.click(function(){t.hasClass("is-open")&&t.removeClass("is-open")}),t.on("click",".ms-NavBar-item:not(.is-disabled)",function(i){var n=t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field");i.stopPropagation(),0===e(this).children(".ms-NavBar-link").length&&i.preventDefault(),e(this).siblings(".ms-NavBar-item").removeClass("is-selected"),n.length>0&&0===n.val().length&&e(".ms-NavBar-item.ms-NavBar-item--search").removeClass("is-open").find(".ms-TextField-field").blur(),e(this).hasClass("ms-NavBar-item--hasMenu")?(e(this).siblings(".ms-NavBar-item--hasMenu").children(".ms-ContextualMenu:first").removeClass("is-open"),e(this).children(".ms-ContextualMenu:first").toggleClass("is-open"),e(this).toggleClass("is-selected")):(e(this).addClass("is-selected"),t.removeClass("is-open").find(".ms-ContextualMenu").removeClass("is-open")),e(this).hasClass("ms-NavBar-item--search")&&(e(this).addClass("is-open"),e(this).find(".ms-TextField-field").focus(),t.find(".ms-ContextualMenu:first").removeClass("is-open"))}),t.on("click",".ms-NavBar-item .ms-ContextualMenu",function(i){i.stopPropagation(),e(this).removeClass("is-open"),t.removeClass("is-open").find(".ms-NavBar-item--hasMenu").removeClass("is-selected")}),e(document).on("click","html",function(){var e=t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field");t.find(".ms-NavBar-item").removeClass("is-selected").find(".ms-ContextualMenu").removeClass("is-open"),e.length>0&&0===e.val().length&&t.find(".ms-NavBar-item.ms-NavBar-item--search").removeClass("is-open").find(".ms-TextField-field").blur()})})}}(jQuery),function(e){e.fn.Panel=function(){function t(e,t,n){for(var s=0;s-1&&(i.removeClass("is-open"),i.removeClass("ms-Panel-animateIn ms-Panel-animateOut"))}),e(".panelVariant-item").on("click",function(){var t=e(this).find("span").attr("class");switch(e(".panelVariant-item").removeClass("is-selected"),e(this).addClass("is-selected"),t){case"is-default":e(".ms-Panel").removeClass().addClass("ms-Panel");break;case"is-left":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--left");break;case"is-lightDismiss":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--lightDismiss");break;case"is-md":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--md");break;case"is-lgFixed":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--lg ms-Panel--fixed");break;case"is-lg":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--lg");break;case"is-xl":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--xl")}})})}}(jQuery);var fabric=fabric||{};!function(e){function t(e){var t=e.find(".ms-PeoplePicker-searchBox"),i=t.position().left,n=t.outerWidth(),s=i+n,a=t.find(".ms-PeoplePicker-persona:last"),o=a.offset().left,r=a.outerWidth(),l=o+r,c=s-l-7;100>c&&(c="100%"),e.find(".ms-PeoplePicker-searchField").outerWidth(c)}e.fn.PeoplePicker=function(){return this.each(function(){function i(t){e("html, body").animate({scrollTop:s.offset().top},367),s.hasClass("is-active")&&s.removeClass("is-active"),s.hasClass("ms-PeoplePicker--Facepile")&&""===a.val()&&d.children(":gt(4)").hide(),s.hasClass("ms-PeoplePicker--Facepile")&&(l.addClass("ms-u-slideDownIn20"),setTimeout(function(){o.removeClass("ms-u-slideDownIn20"),l.removeClass("ms-u-slideDownIn20")},1e3)),m=!0,t.stopPropagation(),s.hasClass("ms-PeoplePicker--Facepile")||o.width(s.width()-2),s.addClass("is-active"),e(document).bind("click.peoplepicker",function(){s.removeClass("is-active"),s.hasClass("ms-PeoplePicker--Facepile")&&(s.removeClass("is-searching"),e(".ms-PeoplePicker-selected").show(),e(".ms-PeoplePicker-searchMore").removeClass("is-active"),a.val("")),e(document).unbind("click.peoplepicker"),m=!1})}var n,s=e(this),a=s.find(".ms-PeoplePicker-searchField"),o=s.find(".ms-PeoplePicker-results"),r=s.find(".ms-PeoplePicker-selected"),l=s.find(".ms-PeoplePicker-selectedPeople"),c=s.find(".ms-PeoplePicker-selectedCount"),d=s.find(".ms-PeoplePicker-peopleList"),m=!1,u=e(".ms-PeoplePicker").find(".ms-PersonaCard");s.on("focus",".ms-PeoplePicker-searchField",function(e){i(e)}),s.on("click",".ms-PeoplePicker-searchField",function(e){i(e)}),e(this).click(function(e){e.stopPropagation()}),o.on("click",".ms-PeoplePicker-result",function(){var i=e(this),n=i.find(".ms-Persona-primaryText").html(),o=i.find(".ms-Persona-secondaryText").html(),m=function(){for(var e=n.split(" "),t="",i=0;i'}return""}(),f='',p=' ';if(s.hasClass("ms-PeoplePicker--Facepile")||s.hasClass("ms-PeoplePicker--membersList")){r.hasClass("is-active")||r.addClass("is-active"),l.prepend(p),s.removeClass("is-active");var v=s.find(".ms-PeoplePicker-selectedPerson").length;c.html(v),d.children().show(),d.children(":gt(4)").hide(),e(".ms-PeoplePicker-searchMore").removeClass("is-active"),a.val("")}else a.before(f),s.removeClass("is-active"),t(s)}),s.on("click",".ms-PeoplePicker-personaRemove",function(){e(this).parents(".ms-PeoplePicker-persona").remove(),0===e(".ms-PeoplePicker-persona").length?s.find(".ms-PeoplePicker-searchField").outerWidth("100%"):t(s)}),o.on("click",".js-searchMore",function(){var t=e(this),i=t.find(".ms-PeoplePicker-searchMorePrimary"),o=i.html(),r=a.val();t.addClass("is-searching"),i.html("Searching for "+r),n?n.start():n=new fabric.Spinner(t.get(0)),s.hasClass("ms-PeoplePicker--Facepile")&&setTimeout(function(){d.children().show()},1500),setTimeout(function(){t.removeClass("is-searching"),i.html(o),n.stop()},1500)}),o.on("click",".js-resultRemove",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-result").remove()}),o.on("click",".js-resultExpand",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-result").toggleClass("is-expanded")}),l.on("click",".js-selectedRemove",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-selectedPerson").remove();var i=s.find(".ms-PeoplePicker-selectedPerson").length;c.html(i),0===s.find(".ms-PeoplePicker-selectedPerson").length&&r.removeClass("is-active")});var h=function(t,i,n){return t.find(".ms-Persona-primaryText").filter(function(){return n?e(this).text().toLowerCase()===i:e(this).text().toLowerCase()!==i}).parents(".ms-PeoplePicker-peopleListItem")};s.on("keyup",".ms-PeoplePicker-searchField",function(t){var i=[],n=[],a=o.find(".ms-Persona-primaryText");s.addClass("is-searching"),r.hide(),d.children(":lt(5)").show(),e(".ms-PeoplePicker-searchMore").addClass("is-active"),a.each(function(){i.push(e(this).text())});for(var c=0;c-1?(m=i[c].toLowerCase(),n.push(i[c]),h(o,m,!0).show()):h(o,m,!1).hide()}""===e(this).val()&&(s.removeClass("is-searching"),r.show(),e(".ms-PeoplePicker-searchMore").removeClass("is-active"),l.addClass("ms-u-slideDownIn20"),setTimeout(function(){l.removeClass("ms-u-slideDownIn20")},1e3),d.children(":gt(4)").hide())}),l.on("click",".ms-Persona",function(){var t=e(this).find(".ms-Persona-primaryText").html(),i=e(this).find(".ms-Persona-secondaryText").html(),n=function(){for(var e=t.split(" "),i="",n=0;n480){var m=e(this).offset().top,h=m+10;u.css({top:h,left:0})}else u.css({top:"auto"})}),e(document).on("click",function(t){var i=e(".ms-PeoplePicker-selectedPerson").find(".ms-Persona");i.is(t.target)||u.is(t.target)||0!==u.has(t.target).length?u.addClass("is-active"):(u.removeClass("is-active"),setTimeout(function(){u.removeAttr("style")},300))})})}}(jQuery),function(e){e.fn.PersonaCard=function(){return this.each(function(){var t=e(this);t.on("click",".ms-PersonaCard-action",function(){t.find(".ms-PersonaCard-action").removeClass("is-active"),e(this).addClass("is-active");var i=function(e,t){var i=e.className+"",n=t.charAt(0).toUpperCase()+t.slice(1),s="ms-PersonaCard-detail"+n;i!==s&&(e.classList.remove(i),e.classList.add(s))},n=e(this).attr("id");i(e(this).parent().next().find("#detailList")[0],n);var s=e(this).attr("id");t.find(".ms-PersonaCard-actionDetails").removeClass("is-active"),t.find("#"+s+".ms-PersonaCard-actionDetails").addClass("is-active")}),t.on("click",".ms-PersonaCard-detailExpander",function(){e(this).parent(".ms-PersonaCard-actionDetails").toggleClass("is-collapsed")})})}}(jQuery);var fabric=fabric||{};fabric.ProgressIndicator=function(e){this.container=e,this.cacheDOM()},fabric.ProgressIndicator.prototype=function(){var e,t,i,n,s,a,o=function(e){a.style.width=Math.round(t*e)+"px"},r=function(t){e=t;var i=e/n;this.setProgressPercent(i)},l=function(e){n=e},c=function(e){i.innerHTML=e},d=function(e){s.innerHTML=e},m=function(){i=this.container.querySelector(".ms-ProgressIndicator-itemName")||null,s=this.container.querySelector(".ms-ProgressIndicator-itemDescription")||null,a=this.container.querySelector(".ms-ProgressIndicator-progressBar"),t=this.container.querySelector(".ms-ProgressIndicator-itemProgress").offsetWidth};return{setProgressPercent:o,setName:c,setDescription:d,setProgress:r,setTotal:l,cacheDOM:m}}(),function(e){e.fn.Pivot=function(){return this.each(function(){var t=e(this);t.on("click",".ms-Pivot-link",function(t){t.preventDefault();var i=e(this).find(".ms-Pivot-ellipsis");0===i.length&&(e(this).siblings(".ms-Pivot-link").removeClass("is-selected"),e(this).addClass("is-selected"))})})}}(jQuery),function(e){e.fn.SearchBox=function(){return this.each(function(){var t=!1,i=e(this).find(".ms-SearchBox-field");i.on("focus",function(){e(this).siblings(".ms-SearchBox-label").hide(),e(this).parent(".ms-SearchBox").addClass("is-active")}),i.on("mouseover",function(){i.addClass("hovering")}),i.on("mouseout",function(){i.removeClass("hovering")}),e(this).find(".ms-SearchBox-closeButton").on("mousedown",function(){t=!0}),e(this).find(".ms-SearchBox-field").on("blur",function(){t&&(e(this).val(""),i.addClass("hovering"));var n=e(this).parent(".ms-SearchBox");setTimeout(function(){n.removeClass("is-active")},10),0===e(this).val().length&&e(this).siblings(".ms-SearchBox-label").show(),t=!1})})}}(jQuery);var fabric=fabric||{};fabric.Spinner=function(e){function t(){i(),u=setInterval(function(){for(var e=k.length;e--;)a(k[e])},P)}function i(){clearInterval(u)}function n(){m(),d(),c(),s(),t()}function s(){var e,t=0,i=1;for(y=1/f,t;f>t;t++){var n=k[t];e=y*i++,r(n.element,e)}}function a(e){var t=o(e.element)-y;0>=t&&(t=1),r(e.element,t)}function o(e){return parseFloat(window.getComputedStyle(e).getPropertyValue("opacity"))}function r(e,t){e.style.opacity=t}function l(){var e=document.createElement("div");return e.className="ms-Spinner-circle",e.style.width=e.style.height=C*p+"px",e}function c(){for(var e,t=0,i=C*p,n=2*Math.PI/f,s=f,a=.5*(C-i);s--;){var o=l(),r=Math.round(.5*C+a*Math.cos(t)-.5*o.clientWidth)-.5*i,c=Math.round(.5*C+a*Math.sin(t)-.5*o.clientHeight)-.5*i;h.appendChild(o),o.style.left=r+"px",o.style.top=c+"px",t+=n,e={element:o,j:s},k.push(e)}}function d(){h.className.indexOf("large")>-1&&(C=28,g=.179),p=g,f=8}function m(){-1===v.className.indexOf("ms-Spinner")?(h=document.createElement("div"),h.className="ms-Spinner",v.appendChild(h)):h=v}var u,h,f,p,v=e,g=.2,k=[],P=90,y=0,C=20;return n(),{start:t,stop:i}},function(e){e.fn.TextField=function(){return this.each(function(){e(this).hasClass("ms-TextField--placeholder")&&(e(this).on("click",function(){e(this).find(".ms-Label").hide()}),e(this).find(".ms-TextField-field").on("focus",function(){e(this).siblings(".ms-Label").hide()}),e(this).find(".ms-TextField-field").on("blur",function(){0===e(this).val().length&&e(this).siblings(".ms-Label").show()})),e(this).hasClass("ms-TextField--underlined")&&(e(this).find(".ms-TextField-field").on("focus",function(){e(this).parent(".ms-TextField--underlined").addClass("is-active")}),e(this).find(".ms-TextField-field").on("blur",function(){e(this).parent(".ms-TextField--underlined").removeClass("is-active")}))})}}(jQuery);
\ No newline at end of file
diff --git a/dist/packages/OfficeUIFabric.2.4.0.nupkg b/dist/packages/OfficeUIFabric.2.4.0.nupkg
new file mode 100644
index 000000000..885efb4b1
Binary files /dev/null and b/dist/packages/OfficeUIFabric.2.4.0.nupkg differ
diff --git a/dist/samples/Components/Breadcrumb/Breadcrumb.css b/dist/samples/Components/Breadcrumb/Breadcrumb.css
new file mode 100644
index 000000000..852a22130
--- /dev/null
+++ b/dist/samples/Components/Breadcrumb/Breadcrumb.css
@@ -0,0 +1,429 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
+
+.ms-Breadcrumb {
+ margin: 23px 0 1px 0;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 17px;
+ color: #666666;
+ vertical-align: top;
+ margin: 10px 0;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+ margin-right: -4px;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 12px;
+ display: inline-block;
+ color: #0078d7;
+ margin-right: -4px;
+ padding: 12px 8px 3px 8px;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu:before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: white;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: none;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ font-weight: normal;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media screen and (max-width: 639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 14px;
+ margin-top: 7px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 8px;
+ padding-bottom: 3px;
+ }
+}
+
+@media screen and (max-width: 479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin-top: 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 5px;
+ padding-bottom: 3px;
+ }
+}
diff --git a/dist/samples/Components/Breadcrumb/Breadcrumb.js b/dist/samples/Components/Breadcrumb/Breadcrumb.js
new file mode 100644
index 000000000..703554415
--- /dev/null
+++ b/dist/samples/Components/Breadcrumb/Breadcrumb.js
@@ -0,0 +1,269 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Breadcrumb component
+ *
+ * Shows the user's current location in a hierarchy and provides a means of navigating upward.
+ *
+ */
+
+/**
+ * @namespace fabric
+ */
+var fabric = fabric || {};
+/**
+ *
+ * @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.
+ */
+fabric.Breadcrumb = function(container) {
+ this.breadcrumb = container;
+ this.breadcrumbList = container.querySelector('.ms-Breadcrumb-list');
+ this.listItems = container.querySelectorAll('.ms-Breadcrumb-listItem');
+ this.contextMenu = container.querySelector('.ms-ContextualMenu');
+ this.overflowButton = container.querySelector('.ms-Breadcrumb-overflowButton');
+ this.overflowMenu = container.querySelector('.ms-Breadcrumb-overflowMenu');
+ this.itemCollection = [];
+ this.currentMaxItems = 0;
+ this.init();
+
+};
+
+fabric.Breadcrumb.prototype = (function() {
+
+ //medium breakpoint
+ var MEDIUM = 639;
+
+ /**
+ * initializes component
+ */
+ var init = function() {
+ _setListeners.call(this);
+ _createItemCollection.call(this);
+ _onResize.call(this, null);
+ };
+
+ /**
+ * Adds a breadcrumb item to a breadcrumb
+ * @param itemLabel {String} the item's text label
+ * @param itemLink {String} the item's href link
+ * @param tabIndex {number} the item's tabIndex
+ */
+ var addItem = function(itemLabel, itemLink, tabIndex) {
+ this.itemCollection.push({text: itemLabel, link: itemLink, tabIndex: tabIndex});
+ _updateBreadcrumbs.call(this);
+ };
+
+ /**
+ * Removes a breadcrumb item by item label in the breadcrumbs list
+ * @param itemLabel {String} the item's text label
+ */
+ var removeItemByLabel = function(itemLabel) {
+ var i = this.itemCollection.length;
+ while (i--) {
+ if (this.itemCollection[i].text === itemLabel) {
+ this.itemCollection.splice(i, 1);
+ }
+ }
+ _updateBreadcrumbs.call(this);
+ };
+
+ /**
+ * removes a breadcrumb item by position in the breadcrumbs list
+ * index starts at 0
+ * @param itemLabel {String} the item's text label
+ * @param itemLink {String} the item's href link
+ * @param tabIndex {number} the item's tabIndex
+ */
+ var removeItemByPosition = function(value) {
+ this.itemCollection.splice(value, 1);
+ _updateBreadcrumbs.call(this);
+ };
+
+ /**
+ * create internal model of list items from DOM
+ */
+ var _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({text: text, link: link, tabIndex: tabIndex});
+ }
+ };
+
+ /**
+ * Re-render lists on resize
+ *
+ */
+ var _onResize = function() {
+ _closeOverflow.call(this, null);
+ _renderListOnResize.call(this);
+ };
+
+ /**
+ * render breadcrumbs and overflow menus on resize
+ */
+ var _renderListOnResize = function() {
+ var maxItems = window.innerWidth > MEDIUM ? 4 : 2;
+ if (maxItems !== this.currentMaxItems) {
+ _updateBreadcrumbs.call(this);
+ }
+
+ this.currentMaxItems = maxItems;
+ };
+
+ /**
+ * creates the overflow menu
+ */
+ var _addItemsToOverflow = function(maxItems) {
+ _resetList.call(this, this.contextMenu);
+ var end = this.itemCollection.length - maxItems;
+ var overflowItems = this.itemCollection.slice(0, end);
+ var contextMenu = this.contextMenu;
+ overflowItems.forEach(function(item) {
+ var li = document.createElement('li');
+ li.className = 'ms-ContextualMenu-item';
+ if(!isNaN(item.tabIndex)) {
+ li.setAttribute('tabindex', item.tabIndex);
+ }
+ var a = document.createElement('a');
+ a.className = 'ms-ContextualMenu-link';
+ if (item.link !== null) {
+ a.setAttribute('href', item.link);
+ }
+ a.textContent = item.text;
+ li.appendChild(a);
+ contextMenu.appendChild(li);
+ });
+ };
+
+ /**
+ * creates the breadcrumbs
+ */
+ var _addBreadcrumbItems = function(maxItems) {
+ _resetList.call(this, this.breadcrumbList);
+ var i = this.itemCollection.length - maxItems;
+ i = i < 0 ? 0 : i;
+ if (i >= 0) {
+ for (i; i < this.itemCollection.length; i++) {
+ var listItem = document.createElement('li');
+ var item = this.itemCollection[i];
+ var a = document.createElement('a');
+ var chevron = document.createElement('i');
+ listItem.className = 'ms-Breadcrumb-listItem';
+ a.className = 'ms-Breadcrumb-itemLink';
+ if (item.link !== null) {
+ a.setAttribute('href', item.link);
+ }
+ if (!isNaN(item.tabIndex)) {
+ a.setAttribute('tabindex', item.tabIndex);
+ }
+ a.textContent = item.text;
+ chevron.className = 'ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight';
+ listItem.appendChild(a);
+ listItem.appendChild(chevron);
+ this.breadcrumbList.appendChild(listItem);
+ }
+ }
+ };
+
+ /**
+ * resets a list by removing its children
+ */
+ var _resetList = function(list) {
+ while (list.firstChild) {
+ list.removeChild(list.firstChild);
+ }
+ };
+
+ /**
+ * opens the overflow menu
+ */
+ var _openOverflow = function(event) {
+ if (this.overflowMenu.className.indexOf(' is-open') === -1) {
+ this.overflowMenu.className += ' is-open';
+ removeOutlinesOnClick.call(this, event);
+ // force focus rect onto overflow button
+ this.overflowButton.focus();
+ }
+ };
+
+ var _overflowKeyPress = function(event) {
+ if (event.keyCode === 13) {
+ _openOverflow.call(this, event);
+ }
+ };
+
+ /**
+ * closes the overflow menu
+ */
+ var _closeOverflow = function(event) {
+ if (!event || event.target !== this.overflowButton) {
+ _removeClass.call(this, this.overflowMenu, ' is-open');
+ }
+ };
+
+ /**
+ * utility that removes a class from an element
+ */
+ var _removeClass = function (element, value) {
+ var index = element.className.indexOf(value);
+ if (index > -1) {
+ element.className = element.className.substring(0, index);
+ }
+ };
+
+ /**
+ * sets handlers for resize and button click events
+ */
+ var _setListeners = function() {
+ window.addEventListener('resize', _onResize.bind(this), false);
+ document.addEventListener('click', _closeOverflow.bind(this), false);
+ this.overflowButton.addEventListener('click', _openOverflow.bind(this), false);
+ this.overflowButton.addEventListener('keypress', _overflowKeyPress.bind(this), false);
+ this.breadcrumbList.addEventListener('click', removeOutlinesOnClick.bind(this), false);
+ };
+
+ /**
+ * removes focus outlines so they don't linger after click
+ */
+ var removeOutlinesOnClick = function(event) {
+ event.target.blur();
+ };
+
+ /**
+ * updates the breadcrumbs and overflow menu
+ */
+ var _updateBreadcrumbs = function() {
+ var maxItems = window.innerWidth > MEDIUM ? 4 : 2;
+ if (this.itemCollection.length > maxItems) {
+ this.breadcrumb.className += ' is-overflow';
+ } else {
+ _removeClass.call(this, this.breadcrumb, ' is-overflow');
+ }
+
+ _addBreadcrumbItems.call(this, maxItems);
+ _addItemsToOverflow.call(this, maxItems);
+ };
+
+ return {
+ init: init,
+ addItem: addItem,
+ removeItemByLabel: removeItemByLabel,
+ removeItemByPosition: removeItemByPosition
+ };
+
+}());
+
diff --git a/dist/samples/Components/Breadcrumb/Breadcrumb.min.css b/dist/samples/Components/Breadcrumb/Breadcrumb.min.css
new file mode 100644
index 000000000..c368e982c
--- /dev/null
+++ b/dist/samples/Components/Breadcrumb/Breadcrumb.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:2}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:2}.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;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;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{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}
\ No newline at end of file
diff --git a/dist/samples/Components/Breadcrumb/index.html b/dist/samples/Components/Breadcrumb/index.html
new file mode 100644
index 000000000..44f1f25ef
--- /dev/null
+++ b/dist/samples/Components/Breadcrumb/index.html
@@ -0,0 +1,143 @@
+
+
+
+
+
+
+
+ Component Breadcrumb
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Breadcrumb
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Button/Button.css b/dist/samples/Components/Button/Button.css
new file mode 100644
index 000000000..0c474b100
--- /dev/null
+++ b/dist/samples/Components/Button/Button.css
@@ -0,0 +1,315 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
diff --git a/dist/samples/Components/Button/Button.min.css b/dist/samples/Components/Button/Button.min.css
new file mode 100644
index 000000000..3063585db
--- /dev/null
+++ b/dist/samples/Components/Button/Button.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}
\ No newline at end of file
diff --git a/dist/samples/Components/Button/index.html b/dist/samples/Components/Button/index.html
new file mode 100644
index 000000000..ebb474613
--- /dev/null
+++ b/dist/samples/Components/Button/index.html
@@ -0,0 +1,144 @@
+
+
+
+
+
+
+
+ Component Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Button
+
+
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Callout/Callout.css b/dist/samples/Components/Callout/Callout.css
new file mode 100644
index 000000000..ab58cf8d6
--- /dev/null
+++ b/dist/samples/Components/Callout/Callout.css
@@ -0,0 +1,677 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-Callout {
+ z-index: 100;
+ margin: 16px auto;
+ position: relative;
+ width: 288px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ content: '';
+ position: absolute;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ height: 0;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowTop:before {
+ z-index: 0;
+ outline: 1px solid transparent;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:after {
+ z-index: 10;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ top: 40px;
+ display: none;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid #ffffff;
+ left: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid transparent;
+ right: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid transparent;
+ top: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid #ffffff;
+ bottom: -10px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ background-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ background-color: #ffffff;
+ }
+}
+
+.ms-Callout-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.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-inner {
+ height: 100%;
+ padding: 0 24px 20px;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding: 18px 24px 12px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-actions .ms-Link.ms-Link--hero {
+ position: relative;
+ left: -8px;
+}
+
+.ms-Callout-action {
+ position: relative;
+ top: 4px;
+ left: -8px;
+ margin-left: 0 !important;
+}
+
+.ms-Callout-action:hover .ms-Callout-actionIcon,
+.ms-Callout-action:focus .ms-Callout-actionIcon {
+ color: #0078d7;
+}
+
+.ms-Callout-button {
+ margin-right: 12px;
+}
+
+.ms-Callout.ms-Callout--close .ms-Callout-title {
+ margin-right: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after {
+ border-color: #0078d7;
+ background-color: transparent;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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;
+ margin-bottom: -8px;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after {
+ left: 40px;
+ right: auto;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after {
+ top: calc('50% - 10px');
+}
+
+.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;
+}
+
+@media (min-width: 480px) {
+ .ms-Callout {
+ width: 300px;
+ margin: 16px;
+ }
+
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after {
+ display: block;
+ }
+}
diff --git a/dist/samples/Components/Callout/Callout.min.css b/dist/samples/Components/Callout/Callout.min.css
new file mode 100644
index 000000000..b382fe0a8
--- /dev/null
+++ b/dist/samples/Components/Callout/Callout.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-Callout{z-index:3;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:2}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:1;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.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:5}.ms-Callout-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:4;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.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}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}
\ No newline at end of file
diff --git a/dist/samples/Components/Callout/index.html b/dist/samples/Components/Callout/index.html
new file mode 100644
index 000000000..32c7a56c3
--- /dev/null
+++ b/dist/samples/Components/Callout/index.html
@@ -0,0 +1,210 @@
+
+
+
+
+
+
+
+ Component Callout
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Callout
+
+
+
+
+
+
+
+
+
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
People automatically puts together all of the people you care most about in one place.
+
+
+
+
+ Save
+
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
People automatically puts together all of the people you care most about in one place.
+
+
+
+ More
+ Description of the action this button takes
+
+
+ Got it
+ Description of the action this button takes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ More
+ Description of the action this button takes
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/ChoiceField/ChoiceField.css b/dist/samples/Components/ChoiceField/ChoiceField.css
new file mode 100644
index 000000000..67bbd040f
--- /dev/null
+++ b/dist/samples/Components/ChoiceField/ChoiceField.css
@@ -0,0 +1,242 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-ChoiceField .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field {
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #eaeaea;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #00ff00;
+ color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #600000;
+ color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField-input {
+ position: absolute;
+ opacity: 0;
+ top: 8px;
+}
+
+.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+}
+
+.ms-ChoiceField-field:after {
+ content: '';
+ display: inline-block;
+ border: 1px #c8c8c8 solid;
+ width: 19px;
+ height: 19px;
+ cursor: pointer;
+ position: relative;
+ font-weight: normal;
+ left: -1px;
+ top: -1px;
+ border-radius: 50%;
+ position: absolute;
+}
+
+.ms-ChoiceField-field:hover:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ background-color: #666666;
+ border-color: #666666;
+ color: #666666;
+ border-radius: 50%;
+ content: '\00a0';
+ display: inline-block;
+ position: absolute;
+ top: 4px;
+ right: 0;
+ bottom: 0;
+ left: 4px;
+ width: 11px;
+ height: 11px;
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #ffffff;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #000000;
+ background-color: #000000;
+ }
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
+ background-color: #212121;
+ color: #212121;
+}
+
+.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after {
+ border-radius: 0;
+}
+
+.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ background-color: transparent;
+ border-radius: 0;
+ font-size: 13px;
+ top: 3px;
+ left: 3px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #ffffff;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #000000;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.ms-ChoiceFieldGroup {
+ margin-bottom: 4px;
+}
diff --git a/dist/samples/Components/ChoiceField/ChoiceField.min.css b/dist/samples/Components/ChoiceField/ChoiceField.min.css
new file mode 100644
index 000000000..1105dfb27
--- /dev/null
+++ b/dist/samples/Components/ChoiceField/ChoiceField.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}
\ No newline at end of file
diff --git a/dist/samples/Components/ChoiceField/index.html b/dist/samples/Components/ChoiceField/index.html
new file mode 100644
index 000000000..f50fc29fb
--- /dev/null
+++ b/dist/samples/Components/ChoiceField/index.html
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
+ Component ChoiceField
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ChoiceField
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/CommandBar/CommandBar.css b/dist/samples/Components/CommandBar/CommandBar.css
new file mode 100644
index 000000000..781de3c3f
--- /dev/null
+++ b/dist/samples/Components/CommandBar/CommandBar.css
@@ -0,0 +1,664 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
+
+.ms-CommandBar {
+ background-color: #eff6fc;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ padding-left: 58px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-mainArea {
+ padding-left: 24px;
+ }
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 12px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 16px;
+ }
+}
+
+.ms-CommandBarItem {
+ display: inline-block;
+ color: #0078d7;
+ height: 40px;
+ outline: none;
+ vertical-align: top;
+ margin-right: -4px;
+}
+
+.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ height: 38px;
+ outline: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ height: 38px;
+ outline: none;
+ }
+}
+
+.ms-CommandBarItem:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBarItem {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline;
+ }
+}
+
+.ms-CommandBarItem.is-hidden {
+ width: 0;
+ overflow: hidden;
+}
+
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown {
+ display: inline;
+}
+
+.ms-CommandBarItem-overflow {
+ display: none;
+}
+
+.ms-CommandBarItem-overflow.is-visible {
+ display: inline-block;
+}
+
+.ms-CommandBarItem-overflow .ms-Icon {
+ font-size: 14px;
+ color: #666666;
+}
+
+.ms-CommandBarItem-link {
+ line-height: 39px;
+ padding: 0 6px;
+ cursor: pointer;
+ height: 40px;
+ min-width: 20px;
+ text-align: center;
+ position: relative;
+ padding: 0 8px;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+}
+
+.ms-CommandBarItem-link:focus {
+ outline: none;
+}
+
+.ms-CommandBarItem-link:focus:before {
+ position: absolute;
+ left: 2px;
+ right: 2px;
+ top: 2px;
+ bottom: 2px;
+ border: 1px solid #a6a6a6;
+ content: '';
+}
+
+.ms-CommandBarItem-icon {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-CommandBarItem-chevronDown {
+ vertical-align: middle;
+ padding-bottom: 3px;
+ margin-top: 13px;
+ font-size: 1.1em;
+ line-height: 1em;
+ color: #666666;
+}
+
+.ms-CommandBarItem-chevronDown:before {
+ height: 10px;
+ line-height: 16px;
+}
+
+.ms-CommandBarSearch {
+ float: left;
+ width: 208px;
+ max-width: 208px;
+ background-color: #deecf9;
+ color: #333333;
+ height: 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-color: transparent;
+ transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ transition-property: width, background-color;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch {
+ overflow: hidden;
+ width: 50px;
+ position: absolute;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #ffffff;
+ z-index: 10;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch .ms-Icon--search {
+ margin-left: 2px;
+ margin-top: 12px;
+ vertical-align: top;
+}
+
+.ms-CommandBarSearch-input {
+ height: 40px;
+ padding: 8px 8px 8px 0;
+ border: none;
+ border-left: 42px solid transparent;
+ background-color: transparent;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+ cursor: pointer;
+ font-size: 14px;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #ffffff;
+ }
+}
+
+.ms-CommandBarSearch-input::-ms-clear {
+ display: none;
+}
+
+.ms-CommandBarSearch-input::-webkit-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::-moz-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:-ms-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper {
+ display: block;
+ padding-left: 15px;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper,
+.ms-CommandBarSearch-iconArrowWrapper {
+ top: 0;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.ms-CommandBarSearch-iconClearWrapper {
+ display: none;
+ top: 1px;
+ right: 0px;
+ z-index: 10;
+}
+
+.ms-CommandBarSearch.is-active {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch.is-active {
+ width: 100%;
+ position: absolute;
+ z-index: 10;
+ max-width: 100%;
+ }
+}
+
+.ms-CommandBarSearch.is-active:hover {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ cursor: text;
+ padding-right: 40px;
+ border-left-width: 8px;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
+ border-left-width: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ padding-right: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch-iconWrapper {
+ height: 40px;
+ line-height: 40px;
+ cursor: pointer;
+ padding: 0px 8px;
+ position: absolute;
+ width: 34px;
+ text-align: center;
+}
+
+.ms-CommandBarSearch .ms-Icon:before {
+ font-size: 17px;
+ color: #0078d7;
+}
diff --git a/dist/samples/Components/CommandBar/CommandBar.min.css b/dist/samples/Components/CommandBar/CommandBar.min.css
new file mode 100644
index 000000000..77fb1149b
--- /dev/null
+++ b/dist/samples/Components/CommandBar/CommandBar.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:3}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:2}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:2}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:2;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}
\ No newline at end of file
diff --git a/dist/samples/Components/CommandBar/Jquery.CommandBar.js b/dist/samples/Components/CommandBar/Jquery.CommandBar.js
new file mode 100644
index 000000000..5a63d9281
--- /dev/null
+++ b/dist/samples/Components/CommandBar/Jquery.CommandBar.js
@@ -0,0 +1,163 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Command Bar Plugin
+ */
+
+(function ($) {
+ $.fn.CommandBar = function () {
+
+ var createMenuItem = function(text) {
+ var item = '';
+
+ return item;
+ };
+
+ var saveCommands = function($commands, $commandWidth, $commandarea) {
+ var commands = [];
+ $commands.each(function() {
+ var $Item = $(this);
+ var $rightOffset = ($Item.position().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.position().left; // Added padding of 10
+ commands.push({ jquery: $Item, rightOffset: $rightOffset});
+ });
+
+ return commands;
+ };
+
+ var processCommands = function(commands, width, overflowwidth) {
+ var overFlowCommands = [];
+
+ for(var i=0; i < commands.length; i++) {
+ var $Item = commands[i].jquery;
+ var rightOffset = commands[i].rightOffset;
+
+ // If the command is outside the right boundaries add to overflow items
+ if(!$Item.hasClass('ms-CommandBarItem-overflow')) {
+ if((rightOffset + overflowwidth) > width) {
+ overFlowCommands.push($Item);
+ } else {
+ // Make sure item is displayed
+ $Item.removeClass('is-hidden');
+ }
+ }
+ }
+ return overFlowCommands;
+ };
+
+ var processOverflow = function(overFlowCommands, $oCommand, $menu) {
+ var overflowStrings = '';
+
+ if(overFlowCommands.length > 0) {
+ $oCommand.addClass("is-visible");
+ // Empty menu
+ $menu.html('');
+
+ // Add overflowed commands to ContextualMenu
+ for(var i = 0; i < overFlowCommands.length; i++) {
+ var $Item = $(overFlowCommands[i]);
+ // Hide Element in CommandBar
+ $Item.addClass('is-hidden');
+ var commandBarItemText = $Item.find('.ms-CommandBarItem-commandText').text();
+ overflowStrings += createMenuItem(commandBarItemText);
+ }
+ $menu.html(overflowStrings);
+ } else {
+ $oCommand.removeClass("is-visible");
+ }
+ };
+
+ /** Go through each CommandBar we've been given. */
+ return this.each(function () {
+ var $CommandBar = $(this);
+ var $CommandMainArea = $CommandBar.find('.ms-CommandBar-mainArea');
+ var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem').not('.ms-CommandBarItem-overflow');
+ var $OverflowCommand = $CommandBar.find('.ms-CommandBarItem-overflow');
+ var $OverflowCommandWidth = $CommandBar.find('.ms-CommandBarItem-overflow').outerWidth();
+ var $OverflowMenu = $CommandBar.find('.ms-CommandBar-overflowMenu');
+ var $SearchBox = $CommandBar.find('.ms-CommandBarSearch');
+ var mobileSwitch = false;
+ var overFlowCommands;
+ var allCommands;
+
+ // Go through process and save commands
+ allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+
+ // Initiate process commands and add commands to overflow on load
+ overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
+ processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
+
+ // Set Search Behavior
+ if($(window).width() < 640) {
+
+ $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+ });
+
+ }
+
+ // Add resize event handler on commandBar
+ $(window).resize(function() {
+ var overFlowCommands;
+
+ if($(window).width() < 640 && mobileSwitch === false) {
+ // Go through process and save commands
+ allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+
+ mobileSwitch = true;
+
+ // Search Behavior
+ $('.ms-CommandBarSearch-iconSearchWrapper').unbind();
+ $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+ });
+
+ } else if($(window).width() > 639 && mobileSwitch === true) {
+ // Go through process and save commands
+ allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+
+ mobileSwitch = false;
+ $('.ms-CommandBarSearch').unbind();
+
+ }
+
+ // Initiate process commands and add commands to overflow on load
+ overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
+ processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
+
+ });
+
+ // Hook up contextual menu
+ $OverflowCommand.click(function() {
+ $OverflowMenu.toggleClass('is-open');
+ });
+
+ $OverflowCommand.focusout(function() {
+ $OverflowMenu.removeClass('is-open');
+ });
+
+ $SearchBox.find('.ms-CommandBarSearch-input').click(function() {
+ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+ });
+
+ $SearchBox.find('.ms-CommandBarSearch-input').on('focus', function() {
+ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+ });
+
+ // When clicking the x clear the SearchBox and put state back to normal
+ $SearchBox.find('.ms-CommandBarSearch-iconClearWrapper').click(function() {
+ var $input = $(this).parent().find('.ms-CommandBarSearch-input');
+ $input.val('');
+ $input.parent().removeClass('is-active');
+ });
+
+ $SearchBox.parent().find('.ms-CommandBarSearch-input').blur(function() {
+ var $input = $(this);
+ $input.val('');
+ $input.parent().removeClass('is-active');
+ });
+
+ });
+ };
+})(jQuery);
\ No newline at end of file
diff --git a/dist/samples/Components/CommandBar/index.html b/dist/samples/Components/CommandBar/index.html
new file mode 100644
index 000000000..e023cb4b2
--- /dev/null
+++ b/dist/samples/Components/CommandBar/index.html
@@ -0,0 +1,192 @@
+
+
+
+
+
+
+
+ Component CommandBar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ CommandBar
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/ContextualMenu/ContextualMenu.css b/dist/samples/Components/ContextualMenu/ContextualMenu.css
new file mode 100644
index 000000000..2c226d7f9
--- /dev/null
+++ b/dist/samples/Components/ContextualMenu/ContextualMenu.css
@@ -0,0 +1,267 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
diff --git a/dist/samples/Components/ContextualMenu/ContextualMenu.min.css b/dist/samples/Components/ContextualMenu/ContextualMenu.min.css
new file mode 100644
index 000000000..5a7e8a565
--- /dev/null
+++ b/dist/samples/Components/ContextualMenu/ContextualMenu.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:2}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}
\ No newline at end of file
diff --git a/dist/samples/Components/ContextualMenu/Jquery.ContextualMenu.js b/dist/samples/Components/ContextualMenu/Jquery.ContextualMenu.js
new file mode 100644
index 000000000..2a27de244
--- /dev/null
+++ b/dist/samples/Components/ContextualMenu/Jquery.ContextualMenu.js
@@ -0,0 +1,59 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Contextual Menu Plugin
+ */
+(function ($) {
+ $.fn.ContextualMenu = function () {
+
+ /** Go through each nav bar we've been given. */
+ return this.each(function () {
+
+ var $contextualMenu = $(this);
+
+
+ // Set selected states.
+ $contextualMenu.on('click', '.ms-ContextualMenu-link:not(.is-disabled)', function(event) {
+ event.preventDefault();
+
+ // Check if multiselect - set selected states
+ if ( $contextualMenu.hasClass('ms-ContextualMenu--multiselect') ) {
+
+ // If already selected, remove selection; if not, add selection
+ if ( $(this).hasClass('is-selected') ) {
+ $(this).removeClass('is-selected');
+ }
+ else {
+ $(this).addClass('is-selected');
+ }
+
+ }
+ // All other contextual menu variants
+ else {
+
+ // Deselect all of the items and close any menus.
+ $('.ms-ContextualMenu-link')
+ .removeClass('is-selected')
+ .siblings('.ms-ContextualMenu')
+ .removeClass('is-open');
+
+ // Select this item.
+ $(this).addClass('is-selected');
+
+ // If this item has a menu, open it.
+ if ($(this).hasClass('ms-ContextualMenu-link--hasMenu')) {
+ $(this).siblings('.ms-ContextualMenu:first').addClass('is-open');
+
+ // Open the menu without bubbling up the click event,
+ // which can cause the menu to close.
+ event.stopPropagation();
+ }
+
+ }
+
+
+ });
+
+ });
+ };
+})(jQuery);
diff --git a/dist/samples/Components/ContextualMenu/index.html b/dist/samples/Components/ContextualMenu/index.html
new file mode 100644
index 000000000..73a6e9887
--- /dev/null
+++ b/dist/samples/Components/ContextualMenu/index.html
@@ -0,0 +1,176 @@
+
+
+
+
+
+
+
+ Component ContextualMenu
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ContextualMenu
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/DatePicker/DatePicker.css b/dist/samples/Components/DatePicker/DatePicker.css
new file mode 100644
index 000000000..1a83264a3
--- /dev/null
+++ b/dist/samples/Components/DatePicker/DatePicker.css
@@ -0,0 +1,831 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 8px;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder,
+.ms-TextField.is-disabled::-moz-placeholder,
+.ms-TextField.is-disabled:-moz-placeholder,
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder:after,
+.ms-TextField.is-required::-moz-placeholder:after,
+.ms-TextField.is-required:-moz-placeholder:after,
+.ms-TextField.is-required:-ms-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 10px 8px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field::-webkit-input-placeholder,
+.ms-TextField-field::-moz-placeholder,
+.ms-TextField-field:-moz-placeholder,
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #666666;
+ padding: 7px 0 7px 10px;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 12px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: bottom;
+ padding-left: 12px;
+ padding-bottom: 5px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 2px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.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: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-DatePicker {
+ 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 {
+ -webkit-animation-name: fadeIn, slideDownIn10;
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ 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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #c7e0f4;
+}
+
+.ms-DatePicker-day--disabled:before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.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;
+ text-align: center;
+ 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: 0px;
+ position: absolute;
+ top: 0px;
+ width: 140px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+ display: block;
+ font-weight: normal;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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: normal;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-right: 1px solid #eaeaea;
+ width: 220px;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-dayPicker {
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ left: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0 0;
+ }
+
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ .ms-DatePicker-month {
+ margin-left: 12px;
+ }
+
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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;
+ }
+}
diff --git a/dist/samples/Components/DatePicker/DatePicker.min.css b/dist/samples/Components/DatePicker/DatePicker.min.css
new file mode 100644
index 000000000..e9eb34d35
--- /dev/null
+++ b/dist/samples/Components/DatePicker/DatePicker.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.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{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-DatePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:3}.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:1}.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{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;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:2}.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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.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;line-height:40px;text-align:center;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:1;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.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-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;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}}
\ No newline at end of file
diff --git a/dist/samples/Components/DatePicker/Jquery.DatePicker.js b/dist/samples/Components/DatePicker/Jquery.DatePicker.js
new file mode 100644
index 000000000..74b4b6746
--- /dev/null
+++ b/dist/samples/Components/DatePicker/Jquery.DatePicker.js
@@ -0,0 +1,286 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+(function ($) {
+
+ /**
+ * DatePicker Plugin
+ */
+
+ $.fn.DatePicker = function (options) {
+
+ return this.each(function () {
+
+ /** Set up variables and run the Pickadate plugin. */
+ var $datePicker = $(this);
+ 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
+ today: '',
+ clear: '',
+ close: '',
+
+ // Events
+ onStart: function() {
+ initCustomView($datePicker);
+ },
+
+ // Classes
+ klass: {
+
+ // The element states
+ input: 'ms-DatePicker-input',
+ active: 'ms-DatePicker-input--active',
+
+ // The root picker and states
+ picker: 'ms-DatePicker-picker',
+ opened: 'ms-DatePicker-picker--opened',
+ focused: 'ms-DatePicker-picker--focused',
+
+ // The picker holder
+ holder: 'ms-DatePicker-holder',
+
+ // The picker frame, wrapper, and box
+ frame: 'ms-DatePicker-frame',
+ wrap: 'ms-DatePicker-wrap',
+ box: 'ms-DatePicker-dayPicker',
+
+ // The picker header
+ header: 'ms-DatePicker-header',
+
+ // Month & year labels
+ month: 'ms-DatePicker-month',
+ year: 'ms-DatePicker-year',
+
+ // Table of dates
+ table: 'ms-DatePicker-table',
+
+ // Weekday labels
+ weekdays: 'ms-DatePicker-weekday',
+
+ // Day states
+ day: 'ms-DatePicker-day',
+ disabled: 'ms-DatePicker-day--disabled',
+ selected: 'ms-DatePicker-day--selected',
+ highlighted: 'ms-DatePicker-day--highlighted',
+ now: 'ms-DatePicker-day--today',
+ infocus: 'ms-DatePicker-day--infocus',
+ outfocus: 'ms-DatePicker-day--outfocus',
+
+ }
+ },options||{}));
+ var $picker = $dateField.pickadate('picker');
+
+ /** Respond to built-in picker events. */
+ $picker.on({
+ render: function() {
+ updateCustomView($datePicker);
+ },
+ open: function() {
+ scrollUp($datePicker);
+ }
+ });
+
+ });
+ };
+
+ /**
+ * After the Pickadate plugin starts, this function
+ * adds additional controls to the picker view.
+ */
+ function initCustomView($datePicker) {
+
+ /** Get some variables 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. */
+ updateCustomView($datePicker);
+
+ /** Move back one month. */
+ $monthControls.on('click', '.js-prevMonth', function(event) {
+ event.preventDefault();
+ var newMonth = $picker.get('highlight').month - 1;
+ changeHighlightedDate($picker, null, newMonth, null);
+ });
+
+ /** Move ahead one month. */
+ $monthControls.on('click', '.js-nextMonth', function(event) {
+ event.preventDefault();
+ var newMonth = $picker.get('highlight').month + 1;
+ changeHighlightedDate($picker, null, newMonth, null);
+ });
+
+ /** Move back one year. */
+ $monthPicker.on('click', '.js-prevYear', function(event) {
+ event.preventDefault();
+ var newYear = $picker.get('highlight').year - 1;
+ changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Move ahead one year. */
+ $monthPicker.on('click', '.js-nextYear', function(event) {
+ event.preventDefault();
+ var newYear = $picker.get('highlight').year + 1;
+ changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Move back one decade. */
+ $yearPicker.on('click', '.js-prevDecade', function(event) {
+ event.preventDefault();
+ var newYear = $picker.get('highlight').year - 10;
+ changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Move ahead one decade. */
+ $yearPicker.on('click', '.js-nextDecade', function(event) {
+ event.preventDefault();
+ var newYear = $picker.get('highlight').year + 10;
+ changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Go to the current date, shown in the day picking view. */
+ $goToday.click(function(event) {
+ event.preventDefault();
+
+ /** Select the current date, while keeping the picker open. */
+ var now = new Date();
+ $picker.set('select', [now.getFullYear(), now.getMonth(), now.getDate()]);
+
+ /** Switch to the default (calendar) view. */
+ $datePicker.removeClass('is-pickingMonths').removeClass('is-pickingYears');
+
+ });
+
+ /** Change the highlighted month. */
+ $monthPicker.on('click', '.js-changeDate', function(event) {
+ event.preventDefault();
+
+ /** Get the requested date from the data attributes. */
+ var newYear = $(this).attr('data-year');
+ var newMonth = $(this).attr('data-month');
+ var newDay = $(this).attr('data-day');
+
+ /** Update the date. */
+ changeHighlightedDate($picker, newYear, newMonth, newDay);
+
+ /** If we've been in the "picking months" state on mobile, remove that state so we show the calendar again. */
+ if ($datePicker.hasClass('is-pickingMonths')) {
+ $datePicker.removeClass('is-pickingMonths');
+ }
+ });
+
+ /** Change the highlighted year. */
+ $yearPicker.on('click', '.js-changeDate', function(event) {
+ event.preventDefault();
+
+ /** Get the requested date from the data attributes. */
+ var newYear = $(this).attr('data-year');
+ var newMonth = $(this).attr('data-month');
+ var newDay = $(this).attr('data-day');
+
+ /** Update the date. */
+ changeHighlightedDate($picker, newYear, newMonth, newDay);
+
+ /** If we've been in the "picking years" state on mobile, remove that state so we show the calendar again. */
+ if ($datePicker.hasClass('is-pickingYears')) {
+ $datePicker.removeClass('is-pickingYears');
+ }
+ });
+
+ /** Switch to the default state. */
+ $monthPicker.on('click', '.js-showDayPicker', function() {
+ $datePicker.removeClass('is-pickingMonths');
+ $datePicker.removeClass('is-pickingYears');
+ });
+
+ /** Switch to the is-pickingMonths state. */
+ $monthControls.on('click', '.js-showMonthPicker', function() {
+ $datePicker.toggleClass('is-pickingMonths');
+ });
+
+ /** Switch to the is-pickingYears state. */
+ $monthPicker.on('click', '.js-showYearPicker', function() {
+ $datePicker.toggleClass('is-pickingYears');
+ });
+
+ }
+
+ /** Change the highlighted date. */
+ function changeHighlightedDate($picker, newYear, newMonth, newDay) {
+
+ /** All letiables are optional. If not provided, default to the current value. */
+ if (typeof newYear === "undefined" || newYear === null) {
+ newYear = $picker.get("highlight").year;
+ }
+ if (typeof newMonth === "undefined" || newMonth === null) {
+ newMonth = $picker.get("highlight").month;
+ }
+ if (typeof newDay === "undefined" || newDay === null) {
+ newDay = $picker.get("highlight").date;
+ }
+
+ /** Update it. */
+ $picker.set('highlight', [newYear, newMonth, newDay]);
+
+ }
+
+
+ /** Whenever the picker renders, do our own rendering on the custom controls. */
+ function updateCustomView($datePicker) {
+
+ /** Get some variables 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. */
+ function scrollUp($datePicker) {
+ $('html, body').animate({
+ scrollTop: $datePicker.offset().top
+ }, 367);
+ }
+
+})(jQuery);
diff --git a/dist/samples/Components/DatePicker/PickaDate.js b/dist/samples/Components/DatePicker/PickaDate.js
new file mode 100644
index 000000000..d539613f7
--- /dev/null
+++ b/dist/samples/Components/DatePicker/PickaDate.js
@@ -0,0 +1 @@
+!function(a){"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):this.Picker=a(jQuery)}(function(a){function b(f,g,h,k){function l(){return b._.node("div",b._.node("div",b._.node("div",b._.node("div",w.component.nodes(r.open),t.box),t.wrap),t.frame),t.holder)}function m(){u.data(g,w).addClass(t.input).val(u.data("value")?w.get("select",s.format):f.value).on("focus."+r.id+" click."+r.id,p),s.editable||u.on("keydown."+r.id,function(a){var b=a.keyCode,c=/^(8|46)$/.test(b);return 27==b?(w.close(),!1):void((32==b||c||!r.open&&w.component.key[b])&&(a.preventDefault(),a.stopPropagation(),c?w.clear().close():w.open()))}),e(f,{haspopup:!0,expanded:!1,readonly:!1,owns:f.id+"_root"+(w._hidden?" "+w._hidden.id:"")})}function n(){w.$root.on({focusin:function(a){w.$root.removeClass(t.focused),a.stopPropagation()},"mousedown click":function(b){var c=b.target;c!=w.$root.children()[0]&&(b.stopPropagation(),"mousedown"!=b.type||a(c).is(":input")||"OPTION"==c.nodeName||(b.preventDefault(),f.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var b=a(this),c=b.data(),d=b.hasClass(t.navDisabled)||b.hasClass(t.disabled),e=document.activeElement;e=e&&(e.type||e.href)&&e,(d||e&&!a.contains(w.$root[0],e))&&f.focus(),!d&&c.nav?w.set("highlight",w.component.item.highlight,{nav:c.nav}):!d&&"pick"in c?w.set("select",c.pick).close(!0):c.clear?w.clear().close(!0):c.close&&w.close(!0)}),e(w.$root[0],"hidden",!0)}function o(){var b;s.hiddenName===!0?(b=f.name,f.name=""):(b=["string"==typeof s.hiddenPrefix?s.hiddenPrefix:"","string"==typeof s.hiddenSuffix?s.hiddenSuffix:"_submit"],b=b[0]+f.name+b[1]),w._hidden=a(' ")[0],u.on("change."+r.id,function(){w._hidden.value=f.value?w.get("select",s.formatSubmit):""}).after(w._hidden)}function p(a){a.stopPropagation(),"focus"==a.type&&w.$root.addClass(t.focused),w.open()}if(!f)return b;var q=!1,r={id:f.id||"P"+Math.abs(~~(Math.random()*new Date))},s=h?a.extend(!0,{},h.defaults,k):k||{},t=a.extend({},b.klasses(),s.klass),u=a(f),v=function(){return this.start()},w=v.prototype={constructor:v,$node:u,start:function(){return r&&r.start?w:(r.methods={},r.start=!0,r.open=!1,r.type=f.type,f.autofocus=f==document.activeElement,f.readOnly=!s.editable,f.id=f.id||r.id,"text"!=f.type&&(f.type="text"),w.component=new h(w,s),w.$root=a(b._.node("div",l(),t.picker,'id="'+f.id+'_root"')),n(),s.formatSubmit&&o(),m(),s.container?a(s.container).append(w.$root):u.after(w.$root),w.on({start:w.component.onStart,render:w.component.onRender,stop:w.component.onStop,open:w.component.onOpen,close:w.component.onClose,set:w.component.onSet}).on({start:s.onStart,render:s.onRender,stop:s.onStop,open:s.onOpen,close:s.onClose,set:s.onSet}),q=c(w.$root.children()[0]),f.autofocus&&w.open(),w.trigger("start").trigger("render"))},render:function(a){return a?w.$root.html(l()):w.$root.find("."+t.box).html(w.component.nodes(r.open)),w.trigger("render")},stop:function(){return r.start?(w.close(),w._hidden&&w._hidden.parentNode.removeChild(w._hidden),w.$root.remove(),u.removeClass(t.input).removeData(g),setTimeout(function(){u.off("."+r.id)},0),f.type=r.type,f.readOnly=!1,w.trigger("stop"),r.methods={},r.start=!1,w):w},open:function(c){return r.open?w:(u.addClass(t.active),e(f,"expanded",!0),setTimeout(function(){w.$root.addClass(t.opened),e(w.$root[0],"hidden",!1)},0),c!==!1&&(r.open=!0,q&&j.css("overflow","hidden").css("padding-right","+="+d()),u.trigger("focus"),i.on("click."+r.id+" focusin."+r.id,function(a){var b=a.target;b!=f&&b!=document&&3!=a.which&&w.close(b===w.$root.children()[0])}).on("keydown."+r.id,function(c){var d=c.keyCode,e=w.component.key[d],g=c.target;27==d?w.close(!0):g!=f||!e&&13!=d?a.contains(w.$root[0],g)&&13==d&&(c.preventDefault(),g.click()):(c.preventDefault(),e?b._.trigger(w.component.key.go,w,[b._.trigger(e)]):w.$root.find("."+t.highlighted).hasClass(t.disabled)||w.set("select",w.component.item.highlight).close())})),w.trigger("open"))},close:function(a){return a&&(u.off("focus."+r.id).trigger("focus"),setTimeout(function(){u.on("focus."+r.id,p)},0)),u.removeClass(t.active),e(f,"expanded",!1),setTimeout(function(){w.$root.removeClass(t.opened+" "+t.focused),e(w.$root[0],"hidden",!0)},0),r.open?(r.open=!1,q&&j.css("overflow","").css("padding-right","-="+d()),i.off("."+r.id),w.trigger("close")):w},clear:function(a){return w.set("clear",null,a)},set:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(d=g&&a.isPlainObject(c)?c:d||{},b){g||(h[b]=c);for(e in h)f=h[e],e in w.component.item&&(void 0===f&&(f=null),w.component.set(e,f,d)),("select"==e||"clear"==e)&&u.val("clear"==e?"":w.get(e,s.format)).trigger("change");w.render()}return d.muted?w:w.trigger("set",h)},get:function(a,c){if(a=a||"value",null!=r[a])return r[a];if("value"==a)return f.value;if(a in w.component.item){if("string"==typeof c){var d=w.component.get(a);return d?b._.trigger(w.component.formats.toString,w.component,[c,d]):""}return w.component.get(a)}},on:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(b){g||(h[b]=c);for(e in h)f=h[e],d&&(e="_"+e),r.methods[e]=r.methods[e]||[],r.methods[e].push(f)}return w},off:function(){var a,b,c=arguments;for(a=0,namesCount=c.length;namesCount>a;a+=1)b=c[a],b in r.methods&&delete r.methods[b];return w},trigger:function(a,c){var d=function(a){var d=r.methods[a];d&&d.map(function(a){b._.trigger(a,w,[c])})};return d("_"+a),d(a),w}};return new v}function c(a){var b,c="position";return a.currentStyle?b=a.currentStyle[c]:window.getComputedStyle&&(b=getComputedStyle(a)[c]),"fixed"==b}function d(){if(j.height()<=h.height())return 0;var b=a('
').appendTo("body"),c=b[0].offsetWidth;b.css("overflow","scroll");var d=a('
').appendTo(b),e=d[0].offsetWidth;return b.remove(),c-e}function e(b,c,d){if(a.isPlainObject(c))for(var e in c)f(b,e,c[e]);else f(b,c,d)}function f(a,b,c){a.setAttribute(("role"==b?"":"aria-")+b,c)}function g(b,c){a.isPlainObject(b)||(b={attribute:c}),c="";for(var d in b){var e=("role"==d?"":"aria-")+d,f=b[d];c+=null==f?"":e+'="'+b[d]+'"'}return c}var h=a(window),i=a(document),j=a(document.documentElement);return b.klasses=function(a){return a=a||"picker",{picker:a,opened:a+"--opened",focused:a+"--focused",input:a+"__input",active:a+"__input--active",holder:a+"__holder",frame:a+"__frame",wrap:a+"__wrap",box:a+"__box"}},b._={group:function(a){for(var c,d="",e=b._.trigger(a.min,a);e<=b._.trigger(a.max,a,[e]);e+=a.i)c=b._.trigger(a.item,a,[e]),d+=b._.node(a.node,c[0],c[1],c[2]);return d},node:function(b,c,d,e){return c?(c=a.isArray(c)?c.join(""):c,d=d?' class="'+d+'"':"",e=e?" "+e:"","<"+b+d+e+">"+c+""+b+">"):""},lead:function(a){return(10>a?"0":"")+a},trigger:function(a,b,c){return"function"==typeof a?a.apply(b,c||[]):a},digits:function(a){return/\d/.test(a[1])?2:1},isDate:function(a){return{}.toString.call(a).indexOf("Date")>-1&&this.isInteger(a.getUTCDate())},isInteger:function(a){return{}.toString.call(a).indexOf("Number")>-1&&a%1===0},ariaAttr:g},b.extend=function(c,d){a.fn[c]=function(e,f){var g=this.data(c);return"picker"==e?g:g&&"string"==typeof e?b._.trigger(g[e],g,[f]):this.each(function(){var f=a(this);f.data(c)||new b(this,c,d,e)})},a.fn[c].defaults=d.defaults},b}),function(a){"function"==typeof define&&define.amd?define(["picker","jquery"],a):"object"==typeof exports?module.exports=a(require("./picker.js"),require("jquery")):a(Picker,jQuery)}(function(a,b){function c(a,b){var c=this,d=a.$node[0],e=d.value,f=a.$node.data("value"),g=f||e,h=f?b.formatSubmit:b.format,i=function(){return d.currentStyle?"rtl"==d.currentStyle.direction:"rtl"==getComputedStyle(a.$root[0]).direction};c.settings=b,c.$node=a.$node,c.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},c.item={},c.item.clear=null,c.item.disable=(b.disable||[]).slice(0),c.item.enable=-function(a){return a[0]===!0?a.shift():-1}(c.item.disable),c.set("min",b.min).set("max",b.max).set("now"),g?c.set("select",g,{format:h}):c.set("select",null).set("highlight",c.item.now),c.key={40:7,38:-7,39:function(){return i()?-1:1},37:function(){return i()?1:-1},go:function(a){var b=c.item.highlight,d=new Date(Date.UTC(b.year,b.month,b.date+a));c.set("highlight",d,{interval:a}),this.render()}},a.on("render",function(){a.$root.find("."+b.klass.selectMonth).on("change",function(){var c=this.value;c&&(a.set("highlight",[a.get("view").year,c,a.get("highlight").date]),a.$root.find("."+b.klass.selectMonth).trigger("focus"))}),a.$root.find("."+b.klass.selectYear).on("change",function(){var c=this.value;c&&(a.set("highlight",[c,a.get("view").month,a.get("highlight").date]),a.$root.find("."+b.klass.selectYear).trigger("focus"))})},1).on("open",function(){var d="";c.disabled(c.get("now"))&&(d=":not(."+b.klass.buttonToday+")"),a.$root.find("button"+d+", select").attr("disabled",!1)},1).on("close",function(){a.$root.find("button, select").attr("disabled",!0)},1)}var d=7,e=6,f=a._;c.prototype.set=function(a,b,c){var d=this,e=d.item;return null===b?("clear"==a&&(a="select"),e[a]=b,d):(e["enable"==a?"disable":"flip"==a?"enable":a]=d.queue[a].split(" ").map(function(e){return b=d[e](a,b,c)}).pop(),"select"==a?d.set("highlight",e.select,c):"highlight"==a?d.set("view",e.highlight,c):a.match(/^(flip|min|max|disable|enable)$/)&&(e.select&&d.disabled(e.select)&&d.set("select",e.select,c),e.highlight&&d.disabled(e.highlight)&&d.set("highlight",e.highlight,c)),d)},c.prototype.get=function(a){return this.item[a]},c.prototype.create=function(a,c,d){var e,g=this;return c=void 0===c?a:c,c==-1/0||1/0==c?e=c:b.isPlainObject(c)&&f.isInteger(c.pick)?c=c.obj:b.isArray(c)?(c=new Date(Date.UTC(c[0],c[1],c[2])),c=f.isDate(c)?c:g.create().obj):c=f.isInteger(c)?g.normalize(new Date(c),d):f.isDate(c)?g.normalize(c,d):g.now(a,c,d),{year:e||c.getUTCFullYear(),month:e||c.getUTCMonth(),date:e||c.getUTCDate(),day:e||c.getUTCDay(),obj:e||c,pick:e||c.getTime()}},c.prototype.createRange=function(a,c){var d=this,e=function(a){return a===!0||b.isArray(a)||f.isDate(a)?d.create(a):a};return f.isInteger(a)||(a=e(a)),f.isInteger(c)||(c=e(c)),f.isInteger(a)&&b.isPlainObject(c)?a=[c.year,c.month,c.date+a]:f.isInteger(c)&&b.isPlainObject(a)&&(c=[a.year,a.month,a.date+c]),{from:e(a),to:e(c)}},c.prototype.withinRange=function(a,b){return a=this.createRange(a.from,a.to),b.pick>=a.from.pick&&b.pick<=a.to.pick},c.prototype.overlapRanges=function(a,b){var c=this;return a=c.createRange(a.from,a.to),b=c.createRange(b.from,b.to),c.withinRange(a,b.from)||c.withinRange(a,b.to)||c.withinRange(b,a.from)||c.withinRange(b,a.to)},c.prototype.now=function(a,b,c){return b=new Date,c&&c.rel&&b.setUTCDate(b.getUTCDate()+c.rel),this.normalize(b,c)},c.prototype.navigate=function(a,c,d){var e,f,g,h,i=b.isArray(c),j=b.isPlainObject(c),k=this.item.view;if(i||j){for(j?(f=c.year,g=c.month,h=c.date):(f=+c[0],g=+c[1],h=+c[2]),d&&d.nav&&k&&k.month!==g&&(f=k.year,g=k.month),e=new Date(Date.UTC(f,g+(d&&d.nav?d.nav:0),1)),f=e.getUTCFullYear(),g=e.getUTCMonth();new Date(Date.UTC(f,g,h)).getUTCMonth()!==g;)h-=1;c=[f,g,h]}return c},c.prototype.normalize=function(a){return a.setUTCHours(0,0,0,0),a},c.prototype.measure=function(a,b){var c=this;return b?"string"==typeof b?b=c.parse(a,b):f.isInteger(b)&&(b=c.now(a,b,{rel:b})):b="min"==a?-1/0:1/0,b},c.prototype.viewset=function(a,b){return this.create([b.year,b.month,1])},c.prototype.validate=function(a,c,d){var e,g,h,i,j=this,k=c,l=d&&d.interval?d.interval:1,m=-1===j.item.enable,n=j.item.min,o=j.item.max,p=m&&j.item.disable.filter(function(a){if(b.isArray(a)){var d=j.create(a).pick;dc.pick&&(g=!0)}return f.isInteger(a)}).length;if((!d||!d.nav)&&(!m&&j.disabled(c)||m&&j.disabled(c)&&(p||e||g)||!m&&(c.pick<=n.pick||c.pick>=o.pick)))for(m&&!p&&(!g&&l>0||!e&&0>l)&&(l*=-1);j.disabled(c)&&(Math.abs(l)>1&&(c.monthk.month)&&(c=k,l=l>0?1:-1),c.pick<=n.pick?(h=!0,l=1,c=j.create([n.year,n.month,n.date+(c.pick===n.pick?0:-1)])):c.pick>=o.pick&&(i=!0,l=-1,c=j.create([o.year,o.month,o.date+(c.pick===o.pick?0:1)])),!h||!i);)c=j.create([c.year,c.month,c.date+l]);return c},c.prototype.disabled=function(a){var c=this,d=c.item.disable.filter(function(d){return f.isInteger(d)?a.day===(c.settings.firstDay?d:d-1)%7:b.isArray(d)||f.isDate(d)?a.pick===c.create(d).pick:b.isPlainObject(d)?c.withinRange(d,a):void 0});return d=d.length&&!d.filter(function(a){return b.isArray(a)&&"inverted"==a[3]||b.isPlainObject(a)&&a.inverted}).length,-1===c.item.enable?!d:d||a.pickc.item.max.pick},c.prototype.parse=function(a,b,c){var d=this,e={};return b&&"string"==typeof b?(c&&c.format||(c=c||{},c.format=d.settings.format),d.formats.toArray(c.format).map(function(a){var c=d.formats[a],g=c?f.trigger(c,d,[b,e]):a.replace(/^!/,"").length;c&&(e[a]=b.substr(0,g)),b=b.substr(g)}),[e.yyyy||e.yy,+(e.mm||e.m)-1,e.dd||e.d]):b},c.prototype.formats=function(){function a(a,b,c){var d=a.match(/\w+/)[0];return c.mm||c.m||(c.m=b.indexOf(d)+1),d.length}function b(a){return a.match(/\w+/)[0].length}return{d:function(a,b){return a?f.digits(a):b.date},dd:function(a,b){return a?2:f.lead(b.date)},ddd:function(a,c){return a?b(a):this.settings.weekdaysShort[c.day]},dddd:function(a,c){return a?b(a):this.settings.weekdaysFull[c.day]},m:function(a,b){return a?f.digits(a):b.month+1},mm:function(a,b){return a?2:f.lead(b.month+1)},mmm:function(b,c){var d=this.settings.monthsShort;return b?a(b,d,c):d[c.month]},mmmm:function(b,c){var d=this.settings.monthsFull;return b?a(b,d,c):d[c.month]},yy:function(a,b){return a?2:(""+b.year).slice(2)},yyyy:function(a,b){return a?4:b.year},toArray:function(a){return a.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(a,b){var c=this;return c.formats.toArray(a).map(function(a){return f.trigger(c.formats[a],c,[0,b])||a.replace(/^!/,"")}).join("")}}}(),c.prototype.isDateExact=function(a,c){var d=this;return f.isInteger(a)&&f.isInteger(c)||"boolean"==typeof a&&"boolean"==typeof c?a===c:(f.isDate(a)||b.isArray(a))&&(f.isDate(c)||b.isArray(c))?d.create(a).pick===d.create(c).pick:b.isPlainObject(a)&&b.isPlainObject(c)?d.isDateExact(a.from,c.from)&&d.isDateExact(a.to,c.to):!1},c.prototype.isDateOverlap=function(a,c){var d=this,e=d.settings.firstDay?1:0;return f.isInteger(a)&&(f.isDate(c)||b.isArray(c))?(a=a%7+e,a===d.create(c).day+1):f.isInteger(c)&&(f.isDate(a)||b.isArray(a))?(c=c%7+e,c===d.create(a).day+1):b.isPlainObject(a)&&b.isPlainObject(c)?d.overlapRanges(a,c):!1},c.prototype.flipEnable=function(a){var b=this.item;b.enable=a||(-1==b.enable?1:-1)},c.prototype.deactivate=function(a,c){var d=this,e=d.item.disable.slice(0);return"flip"==c?d.flipEnable():c===!1?(d.flipEnable(1),e=[]):c===!0?(d.flipEnable(-1),e=[]):c.map(function(a){for(var c,g=0;gi;i+=1){if(h=e[i],d.isDateExact(h,a)){c=e[i]=null,j=!0;break}if(d.isDateOverlap(h,a)){b.isPlainObject(a)?(a.inverted=!0,c=a):b.isArray(a)?(c=a,c[3]||c.push("inverted")):f.isDate(a)&&(c=[a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),"inverted"]);break}}if(c)for(i=0;g>i;i+=1)if(d.isDateExact(e[i],a)){e[i]=null;break}if(j)for(i=0;g>i;i+=1)if(d.isDateOverlap(e[i],a)){e[i]=null;break}c&&e.push(c)}),e.filter(function(a){return null!=a})},c.prototype.nodes=function(a){var b=this,c=b.settings,g=b.item,h=g.now,i=g.select,j=g.highlight,k=g.view,l=g.disable,m=g.min,n=g.max,o=function(a,b){return c.firstDay&&(a.push(a.shift()),b.push(b.shift())),f.node("thead",f.node("tr",f.group({min:0,max:d-1,i:1,node:"th",item:function(d){return[a[d],c.klass.weekdays,'scope=col title="'+b[d]+'"']}})))}((c.showWeekdaysFull?c.weekdaysFull:c.weekdaysShort).slice(0),c.weekdaysFull.slice(0)),p=function(a){return f.node("div"," ",c.klass["nav"+(a?"Next":"Prev")]+(a&&k.year>=n.year&&k.month>=n.month||!a&&k.year<=m.year&&k.month<=m.month?" "+c.klass.navDisabled:""),"data-nav="+(a||-1)+" "+f.ariaAttr({role:"button",components:b.$node[0].id+"_table"})+' title="'+(a?c.labelMonthNext:c.labelMonthPrev)+'"')},q=function(){var d=c.showMonthsShort?c.monthsShort:c.monthsFull;return c.selectMonths?f.node("select",f.group({min:0,max:11,i:1,node:"option",item:function(a){return[d[a],0,"value="+a+(k.month==a?" selected":"")+(k.year==m.year&&an.month?" disabled":"")]}}),c.klass.selectMonth,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelMonthSelect+'"'):f.node("div",d[k.month],c.klass.month)},r=function(){var d=k.year,e=c.selectYears===!0?5:~~(c.selectYears/2);if(e){var g=m.year,h=n.year,i=d-e,j=d+e;if(g>i&&(j+=g-i,i=g),j>h){var l=i-g,o=j-h;i-=l>o?o:l,j=h}return f.node("select",f.group({min:i,max:j,i:1,node:"option",item:function(a){return[a,0,"value="+a+(d==a?" selected":"")]}}),c.klass.selectYear,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelYearSelect+'"')}return f.node("div",d,c.klass.year)};return f.node("div",(c.selectYears?r()+q():q()+r())+p()+p(1),c.klass.header)+f.node("table",o+f.node("tbody",f.group({min:0,max:e-1,i:1,node:"tr",item:function(a){var e=c.firstDay&&0===b.create([k.year,k.month,1]).day?-7:0;return[f.group({min:d*a-k.day+e+1,max:function(){return this.min+d-1},i:1,node:"td",item:function(a){a=b.create([k.year,k.month,a+(c.firstDay?1:0)]);var d=i&&i.pick==a.pick,e=j&&j.pick==a.pick,g=l&&b.disabled(a)||a.pickn.pick;return[f.node("div",a.date,function(b){return b.push(k.month==a.month?c.klass.infocus:c.klass.outfocus),h.pick==a.pick&&b.push(c.klass.now),d&&b.push(c.klass.selected),e&&b.push(c.klass.highlighted),g&&b.push(c.klass.disabled),b.join(" ")}([c.klass.day]),"data-pick="+a.pick+" "+f.ariaAttr({role:"gridcell",selected:d&&b.$node.val()===f.trigger(b.formats.toString,b,[c.format,a])?!0:null,activedescendant:e?!0:null,disabled:g?!0:null})),"",f.ariaAttr({role:"presentation"})]}})]}})),c.klass.table,'id="'+b.$node[0].id+'_table" '+f.ariaAttr({role:"grid",components:b.$node[0].id,readonly:!0}))+f.node("div",f.node("button",c.today,c.klass.buttonToday,"type=button data-pick="+h.pick+(a&&!b.disabled(h)?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.clear,c.klass.buttonClear,"type=button data-clear=1"+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.close,c.klass.buttonClose,"type=button data-close=true "+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id})),c.klass.footer)},c.defaults=function(a){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:a+"table",header:a+"header",navPrev:a+"nav--prev",navNext:a+"nav--next",navDisabled:a+"nav--disabled",month:a+"month",year:a+"year",selectMonth:a+"select--month",selectYear:a+"select--year",weekdays:a+"weekday",day:a+"day",disabled:a+"day--disabled",selected:a+"day--selected",highlighted:a+"day--highlighted",now:a+"day--today",infocus:a+"day--infocus",outfocus:a+"day--outfocus",footer:a+"footer",buttonClear:a+"button--clear",buttonToday:a+"button--today",buttonClose:a+"button--close"}}}(a.klasses().picker+"__"),a.extend("pickadate",c)});
diff --git a/dist/samples/Components/DatePicker/index.html b/dist/samples/Components/DatePicker/index.html
new file mode 100644
index 000000000..98d138dac
--- /dev/null
+++ b/dist/samples/Components/DatePicker/index.html
@@ -0,0 +1,152 @@
+
+
+
+
+
+
+
+ Component DatePicker
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ DatePicker
+
+
+
+
+
+
+ Start date
+
+
+
+
+
+
+
+
+
Go to today
+
+
+
+ Jan
+ Feb
+ Mar
+ Apr
+ May
+ Jun
+ Jul
+ Aug
+ Sep
+ Oct
+ Nov
+ Dec
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Dialog/Dialog.css b/dist/samples/Components/Dialog/Dialog.css
new file mode 100644
index 000000000..4bcc46e26
--- /dev/null
+++ b/dist/samples/Components/Dialog/Dialog.css
@@ -0,0 +1,693 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-ChoiceField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-ChoiceField .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field {
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #eaeaea;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #00ff00;
+ color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #600000;
+ color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField-input {
+ position: absolute;
+ opacity: 0;
+ top: 8px;
+}
+
+.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+}
+
+.ms-ChoiceField-field:after {
+ content: '';
+ display: inline-block;
+ border: 1px #c8c8c8 solid;
+ width: 19px;
+ height: 19px;
+ cursor: pointer;
+ position: relative;
+ font-weight: normal;
+ left: -1px;
+ top: -1px;
+ border-radius: 50%;
+ position: absolute;
+}
+
+.ms-ChoiceField-field:hover:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ background-color: #666666;
+ border-color: #666666;
+ color: #666666;
+ border-radius: 50%;
+ content: '\00a0';
+ display: inline-block;
+ position: absolute;
+ top: 4px;
+ right: 0;
+ bottom: 0;
+ left: 4px;
+ width: 11px;
+ height: 11px;
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #ffffff;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #000000;
+ background-color: #000000;
+ }
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
+ background-color: #212121;
+ color: #212121;
+}
+
+.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after {
+ border-radius: 0;
+}
+
+.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ background-color: transparent;
+ border-radius: 0;
+ font-size: 13px;
+ top: 3px;
+ left: 3px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #ffffff;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #000000;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.ms-ChoiceFieldGroup {
+ margin-bottom: 4px;
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Dialog {
+ background-color: transparent;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 300;
+ display: block;
+ font-size: 0;
+ line-height: 100vh;
+ text-align: center;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+}
+
+.ms-Dialog::before {
+ vertical-align: middle;
+ display: inline-block;
+ content: '';
+ height: 100%;
+ width: 0;
+}
+
+.ms-Dialog .ms-Button.ms-Button--compound {
+ display: block;
+ margin-left: 0;
+}
+
+.ms-Dialog .ms-Overlay {
+ z-index: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dialog .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Dialog-main {
+ vertical-align: middle;
+ display: inline-block;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ box-sizing: border-box;
+ line-height: 1.35;
+ margin: auto;
+ width: 288px;
+ position: relative;
+ text-align: left;
+ outline: 3px solid transparent;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close {
+ display: none;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ z-index: 10;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Dialog-inner {
+ height: 100%;
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog-header {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 20px 15px;
+}
+
+.ms-Dialog-title {
+ margin: 0;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+ width: 100%;
+}
+
+.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog-subText {
+ margin: 0 0 20px 0;
+ padding-top: 8px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Dialog-actions {
+ position: relative;
+ width: 100%;
+ min-height: 24px;
+ line-height: 24px;
+ margin: 20px 0 0;
+ font-size: 0;
+}
+
+.ms-Dialog-actions .ms-Button {
+ line-height: normal;
+}
+
+.ms-Dialog-actionsRight {
+ text-align: right;
+ font-size: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action:first-child {
+ margin: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action {
+ margin: 0 0 0 16px;
+}
+
+.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-button--close {
+ display: block;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner {
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header {
+ background-color: #0078d7;
+ padding: 26px 20px 28px;
+ margin-bottom: 8px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ font-size: 28px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #ffffff;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText {
+ font-size: 14px;
+}
+
+@media (min-width: 480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
diff --git a/dist/samples/Components/Dialog/Dialog.min.css b/dist/samples/Components/Dialog/Dialog.min.css
new file mode 100644
index 000000000..2216bdf5f
--- /dev/null
+++ b/dist/samples/Components/Dialog/Dialog.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:3;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:1}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.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-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}
\ No newline at end of file
diff --git a/dist/samples/Components/Dialog/index.html b/dist/samples/Components/Dialog/index.html
new file mode 100644
index 000000000..59842caef
--- /dev/null
+++ b/dist/samples/Components/Dialog/index.html
@@ -0,0 +1,300 @@
+
+
+
+
+
+
+
+ Component Dialog
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dialog
+
+
+
+
+
+ Open Dialog
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
+
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
+
+
+ Option1
+
+
+
+ Option2
+
+
+
+
+
+ Save
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
+
+
+ Open Dialog - Close
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
+
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
+
+
+ Option1
+
+
+
+ Option2
+
+
+
+
+
+ Save
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
+
+
+ Open Dialog - Large Header
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+ Open Dialog - Multiline
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+
+
+
+
+
+
+
+ Open Dialog - Blocking
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
+
Are you sure you want to discard these changes?
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Dialog/jquery.Dialog.js b/dist/samples/Components/Dialog/jquery.Dialog.js
new file mode 100644
index 000000000..0d647332f
--- /dev/null
+++ b/dist/samples/Components/Dialog/jquery.Dialog.js
@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Dialog Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Dialog components.
+ *
+ * @param {jQuery Object} One or more .ms-Dialog components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.Dialog = function () {
+
+ /** Iterate through the sample buttons, which can be used to open the Dialogs. */
+ $(".js-DialogAction--open").each(function () {
+ /** Open the associated dialog on click. */
+ $(this).on('click', function () {
+ var target = $(this).data("target");
+ $(target).show();
+ });
+ });
+
+
+ return this.each(function () {
+ var dialog = this;
+
+ /** Have the dialogs hidden for their initial state */
+ $(dialog).hide();
+
+ /** Have the close buttons close the Dialog. */
+ $(dialog).find(".js-DialogAction--close").each(function() {
+ $(this).on('click', function () {
+ $(dialog).hide();
+ });
+ });
+
+ /** Have the action buttons close the Dialog, though you would usually do some specific action per button. */
+ $(dialog).find(".ms-Dialog-action").on('click', function () {
+ $(dialog).hide();
+ });
+
+ });
+ };
+})(jQuery);
diff --git a/dist/samples/Components/Dropdown/Dropdown.css b/dist/samples/Components/Dropdown/Dropdown.css
new file mode 100644
index 000000000..111afeece
--- /dev/null
+++ b/dist/samples/Components/Dropdown/Dropdown.css
@@ -0,0 +1,329 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Dropdown {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ 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.ms-Dropdown--open .ms-Dropdown-items,
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: fixed;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #666666;
+ font-size: 17px;
+ position: absolute;
+ right: 9px;
+ bottom: 5px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ line-height: 30px;
+ padding: 0 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-items {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ max-width: 268px;
+ z-index: 400;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow-y: scroll;
+}
+
+.ms-Dropdown-items:before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 38px;
+ padding: 0 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:first-child,
+.ms-Dropdown-item:last-child {
+ height: 39px;
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Dropdown-items {
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+ }
+
+ .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
+ .ms-Dropdown.is-open .ms-Dropdown-items {
+ position: absolute;
+ }
+}
diff --git a/dist/samples/Components/Dropdown/Dropdown.min.css b/dist/samples/Components/Dropdown/Dropdown.min.css
new file mode 100644
index 000000000..cd404bc55
--- /dev/null
+++ b/dist/samples/Components/Dropdown/Dropdown.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;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,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}
\ No newline at end of file
diff --git a/dist/samples/Components/Dropdown/Jquery.Dropdown.js b/dist/samples/Components/Dropdown/Jquery.Dropdown.js
new file mode 100644
index 000000000..30b806c56
--- /dev/null
+++ b/dist/samples/Components/Dropdown/Jquery.Dropdown.js
@@ -0,0 +1,157 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Dropdown Plugin
+ *
+ * Given .ms-Dropdown containers with generic elements inside, this plugin hides the original
+ * dropdown and creates a new "fake" dropdown that can more easily be styled across browsers.
+ *
+ * @param {jQuery Object} One or more .ms-Dropdown containers, each with a dropdown (.ms-Dropdown-select)
+ * @return {jQuery Object} The same containers (allows for chaining)
+ */
+(function ($) {
+ $.fn.Dropdown = function () {
+
+ /** Go through each dropdown we've been given. */
+ return this.each(function () {
+
+ var $dropdownWrapper = $(this),
+ $originalDropdown = $dropdownWrapper.children('.ms-Dropdown-select'),
+ $originalDropdownOptions = $originalDropdown.children('option'),
+ newDropdownTitle = '',
+ newDropdownItems = '',
+ newDropdownSource = '';
+
+ /** Go through the options to fill up newDropdownTitle and newDropdownItems. */
+ $originalDropdownOptions.each(function (index, option) {
+
+ /** If the option is selected, it should be the new dropdown's title. */
+ if (option.selected) {
+ newDropdownTitle = option.text;
+ }
+
+ /** Add this option to the list of items. */
+ newDropdownItems += '' + option.text + ' ';
+
+ });
+
+ /** Insert the replacement dropdown. */
+ newDropdownSource = '' + newDropdownTitle + ' ';
+ $dropdownWrapper.append(newDropdownSource);
+
+ function _openDropdown(evt) {
+ if (!$dropdownWrapper.hasClass('is-disabled')) {
+
+ /** First, let's close any open dropdowns on this page. */
+ $dropdownWrapper.find('.is-open').removeClass('is-open');
+
+ /** Stop the click event from propagating, which would just close the dropdown immediately. */
+ evt.stopPropagation();
+
+ /** Before opening, size the items list to match the dropdown. */
+ var dropdownWidth = $(this).parents(".ms-Dropdown").width();
+ $(this).next(".ms-Dropdown-items").css('width', dropdownWidth + 'px');
+
+ /** Go ahead and open that dropdown. */
+ $dropdownWrapper.toggleClass('is-open');
+ $('.ms-Dropdown').each(function(){
+ if ($(this)[0] !== $dropdownWrapper[0]) {
+ $(this).removeClass('is-open');
+ }
+ });
+
+ /** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */
+ $(document).bind("click.dropdown", function() {
+ $dropdownWrapper.removeClass('is-open');
+ $(document).unbind('click.dropdown');
+ });
+ }
+ }
+
+ /** Toggle open/closed state of the dropdown when clicking its title. */
+ $dropdownWrapper.on('click', '.ms-Dropdown-title', function(event) {
+ _openDropdown(event);
+ });
+
+ /** Keyboard accessibility */
+ $dropdownWrapper.on('keyup', function(event) {
+ var keyCode = event.keyCode || event.which;
+ // Open dropdown on enter or arrow up or arrow down and focus on first option
+ if (!$(this).hasClass('is-open')) {
+ if (keyCode === 13 || keyCode === 38 || keyCode === 40) {
+ _openDropdown(event);
+ if (!$(this).find('.ms-Dropdown-item').hasClass('is-selected')) {
+ $(this).find('.ms-Dropdown-item:first').addClass('is-selected');
+ }
+ }
+ }
+ else if ($(this).hasClass('is-open')) {
+ // Up arrow focuses previous option
+ if (keyCode === 38) {
+ if ($(this).find('.ms-Dropdown-item.is-selected').prev().siblings().size() > 0) {
+ $(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').prev().addClass('is-selected');
+ }
+ }
+ // Down arrow focuses next option
+ if (keyCode === 40) {
+ if ($(this).find('.ms-Dropdown-item.is-selected').next().siblings().size() > 0) {
+ $(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').next().addClass('is-selected');
+ }
+ }
+ // Enter to select item
+ if (keyCode === 13) {
+ if (!$dropdownWrapper.hasClass('is-disabled')) {
+
+ // Item text
+ var selectedItemText = $(this).find('.ms-Dropdown-item.is-selected').text();
+
+ $(this).find('.ms-Dropdown-title').html(selectedItemText);
+
+ /** Update the original dropdown. */
+ $originalDropdown.find("option").each(function(key, value) {
+ if (value.text === selectedItemText) {
+ $(this).prop('selected', true);
+ } else {
+ $(this).prop('selected', false);
+ }
+ });
+ $originalDropdown.change();
+
+ $(this).removeClass('is-open');
+ }
+ }
+ }
+
+ // Close dropdown on esc
+ if (keyCode === 27) {
+ $(this).removeClass('is-open');
+ }
+ });
+
+ /** Select an option from the dropdown. */
+ $dropdownWrapper.on('click', '.ms-Dropdown-item', function () {
+ if (!$dropdownWrapper.hasClass('is-disabled') && !$(this).hasClass('is-disabled')) {
+
+ /** Deselect all items and select this one. */
+ $(this).siblings('.ms-Dropdown-item').removeClass('is-selected');
+ $(this).addClass('is-selected');
+
+ /** Update the replacement dropdown's title. */
+ $(this).parents().siblings('.ms-Dropdown-title').html($(this).text());
+
+ /** Update the original dropdown. */
+ var selectedItemText = $(this).text();
+ $originalDropdown.find("option").each(function(key, value) {
+ if (value.text === selectedItemText) {
+ $(this).prop('selected', true);
+ } else {
+ $(this).prop('selected', false);
+ }
+ });
+ $originalDropdown.change();
+ }
+ });
+
+ });
+ };
+})(jQuery);
\ No newline at end of file
diff --git a/dist/samples/Components/Dropdown/index.html b/dist/samples/Components/Dropdown/index.html
new file mode 100644
index 000000000..2edb38587
--- /dev/null
+++ b/dist/samples/Components/Dropdown/index.html
@@ -0,0 +1,132 @@
+
+
+
+
+
+
+
+ Component Dropdown
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dropdown
+
+
+
+
+ Dropdown label
+
+
+ Choose a sound…
+ Dog barking
+ Wind blowing
+ Duck quacking
+ Cow mooing
+
+
+
+
+
+ Dropdown label
+
+
+ Choose a sound…
+ Dog barking
+ Wind blowing
+ Duck quacking
+ Cow mooing
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Facepile/Facepile.css b/dist/samples/Components/Facepile/Facepile.css
new file mode 100644
index 000000000..4f9baf0f7
--- /dev/null
+++ b/dist/samples/Components/Facepile/Facepile.css
@@ -0,0 +1,2208 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-Panel {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 300;
+ display: none;
+ pointer-events: none;
+}
+
+.ms-Panel .ms-Overlay {
+ z-index: 0;
+ display: none;
+ pointer-events: none;
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+.ms-Panel-main {
+ background-color: #ffffff;
+ bottom: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ display: none;
+ z-index: 10;
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ pointer-events: auto;
+ width: 340px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+ left: auto;
+ }
+}
+
+.ms-Panel-main .ms-CommandBar {
+ outline: 1px solid transparent;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main .ms-CommandBar {
+ display: none;
+ }
+}
+
+.ms-Panel-main .ms-CommandBarItem {
+ margin-left: 8px;
+}
+
+.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline-block;
+}
+
+.ms-Panel-main .ms-CommandBar-mainArea {
+ padding-left: 0;
+ margin-left: -1px;
+ overflow: hidden;
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-main {
+ right: auto;
+ left: 0;
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-commands,
+.ms-Panel.ms-Panel--left .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 340px;
+ }
+}
+
+@media (min-width: 640px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main,
+ .ms-Panel.ms-Panel--lg .ms-Panel-main,
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 48px;
+ width: auto;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main {
+ left: auto;
+ width: 643px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg .ms-Panel-main {
+ left: 428px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main {
+ left: auto;
+ width: 940px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 176px;
+ }
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Panel-main {
+ opacity: 1;
+ pointer-events: auto;
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Overlay {
+ display: block;
+ pointer-events: auto;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Panel.is-open .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open .ms-Overlay {
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media screen and (min-width: 480px) and (-ms-high-contrast: active) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay,
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ opacity: 0;
+ -webkit-animation-name: none;
+ animation-name: none;
+ }
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 8px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 14px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-contentInner {
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar {
+ display: block;
+ }
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover {
+ background-color: #d7eaf9;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active {
+ background-color: #b5d8f4;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon {
+ color: #07288b;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
+ color: #000000;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child {
+ background-color: #0078d7;
+ box-shadow: inset 0 1px 0 0 #2488d8;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
+ padding-left: 12px;
+ padding-right: 12px;
+ cursor: pointer;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover {
+ background-color: #005a9e;
+ box-shadow: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-delay: 250ms;
+ animation-delay: 250ms;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-delay: 500ms;
+ animation-delay: 500ms;
+ }
+}
+
+.ms-PeoplePicker {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ *zoom: 1;
+ border: 1px solid #c8c8c8;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchBox:before,
+.ms-PeoplePicker-searchBox:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-PeoplePicker-searchBox:after {
+ clear: both;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: left;
+ height: 38px;
+ outline: none;
+ padding-left: 8px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: left;
+ margin: 4px;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-persona .ms-Persona {
+ background-color: #f4f4f4;
+ float: left;
+ min-height: 30px;
+}
+
+.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;
+ float: left;
+ 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 {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: 305;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ padding: 17px 0 0 12px;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+.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;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-result .ms-Persona:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-result .ms-Persona-details {
+ width: 100%;
+}
+
+.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 0;
+ 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: 34px;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultAction {
+ height: 48px;
+ }
+}
+
+.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: #71afe5;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid #eaeaea;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ left: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
+ background-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
+ color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching:hover {
+ background-color: transparent;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-left: 70px;
+ text-align: left;
+}
+
+.ms-PeoplePicker-searchMoreBtn:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-searchMoreBtn:focus,
+.ms-PeoplePicker-searchMoreBtn:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-left: 50px;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+}
+
+.ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #333333;
+ font-size: 16px;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
+ background-color: inherit;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
+ color: #666666;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
+ margin-top: -8px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+ height: 49px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ left: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ font-size: 17px;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 45px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
+ height: 28px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn {
+ height: 42px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction {
+ height: 42px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
+ padding-left: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
+ top: 16px;
+ left: 14px;
+ height: 20px;
+ width: 20px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
+.ms-PeoplePicker-result .ms-Persona:hover .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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ 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.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
+
+.ms-Spinner {
+ 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 {
+ position: relative;
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
+
+.ms-Facepile {
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ top: 40px;
+ height: 200px;
+}
+
+.ms-Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn {
+ 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-itemBtn .ms-Persona-presence,
+.ms-Facepile-itemBtn .ms-Persona-details {
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover,
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus {
+ background-color: #005a9e;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover {
+ color: #212121;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
diff --git a/dist/samples/Components/Facepile/Facepile.min.css b/dist/samples/Components/Facepile/Facepile.min.css
new file mode 100644
index 000000000..d7194e5a2
--- /dev/null
+++ b/dist/samples/Components/Facepile/Facepile.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:3}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:1;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.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;float:left;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{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:4}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.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}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.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:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.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:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Spinner{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;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{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-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}
\ No newline at end of file
diff --git a/dist/samples/Components/Facepile/Jquery.Facepile.js b/dist/samples/Components/Facepile/Jquery.Facepile.js
new file mode 100644
index 000000000..376905402
--- /dev/null
+++ b/dist/samples/Components/Facepile/Jquery.Facepile.js
@@ -0,0 +1,207 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Facepile Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Facepile components.
+ *
+ * @param {jQuery Object} One or more .ms-Facepile components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.Facepile = function () {
+
+ /** Iterate through each Facepile provided. */
+ return this.each(function () {
+ $('.ms-PeoplePicker').PeoplePicker();
+ $('.ms-Panel').Panel();
+
+ var $Facepile = $(this);
+ var $membersList = $(".ms-Facepile-members");
+ var $membersCount = $(".ms-Facepile-members > .ms-Facepile-itemBtn").length;
+ var $panel = $('.ms-Facepile-panel.ms-Panel');
+ var $panelMain = $panel.find(".ms-Panel-main");
+ var $picker = $('.ms-PeoplePicker.ms-PeoplePicker--Facepile');
+ var $pickerMembers = $picker.find('.ms-PeoplePicker-selectedPeople');
+ var $personaCard = $('.ms-Facepile').find('.ms-PersonaCard');
+
+
+ /** Increment member count and show/hide overflow text */
+ var incrementMembers = function() {
+ /** Increment person count by one */
+ $membersCount += 1;
+
+ /** Display a maxiumum of 5 people */
+ $(".ms-Facepile-members").children(":gt(4)").hide();
+
+ /** Display counter after 5 people are present */
+ if ($membersCount > 5) {
+ $(".ms-Facepile-itemBtn--overflow").addClass("is-active");
+
+ var remainingMembers = $membersCount - 5;
+ $(".ms-Facepile-overflowText").text("+" + remainingMembers);
+ }
+ };
+
+ /** Open panel with people picker */
+ $Facepile.on("click", ".js-addPerson", function() {
+ $panelMain.css({display: "block"});
+ $panel.toggleClass("is-open")
+ .addClass("ms-Panel-animateIn")
+ .removeClass('ms-Facepile-panel--overflow ms-Panel--right')
+ .addClass('ms-Facepile-panel--addPerson');
+
+ /** Close any open persona cards */
+ $personaCard.removeClass('is-active').hide();
+ });
+
+ $panel.on("click", ".js-togglePanel", function() {
+ $panel.toggleClass("is-open")
+ .addClass("ms-Panel-animateIn");
+ });
+
+ /** Open oveflow panel with list of members */
+ $Facepile.on("click", ".js-overflowPanel", function() {
+ $panelMain.css({display: "block"});
+ $panel.toggleClass("is-open")
+ .addClass("ms-Panel-animateIn")
+ .removeClass('ms-Facepile-panel--addPerson')
+ .addClass('ms-Facepile-panel--overflow ms-Panel--right');
+ });
+
+ /** Display person count on page load */
+ $(document).ready(function() {
+ $(".ms-Facepile-overflowText").text("+" + $membersCount);
+ });
+
+ /** Show selected members from PeoplePicker in the Facepile */
+ $('.ms-PeoplePicker-result').on('click', function() {
+ var $this = $(this);
+ var name = $this.find(".ms-Persona-primaryText").html();
+ var title = $this.find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var nameArray = name.split(' ');
+ var nameInitials = '';
+ for (var i = 0; i < nameArray.length; i++) {
+ nameInitials += nameArray[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $this.find('.ms-Persona-initials').attr('class');
+ var selectedImage = (function() {
+ if ($this.find('.ms-Persona-image').length) {
+ var selectedImageSrc = $this.find('.ms-Persona-image').attr('src');
+ return ' ';
+ } else {
+ return '';
+ }
+ })();
+
+ var FacepileItem =
+ '' +
+ '' +
+ '
' +
+ '
' + selectedInitials + '
' +
+ selectedImage +
+ '
' +
+ '
' +
+ '
' +
+ '
' + name + '
' +
+ '
' + title + '
' +
+ '
' +
+ '
' +
+ ' ';
+
+ /** Add new item to members list in Facepile */
+ $membersList.prepend(FacepileItem);
+
+ /** Increment member count */
+ incrementMembers();
+ });
+
+ /** Remove members in panel people picker */
+ $pickerMembers.on('click', '.js-selectedRemove', function() {
+ var memberText = $(this).parent().find('.ms-Persona-primaryText').text();
+
+ var $FacepileMember = $membersList.find(".ms-Persona-primaryText:contains(" + memberText + ")").first();
+
+ if ($FacepileMember) {
+ $FacepileMember.parent().closest('.ms-Facepile-itemBtn').remove();
+
+ $membersCount -= 1;
+
+ /** Display a maxiumum of 5 people */
+ $(".ms-Facepile-members").children(":lt(5)").show();
+
+ /** Display counter after 5 people are present */
+ if ($membersCount <= 5) {
+ $(".ms-Facepile-itemBtn--overflow").removeClass("is-active");
+ } else {
+ var remainingMembers = $membersCount - 5;
+ $(".ms-Facepile-overflowText").text("+" + remainingMembers);
+ }
+ }
+ });
+
+ /** Show persona card when selecting a Facepile item */
+ $membersList.on('click', '.ms-Facepile-itemBtn', function() {
+ var selectedName = $(this).find(".ms-Persona-primaryText").html();
+ var selectedTitle = $(this).find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var name = selectedName.split(' ');
+ var nameInitials = '';
+ for (var i = 0; i < name.length; i++) {
+ nameInitials += name[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $(this).find('.ms-Persona-initials').attr('class');
+ var selectedImage = $(this).find('.ms-Persona-image').attr('src');
+ var $card = $('.ms-PersonaCard');
+ var $cardName = $card.find('.ms-Persona-primaryText');
+ var $cardTitle = $card.find('.ms-Persona-secondaryText');
+ var $cardInitials = $card.find('.ms-Persona-initials');
+ var $cardImage = $card.find('.ms-Persona-image');
+
+ /** Close any open persona cards */
+ $personaCard.removeClass('is-active');
+
+ /** Add data to persona card */
+ $cardName.text(selectedName);
+ $cardTitle.text(selectedTitle);
+ $cardInitials.text(selectedInitials);
+ $cardInitials.removeClass();
+ $cardInitials.addClass(selectedClasses);
+ $cardImage.attr('src', selectedImage);
+
+ /** Show persona card */
+ setTimeout(function() { $personaCard.addClass('is-active'); }, 100);
+
+ /** Align persona card on md and above screens */
+ if ($(window).width() > 480) {
+ var itemPosition = $(this).offset().left;
+ var correctedPosition = itemPosition - 26;
+
+ $personaCard.css({'left': correctedPosition});
+ } else {
+ $personaCard.css({'left': 0, 'top': 'auto', 'position': 'fixed'});
+ }
+ });
+
+ /** Dismiss persona card when clicking on the document */
+ $(document).on('click', function(e) {
+ var $memberBtn = $('.ms-Facepile-itemBtn--member');
+
+ if (!$memberBtn.is(e.target) && $memberBtn.has(e.target).length === 0 && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) {
+ $personaCard.removeClass('is-active');
+ $personaCard.removeAttr('style');
+ } else {
+ $personaCard.addClass('is-active');
+ }
+ });
+
+ });
+ };
+})(jQuery);
\ No newline at end of file
diff --git a/dist/samples/Components/Facepile/index.html b/dist/samples/Components/Facepile/index.html
new file mode 100644
index 000000000..44376468d
--- /dev/null
+++ b/dist/samples/Components/Facepile/index.html
@@ -0,0 +1,687 @@
+
+
+
+
+
+
+
+ Component Facepile
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Facepile
+
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+ +3
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
GS
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
MG
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
Search Contacts & Directory
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
GS
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
MG
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Label/Label.css b/dist/samples/Components/Label/Label.css
new file mode 100644
index 000000000..e1fc52b41
--- /dev/null
+++ b/dist/samples/Components/Label/Label.css
@@ -0,0 +1,59 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
diff --git a/dist/samples/Components/Label/Label.min.css b/dist/samples/Components/Label/Label.min.css
new file mode 100644
index 000000000..a1d91feee
--- /dev/null
+++ b/dist/samples/Components/Label/Label.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}
\ No newline at end of file
diff --git a/dist/samples/Components/Label/index.html b/dist/samples/Components/Label/index.html
new file mode 100644
index 000000000..f0b6a5427
--- /dev/null
+++ b/dist/samples/Components/Label/index.html
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+ Component Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+ Name
+
+
+
+
+Name
+
+
+
+Name
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Link/Link.css b/dist/samples/Components/Link/Link.css
new file mode 100644
index 000000000..dd43a20f4
--- /dev/null
+++ b/dist/samples/Components/Link/Link.css
@@ -0,0 +1,35 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
diff --git a/dist/samples/Components/Link/Link.min.css b/dist/samples/Components/Link/Link.min.css
new file mode 100644
index 000000000..3037cf1ce
--- /dev/null
+++ b/dist/samples/Components/Link/Link.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}
\ No newline at end of file
diff --git a/dist/samples/Components/Link/index.html b/dist/samples/Components/Link/index.html
new file mode 100644
index 000000000..4e558a332
--- /dev/null
+++ b/dist/samples/Components/Link/index.html
@@ -0,0 +1,111 @@
+
+
+
+
+
+
+
+ Component Link
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Link
+
+
+
+
You can add links to any text
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit . In condimentum nisl sed dolor consectetur, vitae hendrerit nulla ullamcorper. Sed quis massa mi. Etiam sed ullamcorper est. Phasellus sodales tempus sapien et tristique. Praesent non mauris sem. Aliquam leo elit, molestie sed eros ac, sodales mattis metus. Cras imperdiet est vel quam faucibus posuere. Praesent quis felis mattis, dapibus nibh ut, porttitor dui. Curabitur in eleifend tortor, vel fermentum enim. Etiam blandit quam neque, quis pretium lorem finibus pharetra. Aliquam a placerat arcu. Sed at nibh et nulla ullamcorper pharetra ac ac tortor. Nullam arcu justo, vulputate et efficitur ut, finibus sit amet leo. Phasellus non sem id sapien gravida sodales et at leo.
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/List/List.css b/dist/samples/Components/List/List.css
new file mode 100644
index 000000000..682f359a2
--- /dev/null
+++ b/dist/samples/Components/List/List.css
@@ -0,0 +1,268 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ListItem {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+}
+
+.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-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-List {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width: 480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+}
diff --git a/dist/samples/Components/List/List.min.css b/dist/samples/Components/List/List.min.css
new file mode 100644
index 000000000..80d4ad757
--- /dev/null
+++ b/dist/samples/Components/List/List.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-List,.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-List{color:#333;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}
\ No newline at end of file
diff --git a/dist/samples/Components/List/index.html b/dist/samples/Components/List/index.html
new file mode 100644
index 000000000..e0aa0395a
--- /dev/null
+++ b/dist/samples/Components/List/index.html
@@ -0,0 +1,320 @@
+
+
+
+
+
+
+
+ Component List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ List
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/ListItem/Jquery.ListItem.js b/dist/samples/Components/ListItem/Jquery.ListItem.js
new file mode 100644
index 000000000..8248bfc28
--- /dev/null
+++ b/dist/samples/Components/ListItem/Jquery.ListItem.js
@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * List Item Plugin
+ *
+ * Adds basic demonstration functionality to .ms-ListItem components.
+ *
+ * @param {jQuery Object} One or more .ms-ListItem components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.ListItem = function () {
+
+ /** Go through each panel we've been given. */
+ return this.each(function () {
+
+ var $listItem = $(this);
+
+ /** Detect clicks on selectable list items. */
+ $listItem.on('click', '.js-toggleSelection', function() {
+ $(this).parents('.ms-ListItem').toggleClass('is-selected');
+ });
+
+ });
+
+ };
+})(jQuery);
diff --git a/dist/samples/Components/ListItem/ListItem.css b/dist/samples/Components/ListItem/ListItem.css
new file mode 100644
index 000000000..ce9cefd5b
--- /dev/null
+++ b/dist/samples/Components/ListItem/ListItem.css
@@ -0,0 +1,268 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-List {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width: 480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+}
+
+.ms-ListItem {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+}
+
+.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-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ padding-top: 6px;
+}
diff --git a/dist/samples/Components/ListItem/ListItem.min.css b/dist/samples/Components/ListItem/ListItem.min.css
new file mode 100644
index 000000000..e8dca4dfb
--- /dev/null
+++ b/dist/samples/Components/ListItem/ListItem.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;padding-top:6px}
\ No newline at end of file
diff --git a/dist/samples/Components/ListItem/index.html b/dist/samples/Components/ListItem/index.html
new file mode 100644
index 000000000..094a1af1e
--- /dev/null
+++ b/dist/samples/Components/ListItem/index.html
@@ -0,0 +1,224 @@
+
+
+
+
+
+
+
+ Component ListItem
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ListItem
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+
+
+ Perdivn Pitch.mp3
+ 08/11/14 12:32p
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/MessageBanner/MessageBanner.css b/dist/samples/Components/MessageBanner/MessageBanner.css
new file mode 100644
index 000000000..1798433f0
--- /dev/null
+++ b/dist/samples/Components/MessageBanner/MessageBanner.css
@@ -0,0 +1,458 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-MessageBanner {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ position: relative;
+ border-bottom: 1px solid #767676;
+ background-color: #eff6fc;
+ min-width: 320px;
+ width: 100%;
+ height: 52px;
+ text-align: center;
+ overflow: hidden;
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ -webkit-animation-name: fadeOut, slideUpOut20;
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-expand:focus,
+.ms-MessageBanner-close:focus {
+ outline: 1px solid 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-expand {
+ display: inline-block;
+ }
+
+ .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 0;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
diff --git a/dist/samples/Components/MessageBanner/MessageBanner.js b/dist/samples/Components/MessageBanner/MessageBanner.js
new file mode 100644
index 000000000..71edf9771
--- /dev/null
+++ b/dist/samples/Components/MessageBanner/MessageBanner.js
@@ -0,0 +1,162 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * MessageBanner component
+ *
+ * A component to display error messages
+ *
+ */
+
+/**
+ * @namespace fabric
+ */
+var fabric = fabric || {};
+/**
+ *
+ * @param {HTMLElement} container - the target container for an instance of MessageBanner
+ * @constructor
+ */
+fabric.MessageBanner = function(container) {
+ this.container = container;
+ this.init();
+};
+
+fabric.MessageBanner.prototype = (function() {
+
+ var _clipper;
+ var _bufferSize;
+ var _textContainerMaxWidth = 700;
+ var _clientWidth;
+ var _textWidth;
+ var _initTextWidth;
+ var _chevronButton;
+ var _errorBanner;
+ var _actionButton;
+ var _closeButton;
+ var _bufferElementsWidth = 88;
+ var _bufferElementsWidthSmall = 35;
+ var SMALL_BREAK_POINT = 480;
+
+ /**
+ * sets styles on resize
+ */
+ var _onResize = function() {
+ _clientWidth = _errorBanner.offsetWidth;
+ if(window.innerWidth >= SMALL_BREAK_POINT ) {
+ _resizeRegular();
+ } else {
+ _resizeSmall();
+ }
+ };
+
+ /**
+ * resize above 480 pixel breakpoint
+ */
+ var _resizeRegular = function() {
+ if ((_clientWidth - _bufferSize) > _initTextWidth && _initTextWidth < _textContainerMaxWidth) {
+ _textWidth = "auto";
+ _chevronButton.className = "ms-MessageBanner-expand";
+ _collapse();
+ } else {
+ _textWidth = Math.min((_clientWidth - _bufferSize), _textContainerMaxWidth) + "px";
+ if(_chevronButton.className.indexOf("is-visible") === -1) {
+ _chevronButton.className += " is-visible";
+ }
+ }
+ _clipper.style.width = _textWidth;
+ };
+
+ /**
+ * resize below 480 pixel breakpoint
+ */
+ var _resizeSmall = function() {
+ if (_clientWidth - (_bufferElementsWidthSmall + _closeButton.offsetWidth) > _initTextWidth) {
+ _textWidth = "auto";
+ _collapse();
+ } else {
+ _textWidth = (_clientWidth - (_bufferElementsWidthSmall + _closeButton.offsetWidth)) + "px";
+ }
+ _clipper.style.width = _textWidth;
+ };
+ /**
+ * caches elements and values of the component
+ */
+ var _cacheDOM = function(context) {
+ _errorBanner = context.container;
+ _clipper = context.container.querySelector('.ms-MessageBanner-clipper');
+ _chevronButton = context.container.querySelector('.ms-MessageBanner-expand');
+ _actionButton = context.container.querySelector('.ms-MessageBanner-action');
+ _bufferSize = _actionButton.offsetWidth + _bufferElementsWidth;
+ _closeButton = context.container.querySelector('.ms-MessageBanner-close');
+ };
+
+ /**
+ * expands component to show full error message
+ */
+ var _expand = function() {
+ var icon = _chevronButton.querySelector('.ms-Icon');
+ _errorBanner.className += " is-expanded";
+ icon.className = "ms-Icon ms-Icon--chevronsUp";
+ };
+
+ /**
+ * collapses component to only show truncated message
+ */
+ var _collapse = function() {
+ var icon = _chevronButton.querySelector('.ms-Icon');
+ _errorBanner.className = "ms-MessageBanner";
+ icon.className = "ms-Icon ms-Icon--chevronsDown";
+ };
+
+ var _toggleExpansion = function() {
+ if (_errorBanner.className.indexOf("is-expanded") > -1) {
+ _collapse();
+ } else {
+ _expand();
+ }
+ };
+
+ /**
+ * hides banner when close button is clicked
+ */
+ var _hideBanner = function() {
+ if(_errorBanner.className.indexOf("hide") === -1) {
+ _errorBanner.className += " hide";
+ setTimeout(function() {
+ _errorBanner.className = "ms-MessageBanner is-hidden";
+ }, 500);
+ }
+ };
+
+ /**
+ * shows banner if the banner is hidden
+ */
+ var _showBanner = function() {
+ _errorBanner.className = "ms-MessageBanner";
+ };
+
+ /**
+ * sets handlers for resize and button click events
+ */
+ var _setListeners = function() {
+ window.addEventListener('resize', _onResize, false);
+ _chevronButton.addEventListener("click", _toggleExpansion, false);
+ _closeButton.addEventListener("click", _hideBanner, false);
+ };
+
+ /**
+ * initializes component
+ */
+ var init = function() {
+ _cacheDOM(this);
+ _setListeners();
+ _clientWidth = _errorBanner.offsetWidth;
+ _initTextWidth = _clipper.offsetWidth;
+ _onResize(null);
+ };
+
+ return {
+ init: init,
+ showBanner: _showBanner
+ };
+}());
diff --git a/dist/samples/Components/MessageBanner/MessageBanner.min.css b/dist/samples/Components/MessageBanner/MessageBanner.min.css
new file mode 100644
index 000000000..e074f1a3e
--- /dev/null
+++ b/dist/samples/Components/MessageBanner/MessageBanner.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-MessageBanner{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid 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-expand{display:inline-block}.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{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}
\ No newline at end of file
diff --git a/dist/samples/Components/MessageBanner/index.html b/dist/samples/Components/MessageBanner/index.html
new file mode 100644
index 000000000..2efb62442
--- /dev/null
+++ b/dist/samples/Components/MessageBanner/index.html
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+ Component MessageBanner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ MessageBanner
+
+
+
+
+
+
+
+ You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
+
+
+
+
+
+
+ Get More Storage
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/NavBar/Jquery.NavBar.js b/dist/samples/Components/NavBar/Jquery.NavBar.js
new file mode 100644
index 000000000..10202242a
--- /dev/null
+++ b/dist/samples/Components/NavBar/Jquery.NavBar.js
@@ -0,0 +1,95 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Nav Bar Plugin
+ */
+(function ($) {
+ $.fn.NavBar = function () {
+
+ /** Go through each nav bar we've been given. */
+ return this.each(function () {
+
+ var $navBar = $(this);
+
+ // Open the nav bar on mobile.
+ $navBar.on('click', '.js-openMenu', function(event) {
+ event.stopPropagation();
+ $navBar.toggleClass('is-open');
+ });
+
+ // Close the nav bar on mobile.
+ $navBar.click(function() {
+ if ($navBar.hasClass('is-open')) {
+ $navBar.removeClass('is-open');
+ }
+ });
+
+ // Set selected states and open/close menus.
+ $navBar.on('click', '.ms-NavBar-item:not(.is-disabled)', function(event) {
+ var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');
+ event.stopPropagation();
+
+ // Prevent default actions from firing if links are not found.
+ if ($(this).children('.ms-NavBar-link').length === 0) {
+ event.preventDefault();
+ }
+
+ // Deselect all of the items.
+ $(this).siblings('.ms-NavBar-item').removeClass('is-selected');
+
+ // Close and blur the search box if it doesn't have text.
+ if ($searchBox.length > 0 && $searchBox.val().length === 0) {
+ $('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
+ }
+
+ // Does the selected item have a menu?
+ if ($(this).hasClass('ms-NavBar-item--hasMenu')) {
+
+ // First, close any neighboring menus.
+ $(this).siblings('.ms-NavBar-item--hasMenu').children('.ms-ContextualMenu:first').removeClass('is-open');
+
+ // Toggle 'is-open' to open or close it.
+ $(this).children('.ms-ContextualMenu:first').toggleClass('is-open');
+
+ // Toggle 'is-selected' to indicate whether it is active.
+ $(this).toggleClass('is-selected');
+ } else {
+ // Doesn't have a menu, so just select the item.
+ $(this).addClass('is-selected');
+
+ // Close the submenu and any open contextual menus.
+ $navBar.removeClass('is-open').find('.ms-ContextualMenu').removeClass('is-open');
+ }
+
+ // Is this the search box? Open it up and focus on the search field.
+ if ($(this).hasClass('ms-NavBar-item--search')) {
+ $(this).addClass('is-open');
+ $(this).find('.ms-TextField-field').focus();
+
+ // Close any open menus.
+ $navBar.find('.ms-ContextualMenu:first').removeClass('is-open');
+ }
+ });
+
+ // Prevent contextual menus from being hidden when clicking on them.
+ $navBar.on('click', '.ms-NavBar-item .ms-ContextualMenu', function(event) {
+ event.stopPropagation();
+
+ // Collapse the mobile "panel" for nav items.
+ $(this).removeClass('is-open');
+ $navBar.removeClass('is-open').find('.ms-NavBar-item--hasMenu').removeClass('is-selected');
+ });
+
+ // Hide any menus and close the search box when clicking anywhere in the document.
+ $(document).on('click', 'html', function() {
+ var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');
+ $navBar.find('.ms-NavBar-item').removeClass('is-selected').find('.ms-ContextualMenu').removeClass('is-open');
+
+ // Close and blur the search box if it doesn't have text.
+ if ($searchBox.length > 0 && $searchBox.val().length === 0) {
+ $navBar.find('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
+ }
+ });
+ });
+ };
+})(jQuery);
diff --git a/dist/samples/Components/NavBar/NavBar.css b/dist/samples/Components/NavBar/NavBar.css
new file mode 100644
index 000000000..60f3ca959
--- /dev/null
+++ b/dist/samples/Components/NavBar/NavBar.css
@@ -0,0 +1,792 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-List {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width: 480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+}
+
+.ms-ListItem {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+}
+
+.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-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-NavBar {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ height: 40px;
+ padding: 0 10px;
+ width: 100%;
+ outline: 1px solid transparent;
+}
+
+.ms-NavBar .ms-Overlay {
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ z-index: 0;
+}
+
+.ms-NavBar-openMenu {
+ font-size: 20px;
+ height: 40px;
+ line-height: 40px;
+ position: absolute;
+ right: 27px;
+ text-align: center;
+ width: 40px;
+ cursor: pointer;
+}
+
+.ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item {
+ box-sizing: border-box;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ padding-left: 20px;
+ position: relative;
+}
+
+.ms-NavBar-item:hover {
+ cursor: pointer;
+ background-color: #deecf9;
+ color: #000000;
+}
+
+.ms-NavBar-item:hover .ms-Icon {
+ color: #333333;
+}
+
+.ms-NavBar-item:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-NavBar-item.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-NavBar-item.is-disabled:hover {
+ cursor: default;
+ border: none;
+}
+
+.ms-NavBar-link {
+ color: #333333;
+ text-decoration: none;
+}
+
+.ms-NavBar-link:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after {
+ color: #212121;
+}
+
+.ms-NavBar-chevronDown {
+ color: #666666;
+ font-size: 22px;
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search {
+ position: relative;
+ width: 30px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #666666;
+ content: '\e039';
+ font-size: 21px;
+ line-height: 40px;
+ position: absolute;
+ right: 5px;
+ top: 0;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search .ms-TextField {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open {
+ width: 200px;
+ padding-right: 40px;
+ border: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField {
+ display: block;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field {
+ border: none;
+ background-color: transparent;
+}
+
+@media (max-width: 479px) {
+ .ms-NavBar.is-open .ms-NavBar-items {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ bottom: 0;
+ display: block;
+ left: 50px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ outline: 1px solid transparent;
+ z-index: 5;
+ }
+
+ .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu {
+ position: relative;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 479px) {
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected {
+ height: inherit;
+ background-color: transparent;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown {
+ -webkit-transform: scaleY(-1);
+ -ms-transform: scaleY(-1);
+ transform: scaleY(-1);
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu {
+ position: static;
+ border: none;
+ box-shadow: none;
+ width: auto;
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ }
+
+ .ms-NavBar.is-open .ms-Overlay {
+ display: block;
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-NavBar-openMenu {
+ display: none;
+ }
+
+ .ms-NavBar-items {
+ display: block;
+ list-style: none;
+ margin: 0 7px 0 0;
+ padding: 0;
+ }
+
+ .ms-NavBar-chevronDown {
+ top: 3px;
+ right: 0;
+ float: none;
+ position: relative;
+ }
+
+ .ms-NavBar-item {
+ float: left;
+ margin-right: 18px;
+ font-size: 14px;
+ padding: 0;
+ }
+
+ .ms-NavBar-item:hover {
+ border-bottom: 2px solid #0078d7;
+ background-color: transparent;
+ }
+
+ .ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ border-bottom: 2px solid #0078d7;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu:after {
+ position: relative;
+ top: 3px;
+ padding-top: 0;
+ right: auto;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--right {
+ float: right;
+ margin: 0;
+ }
+}
diff --git a/dist/samples/Components/NavBar/NavBar.min.css b/dist/samples/Components/NavBar/NavBar.min.css
new file mode 100644
index 000000000..65e0ab4ec
--- /dev/null
+++ b/dist/samples/Components/NavBar/NavBar.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;padding-top:6px}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:3}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:4}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:2}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}}
\ No newline at end of file
diff --git a/dist/samples/Components/NavBar/index.html b/dist/samples/Components/NavBar/index.html
new file mode 100644
index 000000000..e5c004b6c
--- /dev/null
+++ b/dist/samples/Components/NavBar/index.html
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+
+ Component NavBar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ NavBar
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/OrgChart/OrgChart.css b/dist/samples/Components/OrgChart/OrgChart.css
new file mode 100644
index 000000000..21686e819
--- /dev/null
+++ b/dist/samples/Components/OrgChart/OrgChart.css
@@ -0,0 +1,544 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Persona {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-OrgChart {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px 0;
+}
+
+.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;
+ outline: transparent;
+}
diff --git a/dist/samples/Components/OrgChart/OrgChart.min.css b/dist/samples/Components/OrgChart/OrgChart.min.css
new file mode 100644
index 000000000..22ad942bd
--- /dev/null
+++ b/dist/samples/Components/OrgChart/OrgChart.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.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;outline:transparent}
\ No newline at end of file
diff --git a/dist/samples/Components/OrgChart/index.html b/dist/samples/Components/OrgChart/index.html
new file mode 100644
index 000000000..fa8b0d8d3
--- /dev/null
+++ b/dist/samples/Components/OrgChart/index.html
@@ -0,0 +1,348 @@
+
+
+
+
+
+
+
+ Component OrgChart
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ OrgChart
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Overlay/Overlay.css b/dist/samples/Components/Overlay/Overlay.css
new file mode 100644
index 000000000..bf8b93f39
--- /dev/null
+++ b/dist/samples/Components/Overlay/Overlay.css
@@ -0,0 +1,26 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
diff --git a/dist/samples/Components/Overlay/Overlay.min.css b/dist/samples/Components/Overlay/Overlay.min.css
new file mode 100644
index 000000000..01e2cb9cb
--- /dev/null
+++ b/dist/samples/Components/Overlay/Overlay.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:1}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}
\ No newline at end of file
diff --git a/dist/samples/Components/Overlay/index.html b/dist/samples/Components/Overlay/index.html
new file mode 100644
index 000000000..333a76f06
--- /dev/null
+++ b/dist/samples/Components/Overlay/index.html
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
+ Component Overlay
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Overlay
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Panel/Jquery.Panel.js b/dist/samples/Components/Panel/Jquery.Panel.js
new file mode 100644
index 000000000..b43c205da
--- /dev/null
+++ b/dist/samples/Components/Panel/Jquery.Panel.js
@@ -0,0 +1,94 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Panel Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Panel components.
+ *
+ * @param {jQuery Object} One or more .ms-Panel components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.Panel = function () {
+
+ var pfx = ["webkit", "moz", "MS", "o", ""];
+
+ // Prefix function
+ function prefixedEvent(element, type, callback) {
+ for (var p = 0; p < pfx.length; p++) {
+ if (!pfx[p]) { type = type.toLowerCase(); }
+ element.addEventListener(pfx[p]+type, callback, false);
+ }
+ }
+
+ /** Go through each panel we've been given. */
+ return this.each(function () {
+
+ var $panel = $(this);
+ var $panelMain = $panel.find(".ms-Panel-main");
+
+ /** Hook to open the panel. */
+ $(".ms-PanelAction-close").on("click", function() {
+
+ // Display Panel first, to allow animations
+ $panel.addClass("ms-Panel-animateOut");
+
+ });
+
+ $(".ms-PanelAction-open").on("click", function() {
+
+ // Display Panel first, to allow animations
+ $panel.addClass("is-open");
+
+ // Add animation class
+ $panel.addClass("ms-Panel-animateIn");
+
+ });
+
+ prefixedEvent($panelMain[0], 'AnimationEnd', function(event) {
+ if (event.animationName.indexOf('Out') > -1) {
+
+ // Hide and Prevent ms-Panel-main from being interactive
+ $panel.removeClass('is-open');
+
+ // Remove animating classes for the next time we open panel
+ $panel.removeClass('ms-Panel-animateIn ms-Panel-animateOut');
+
+ }
+ });
+
+ // Pivots for sample page to show variant panel sizes
+ $(".panelVariant-item").on("click", function() {
+ var className = $(this).find('span').attr('class');
+
+ $(".panelVariant-item").removeClass('is-selected');
+ $(this).addClass('is-selected');
+
+ switch (className) {
+ case 'is-default':
+ $('.ms-Panel').removeClass().addClass('ms-Panel');
+ break;
+ case 'is-left':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--left');
+ break;
+ case 'is-lightDismiss':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lightDismiss');
+ break;
+ case 'is-md':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--md');
+ break;
+ case 'is-lgFixed':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lg ms-Panel--fixed');
+ break;
+ case 'is-lg':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lg');
+ break;
+ case 'is-xl':
+ $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--xl');
+ break;
+ }
+ });
+ });
+
+ };
+})(jQuery);
diff --git a/dist/samples/Components/Panel/Panel.css b/dist/samples/Components/Panel/Panel.css
new file mode 100644
index 000000000..67ca72790
--- /dev/null
+++ b/dist/samples/Components/Panel/Panel.css
@@ -0,0 +1,1634 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-CommandBar {
+ background-color: #eff6fc;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ padding-left: 58px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-mainArea {
+ padding-left: 24px;
+ }
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 12px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 16px;
+ }
+}
+
+.ms-CommandBarItem {
+ display: inline-block;
+ color: #0078d7;
+ height: 40px;
+ outline: none;
+ vertical-align: top;
+ margin-right: -4px;
+}
+
+.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ height: 38px;
+ outline: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ height: 38px;
+ outline: none;
+ }
+}
+
+.ms-CommandBarItem:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBarItem {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline;
+ }
+}
+
+.ms-CommandBarItem.is-hidden {
+ width: 0;
+ overflow: hidden;
+}
+
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown {
+ display: inline;
+}
+
+.ms-CommandBarItem-overflow {
+ display: none;
+}
+
+.ms-CommandBarItem-overflow.is-visible {
+ display: inline-block;
+}
+
+.ms-CommandBarItem-overflow .ms-Icon {
+ font-size: 14px;
+ color: #666666;
+}
+
+.ms-CommandBarItem-link {
+ line-height: 39px;
+ padding: 0 6px;
+ cursor: pointer;
+ height: 40px;
+ min-width: 20px;
+ text-align: center;
+ position: relative;
+ padding: 0 8px;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+}
+
+.ms-CommandBarItem-link:focus {
+ outline: none;
+}
+
+.ms-CommandBarItem-link:focus:before {
+ position: absolute;
+ left: 2px;
+ right: 2px;
+ top: 2px;
+ bottom: 2px;
+ border: 1px solid #a6a6a6;
+ content: '';
+}
+
+.ms-CommandBarItem-icon {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-CommandBarItem-chevronDown {
+ vertical-align: middle;
+ padding-bottom: 3px;
+ margin-top: 13px;
+ font-size: 1.1em;
+ line-height: 1em;
+ color: #666666;
+}
+
+.ms-CommandBarItem-chevronDown:before {
+ height: 10px;
+ line-height: 16px;
+}
+
+.ms-CommandBarSearch {
+ float: left;
+ width: 208px;
+ max-width: 208px;
+ background-color: #deecf9;
+ color: #333333;
+ height: 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-color: transparent;
+ transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ transition-property: width, background-color;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch {
+ overflow: hidden;
+ width: 50px;
+ position: absolute;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #ffffff;
+ z-index: 10;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch .ms-Icon--search {
+ margin-left: 2px;
+ margin-top: 12px;
+ vertical-align: top;
+}
+
+.ms-CommandBarSearch-input {
+ height: 40px;
+ padding: 8px 8px 8px 0;
+ border: none;
+ border-left: 42px solid transparent;
+ background-color: transparent;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+ cursor: pointer;
+ font-size: 14px;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #ffffff;
+ }
+}
+
+.ms-CommandBarSearch-input::-ms-clear {
+ display: none;
+}
+
+.ms-CommandBarSearch-input::-webkit-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::-moz-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:-ms-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper {
+ display: block;
+ padding-left: 15px;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper,
+.ms-CommandBarSearch-iconArrowWrapper {
+ top: 0;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.ms-CommandBarSearch-iconClearWrapper {
+ display: none;
+ top: 1px;
+ right: 0px;
+ z-index: 10;
+}
+
+.ms-CommandBarSearch.is-active {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch.is-active {
+ width: 100%;
+ position: absolute;
+ z-index: 10;
+ max-width: 100%;
+ }
+}
+
+.ms-CommandBarSearch.is-active:hover {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ cursor: text;
+ padding-right: 40px;
+ border-left-width: 8px;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
+ border-left-width: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ padding-right: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch-iconWrapper {
+ height: 40px;
+ line-height: 40px;
+ cursor: pointer;
+ padding: 0px 8px;
+ position: absolute;
+ width: 34px;
+ text-align: center;
+}
+
+.ms-CommandBarSearch .ms-Icon:before {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Pivot {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 40px;
+ list-style-type: none;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ position: relative;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ line-height: 40px;
+ margin-right: 8px;
+}
+
+.ms-Pivot-link:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:after {
+ background-color: #37006e;
+ }
+}
+
+.ms-Pivot-link:hover,
+.ms-Pivot-link:focus,
+.ms-Pivot-link:active {
+ color: #000000;
+ cursor: pointer;
+}
+
+.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:active + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-link:active {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:active {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:active {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link:active:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected {
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link.is-selected {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link.is-selected {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link.is-selected:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-dropdownIcon {
+ font-size: 16px;
+ position: relative;
+ top: 2px;
+}
+
+.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:after {
+ display: none;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs {
+ height: 40px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important;
+}
+
+.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 !important;
+ background-color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.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 !important;
+}
+
+@media (min-width: 640px) {
+ .ms-Pivot-link {
+ font-size: 14px;
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 14px;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+}
+
+.ms-Panel {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 300;
+ display: none;
+ pointer-events: none;
+}
+
+.ms-Panel .ms-Overlay {
+ z-index: 0;
+ display: none;
+ pointer-events: none;
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+.ms-Panel-main {
+ background-color: #ffffff;
+ bottom: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ display: none;
+ z-index: 10;
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ pointer-events: auto;
+ width: 340px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+ left: auto;
+ }
+}
+
+.ms-Panel-main .ms-CommandBar {
+ outline: 1px solid transparent;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main .ms-CommandBar {
+ display: none;
+ }
+}
+
+.ms-Panel-main .ms-CommandBarItem {
+ margin-left: 8px;
+}
+
+.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline-block;
+}
+
+.ms-Panel-main .ms-CommandBar-mainArea {
+ padding-left: 0;
+ margin-left: -1px;
+ overflow: hidden;
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-main {
+ right: auto;
+ left: 0;
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-commands,
+.ms-Panel.ms-Panel--left .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 340px;
+ }
+}
+
+@media (min-width: 640px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main,
+ .ms-Panel.ms-Panel--lg .ms-Panel-main,
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 48px;
+ width: auto;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main {
+ left: auto;
+ width: 643px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg .ms-Panel-main {
+ left: 428px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main {
+ left: auto;
+ width: 940px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 176px;
+ }
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Panel-main {
+ opacity: 1;
+ pointer-events: auto;
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Overlay {
+ display: block;
+ pointer-events: auto;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Panel.is-open .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open .ms-Overlay {
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media screen and (min-width: 480px) and (-ms-high-contrast: active) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay,
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ opacity: 0;
+ -webkit-animation-name: none;
+ animation-name: none;
+ }
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 8px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 14px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-contentInner {
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar {
+ display: block;
+ }
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover {
+ background-color: #d7eaf9;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active {
+ background-color: #b5d8f4;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon {
+ color: #07288b;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
+ color: #000000;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child {
+ background-color: #0078d7;
+ box-shadow: inset 0 1px 0 0 #2488d8;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
+ padding-left: 12px;
+ padding-right: 12px;
+ cursor: pointer;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover {
+ background-color: #005a9e;
+ box-shadow: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-delay: 250ms;
+ animation-delay: 250ms;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-delay: 500ms;
+ animation-delay: 500ms;
+ }
+}
diff --git a/dist/samples/Components/Panel/Panel.min.css b/dist/samples/Components/Panel/Panel.min.css
new file mode 100644
index 000000000..537957cee
--- /dev/null
+++ b/dist/samples/Components/Panel/Panel.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:1}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:1}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:1;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.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:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.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!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.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!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:3}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:1;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}
\ No newline at end of file
diff --git a/dist/samples/Components/Panel/index.html b/dist/samples/Components/Panel/index.html
new file mode 100644
index 000000000..f7e820057
--- /dev/null
+++ b/dist/samples/Components/Panel/index.html
@@ -0,0 +1,174 @@
+
+
+
+
+
+
+
+ Component Panel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Panel
+
+
+
+
+
+ Small, right-aligned, fixed
+
+
+ Small, left-aligned, fixed
+
+
+ Small, light dismiss, fixed
+
+
+ Medium, fixed
+
+
+ Large, fixed
+
+
+ Large, fluid
+
+
+ Extra Large, fluid
+
+
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/PeoplePicker/Jquery.PeoplePicker.js b/dist/samples/Components/PeoplePicker/Jquery.PeoplePicker.js
new file mode 100644
index 000000000..5382cd635
--- /dev/null
+++ b/dist/samples/Components/PeoplePicker/Jquery.PeoplePicker.js
@@ -0,0 +1,398 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+var fabric = fabric || {};
+
+/**
+ * People Picker Plugin
+ *
+ * Adds basic demonstration functionality to .ms-PeoplePicker components.
+ *
+ * @param {jQuery Object} One or more .ms-PeoplePicker components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+
+(function ($) {
+ $.fn.PeoplePicker = function () {
+
+ /** Iterate through each people picker provided. */
+ return this.each(function () {
+
+ var $peoplePicker = $(this);
+ var $searchField = $peoplePicker.find(".ms-PeoplePicker-searchField");
+ var $results = $peoplePicker.find(".ms-PeoplePicker-results");
+ var $selected = $peoplePicker.find('.ms-PeoplePicker-selected');
+ var $selectedPeople = $peoplePicker.find(".ms-PeoplePicker-selectedPeople");
+ var $selectedCount = $peoplePicker.find(".ms-PeoplePicker-selectedCount");
+ var $peopleList = $peoplePicker.find(".ms-PeoplePicker-peopleList");
+ var isActive = false;
+ var spinner;
+ var $personaCard = $('.ms-PeoplePicker').find('.ms-PersonaCard');
+
+ // Run when focused or clicked
+ function peoplePickerActive(event) {
+ /** Scroll the view so that the people picker is at the top. */
+ $('html, body').animate({
+ scrollTop: $peoplePicker.offset().top
+ }, 367);
+
+ /** Start by closing any open people pickers. */
+ if ( $peoplePicker.hasClass('is-active') ) {
+ $peoplePicker.removeClass("is-active");
+ }
+
+ /** Display a maxiumum of 5 people in Facepile variant */
+ if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile') && $searchField.val() === "") {
+ $peopleList.children(":gt(4)").hide();
+ }
+
+ /** Animate results and members in Facepile variant. */
+ if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
+ // $results.addClass('ms-u-slideDownIn20');
+ $selectedPeople.addClass('ms-u-slideDownIn20');
+ setTimeout(function() { $results.removeClass('ms-u-slideDownIn20'); $selectedPeople.removeClass('ms-u-slideDownIn20');}, 1000);
+ }
+
+ isActive = true;
+
+ /** Stop the click event from propagating, which would just close the dropdown immediately. */
+ event.stopPropagation();
+
+ /** Before opening, size the results panel to match the people picker. */
+ if (!$peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
+ $results.width($peoplePicker.width() - 2);
+ }
+
+ /** Show the $results by setting the people picker to active. */
+ $peoplePicker.addClass("is-active");
+
+ /** Temporarily bind an event to the document that will close the people picker when clicking anywhere. */
+ $(document).bind("click.peoplepicker", function() {
+ $peoplePicker.removeClass('is-active');
+ if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
+ $peoplePicker.removeClass('is-searching');
+ $('.ms-PeoplePicker-selected').show();
+ $('.ms-PeoplePicker-searchMore').removeClass('is-active');
+ $searchField.val("");
+ }
+ $(document).unbind('click.peoplepicker');
+ isActive = false;
+ });
+ }
+
+ /** Set to active when focusing on the input. */
+ $peoplePicker.on('focus', '.ms-PeoplePicker-searchField', function(event) {
+ peoplePickerActive(event);
+ });
+
+ /** Set to active when clicking on the input. */
+ $peoplePicker.on('click', '.ms-PeoplePicker-searchField', function(event) {
+ peoplePickerActive(event);
+ });
+
+ /** Keep the people picker active when clicking within it. */
+ $(this).click(function (event) {
+ event.stopPropagation();
+ });
+
+ /** Add the selected person to the text field or selected list and close the people picker. */
+ $results.on('click', '.ms-PeoplePicker-result', function () {
+ var $this = $(this);
+ var selectedName = $this.find(".ms-Persona-primaryText").html();
+ var selectedTitle = $this.find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var name = selectedName.split(' ');
+ var nameInitials = '';
+
+ for (var i = 0; i < name.length; i++) {
+ nameInitials += name[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $this.find('.ms-Persona-initials').attr('class');
+ var selectedImage = (function() {
+ if ($this.find('.ms-Persona-image').length) {
+ var selectedImageSrc = $this.find('.ms-Persona-image').attr('src');
+ return ' ';
+ } else {
+ return '';
+ }
+ })();
+
+ /** Token html */
+ var personaHTML = '' +
+ '
' +
+ '
' +
+ '
' + selectedInitials + '
' +
+ selectedImage +
+ '
' +
+ '
' +
+ '
' +
+ '
' + selectedName + '
' +
+ '
' +
+ '
' +
+ '
' +
+ ' ' +
+ ' ' +
+ '
';
+ /** List item html */
+ var personaListItem = '' +
+ '' +
+ '
' +
+ '
' + selectedInitials + '
' +
+ selectedImage +
+ '
' +
+ '
' +
+ '
' +
+ '
' + selectedName + '
' +
+ '
' + selectedTitle + '
' +
+ '
' +
+ '
' +
+ ' ' +
+ ' ';
+ /** Tokenize selected persona if not Facepile or memberslist variants */
+ if (!$peoplePicker.hasClass('ms-PeoplePicker--Facepile') && !$peoplePicker.hasClass('ms-PeoplePicker--membersList') ) {
+ $searchField.before(personaHTML);
+ $peoplePicker.removeClass("is-active");
+ resizeSearchField($peoplePicker);
+ }
+ /** Add selected persona to a list if Facepile or memberslist variants */
+ else {
+ if (!$selected.hasClass('is-active')) {
+ $selected.addClass('is-active');
+ }
+ /** Prepend persona list item html to selected people list */
+ $selectedPeople.prepend(personaListItem);
+ /** Close the picker */
+ $peoplePicker.removeClass("is-active");
+ /** Get the total amount of selected personas and display that number */
+ var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length;
+ $selectedCount.html(count);
+ /** Return picker back to default state:
+ - Show only the first five results in the people list for when the picker is reopened
+ - Make searchMore inactive
+ - Clear any search field text
+ */
+ $peopleList.children().show();
+ $peopleList.children(":gt(4)").hide();
+
+ $('.ms-PeoplePicker-searchMore').removeClass('is-active');
+ $searchField.val("");
+ }
+ });
+
+ /** Remove the persona when clicking the personaRemove button. */
+ $peoplePicker.on('click', '.ms-PeoplePicker-personaRemove', function() {
+ $(this).parents('.ms-PeoplePicker-persona').remove();
+
+ /** Make the search field 100% width if all personas have been removed */
+ if ( $('.ms-PeoplePicker-persona').length === 0 ) {
+ $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth('100%');
+ } else {
+ resizeSearchField($peoplePicker);
+ }
+ });
+
+ /** Trigger additional searching when clicking the search more area. */
+ $results.on('click', '.js-searchMore', function() {
+ var $searchMore = $(this);
+ var primaryLabel = $searchMore.find(".ms-PeoplePicker-searchMorePrimary");
+ var originalPrimaryLabelText = primaryLabel.html();
+ var searchFieldText = $searchField.val();
+
+ /** Change to searching state. */
+ $searchMore.addClass("is-searching");
+ primaryLabel.html("Searching for " + searchFieldText);
+
+ /** Attach Spinner */
+ if (!spinner) {
+ spinner = new fabric.Spinner($searchMore.get(0));
+ } else {
+ spinner.start();
+ }
+
+ /** Show all results in Facepile variant */
+ if($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
+ setTimeout(function() {$peopleList.children().show();}, 1500);
+ }
+
+ /** Return the original state. */
+ setTimeout(function() {
+ $searchMore.removeClass("is-searching");
+ primaryLabel.html(originalPrimaryLabelText);
+ spinner.stop();
+ }, 1500);
+ });
+
+ /** Remove a result using the action icon. */
+ $results.on('click', '.js-resultRemove', function(event) {
+ event.stopPropagation();
+ $(this).parent(".ms-PeoplePicker-result").remove();
+ });
+
+ /** Expand a result if more details are available. */
+ $results.on('click', '.js-resultExpand', function(event) {
+ event.stopPropagation();
+ $(this).parent(".ms-PeoplePicker-result").toggleClass("is-expanded");
+ });
+
+ /** Remove a selected person using the action icon. */
+ $selectedPeople.on('click', '.js-selectedRemove', function(event) {
+ event.stopPropagation();
+ $(this).parent(".ms-PeoplePicker-selectedPerson").remove();
+ var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length;
+ $selectedCount.html(count);
+ if ($peoplePicker.find('.ms-PeoplePicker-selectedPerson').length === 0) {
+ $selected.removeClass('is-active');
+ }
+ });
+
+ var filterResults = function(results, currentSuggestion, currentValueExists) {
+ return results.find('.ms-Persona-primaryText').filter(function() {
+ if (currentValueExists) {
+ return $(this).text().toLowerCase() === currentSuggestion;
+ } else {
+ return $(this).text().toLowerCase() !== currentSuggestion;
+ }
+ }).parents('.ms-PeoplePicker-peopleListItem');
+ };
+
+ /** Search people picker items */
+ $peoplePicker.on('keyup', '.ms-PeoplePicker-searchField', function(evt) {
+ var suggested = [];
+ var newSuggestions = [];
+ var $pickerResult = $results.find('.ms-Persona-primaryText');
+
+ $peoplePicker.addClass('is-searching');
+
+ /** Hide members */
+ $selected.hide();
+
+ /** Show 5 results */
+ $peopleList.children(":lt(5)").show();
+
+ /** Show searchMore button */
+ $('.ms-PeoplePicker-searchMore').addClass('is-active');
+
+ /** Get array of suggested people */
+ $pickerResult.each(function() { suggested.push($(this).text()); });
+
+ /** Iterate over array to find matches and show matching items */
+ for (var i = 0; i < suggested.length; i++) {
+ var currentPersona = suggested[i].toLowerCase();
+ var currentValue = evt.target.value.toLowerCase();
+ var currentSuggestion;
+
+ if (currentPersona.indexOf(currentValue) > -1) {
+ currentSuggestion = suggested[i].toLowerCase();
+
+ newSuggestions.push(suggested[i]);
+
+ filterResults($results, currentSuggestion, true).show();
+ } else {
+ filterResults($results, currentSuggestion, false).hide();
+ }
+ }
+
+ /** Show members and hide searchmore when field is empty */
+ if ($(this).val() === "") {
+ $peoplePicker.removeClass('is-searching');
+ $selected.show();
+ $('.ms-PeoplePicker-searchMore').removeClass('is-active');
+ $selectedPeople.addClass('ms-u-slideDownIn20');
+ setTimeout(function() { $selectedPeople.removeClass('ms-u-slideDownIn20');}, 1000);
+ $peopleList.children(":gt(4)").hide();
+ }
+ });
+
+ /** Show persona card when clicking a persona in the members list */
+ $selectedPeople.on('click', '.ms-Persona', function() {
+ var selectedName = $(this).find(".ms-Persona-primaryText").html();
+ var selectedTitle = $(this).find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var name = selectedName.split(' ');
+ var nameInitials = '';
+
+ for (var i = 0; i < name.length; i++) {
+ nameInitials += name[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $(this).find('.ms-Persona-initials').attr('class');
+ var selectedImage = $(this).find('.ms-Persona-image').attr('src');
+ var $card = $('.ms-PersonaCard');
+ var $cardName = $card.find('.ms-Persona-primaryText');
+ var $cardTitle = $card.find('.ms-Persona-secondaryText');
+ var $cardInitials = $card.find('.ms-Persona-initials');
+ var $cardImage = $card.find('.ms-Persona-image');
+
+ /** Close any open persona cards */
+ $personaCard.removeClass('is-active');
+
+ /** Add data to persona card */
+ $cardName.text(selectedName);
+ $cardTitle.text(selectedTitle);
+ $cardInitials.text(selectedInitials);
+ $cardInitials.removeClass();
+ $cardInitials.addClass(selectedClasses);
+ $cardImage.attr('src', selectedImage);
+
+ /** Show persona card */
+ setTimeout(function() {
+ $personaCard.addClass('is-active');
+ setTimeout(function(){$personaCard.css({'animation-name': 'none'});}, 300);
+ }, 100);
+
+ /** Align persona card on md and above screens */
+ if ($(window).width() > 480) {
+ var itemPositionTop = $(this).offset().top;
+ var correctedPositionTop = itemPositionTop + 10;
+
+ $personaCard.css({'top': correctedPositionTop, 'left': 0});
+ } else {
+ $personaCard.css({'top': 'auto'});
+ }
+ });
+
+ /** Dismiss persona card when clicking on the document */
+ $(document).on('click', function(e) {
+ var $memberBtn = $('.ms-PeoplePicker-selectedPerson').find('.ms-Persona');
+
+ if (!$memberBtn.is(e.target) && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) {
+ $personaCard.removeClass('is-active');
+ setTimeout(function(){$personaCard.removeAttr('style');}, 300);
+ } else {
+ $personaCard.addClass('is-active');
+ }
+ });
+ });
+ };
+
+ /** Resize the search field to match the search box */
+ function resizeSearchField($peoplePicker) {
+ var $searchBox = $peoplePicker.find('.ms-PeoplePicker-searchBox');
+
+ // Where is the right edge of the search box?
+ var searchBoxLeftEdge = $searchBox.position().left;
+ var searchBoxWidth = $searchBox.outerWidth();
+ var searchBoxRightEdge = searchBoxLeftEdge + searchBoxWidth;
+
+ // Where is the right edge of the last persona component?
+ var $lastPersona = $searchBox.find('.ms-PeoplePicker-persona:last');
+ var lastPersonaLeftEdge = $lastPersona.offset().left;
+ var lastPersonaWidth = $lastPersona.outerWidth();
+ var lastPersonaRightEdge = lastPersonaLeftEdge + lastPersonaWidth;
+
+ // Adjust the width of the field to fit the remaining space.
+ var newFieldWidth = searchBoxRightEdge - lastPersonaRightEdge - 7;
+
+ // Don't let the field get too tiny.
+ if (newFieldWidth < 100) {
+ newFieldWidth = "100%";
+ }
+
+ // Set the width of the search field
+ $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth(newFieldWidth);
+ }
+})(jQuery);
diff --git a/dist/samples/Components/PeoplePicker/PeoplePicker.Searching.png b/dist/samples/Components/PeoplePicker/PeoplePicker.Searching.png
new file mode 100644
index 000000000..147416f77
Binary files /dev/null and b/dist/samples/Components/PeoplePicker/PeoplePicker.Searching.png differ
diff --git a/dist/samples/Components/PeoplePicker/PeoplePicker.css b/dist/samples/Components/PeoplePicker/PeoplePicker.css
new file mode 100644
index 000000000..54eac8c9f
--- /dev/null
+++ b/dist/samples/Components/PeoplePicker/PeoplePicker.css
@@ -0,0 +1,1775 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Persona {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
+.ms-PeoplePicker-result .ms-Persona:hover .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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ 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.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
+
+.ms-PeoplePicker {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ *zoom: 1;
+ border: 1px solid #c8c8c8;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchBox:before,
+.ms-PeoplePicker-searchBox:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-PeoplePicker-searchBox:after {
+ clear: both;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: left;
+ height: 38px;
+ outline: none;
+ padding-left: 8px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: left;
+ margin: 4px;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-persona .ms-Persona {
+ background-color: #f4f4f4;
+ float: left;
+ min-height: 30px;
+}
+
+.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;
+ float: left;
+ 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 {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: 305;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ padding: 17px 0 0 12px;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+.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;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-result .ms-Persona:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-result .ms-Persona-details {
+ width: 100%;
+}
+
+.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 0;
+ 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: 34px;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultAction {
+ height: 48px;
+ }
+}
+
+.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: #71afe5;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid #eaeaea;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ left: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
+ background-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
+ color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching:hover {
+ background-color: transparent;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-left: 70px;
+ text-align: left;
+}
+
+.ms-PeoplePicker-searchMoreBtn:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-searchMoreBtn:focus,
+.ms-PeoplePicker-searchMoreBtn:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-left: 50px;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+}
+
+.ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #333333;
+ font-size: 16px;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
+ background-color: inherit;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
+ color: #666666;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
+ margin-top: -8px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+ height: 49px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ left: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ font-size: 17px;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 45px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
+ height: 28px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn {
+ height: 42px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction {
+ height: 42px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
+ padding-left: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
+ top: 16px;
+ left: 14px;
+ height: 20px;
+ width: 20px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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;
+}
diff --git a/dist/samples/Components/PeoplePicker/PeoplePicker.min.css b/dist/samples/Components/PeoplePicker/PeoplePicker.min.css
new file mode 100644
index 000000000..2dd7b1b00
--- /dev/null
+++ b/dist/samples/Components/PeoplePicker/PeoplePicker.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:1}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.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;float:left;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{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:2}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.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}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.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:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.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:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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}
\ No newline at end of file
diff --git a/dist/samples/Components/PeoplePicker/index.html b/dist/samples/Components/PeoplePicker/index.html
new file mode 100644
index 000000000..6c9050bbd
--- /dev/null
+++ b/dist/samples/Components/PeoplePicker/index.html
@@ -0,0 +1,1077 @@
+
+
+
+
+
+
+
+ Component PeoplePicker
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PeoplePicker
+
+
+
+
+
+
+
+
+
+
+
Top results
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Other results
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Showing top 5 results
+ Search Contacts & Directory
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Top results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Other results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Showing top 5 results
+
Search Contacts & Directory
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Top results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Other results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
We are having trouble connecting to the server. Please try again in a few minutes.
+
+
+
+
+
+
+
+
+
People picker
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
GS
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
Search Contacts & Directory
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
GS
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
MG
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Persona/Persona.Person.jpg b/dist/samples/Components/Persona/Persona.Person.jpg
new file mode 100644
index 000000000..4d06e964d
Binary files /dev/null and b/dist/samples/Components/Persona/Persona.Person.jpg differ
diff --git a/dist/samples/Components/Persona/Persona.Person2.png b/dist/samples/Components/Persona/Persona.Person2.png
new file mode 100644
index 000000000..4ba5f7b0d
Binary files /dev/null and b/dist/samples/Components/Persona/Persona.Person2.png differ
diff --git a/dist/samples/Components/Persona/Persona.css b/dist/samples/Components/Persona/Persona.css
new file mode 100644
index 000000000..f49dabc36
--- /dev/null
+++ b/dist/samples/Components/Persona/Persona.css
@@ -0,0 +1,500 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Persona {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
diff --git a/dist/samples/Components/Persona/Persona.min.css b/dist/samples/Components/Persona/Persona.min.css
new file mode 100644
index 000000000..d63dca156
--- /dev/null
+++ b/dist/samples/Components/Persona/Persona.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}
\ No newline at end of file
diff --git a/dist/samples/Components/Persona/index.html b/dist/samples/Components/Persona/index.html
new file mode 100644
index 000000000..139ff640d
--- /dev/null
+++ b/dist/samples/Components/Persona/index.html
@@ -0,0 +1,451 @@
+
+
+
+
+
+
+
+ Component Persona
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Persona
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/PersonaCard/Jquery.PersonaCard.js b/dist/samples/Components/PersonaCard/Jquery.PersonaCard.js
new file mode 100644
index 000000000..588a8dde1
--- /dev/null
+++ b/dist/samples/Components/PersonaCard/Jquery.PersonaCard.js
@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Persona Card Plugin
+ *
+ * Adds basic demonstration functionality to .ms-PersonaCard components.
+ *
+ * @param {jQuery Object} One or more .ms-PersonaCard components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.PersonaCard = function () {
+
+ /** Go through each file picker we've been given. */
+ return this.each(function () {
+
+ var $personaCard = $(this);
+
+ /** When selecting an action, show its details. */
+ $personaCard.on('click', '.ms-PersonaCard-action', function() {
+
+ /** Select the correct tab. */
+ $personaCard.find('.ms-PersonaCard-action').removeClass('is-active');
+ $(this).addClass('is-active');
+
+ /** Function for switching selected item into view by adding a class to ul. */
+ var updateForItem = function(wrapper, item) {
+ var previousItem = wrapper.className + "";
+ var detail = item.charAt(0).toUpperCase() + item.slice(1);
+ var nextItem = "ms-PersonaCard-detail" + detail;
+ if (previousItem !== nextItem){
+ wrapper.classList.remove(previousItem);
+ wrapper.classList.add(nextItem);
+ }
+ };
+
+ /** Get id of selected item */
+ var el = $(this).attr('id');
+ /** Add detail class to ul to switch it into view. */
+ updateForItem($(this).parent().next().find('#detailList')[0], el);
+
+ /** Display the corresponding details. */
+ var requestedAction = $(this).attr('id');
+ $personaCard.find('.ms-PersonaCard-actionDetails').removeClass('is-active');
+ $personaCard.find('#' + requestedAction + '.ms-PersonaCard-actionDetails').addClass('is-active');
+
+ });
+
+ /** Toggle more details. */
+ $personaCard.on('click', '.ms-PersonaCard-detailExpander', function() {
+ $(this).parent('.ms-PersonaCard-actionDetails').toggleClass('is-collapsed');
+ });
+
+ });
+
+ };
+})(jQuery);
diff --git a/dist/samples/Components/PersonaCard/PersonaCard.css b/dist/samples/Components/PersonaCard/PersonaCard.css
new file mode 100644
index 000000000..6dca4a09d
--- /dev/null
+++ b/dist/samples/Components/PersonaCard/PersonaCard.css
@@ -0,0 +1,859 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Persona {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-OrgChart {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px 0;
+}
+
+.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;
+ outline: transparent;
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ 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.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
diff --git a/dist/samples/Components/PersonaCard/PersonaCard.min.css b/dist/samples/Components/PersonaCard/PersonaCard.min.css
new file mode 100644
index 000000000..2257938f8
--- /dev/null
+++ b/dist/samples/Components/PersonaCard/PersonaCard.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.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;outline:transparent}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}
\ No newline at end of file
diff --git a/dist/samples/Components/PersonaCard/index.html b/dist/samples/Components/PersonaCard/index.html
new file mode 100644
index 000000000..c6aec4e88
--- /dev/null
+++ b/dist/samples/Components/PersonaCard/index.html
@@ -0,0 +1,444 @@
+
+
+
+
+
+
+
+ Component PersonaCard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PersonaCard
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
GS
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
MG
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Pivot/Pivot.css b/dist/samples/Components/Pivot/Pivot.css
new file mode 100644
index 000000000..69f2f5ea6
--- /dev/null
+++ b/dist/samples/Components/Pivot/Pivot.css
@@ -0,0 +1,242 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Pivot {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 40px;
+ list-style-type: none;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ position: relative;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ line-height: 40px;
+ margin-right: 8px;
+}
+
+.ms-Pivot-link:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:after {
+ background-color: #37006e;
+ }
+}
+
+.ms-Pivot-link:hover,
+.ms-Pivot-link:focus,
+.ms-Pivot-link:active {
+ color: #000000;
+ cursor: pointer;
+}
+
+.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:active + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-link:active {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:active {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:active {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link:active:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected {
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link.is-selected {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link.is-selected {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link.is-selected:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-dropdownIcon {
+ font-size: 16px;
+ position: relative;
+ top: 2px;
+}
+
+.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:after {
+ display: none;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs {
+ height: 40px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important;
+}
+
+.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 !important;
+ background-color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.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 !important;
+}
+
+@media (min-width: 640px) {
+ .ms-Pivot-link {
+ font-size: 14px;
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 14px;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+}
diff --git a/dist/samples/Components/Pivot/Pivot.min.css b/dist/samples/Components/Pivot/Pivot.min.css
new file mode 100644
index 000000000..7bef270b7
--- /dev/null
+++ b/dist/samples/Components/Pivot/Pivot.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.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:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.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!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.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!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}
\ No newline at end of file
diff --git a/dist/samples/Components/Pivot/index.html b/dist/samples/Components/Pivot/index.html
new file mode 100644
index 000000000..6dd673bd5
--- /dev/null
+++ b/dist/samples/Components/Pivot/index.html
@@ -0,0 +1,149 @@
+
+
+
+
+
+
+
+ Component Pivot
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pivot
+
+
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
+
+
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
+
+
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
+
+
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Pivot/jquery.Pivot.js b/dist/samples/Components/Pivot/jquery.Pivot.js
new file mode 100644
index 000000000..e5e44bb06
--- /dev/null
+++ b/dist/samples/Components/Pivot/jquery.Pivot.js
@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Pivot Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Pivot components.
+ *
+ * @param {jQuery Object} One or more .ms-Pivot components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.Pivot = function () {
+
+ /** Go through each pivot we've been given. */
+ return this.each(function () {
+
+ var $pivotContainer = $(this);
+
+ /** When clicking/tapping a link, select it. */
+ $pivotContainer.on('click', '.ms-Pivot-link', function(event) {
+ event.preventDefault();
+ /** Check if current selection has elipses child element **/
+ var $elipsisCheck = $(this).find('.ms-Pivot-ellipsis');
+
+ /** Only execute when no elipses element can be found **/
+ if($elipsisCheck.length === 0){
+
+ $(this).siblings('.ms-Pivot-link').removeClass('is-selected');
+ $(this).addClass('is-selected');
+ }
+
+ });
+
+ });
+
+ };
+})(jQuery);
diff --git a/dist/samples/Components/ProgressIndicator/ProgressIndicator.css b/dist/samples/Components/ProgressIndicator/ProgressIndicator.css
new file mode 100644
index 000000000..b42295cf3
--- /dev/null
+++ b/dist/samples/Components/ProgressIndicator/ProgressIndicator.css
@@ -0,0 +1,63 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-ProgressIndicator-itemName {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ 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 {
+ position: absolute;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@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;
+ }
+}
diff --git a/dist/samples/Components/ProgressIndicator/ProgressIndicator.js b/dist/samples/Components/ProgressIndicator/ProgressIndicator.js
new file mode 100644
index 000000000..d70504b12
--- /dev/null
+++ b/dist/samples/Components/ProgressIndicator/ProgressIndicator.js
@@ -0,0 +1,103 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * ProgressIndicator component
+ *
+ * A component for outputting determinate progress
+ *
+ */
+
+/**
+ * @namespace fabric
+ */
+var fabric = fabric || {};
+/**
+ *
+ * @param {HTMLDivElement} container - the target container for an instance of ProgressIndicator
+ * @constructor
+ */
+fabric.ProgressIndicator = function(container) {
+ this.container = container;
+ this.cacheDOM();
+};
+
+fabric.ProgressIndicator.prototype = (function() {
+
+ var _progress;
+ var _width;
+ var _itemName;
+ var _total;
+ var _itemDescription;
+ var _progressBar;
+
+ /**
+ * Sets the progress percentage for a determinate
+ * operation. Either use this or setProgress
+ * and setTotal as setProgressPercent assumes
+ * you've done a percentage calculation before
+ * injecting it into the function
+ * @param {number} percent - a floating point number from 0 to 1
+ */
+ var setProgressPercent = function(percent) {
+ _progressBar.style.width = Math.round(_width * percent) + "px";
+ };
+
+ /**
+ * Sets the progress for a determinate operation.
+ * Use this in combination with setTotal.
+ * @param {number} progress
+ */
+ var setProgress = function(progress) {
+ _progress = progress;
+ var percentage = _progress / _total;
+ this.setProgressPercent(percentage);
+ };
+
+ /**
+ * Sets the total file size, etc. for a
+ * determinate operation. Use this in
+ * combination with setProgress
+ * @param {number} total
+ */
+ var setTotal = function(total) {
+ _total = total;
+ };
+
+ /**
+ * Sets the text for the title or label
+ * of an instance
+ * @param {string} name
+ */
+ var setName = function(name) {
+ _itemName.innerHTML = name;
+ };
+
+ /**
+ * Sets the text for a description
+ * of an instance
+ * @param {string} name
+ */
+ var setDescription = function(description) {
+ _itemDescription.innerHTML = description;
+ };
+
+ /**
+ * caches elements and values of the component
+ *
+ */
+ var cacheDOM = function() {
+ _itemName = this.container.querySelector('.ms-ProgressIndicator-itemName') || null; //an itemName element is optional
+ _itemDescription = this.container.querySelector('.ms-ProgressIndicator-itemDescription') || null; //an itemDescription element is optional
+ _progressBar = this.container.querySelector('.ms-ProgressIndicator-progressBar');
+ _width = this.container.querySelector('.ms-ProgressIndicator-itemProgress').offsetWidth;
+ };
+
+ return {
+ setProgressPercent: setProgressPercent,
+ setName: setName,
+ setDescription: setDescription,
+ setProgress: setProgress,
+ setTotal: setTotal,
+ cacheDOM: cacheDOM
+ };
+}());
diff --git a/dist/samples/Components/ProgressIndicator/ProgressIndicator.min.css b/dist/samples/Components/ProgressIndicator/ProgressIndicator.min.css
new file mode 100644
index 000000000..2a06031c6
--- /dev/null
+++ b/dist/samples/Components/ProgressIndicator/ProgressIndicator.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;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{position:absolute;height:2px;background-color:#0078d7}@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}}
\ No newline at end of file
diff --git a/dist/samples/Components/ProgressIndicator/index.html b/dist/samples/Components/ProgressIndicator/index.html
new file mode 100644
index 000000000..20c8f3e22
--- /dev/null
+++ b/dist/samples/Components/ProgressIndicator/index.html
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
+ Component ProgressIndicator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ProgressIndicator
+
+
+
+
+
Example.jpg
+
+
My Progress Description
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/SearchBox/Jquery.SearchBox.js b/dist/samples/Components/SearchBox/Jquery.SearchBox.js
new file mode 100644
index 000000000..c95c6029a
--- /dev/null
+++ b/dist/samples/Components/SearchBox/Jquery.SearchBox.js
@@ -0,0 +1,69 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * SearchBox Plugin
+ *
+ * Adds basic demonstration functionality to .ms-SearchBox components.
+ *
+ * @param {jQuery Object} One or more .ms-SearchBox components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.SearchBox = function () {
+
+ /** Iterate through each text field provided. */
+ return this.each(function () {
+ // Set cancel to false
+ var cancel = false;
+ var $searchField = $(this).find('.ms-SearchBox-field');
+
+ /** SearchBox focus - hide label and show cancel button */
+ $searchField.on('focus', function() {
+ /** Hide the label on focus. */
+ $(this).siblings('.ms-SearchBox-label').hide();
+ // Show cancel button by adding is-active class
+ $(this).parent('.ms-SearchBox').addClass('is-active');
+ });
+
+ /** 'hovering' class allows for more fine grained control of hover state */
+ $searchField.on('mouseover', function() {
+ $searchField.addClass('hovering');
+ });
+
+ $searchField.on('mouseout', function() {
+ $searchField.removeClass('hovering');
+ });
+
+ // If cancel button is selected, change cancel value to true
+ $(this).find('.ms-SearchBox-closeButton').on('mousedown', function() {
+ cancel = true;
+ });
+
+ /** Show the label again when leaving the field. */
+ $(this).find('.ms-SearchBox-field').on('blur', function() {
+
+ // If cancel button is selected remove the text and show the label
+ if (cancel) {
+ $(this).val('');
+ $searchField.addClass('hovering');
+ }
+
+ var $searchBox = $(this).parent('.ms-SearchBox');
+ // Prevents inputfield from gaining focus too soon
+ setTimeout(function() {
+ // Remove is-active class - hides cancel button
+ $searchBox.removeClass('is-active');
+ }, 10);
+
+ /** Only do this if no text was entered. */
+ if ($(this).val().length === 0 ) {
+ $(this).siblings('.ms-SearchBox-label').show();
+ }
+
+ // Reset cancel to false
+ cancel = false;
+ });
+ });
+
+ };
+})(jQuery);
diff --git a/dist/samples/Components/SearchBox/SearchBox.css b/dist/samples/Components/SearchBox/SearchBox.css
new file mode 100644
index 000000000..b352e4399
--- /dev/null
+++ b/dist/samples/Components/SearchBox/SearchBox.css
@@ -0,0 +1,178 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-SearchBox {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #600000;
+ }
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon {
+ color: #c8c8c8;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-closeButton {
+ display: block;
+ outline: transparent 1px solid;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #71afe5;
+ outline: transparent 1px solid;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ color: #000000;
+ height: 32px;
+ padding: 6px 3px 7px 10px;
+ width: 180px;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-SearchBox-field.hovering {
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-closeButton {
+ border: none;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 32px;
+ width: 32px;
+ background-color: #0078d7;
+ text-align: center;
+ display: none;
+ font-size: 17px;
+ color: #ffffff;
+ z-index: 10;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-left: 8px;
+ line-height: 32px;
+ color: #666666;
+}
+
+.ms-SearchBox-icon {
+ margin-right: 7px;
+ font-size: 17px;
+ color: #767676;
+}
diff --git a/dist/samples/Components/SearchBox/SearchBox.min.css b/dist/samples/Components/SearchBox/SearchBox.min.css
new file mode 100644
index 000000000..ed6123f2b
--- /dev/null
+++ b/dist/samples/Components/SearchBox/SearchBox.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-SearchBox{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:1}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:2}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676}
\ No newline at end of file
diff --git a/dist/samples/Components/SearchBox/index.html b/dist/samples/Components/SearchBox/index.html
new file mode 100644
index 000000000..fb83bbbc9
--- /dev/null
+++ b/dist/samples/Components/SearchBox/index.html
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+
+ Component SearchBox
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ SearchBox
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Spinner/Spinner.css b/dist/samples/Components/Spinner/Spinner.css
new file mode 100644
index 000000000..3bbcd4412
--- /dev/null
+++ b/dist/samples/Components/Spinner/Spinner.css
@@ -0,0 +1,52 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Spinner {
+ 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 {
+ position: relative;
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
diff --git a/dist/samples/Components/Spinner/Spinner.js b/dist/samples/Components/Spinner/Spinner.js
new file mode 100644
index 000000000..1c4364d72
--- /dev/null
+++ b/dist/samples/Components/Spinner/Spinner.js
@@ -0,0 +1,151 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Spinner Component
+ *
+ * An animating activity indicator.
+ *
+ */
+
+/**
+ * @namespace fabric
+ */
+var fabric = fabric || {};
+
+/**
+ * @param {HTMLDOMElement} target - The element the Spinner will attach itself to.
+ */
+
+fabric.Spinner = function(target) {
+
+ var _target = target;
+ var eightSize = 0.2;
+ var circleObjects = [];
+ var animationSpeed = 90;
+ var interval;
+ var spinner;
+ var numCircles;
+ var offsetSize;
+ var fadeIncrement = 0;
+ var parentSize = 20;
+
+ /**
+ * @function start - starts or restarts the animation sequence
+ * @memberOf fabric.Spinner
+ */
+ function start() {
+ stop();
+ interval = setInterval(function() {
+ var i = circleObjects.length;
+ while(i--) {
+ _fade(circleObjects[i]);
+ }
+ }, animationSpeed);
+ }
+
+ /**
+ * @function stop - stops the animation sequence
+ * @memberOf fabric.Spinner
+ */
+ function stop() {
+ clearInterval(interval);
+ }
+
+ //private methods
+
+ function _init() {
+ _setTargetElement();
+ _setPropertiesForSize();
+ _createCirclesAndArrange();
+ _initializeOpacities();
+ start();
+ }
+
+ function _initializeOpacities() {
+ var i = 0;
+ var j = 1;
+ var opacity;
+ fadeIncrement = 1 / numCircles;
+
+ for (i; i < numCircles; i++) {
+ var circleObject = circleObjects[i];
+ opacity = (fadeIncrement * j++);
+ _setOpacity(circleObject.element, opacity);
+ }
+ }
+
+ function _fade(circleObject) {
+ var opacity = _getOpacity(circleObject.element) - fadeIncrement;
+
+ if (opacity <= 0) {
+ opacity = 1;
+ }
+
+ _setOpacity(circleObject.element, opacity);
+ }
+
+ function _getOpacity(element) {
+ return parseFloat(window.getComputedStyle(element).getPropertyValue("opacity"));
+ }
+
+ function _setOpacity(element, opacity) {
+ element.style.opacity = opacity;
+ }
+
+ function _createCircle() {
+ var circle = document.createElement('div');
+ circle.className = "ms-Spinner-circle";
+ circle.style.width = circle.style.height = parentSize * offsetSize + "px";
+ return circle;
+ }
+
+ function _createCirclesAndArrange() {
+
+ var angle = 0;
+ var offset = parentSize * offsetSize;
+ var step = (2 * Math.PI) / numCircles;
+ var i = numCircles;
+ var circleObject;
+ var radius = (parentSize - offset) * 0.5;
+
+ while (i--) {
+ var circle = _createCircle();
+ var x = Math.round(parentSize * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5;
+ var y = Math.round(parentSize * 0.5 + radius * Math.sin(angle) - circle.clientHeight * 0.5) - offset * 0.5;
+ spinner.appendChild(circle);
+ circle.style.left = x + 'px';
+ circle.style.top = y + 'px';
+ angle += step;
+ circleObject = { element:circle, j:i };
+ circleObjects.push(circleObject);
+ }
+ }
+
+ function _setPropertiesForSize() {
+ if (spinner.className.indexOf("large") > -1) {
+ parentSize = 28;
+ eightSize = 0.179;
+ }
+
+ offsetSize = eightSize;
+ numCircles = 8;
+ }
+
+ function _setTargetElement() {
+ //for backwards compatibility
+ if (_target.className.indexOf("ms-Spinner") === -1) {
+ spinner = document.createElement("div");
+ spinner.className = "ms-Spinner";
+ _target.appendChild(spinner);
+ } else {
+ spinner = _target;
+ }
+ }
+
+ _init();
+
+ return {
+ start:start,
+ stop:stop
+ };
+};
diff --git a/dist/samples/Components/Spinner/Spinner.min.css b/dist/samples/Components/Spinner/Spinner.min.css
new file mode 100644
index 000000000..bf6e346ce
--- /dev/null
+++ b/dist/samples/Components/Spinner/Spinner.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Spinner{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;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}
\ No newline at end of file
diff --git a/dist/samples/Components/Spinner/index.html b/dist/samples/Components/Spinner/index.html
new file mode 100644
index 000000000..0247fcb79
--- /dev/null
+++ b/dist/samples/Components/Spinner/index.html
@@ -0,0 +1,125 @@
+
+
+
+
+
+
+
+ Component Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spinner
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Table/Table.css b/dist/samples/Components/Table/Table.css
new file mode 100644
index 000000000..8c86e2e52
--- /dev/null
+++ b/dist/samples/Components/Table/Table.css
@@ -0,0 +1,140 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Table {
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table tr:hover,
+.ms-Table-row:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-Table tr.is-selected,
+.ms-Table-row.is-selected {
+ background-color: #c7e0f4;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck,
+.ms-Table-row.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:before,
+.ms-Table-row.is-selected .ms-Table-rowCheck:before {
+ display: none;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:after,
+.ms-Table-row.is-selected .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #ffffff;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table thead th,
+.ms-Table-head {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table thead td,
+.ms-Table thead th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table thead .ms-Table-rowCheck:after,
+.ms-Table-head .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck:before {
+ border: 1px solid #a6a6a6;
+ content: '';
+ display: block;
+ height: 14px;
+ left: 2px;
+ position: absolute;
+ top: 6px;
+ width: 14px;
+}
+
+@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;
+ }
+}
diff --git a/dist/samples/Components/Table/Table.min.css b/dist/samples/Components/Table/Table.min.css
new file mode 100644
index 000000000..421affa73
--- /dev/null
+++ b/dist/samples/Components/Table/Table.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@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}}
\ No newline at end of file
diff --git a/dist/samples/Components/Table/index.html b/dist/samples/Components/Table/index.html
new file mode 100644
index 000000000..7412369bb
--- /dev/null
+++ b/dist/samples/Components/Table/index.html
@@ -0,0 +1,191 @@
+
+
+
+
+
+
+
+ Component Table
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Table
+
+
+
+
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+
+
+ Cupcake ipsum dolor sit amet cake gummies bear claw cake. Chocolate chocolate bar donut.
+ Candy canes bear claw marzipan icing wafer.
+ Chocolate chocolate bar donut.
+ Candy canes cupcake macaroon toffee.
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+
+
+
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+
+
+ Cupcake ipsum dolor sit amet cake gummies bear claw cake. Chocolate chocolate bar donut.
+ Candy canes bear claw marzipan icing wafer.
+ Chocolate chocolate bar donut.
+ Candy canes cupcake macaroon toffee.
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/TextField/Jquery.TextField.js b/dist/samples/Components/TextField/Jquery.TextField.js
new file mode 100644
index 000000000..226e093d5
--- /dev/null
+++ b/dist/samples/Components/TextField/Jquery.TextField.js
@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+/**
+ * Text Field Plugin
+ *
+ * Adds basic demonstration functionality to .ms-TextField components.
+ *
+ * @param {jQuery Object} One or more .ms-TextField components
+ * @return {jQuery Object} The same components (allows for chaining)
+ */
+(function ($) {
+ $.fn.TextField = function () {
+
+ /** Iterate through each text field provided. */
+ return this.each(function () {
+
+ /** Does it have a placeholder? */
+ if ($(this).hasClass("ms-TextField--placeholder")) {
+
+ /** Hide the label on click. */
+ $(this).on('click', function () {
+ $(this).find('.ms-Label').hide();
+ });
+
+ /** Hide the label on focus. */
+ $(this).find('.ms-TextField-field').on('focus', function () {
+ $(this).siblings('.ms-Label').hide();
+ });
+
+ /** Show the label again when leaving the field. */
+ $(this).find('.ms-TextField-field').on('blur', function () {
+
+ /** Only do this if no text was entered. */
+ if ($(this).val().length === 0) {
+ $(this).siblings('.ms-Label').show();
+ }
+ });
+ }
+
+ /** Underlined - adding/removing a focus class */
+ if ($(this).hasClass('ms-TextField--underlined')) {
+
+ /** Add is-active class - changes border color to theme primary */
+ $(this).find('.ms-TextField-field').on('focus', function() {
+ $(this).parent('.ms-TextField--underlined').addClass('is-active');
+ });
+
+ /** Remove is-active on blur of textfield */
+ $(this).find('.ms-TextField-field').on('blur', function() {
+ $(this).parent('.ms-TextField--underlined').removeClass('is-active');
+ });
+ }
+
+ });
+ };
+})(jQuery);
diff --git a/dist/samples/Components/TextField/TextField.css b/dist/samples/Components/TextField/TextField.css
new file mode 100644
index 000000000..a84d5d106
--- /dev/null
+++ b/dist/samples/Components/TextField/TextField.css
@@ -0,0 +1,344 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 8px;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder,
+.ms-TextField.is-disabled::-moz-placeholder,
+.ms-TextField.is-disabled:-moz-placeholder,
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder:after,
+.ms-TextField.is-required::-moz-placeholder:after,
+.ms-TextField.is-required:-moz-placeholder:after,
+.ms-TextField.is-required:-ms-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 10px 8px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field::-webkit-input-placeholder,
+.ms-TextField-field::-moz-placeholder,
+.ms-TextField-field:-moz-placeholder,
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #666666;
+ padding: 7px 0 7px 10px;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 12px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: bottom;
+ padding-left: 12px;
+ padding-bottom: 5px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 2px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.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: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
diff --git a/dist/samples/Components/TextField/TextField.min.css b/dist/samples/Components/TextField/TextField.min.css
new file mode 100644
index 000000000..fba85ea3f
--- /dev/null
+++ b/dist/samples/Components/TextField/TextField.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.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:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}
\ No newline at end of file
diff --git a/dist/samples/Components/TextField/index.html b/dist/samples/Components/TextField/index.html
new file mode 100644
index 000000000..b7062af91
--- /dev/null
+++ b/dist/samples/Components/TextField/index.html
@@ -0,0 +1,138 @@
+
+
+
+
+
+
+
+ Component TextField
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TextField
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Components/Toggle/Toggle.css b/dist/samples/Components/Toggle/Toggle.css
new file mode 100644
index 000000000..c03ba8387
--- /dev/null
+++ b/dist/samples/Components/Toggle/Toggle.css
@@ -0,0 +1,286 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.4.1
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ 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-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+}
+
+.ms-Toggle .ms-Label {
+ position: relative;
+ padding: 0 0 0 62px;
+ font-size: 12px;
+}
+
+.ms-Toggle:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff !important;
+ border-color: #c8c8c8 !important;
+ pointer-events: none !important;
+ cursor: default !important;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field:before {
+ background-color: #c8c8c8 !important;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 12px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 57px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2.5px #c8c8c8 solid;
+ cursor: pointer;
+}
+
+.ms-Toggle-input {
+ position: absolute;
+ opacity: 0;
+ top: 0;
+}
+
+.ms-Toggle-input + .ms-Toggle-field {
+ background-color: #f4f4f4;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ left: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ right: auto;
+ border-right: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ right: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ left: auto;
+ border-left: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle-input:focus + .ms-Toggle-field,
+.ms-Toggle-input:hover + .ms-Toggle-field {
+ background-color: #eaeaea;
+}
+
+.ms-Toggle-input:focus:checked + .ms-Toggle-field,
+.ms-Toggle-input:hover:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+}
+
+.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/samples/Components/Toggle/Toggle.min.css b/dist/samples/Components/Toggle/Toggle.min.css
new file mode 100644
index 000000000..f836c1b5d
--- /dev/null
+++ b/dist/samples/Components/Toggle/Toggle.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.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/samples/Components/Toggle/index.html b/dist/samples/Components/Toggle/index.html
new file mode 100644
index 000000000..56b035ec9
--- /dev/null
+++ b/dist/samples/Components/Toggle/index.html
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+ Component Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Form/css/Form.css b/dist/samples/Form/css/Form.css
new file mode 100644
index 000000000..71738cad3
--- /dev/null
+++ b/dist/samples/Form/css/Form.css
@@ -0,0 +1,6685 @@
+/*
+ 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 {
+ margin: 23px 0 1px 0;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 17px;
+ color: #666666;
+ vertical-align: top;
+ margin: 10px 0;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+ margin-right: -4px;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 12px;
+ display: inline-block;
+ color: #0078d7;
+ margin-right: -4px;
+ padding: 12px 8px 3px 8px;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu:before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: white;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: none;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ font-weight: normal;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media screen and (max-width: 639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 14px;
+ margin-top: 7px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 8px;
+ padding-bottom: 3px;
+ }
+}
+
+@media screen and (max-width: 479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin-top: 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 5px;
+ padding-bottom: 3px;
+ }
+}
+
+.ms-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-Callout {
+ z-index: 100;
+ margin: 16px auto;
+ position: relative;
+ width: 288px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ content: '';
+ position: absolute;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ height: 0;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowTop:before {
+ z-index: 0;
+ outline: 1px solid transparent;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:after {
+ z-index: 10;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ top: 40px;
+ display: none;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid #ffffff;
+ left: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid transparent;
+ right: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid transparent;
+ top: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid #ffffff;
+ bottom: -10px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ background-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ background-color: #ffffff;
+ }
+}
+
+.ms-Callout-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.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-inner {
+ height: 100%;
+ padding: 0 24px 20px;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding: 18px 24px 12px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-actions .ms-Link.ms-Link--hero {
+ position: relative;
+ left: -8px;
+}
+
+.ms-Callout-action {
+ position: relative;
+ top: 4px;
+ left: -8px;
+ margin-left: 0 !important;
+}
+
+.ms-Callout-action:hover .ms-Callout-actionIcon,
+.ms-Callout-action:focus .ms-Callout-actionIcon {
+ color: #0078d7;
+}
+
+.ms-Callout-button {
+ margin-right: 12px;
+}
+
+.ms-Callout.ms-Callout--close .ms-Callout-title {
+ margin-right: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after {
+ border-color: #0078d7;
+ background-color: transparent;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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;
+ margin-bottom: -8px;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after {
+ left: 40px;
+ right: auto;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after {
+ top: calc('50% - 10px');
+}
+
+.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;
+}
+
+@media (min-width: 480px) {
+ .ms-Callout {
+ width: 300px;
+ margin: 16px;
+ }
+
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after {
+ display: block;
+ }
+}
+
+.ms-ChoiceField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-ChoiceField .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field {
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #eaeaea;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #00ff00;
+ color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #600000;
+ color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField-input {
+ position: absolute;
+ opacity: 0;
+ top: 8px;
+}
+
+.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+}
+
+.ms-ChoiceField-field:after {
+ content: '';
+ display: inline-block;
+ border: 1px #c8c8c8 solid;
+ width: 19px;
+ height: 19px;
+ cursor: pointer;
+ position: relative;
+ font-weight: normal;
+ left: -1px;
+ top: -1px;
+ border-radius: 50%;
+ position: absolute;
+}
+
+.ms-ChoiceField-field:hover:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ background-color: #666666;
+ border-color: #666666;
+ color: #666666;
+ border-radius: 50%;
+ content: '\00a0';
+ display: inline-block;
+ position: absolute;
+ top: 4px;
+ right: 0;
+ bottom: 0;
+ left: 4px;
+ width: 11px;
+ height: 11px;
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #ffffff;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #000000;
+ background-color: #000000;
+ }
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
+ background-color: #212121;
+ color: #212121;
+}
+
+.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after {
+ border-radius: 0;
+}
+
+.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ background-color: transparent;
+ border-radius: 0;
+ font-size: 13px;
+ top: 3px;
+ left: 3px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #ffffff;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #000000;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.ms-ChoiceFieldGroup {
+ margin-bottom: 4px;
+}
+
+.ms-CommandBar {
+ background-color: #eff6fc;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ padding-left: 58px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-mainArea {
+ padding-left: 24px;
+ }
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 12px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 16px;
+ }
+}
+
+.ms-CommandBarItem {
+ display: inline-block;
+ color: #0078d7;
+ height: 40px;
+ outline: none;
+ vertical-align: top;
+ margin-right: -4px;
+}
+
+.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ height: 38px;
+ outline: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ height: 38px;
+ outline: none;
+ }
+}
+
+.ms-CommandBarItem:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBarItem {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline;
+ }
+}
+
+.ms-CommandBarItem.is-hidden {
+ width: 0;
+ overflow: hidden;
+}
+
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown {
+ display: inline;
+}
+
+.ms-CommandBarItem-overflow {
+ display: none;
+}
+
+.ms-CommandBarItem-overflow.is-visible {
+ display: inline-block;
+}
+
+.ms-CommandBarItem-overflow .ms-Icon {
+ font-size: 14px;
+ color: #666666;
+}
+
+.ms-CommandBarItem-link {
+ line-height: 39px;
+ padding: 0 6px;
+ cursor: pointer;
+ height: 40px;
+ min-width: 20px;
+ text-align: center;
+ position: relative;
+ padding: 0 8px;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+}
+
+.ms-CommandBarItem-link:focus {
+ outline: none;
+}
+
+.ms-CommandBarItem-link:focus:before {
+ position: absolute;
+ left: 2px;
+ right: 2px;
+ top: 2px;
+ bottom: 2px;
+ border: 1px solid #a6a6a6;
+ content: '';
+}
+
+.ms-CommandBarItem-icon {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-CommandBarItem-chevronDown {
+ vertical-align: middle;
+ padding-bottom: 3px;
+ margin-top: 13px;
+ font-size: 1.1em;
+ line-height: 1em;
+ color: #666666;
+}
+
+.ms-CommandBarItem-chevronDown:before {
+ height: 10px;
+ line-height: 16px;
+}
+
+.ms-CommandBarSearch {
+ float: left;
+ width: 208px;
+ max-width: 208px;
+ background-color: #deecf9;
+ color: #333333;
+ height: 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-color: transparent;
+ transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ transition-property: width, background-color;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch {
+ overflow: hidden;
+ width: 50px;
+ position: absolute;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #ffffff;
+ z-index: 10;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch .ms-Icon--search {
+ margin-left: 2px;
+ margin-top: 12px;
+ vertical-align: top;
+}
+
+.ms-CommandBarSearch-input {
+ height: 40px;
+ padding: 8px 8px 8px 0;
+ border: none;
+ border-left: 42px solid transparent;
+ background-color: transparent;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+ cursor: pointer;
+ font-size: 14px;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #ffffff;
+ }
+}
+
+.ms-CommandBarSearch-input::-ms-clear {
+ display: none;
+}
+
+.ms-CommandBarSearch-input::-webkit-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::-moz-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:-ms-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper {
+ display: block;
+ padding-left: 15px;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper,
+.ms-CommandBarSearch-iconArrowWrapper {
+ top: 0;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.ms-CommandBarSearch-iconClearWrapper {
+ display: none;
+ top: 1px;
+ right: 0px;
+ z-index: 10;
+}
+
+.ms-CommandBarSearch.is-active {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch.is-active {
+ width: 100%;
+ position: absolute;
+ z-index: 10;
+ max-width: 100%;
+ }
+}
+
+.ms-CommandBarSearch.is-active:hover {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ cursor: text;
+ padding-right: 40px;
+ border-left-width: 8px;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
+ border-left-width: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ padding-right: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch-iconWrapper {
+ height: 40px;
+ line-height: 40px;
+ cursor: pointer;
+ padding: 0px 8px;
+ position: absolute;
+ width: 34px;
+ text-align: center;
+}
+
+.ms-CommandBarSearch .ms-Icon:before {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
+
+.ms-DatePicker {
+ 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 {
+ -webkit-animation-name: fadeIn, slideDownIn10;
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ 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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #c7e0f4;
+}
+
+.ms-DatePicker-day--disabled:before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.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;
+ text-align: center;
+ 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: 0px;
+ position: absolute;
+ top: 0px;
+ width: 140px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+ display: block;
+ font-weight: normal;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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: normal;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-right: 1px solid #eaeaea;
+ width: 220px;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-dayPicker {
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ left: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0 0;
+ }
+
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ .ms-DatePicker-month {
+ margin-left: 12px;
+ }
+
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ }
+
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-prevYear,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-nextDecade {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+ .ms-DatePicker-currentYear,
+ .ms-DatePicker-currentDecade {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 10px 10px 0;
+ }
+
+ .ms-DatePicker-monthOption:hover,
+ .ms-DatePicker-yearOption:hover {
+ outline: 1px solid transparent;
+ }
+
+ .ms-DatePicker-goToday {
+ box-sizing: border-box;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ right: 10px;
+ text-align: right;
+ top: 199px;
+ width: 210px;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+ }
+}
+
+@media (max-width: 459px) {
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker {
+ display: block;
+ }
+}
+
+.ms-Dialog {
+ background-color: transparent;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 300;
+ display: block;
+ font-size: 0;
+ line-height: 100vh;
+ text-align: center;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+}
+
+.ms-Dialog::before {
+ vertical-align: middle;
+ display: inline-block;
+ content: '';
+ height: 100%;
+ width: 0;
+}
+
+.ms-Dialog .ms-Button.ms-Button--compound {
+ display: block;
+ margin-left: 0;
+}
+
+.ms-Dialog .ms-Overlay {
+ z-index: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dialog .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Dialog-main {
+ vertical-align: middle;
+ display: inline-block;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ box-sizing: border-box;
+ line-height: 1.35;
+ margin: auto;
+ width: 288px;
+ position: relative;
+ text-align: left;
+ outline: 3px solid transparent;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close {
+ display: none;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ z-index: 10;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Dialog-inner {
+ height: 100%;
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog-header {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 20px 15px;
+}
+
+.ms-Dialog-title {
+ margin: 0;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+ width: 100%;
+}
+
+.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog-subText {
+ margin: 0 0 20px 0;
+ padding-top: 8px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Dialog-actions {
+ position: relative;
+ width: 100%;
+ min-height: 24px;
+ line-height: 24px;
+ margin: 20px 0 0;
+ font-size: 0;
+}
+
+.ms-Dialog-actions .ms-Button {
+ line-height: normal;
+}
+
+.ms-Dialog-actionsRight {
+ text-align: right;
+ font-size: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action:first-child {
+ margin: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action {
+ margin: 0 0 0 16px;
+}
+
+.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-button--close {
+ display: block;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner {
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header {
+ background-color: #0078d7;
+ padding: 26px 20px 28px;
+ margin-bottom: 8px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ font-size: 28px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #ffffff;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText {
+ font-size: 14px;
+}
+
+@media (min-width: 480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
+
+.ms-Dropdown {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ 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.ms-Dropdown--open .ms-Dropdown-items,
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: fixed;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #666666;
+ font-size: 17px;
+ position: absolute;
+ right: 9px;
+ bottom: 5px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ line-height: 30px;
+ padding: 0 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-items {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ max-width: 268px;
+ z-index: 400;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow-y: scroll;
+}
+
+.ms-Dropdown-items:before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 38px;
+ padding: 0 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:first-child,
+.ms-Dropdown-item:last-child {
+ height: 39px;
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Dropdown-items {
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+ }
+
+ .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
+ .ms-Dropdown.is-open .ms-Dropdown-items {
+ position: absolute;
+ }
+}
+
+.ms-Facepile {
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ top: 40px;
+ height: 200px;
+}
+
+.ms-Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn {
+ 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-itemBtn .ms-Persona-presence,
+.ms-Facepile-itemBtn .ms-Persona-details {
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover,
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus {
+ background-color: #005a9e;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover {
+ color: #212121;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-List {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width: 480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+}
+
+.ms-ListItem {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+}
+
+.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-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-MessageBanner {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ position: relative;
+ border-bottom: 1px solid #767676;
+ background-color: #eff6fc;
+ min-width: 320px;
+ width: 100%;
+ height: 52px;
+ text-align: center;
+ overflow: hidden;
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ -webkit-animation-name: fadeOut, slideUpOut20;
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-expand:focus,
+.ms-MessageBanner-close:focus {
+ outline: 1px solid 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-expand {
+ display: inline-block;
+ }
+
+ .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 0;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
+
+.ms-NavBar {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ height: 40px;
+ padding: 0 10px;
+ width: 100%;
+ outline: 1px solid transparent;
+}
+
+.ms-NavBar .ms-Overlay {
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ z-index: 0;
+}
+
+.ms-NavBar-openMenu {
+ font-size: 20px;
+ height: 40px;
+ line-height: 40px;
+ position: absolute;
+ right: 27px;
+ text-align: center;
+ width: 40px;
+ cursor: pointer;
+}
+
+.ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item {
+ box-sizing: border-box;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ padding-left: 20px;
+ position: relative;
+}
+
+.ms-NavBar-item:hover {
+ cursor: pointer;
+ background-color: #deecf9;
+ color: #000000;
+}
+
+.ms-NavBar-item:hover .ms-Icon {
+ color: #333333;
+}
+
+.ms-NavBar-item:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-NavBar-item.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-NavBar-item.is-disabled:hover {
+ cursor: default;
+ border: none;
+}
+
+.ms-NavBar-link {
+ color: #333333;
+ text-decoration: none;
+}
+
+.ms-NavBar-link:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after {
+ color: #212121;
+}
+
+.ms-NavBar-chevronDown {
+ color: #666666;
+ font-size: 22px;
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search {
+ position: relative;
+ width: 30px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #666666;
+ content: '\e039';
+ font-size: 21px;
+ line-height: 40px;
+ position: absolute;
+ right: 5px;
+ top: 0;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search .ms-TextField {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open {
+ width: 200px;
+ padding-right: 40px;
+ border: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField {
+ display: block;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field {
+ border: none;
+ background-color: transparent;
+}
+
+@media (max-width: 479px) {
+ .ms-NavBar.is-open .ms-NavBar-items {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ bottom: 0;
+ display: block;
+ left: 50px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ outline: 1px solid transparent;
+ z-index: 5;
+ }
+
+ .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu {
+ position: relative;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 479px) {
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected {
+ height: inherit;
+ background-color: transparent;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown {
+ -webkit-transform: scaleY(-1);
+ -ms-transform: scaleY(-1);
+ transform: scaleY(-1);
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu {
+ position: static;
+ border: none;
+ box-shadow: none;
+ width: auto;
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ }
+
+ .ms-NavBar.is-open .ms-Overlay {
+ display: block;
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-NavBar-openMenu {
+ display: none;
+ }
+
+ .ms-NavBar-items {
+ display: block;
+ list-style: none;
+ margin: 0 7px 0 0;
+ padding: 0;
+ }
+
+ .ms-NavBar-chevronDown {
+ top: 3px;
+ right: 0;
+ float: none;
+ position: relative;
+ }
+
+ .ms-NavBar-item {
+ float: left;
+ margin-right: 18px;
+ font-size: 14px;
+ padding: 0;
+ }
+
+ .ms-NavBar-item:hover {
+ border-bottom: 2px solid #0078d7;
+ background-color: transparent;
+ }
+
+ .ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ border-bottom: 2px solid #0078d7;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu:after {
+ position: relative;
+ top: 3px;
+ padding-top: 0;
+ right: auto;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--right {
+ float: right;
+ margin: 0;
+ }
+}
+
+.ms-OrgChart {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px 0;
+}
+
+.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;
+ outline: transparent;
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Panel {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 300;
+ display: none;
+ pointer-events: none;
+}
+
+.ms-Panel .ms-Overlay {
+ z-index: 0;
+ display: none;
+ pointer-events: none;
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+.ms-Panel-main {
+ background-color: #ffffff;
+ bottom: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ display: none;
+ z-index: 10;
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ pointer-events: auto;
+ width: 340px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+ left: auto;
+ }
+}
+
+.ms-Panel-main .ms-CommandBar {
+ outline: 1px solid transparent;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main .ms-CommandBar {
+ display: none;
+ }
+}
+
+.ms-Panel-main .ms-CommandBarItem {
+ margin-left: 8px;
+}
+
+.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline-block;
+}
+
+.ms-Panel-main .ms-CommandBar-mainArea {
+ padding-left: 0;
+ margin-left: -1px;
+ overflow: hidden;
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-main {
+ right: auto;
+ left: 0;
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-commands,
+.ms-Panel.ms-Panel--left .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 340px;
+ }
+}
+
+@media (min-width: 640px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main,
+ .ms-Panel.ms-Panel--lg .ms-Panel-main,
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 48px;
+ width: auto;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main {
+ left: auto;
+ width: 643px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg .ms-Panel-main {
+ left: 428px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main {
+ left: auto;
+ width: 940px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 176px;
+ }
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Panel-main {
+ opacity: 1;
+ pointer-events: auto;
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Overlay {
+ display: block;
+ pointer-events: auto;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Panel.is-open .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open .ms-Overlay {
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media screen and (min-width: 480px) and (-ms-high-contrast: active) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay,
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ opacity: 0;
+ -webkit-animation-name: none;
+ animation-name: none;
+ }
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 8px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 14px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-contentInner {
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar {
+ display: block;
+ }
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover {
+ background-color: #d7eaf9;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active {
+ background-color: #b5d8f4;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon {
+ color: #07288b;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
+ color: #000000;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child {
+ background-color: #0078d7;
+ box-shadow: inset 0 1px 0 0 #2488d8;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
+ padding-left: 12px;
+ padding-right: 12px;
+ cursor: pointer;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover {
+ background-color: #005a9e;
+ box-shadow: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-delay: 250ms;
+ animation-delay: 250ms;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-delay: 500ms;
+ animation-delay: 500ms;
+ }
+}
+
+.ms-PeoplePicker {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ *zoom: 1;
+ border: 1px solid #c8c8c8;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchBox:before,
+.ms-PeoplePicker-searchBox:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-PeoplePicker-searchBox:after {
+ clear: both;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: left;
+ height: 38px;
+ outline: none;
+ padding-left: 8px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: left;
+ margin: 4px;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-persona .ms-Persona {
+ background-color: #f4f4f4;
+ float: left;
+ min-height: 30px;
+}
+
+.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;
+ float: left;
+ 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 {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: 305;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ padding: 17px 0 0 12px;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+.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;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-result .ms-Persona:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-result .ms-Persona-details {
+ width: 100%;
+}
+
+.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 0;
+ 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: 34px;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultAction {
+ height: 48px;
+ }
+}
+
+.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: #71afe5;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid #eaeaea;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ left: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
+ background-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
+ color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching:hover {
+ background-color: transparent;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-left: 70px;
+ text-align: left;
+}
+
+.ms-PeoplePicker-searchMoreBtn:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-searchMoreBtn:focus,
+.ms-PeoplePicker-searchMoreBtn:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-left: 50px;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+}
+
+.ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #333333;
+ font-size: 16px;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
+ background-color: inherit;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
+ color: #666666;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
+ margin-top: -8px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+ height: 49px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ left: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ font-size: 17px;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 45px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
+ height: 28px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn {
+ height: 42px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction {
+ height: 42px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
+ padding-left: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
+ top: 16px;
+ left: 14px;
+ height: 20px;
+ width: 20px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
+.ms-PeoplePicker-result .ms-Persona:hover .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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ 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.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
+
+.ms-Pivot {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 40px;
+ list-style-type: none;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ position: relative;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ line-height: 40px;
+ margin-right: 8px;
+}
+
+.ms-Pivot-link:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:after {
+ background-color: #37006e;
+ }
+}
+
+.ms-Pivot-link:hover,
+.ms-Pivot-link:focus,
+.ms-Pivot-link:active {
+ color: #000000;
+ cursor: pointer;
+}
+
+.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:active + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-link:active {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:active {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:active {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link:active:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected {
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link.is-selected {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link.is-selected {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link.is-selected:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-dropdownIcon {
+ font-size: 16px;
+ position: relative;
+ top: 2px;
+}
+
+.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:after {
+ display: none;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs {
+ height: 40px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important;
+}
+
+.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 !important;
+ background-color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.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 !important;
+}
+
+@media (min-width: 640px) {
+ .ms-Pivot-link {
+ font-size: 14px;
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 14px;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+}
+
+.ms-ProgressIndicator-itemName {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ 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 {
+ position: absolute;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #600000;
+ }
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon {
+ color: #c8c8c8;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-closeButton {
+ display: block;
+ outline: transparent 1px solid;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #71afe5;
+ outline: transparent 1px solid;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ color: #000000;
+ height: 32px;
+ padding: 6px 3px 7px 10px;
+ width: 180px;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-SearchBox-field.hovering {
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-closeButton {
+ border: none;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 32px;
+ width: 32px;
+ background-color: #0078d7;
+ text-align: center;
+ display: none;
+ font-size: 17px;
+ color: #ffffff;
+ z-index: 10;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-left: 8px;
+ line-height: 32px;
+ color: #666666;
+}
+
+.ms-SearchBox-icon {
+ margin-right: 7px;
+ font-size: 17px;
+ color: #767676;
+}
+
+.ms-Spinner {
+ 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 {
+ position: relative;
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
+
+.ms-Table {
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table tr:hover,
+.ms-Table-row:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-Table tr.is-selected,
+.ms-Table-row.is-selected {
+ background-color: #c7e0f4;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck,
+.ms-Table-row.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:before,
+.ms-Table-row.is-selected .ms-Table-rowCheck:before {
+ display: none;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:after,
+.ms-Table-row.is-selected .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #ffffff;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table thead th,
+.ms-Table-head {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table thead td,
+.ms-Table thead th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table thead .ms-Table-rowCheck:after,
+.ms-Table-head .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck:before {
+ border: 1px solid #a6a6a6;
+ content: '';
+ display: block;
+ height: 14px;
+ left: 2px;
+ position: absolute;
+ top: 6px;
+ width: 14px;
+}
+
+@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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 8px;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder,
+.ms-TextField.is-disabled::-moz-placeholder,
+.ms-TextField.is-disabled:-moz-placeholder,
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder:after,
+.ms-TextField.is-required::-moz-placeholder:after,
+.ms-TextField.is-required:-moz-placeholder:after,
+.ms-TextField.is-required:-ms-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 10px 8px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field::-webkit-input-placeholder,
+.ms-TextField-field::-moz-placeholder,
+.ms-TextField-field:-moz-placeholder,
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #666666;
+ padding: 7px 0 7px 10px;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 12px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: bottom;
+ padding-left: 12px;
+ padding-bottom: 5px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 2px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.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: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+}
+
+.ms-Toggle .ms-Label {
+ position: relative;
+ padding: 0 0 0 62px;
+ font-size: 12px;
+}
+
+.ms-Toggle:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff !important;
+ border-color: #c8c8c8 !important;
+ pointer-events: none !important;
+ cursor: default !important;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field:before {
+ background-color: #c8c8c8 !important;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 12px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 57px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2.5px #c8c8c8 solid;
+ cursor: pointer;
+}
+
+.ms-Toggle-input {
+ position: absolute;
+ opacity: 0;
+ top: 0;
+}
+
+.ms-Toggle-input + .ms-Toggle-field {
+ background-color: #f4f4f4;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ left: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ right: auto;
+ border-right: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ right: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ left: auto;
+ border-left: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle-input:focus + .ms-Toggle-field,
+.ms-Toggle-input:hover + .ms-Toggle-field {
+ background-color: #eaeaea;
+}
+
+.ms-Toggle-input:focus:checked + .ms-Toggle-field,
+.ms-Toggle-input:hover:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+}
+
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field {
+ float: right;
+}
+
+html,
+body {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ font-size: inherit;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+ font-size: inherit;
+ text-decoration: none;
+}
+
+a:hover,
+a:focus {
+ color: #004578;
+}
+
+a:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ a {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ a {
+ color: #00009f;
+ }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ padding: 0;
+ font-weight: normal;
+}
+
+h1 {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 28px;
+ font-weight: normal;
+ color: inherit;
+ letter-spacing: -1px;
+}
+
+h2 {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ font-weight: normal;
+ color: inherit;
+}
+
+h3 {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ font-weight: normal;
+ color: inherit;
+}
+
+h4 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ color: inherit;
+}
+
+h5 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ color: inherit;
+}
+
+h6 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ font-weight: normal;
+ 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/samples/Form/css/Form.min.css b/dist/samples/Form/css/Form.min.css
new file mode 100644
index 000000000..2c09acbe9
--- /dev/null
+++ b/dist/samples/Form/css/Form.min.css
@@ -0,0 +1 @@
+.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;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{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Callout{z-index:100;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:10}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.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-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:105;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.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}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:10}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:10}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:105}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-DatePicker{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{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.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;line-height:40px;text-align:center;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:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.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-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:300;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:10}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.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-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;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,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{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-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-MessageBanner{overflow:hidden;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-MessageBanner{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;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid 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-expand{display:inline-block}.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{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:5}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.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;outline:transparent}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:200}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:300}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:10;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.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;float:left;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{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:305}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.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}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.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:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.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:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.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:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.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!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.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!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;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{position:absolute;height:2px;background-color:#0078d7}@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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:5}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:10}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676}.ms-Spinner{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;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.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{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}body,html{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;padding:0;margin:0}a,body,html{font-size:inherit}a{color:#0078d7;cursor:pointer;text-decoration:none}a:focus,a:hover{color:#004578}a:active{color:#0078d7}@media screen and (-ms-high-contrast:active){a{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){a{color:#00009f}}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:400}h1{font-size:28px;letter-spacing:-1px}h1,h2{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400;color:inherit}h2{font-size:21px}h3{color:#333;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;font-weight:400;color:inherit}h4{font-size:14px}h4,h5{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400;color:inherit}h5{font-size:12px}h6{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;font-weight:400;color:inherit}.u-contentCenter{max-width:400px;padding:0 20px;margin:0 auto;box-sizing:border-box}.Container{margin:0;padding:0}.Header{border-bottom-style:solid;border-bottom-width:20px}.Header-text{padding:40px 0 35px}.Content{padding:20px 0}.Intro{margin-bottom:16px}.SubmitButton{margin-top:20px}
\ No newline at end of file
diff --git a/dist/samples/Form/index.html b/dist/samples/Form/index.html
new file mode 100644
index 000000000..f87c8f87e
--- /dev/null
+++ b/dist/samples/Form/index.html
@@ -0,0 +1,253 @@
+
+
+
+
+
+
+
+ Example Form
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Create an account to start using Nod.
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Form/sass/Form.scss b/dist/samples/Form/sass/Form.scss
new file mode 100644
index 000000000..cac00f760
--- /dev/null
+++ b/dist/samples/Form/sass/Form.scss
@@ -0,0 +1,94 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Import Fabric and Fabric Components to use its variables and mixins
+@import '../../../sass/Fabric.Common.scss';
+@import '../../../sass/Fabric.Components.scss';
+
+html,
+body {
+ @include ms-font-m;
+ font-size: inherit;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ @include ms-Link;
+ font-size: inherit;
+ text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ padding: 0;
+ font-weight: normal;
+}
+
+h1 {
+ @include ms-font-xxl;
+ color: inherit;
+ letter-spacing: -1px;
+}
+
+h2 {
+ @include ms-font-xl;
+ color: inherit;
+}
+
+h3 {
+ @include ms-font-l;
+ color: inherit;
+}
+
+h4 {
+ @include ms-font-m;
+ color: inherit;
+}
+
+h5 {
+ @include ms-font-s;
+ color: inherit;
+}
+
+h6 {
+ @include ms-font-xs;
+ color: inherit;
+}
+
+.u-contentCenter {
+ max-width: 400px;
+ padding: 0 20px 0;
+ margin: 0 auto;
+ box-sizing: border-box;
+}
+
+.Container {
+ margin: 0;
+ padding: 0;
+}
+
+.Header {
+ border-bottom-style: solid;
+ border-bottom-width: 20px;
+}
+
+.Header-text {
+ padding: 40px 0 35px;
+}
+
+.Content {
+ padding: 20px 0;
+}
+
+.Intro {
+ margin-bottom: 16px;
+}
+
+.SubmitButton {
+ margin-top: 20px;
+}
diff --git a/dist/samples/Icons/index.html b/dist/samples/Icons/index.html
new file mode 100644
index 000000000..7c2b395c7
--- /dev/null
+++ b/dist/samples/Icons/index.html
@@ -0,0 +1,438 @@
+
+
+
+
+
+
+
+ Fabric Icons
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/VideoPortal/channel.html b/dist/samples/VideoPortal/channel.html
new file mode 100644
index 000000000..8dd33e217
--- /dev/null
+++ b/dist/samples/VideoPortal/channel.html
@@ -0,0 +1,228 @@
+
+
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Popular
+ All Videos
+ My Videos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/VideoPortal/channels.html b/dist/samples/VideoPortal/channels.html
new file mode 100644
index 000000000..18dcd4528
--- /dev/null
+++ b/dist/samples/VideoPortal/channels.html
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/VideoPortal/css/VideoPortal.css b/dist/samples/VideoPortal/css/VideoPortal.css
new file mode 100644
index 000000000..b97a278e0
--- /dev/null
+++ b/dist/samples/VideoPortal/css/VideoPortal.css
@@ -0,0 +1,7031 @@
+/*
+ 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 {
+ margin: 23px 0 1px 0;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 17px;
+ color: #666666;
+ vertical-align: top;
+ margin: 10px 0;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+ margin-right: -4px;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 12px;
+ display: inline-block;
+ color: #0078d7;
+ margin-right: -4px;
+ padding: 12px 8px 3px 8px;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu:before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: white;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: none;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ font-weight: normal;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media screen and (max-width: 639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 14px;
+ margin-top: 7px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 8px;
+ padding-bottom: 3px;
+ }
+}
+
+@media screen and (max-width: 479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin-top: 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding-top: 5px;
+ padding-bottom: 3px;
+ }
+}
+
+.ms-Button {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+.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 + .ms-Button {
+ margin-left: 6px;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ background-color: transparent;
+ border: none;
+ vertical-align: top;
+ line-height: normal;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ position: relative;
+ top: -8px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ font-size: 12px;
+ margin: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ position: relative;
+ top: -5px;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ height: auto;
+ min-height: 72px;
+ max-width: 280px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-Button.ms-Button--command {
+ background-color: transparent;
+ border: none;
+ height: 32px;
+ line-height: 32px;
+ min-width: 0;
+ padding: 0 8px;
+ text-align: left;
+ font-size: 14px;
+}
+
+.ms-Button.ms-Button--command .ms-Button-icon {
+ color: #666666;
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+}
+
+.ms-Button.ms-Button--command .ms-Button-label {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-icon,
+.ms-Button.ms-Button--command:focus .ms-Button-icon {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--command:hover .ms-Button-label,
+.ms-Button.ms-Button--command:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button.ms-Button--command:active .ms-Button-icon,
+.ms-Button.ms-Button--command:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-icon,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--command:disabled .ms-Button-label,
+.ms-Button.ms-Button--command.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--command + .ms-Button.ms-Button--command {
+ margin-left: 14px;
+}
+
+.ms-Callout {
+ z-index: 100;
+ margin: 16px auto;
+ position: relative;
+ width: 288px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ content: '';
+ position: absolute;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ height: 0;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowTop:before {
+ z-index: 0;
+ outline: 1px solid transparent;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.ms-Callout.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowBottom:after,
+.ms-Callout.ms-Callout--arrowTop:after {
+ z-index: 10;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ top: 40px;
+ display: none;
+}
+
+.ms-Callout.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--arrowLeft:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid #ffffff;
+ left: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--arrowRight:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid transparent;
+ right: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 0;
+}
+
+.ms-Callout.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--arrowTop:after {
+ border-top: 10px solid #ffffff;
+ border-right: 10px solid #ffffff;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid transparent;
+ top: -10px;
+}
+
+.ms-Callout.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--arrowBottom:after {
+ border-top: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid #ffffff;
+ border-left: 10px solid #ffffff;
+ bottom: -10px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ background-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after,
+ .ms-Callout.ms-Callout--arrowBottom:before,
+ .ms-Callout.ms-Callout--arrowBottom:after,
+ .ms-Callout.ms-Callout--arrowTop:before,
+ .ms-Callout.ms-Callout--arrowTop:after {
+ background-color: #ffffff;
+ }
+}
+
+.ms-Callout-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.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-inner {
+ height: 100%;
+ padding: 0 24px 20px;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding: 18px 24px 12px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-actions .ms-Link.ms-Link--hero {
+ position: relative;
+ left: -8px;
+}
+
+.ms-Callout-action {
+ position: relative;
+ top: 4px;
+ left: -8px;
+ margin-left: 0 !important;
+}
+
+.ms-Callout-action:hover .ms-Callout-actionIcon,
+.ms-Callout-action:focus .ms-Callout-actionIcon {
+ color: #0078d7;
+}
+
+.ms-Callout-button {
+ margin-right: 12px;
+}
+
+.ms-Callout.ms-Callout--close .ms-Callout-title {
+ margin-right: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after {
+ border-color: #0078d7;
+ background-color: transparent;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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;
+ margin-bottom: -8px;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after {
+ left: 40px;
+ right: auto;
+}
+
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,
+.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after {
+ top: calc('50% - 10px');
+}
+
+.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;
+}
+
+@media (min-width: 480px) {
+ .ms-Callout {
+ width: 300px;
+ margin: 16px;
+ }
+
+ .ms-Callout.ms-Callout--arrowRight:before,
+ .ms-Callout.ms-Callout--arrowRight:after,
+ .ms-Callout.ms-Callout--arrowLeft:before,
+ .ms-Callout.ms-Callout--arrowLeft:after {
+ display: block;
+ }
+}
+
+.ms-ChoiceField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-ChoiceField .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field {
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #eaeaea;
+}
+
+.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #00ff00;
+ color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #00ff00;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before {
+ background-color: #600000;
+ color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after {
+ border-color: #600000;
+ }
+
+ .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-ChoiceField-input {
+ position: absolute;
+ opacity: 0;
+ top: 8px;
+}
+
+.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+}
+
+.ms-ChoiceField-field:after {
+ content: '';
+ display: inline-block;
+ border: 1px #c8c8c8 solid;
+ width: 19px;
+ height: 19px;
+ cursor: pointer;
+ position: relative;
+ font-weight: normal;
+ left: -1px;
+ top: -1px;
+ border-radius: 50%;
+ position: absolute;
+}
+
+.ms-ChoiceField-field:hover:after {
+ border-color: #767676;
+}
+
+.ms-ChoiceField-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ background-color: #666666;
+ border-color: #666666;
+ color: #666666;
+ border-radius: 50%;
+ content: '\00a0';
+ display: inline-block;
+ position: absolute;
+ top: 4px;
+ right: 0;
+ bottom: 0;
+ left: 4px;
+ width: 11px;
+ height: 11px;
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #ffffff;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
+ border-color: #000000;
+ background-color: #000000;
+ }
+}
+
+.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before {
+ background-color: #212121;
+ color: #212121;
+}
+
+.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after {
+ border-radius: 0;
+}
+
+.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ background-color: transparent;
+ border-radius: 0;
+ font-size: 13px;
+ top: 3px;
+ left: 3px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #ffffff;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
+ color: #000000;
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+
+.ms-ChoiceFieldGroup {
+ margin-bottom: 4px;
+}
+
+.ms-CommandBar {
+ background-color: #eff6fc;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ padding-left: 58px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-mainArea {
+ padding-left: 24px;
+ }
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 12px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 16px;
+ }
+}
+
+.ms-CommandBarItem {
+ display: inline-block;
+ color: #0078d7;
+ height: 40px;
+ outline: none;
+ vertical-align: top;
+ margin-right: -4px;
+}
+
+.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ height: 38px;
+ outline: none;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ height: 38px;
+ outline: none;
+ }
+}
+
+.ms-CommandBarItem:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarItem:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBarItem {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
+ .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline;
+ }
+}
+
+.ms-CommandBarItem.is-hidden {
+ width: 0;
+ overflow: hidden;
+}
+
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,
+.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText {
+ display: none;
+}
+
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText,
+.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown {
+ display: inline;
+}
+
+.ms-CommandBarItem-overflow {
+ display: none;
+}
+
+.ms-CommandBarItem-overflow.is-visible {
+ display: inline-block;
+}
+
+.ms-CommandBarItem-overflow .ms-Icon {
+ font-size: 14px;
+ color: #666666;
+}
+
+.ms-CommandBarItem-link {
+ line-height: 39px;
+ padding: 0 6px;
+ cursor: pointer;
+ height: 40px;
+ min-width: 20px;
+ text-align: center;
+ position: relative;
+ padding: 0 8px;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+}
+
+.ms-CommandBarItem-link:focus {
+ outline: none;
+}
+
+.ms-CommandBarItem-link:focus:before {
+ position: absolute;
+ left: 2px;
+ right: 2px;
+ top: 2px;
+ bottom: 2px;
+ border: 1px solid #a6a6a6;
+ content: '';
+}
+
+.ms-CommandBarItem-icon {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-CommandBarItem-chevronDown {
+ vertical-align: middle;
+ padding-bottom: 3px;
+ margin-top: 13px;
+ font-size: 1.1em;
+ line-height: 1em;
+ color: #666666;
+}
+
+.ms-CommandBarItem-chevronDown:before {
+ height: 10px;
+ line-height: 16px;
+}
+
+.ms-CommandBarSearch {
+ float: left;
+ width: 208px;
+ max-width: 208px;
+ background-color: #deecf9;
+ color: #333333;
+ height: 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-color: transparent;
+ transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ transition-property: width, background-color;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch {
+ overflow: hidden;
+ width: 50px;
+ position: absolute;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #ffffff;
+ z-index: 10;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch {
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch:hover {
+ background-color: #c7e0f4;
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #ffffff;
+ border-right: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch:hover {
+ border-left: 1px solid #000000;
+ border-right: 1px solid #000000;
+ }
+}
+
+.ms-CommandBarSearch .ms-Icon--search {
+ margin-left: 2px;
+ margin-top: 12px;
+ vertical-align: top;
+}
+
+.ms-CommandBarSearch-input {
+ height: 40px;
+ padding: 8px 8px 8px 0;
+ border: none;
+ border-left: 42px solid transparent;
+ background-color: transparent;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+ cursor: pointer;
+ font-size: 14px;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CommandBarSearch-input {
+ border-left: 40px solid #ffffff;
+ }
+}
+
+.ms-CommandBarSearch-input::-ms-clear {
+ display: none;
+}
+
+.ms-CommandBarSearch-input::-webkit-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::-moz-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:-ms-input-placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input::placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-input:placeholder {
+ color: #333333;
+ opacity: 1;
+ font-size: 14px;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper {
+ display: block;
+ padding-left: 15px;
+}
+
+.ms-CommandBarSearch-iconArrowWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch-iconSearchWrapper,
+.ms-CommandBarSearch-iconArrowWrapper {
+ top: 0;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.ms-CommandBarSearch-iconClearWrapper {
+ display: none;
+ top: 1px;
+ right: 0px;
+ z-index: 10;
+}
+
+.ms-CommandBarSearch.is-active {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+@media only screen and (max-width: 1023px) {
+ .ms-CommandBarSearch.is-active {
+ width: 100%;
+ position: absolute;
+ z-index: 10;
+ max-width: 100%;
+ }
+}
+
+.ms-CommandBarSearch.is-active:hover {
+ background-color: #c7e0f4;
+ color: #000000;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ cursor: text;
+ padding-right: 40px;
+ border-left-width: 8px;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
+ border-left-width: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper {
+ display: none;
+}
+
+.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input {
+ padding-right: 40px;
+}
+
+.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper {
+ display: block;
+}
+
+.ms-CommandBarSearch-iconWrapper {
+ height: 40px;
+ line-height: 40px;
+ cursor: pointer;
+ padding: 0px 8px;
+ position: absolute;
+ width: 34px;
+ text-align: center;
+}
+
+.ms-CommandBarSearch .ms-Icon:before {
+ font-size: 17px;
+ color: #0078d7;
+}
+
+.ms-ContextualMenu {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: none;
+}
+
+.ms-ContextualMenu.is-open {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: block;
+ list-style-type: none;
+ position: absolute;
+ width: 180px;
+ z-index: 105;
+}
+
+.ms-ContextualMenu-item {
+ box-sizing: border-box;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ margin: 4px 0;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-link {
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 18px;
+ position: relative;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link {
+ border-color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:first-child,
+.ms-ContextualMenu-link:last-child {
+ height: 39px;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link:active {
+ border: 1px solid #0078d7;
+}
+
+.ms-ContextualMenu-link:focus {
+ border-color: #0078d7;
+ outline: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link:focus {
+ border-color: #000000;
+ }
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected:focus {
+ border-color: #000000;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon,
+ .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight {
+ color: #ffffff;
+ }
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ cursor: default;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled:active,
+ .ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ContextualMenu-link.is-disabled {
+ color: #600000;
+ }
+}
+
+.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #666666;
+ font-size: 16px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+ right: 7px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link {
+ padding: 0 30px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #333333;
+ content: '\e041';
+ font-size: 12px;
+ height: 39px;
+ line-height: 40px;
+ position: absolute;
+ left: 10px;
+}
+
+.ms-DatePicker {
+ 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 {
+ -webkit-animation-name: fadeIn, slideDownIn10;
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ 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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #c7e0f4;
+}
+
+.ms-DatePicker-day--disabled:before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.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;
+ text-align: center;
+ 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: 0px;
+ position: absolute;
+ top: 0px;
+ width: 140px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+ display: block;
+ font-weight: normal;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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: normal;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-right: 1px solid #eaeaea;
+ width: 220px;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-dayPicker {
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ left: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0 0;
+ }
+
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ .ms-DatePicker-month {
+ margin-left: 12px;
+ }
+
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ }
+
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-prevYear,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-nextDecade {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+ .ms-DatePicker-currentYear,
+ .ms-DatePicker-currentDecade {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 10px 10px 0;
+ }
+
+ .ms-DatePicker-monthOption:hover,
+ .ms-DatePicker-yearOption:hover {
+ outline: 1px solid transparent;
+ }
+
+ .ms-DatePicker-goToday {
+ box-sizing: border-box;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ right: 10px;
+ text-align: right;
+ top: 199px;
+ width: 210px;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+ }
+}
+
+@media (max-width: 459px) {
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker {
+ display: block;
+ }
+}
+
+.ms-Dialog {
+ background-color: transparent;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 300;
+ display: block;
+ font-size: 0;
+ line-height: 100vh;
+ text-align: center;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+}
+
+.ms-Dialog::before {
+ vertical-align: middle;
+ display: inline-block;
+ content: '';
+ height: 100%;
+ width: 0;
+}
+
+.ms-Dialog .ms-Button.ms-Button--compound {
+ display: block;
+ margin-left: 0;
+}
+
+.ms-Dialog .ms-Overlay {
+ z-index: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dialog .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Dialog-main {
+ vertical-align: middle;
+ display: inline-block;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ box-sizing: border-box;
+ line-height: 1.35;
+ margin: auto;
+ width: 288px;
+ position: relative;
+ text-align: left;
+ outline: 3px solid transparent;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close {
+ display: none;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ z-index: 10;
+}
+
+.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Dialog-inner {
+ height: 100%;
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog-header {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 20px 15px;
+}
+
+.ms-Dialog-title {
+ margin: 0;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+ width: 100%;
+}
+
+.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog-subText {
+ margin: 0 0 20px 0;
+ padding-top: 8px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Dialog-actions {
+ position: relative;
+ width: 100%;
+ min-height: 24px;
+ line-height: 24px;
+ margin: 20px 0 0;
+ font-size: 0;
+}
+
+.ms-Dialog-actions .ms-Button {
+ line-height: normal;
+}
+
+.ms-Dialog-actionsRight {
+ text-align: right;
+ font-size: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action:first-child {
+ margin: 0;
+}
+
+.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action {
+ margin: 0 0 0 16px;
+}
+
+.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-button--close {
+ display: block;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner {
+ padding: 0 20px 20px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header {
+ background-color: #0078d7;
+ padding: 26px 20px 28px;
+ margin-bottom: 8px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ font-size: 28px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ color: #ffffff;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText {
+ font-size: 14px;
+}
+
+@media (min-width: 480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
+
+.ms-Dropdown {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ 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.ms-Dropdown--open .ms-Dropdown-items,
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: fixed;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #666666;
+ font-size: 17px;
+ position: absolute;
+ right: 9px;
+ bottom: 5px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ line-height: 30px;
+ padding: 0 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-items {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ max-width: 268px;
+ z-index: 400;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow-y: scroll;
+}
+
+.ms-Dropdown-items:before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 40px;
+ line-height: 38px;
+ padding: 0 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:first-child,
+.ms-Dropdown-item:last-child {
+ height: 39px;
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #c7e0f4;
+ color: #000000;
+ line-height: 40px;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #c7e0f4;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Dropdown-items {
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+ }
+
+ .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items,
+ .ms-Dropdown.is-open .ms-Dropdown-items {
+ position: absolute;
+ }
+}
+
+.ms-Facepile {
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ top: 40px;
+ height: 200px;
+}
+
+.ms-Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn {
+ 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-itemBtn .ms-Persona-presence,
+.ms-Facepile-itemBtn .ms-Persona-details {
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover,
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus {
+ background-color: #005a9e;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active {
+ display: block;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover {
+ color: #212121;
+}
+
+.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Link {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Link {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Link {
+ color: #00009f;
+ }
+}
+
+.ms-List {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style-type: none;
+}
+
+@media (min-width: 480px) {
+ .ms-List.ms-List--grid .ms-ListItem {
+ width: 33.33333333333333%;
+ float: left;
+ border-width: 0 1px 1px 0;
+ }
+
+ .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) {
+ border-width: 0 0 1px 0;
+ }
+}
+
+.ms-ListItem {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+}
+
+.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-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ font-size: 15px;
+ color: #767676;
+ position: absolute;
+ top: 12px;
+ left: 6px;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #c7e0f4;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-MessageBanner {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ position: relative;
+ border-bottom: 1px solid #767676;
+ background-color: #eff6fc;
+ min-width: 320px;
+ width: 100%;
+ height: 52px;
+ text-align: center;
+ overflow: hidden;
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ -webkit-animation-name: fadeOut, slideUpOut20;
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-expand:focus,
+.ms-MessageBanner-close:focus {
+ outline: 1px solid 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-expand {
+ display: inline-block;
+ }
+
+ .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 0;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
+
+.ms-NavBar {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #f4f4f4;
+ height: 40px;
+ padding: 0 10px;
+ width: 100%;
+ outline: 1px solid transparent;
+}
+
+.ms-NavBar .ms-Overlay {
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ z-index: 0;
+}
+
+.ms-NavBar-openMenu {
+ font-size: 20px;
+ height: 40px;
+ line-height: 40px;
+ position: absolute;
+ right: 27px;
+ text-align: center;
+ width: 40px;
+ cursor: pointer;
+}
+
+.ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item {
+ box-sizing: border-box;
+ display: block;
+ height: 40px;
+ line-height: 40px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ padding-left: 20px;
+ position: relative;
+}
+
+.ms-NavBar-item:hover {
+ cursor: pointer;
+ background-color: #deecf9;
+ color: #000000;
+}
+
+.ms-NavBar-item:hover .ms-Icon {
+ color: #333333;
+}
+
+.ms-NavBar-item:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-NavBar-item.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-NavBar-item.is-disabled:hover {
+ cursor: default;
+ border: none;
+}
+
+.ms-NavBar-link {
+ color: #333333;
+ text-decoration: none;
+}
+
+.ms-NavBar-link:active {
+ color: #0078d7;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after {
+ color: #212121;
+}
+
+.ms-NavBar-chevronDown {
+ color: #666666;
+ font-size: 22px;
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search {
+ position: relative;
+ width: 30px;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ color: #666666;
+ content: '\e039';
+ font-size: 21px;
+ line-height: 40px;
+ position: absolute;
+ right: 5px;
+ top: 0;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search .ms-TextField {
+ display: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open {
+ width: 200px;
+ padding-right: 40px;
+ border: none;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField {
+ display: block;
+}
+
+.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field {
+ border: none;
+ background-color: transparent;
+}
+
+@media (max-width: 479px) {
+ .ms-NavBar.is-open .ms-NavBar-items {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ bottom: 0;
+ display: block;
+ left: 50px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ outline: 1px solid transparent;
+ z-index: 5;
+ }
+
+ .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu {
+ position: relative;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 479px) {
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected {
+ height: inherit;
+ background-color: transparent;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown {
+ -webkit-transform: scaleY(-1);
+ -ms-transform: scaleY(-1);
+ transform: scaleY(-1);
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu {
+ position: static;
+ border: none;
+ box-shadow: none;
+ width: auto;
+ }
+
+ .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ }
+
+ .ms-NavBar.is-open .ms-Overlay {
+ display: block;
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-NavBar-openMenu {
+ display: none;
+ }
+
+ .ms-NavBar-items {
+ display: block;
+ list-style: none;
+ margin: 0 7px 0 0;
+ padding: 0;
+ }
+
+ .ms-NavBar-chevronDown {
+ top: 3px;
+ right: 0;
+ float: none;
+ position: relative;
+ }
+
+ .ms-NavBar-item {
+ float: left;
+ margin-right: 18px;
+ font-size: 14px;
+ padding: 0;
+ }
+
+ .ms-NavBar-item:hover {
+ border-bottom: 2px solid #0078d7;
+ background-color: transparent;
+ }
+
+ .ms-NavBar-item.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ border-bottom: 2px solid #0078d7;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--hasMenu:after {
+ position: relative;
+ top: 3px;
+ padding-top: 0;
+ right: auto;
+ }
+
+ .ms-NavBar-item.ms-NavBar-item--right {
+ float: right;
+ margin: 0;
+ }
+}
+
+.ms-OrgChart {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px 0;
+}
+
+.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;
+ outline: transparent;
+}
+
+.ms-Overlay {
+ background-color: rgba(255, 255, 255, 0.4);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 200;
+}
+
+.ms-Overlay.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-Overlay--none {
+ visibility: hidden;
+}
+
+.ms-Panel {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 300;
+ display: none;
+ pointer-events: none;
+}
+
+.ms-Panel .ms-Overlay {
+ z-index: 0;
+ display: none;
+ pointer-events: none;
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+.ms-Panel-main {
+ background-color: #ffffff;
+ bottom: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ display: none;
+ z-index: 10;
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ pointer-events: auto;
+ width: 340px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+ left: auto;
+ }
+}
+
+.ms-Panel-main .ms-CommandBar {
+ outline: 1px solid transparent;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel-main .ms-CommandBar {
+ display: none;
+ }
+}
+
+.ms-Panel-main .ms-CommandBarItem {
+ margin-left: 8px;
+}
+
+.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText {
+ display: inline-block;
+}
+
+.ms-Panel-main .ms-CommandBar-mainArea {
+ padding-left: 0;
+ margin-left: -1px;
+ overflow: hidden;
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main {
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,
+.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-main {
+ right: auto;
+ left: 0;
+ border-left: 1px solid #eaeaea;
+ border-right: 1px solid #eaeaea;
+ width: 272px;
+ box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2);
+}
+
+.ms-Panel.ms-Panel--left .ms-Panel-commands,
+.ms-Panel.ms-Panel--left .ms-Panel-contentInner {
+ display: none;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--sm .ms-Panel-main {
+ width: 340px;
+ }
+}
+
+@media (min-width: 640px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main,
+ .ms-Panel.ms-Panel--lg .ms-Panel-main,
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 48px;
+ width: auto;
+ }
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel.ms-Panel--md .ms-Panel-main {
+ left: auto;
+ width: 643px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg .ms-Panel-main {
+ left: 428px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main {
+ left: auto;
+ width: 940px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel.ms-Panel--xl .ms-Panel-main {
+ left: 176px;
+ }
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Panel-main {
+ opacity: 1;
+ pointer-events: auto;
+ display: block;
+}
+
+.ms-Panel.is-open .ms-Overlay {
+ display: block;
+ pointer-events: auto;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Panel.is-open .ms-Overlay {
+ opacity: 0;
+ }
+}
+
+.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+
+.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideLeftIn40;
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideRightOut40;
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main {
+ -webkit-animation-name: fadeIn, slideRightIn40;
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.267s;
+ animation-duration: 0.267s;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+ -webkit-animation-name: fadeOut, slideLeftOut40;
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
+ -webkit-animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ -webkit-animation-duration: 0.367s;
+ animation-duration: 0.367s;
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 0.167s;
+ animation-duration: 0.167s;
+ }
+
+ .ms-Panel.is-open .ms-Overlay {
+ cursor: pointer;
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media screen and (min-width: 480px) and (-ms-high-contrast: active) {
+ .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay,
+ .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay {
+ opacity: 0;
+ -webkit-animation-name: none;
+ animation-name: none;
+ }
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 8px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 14px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-contentInner {
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar {
+ display: block;
+ }
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover {
+ background-color: #d7eaf9;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active {
+ background-color: #b5d8f4;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon {
+ color: #07288b;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
+ color: #000000;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child {
+ background-color: #0078d7;
+ box-shadow: inset 0 1px 0 0 #2488d8;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
+ padding-left: 12px;
+ padding-right: 12px;
+ cursor: pointer;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover {
+ background-color: #005a9e;
+ box-shadow: none;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText {
+ color: #ffffff;
+}
+
+.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-name: fadeIn, slideDownIn20;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-delay: 250ms;
+ animation-delay: 250ms;
+}
+
+@media (min-width: 480px) {
+ .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
+ -webkit-animation-delay: 500ms;
+ animation-delay: 500ms;
+ }
+}
+
+.ms-PeoplePicker {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ *zoom: 1;
+ border: 1px solid #c8c8c8;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchBox:before,
+.ms-PeoplePicker-searchBox:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-PeoplePicker-searchBox:after {
+ clear: both;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: left;
+ height: 38px;
+ outline: none;
+ padding-left: 8px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: left;
+ margin: 4px;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-persona .ms-Persona {
+ background-color: #f4f4f4;
+ float: left;
+ min-height: 30px;
+}
+
+.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;
+ float: left;
+ 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 {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: 305;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ padding: 17px 0 0 12px;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+.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;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-result .ms-Persona:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-result .ms-Persona-details {
+ width: 100%;
+}
+
+.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 0;
+ 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: 34px;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultAction {
+ height: 48px;
+ }
+}
+
+.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: #71afe5;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid #eaeaea;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ left: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
+ background-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
+ color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching:hover {
+ background-color: transparent;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-left: 70px;
+ text-align: left;
+}
+
+.ms-PeoplePicker-searchMoreBtn:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-searchMoreBtn:focus,
+.ms-PeoplePicker-searchMoreBtn:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-left: 50px;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+}
+
+.ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #333333;
+ font-size: 16px;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
+ background-color: inherit;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
+ color: #666666;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
+ margin-top: -8px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+ height: 49px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ left: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ font-size: 17px;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 45px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
+ height: 28px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn {
+ height: 42px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction {
+ height: 42px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
+ padding-left: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
+ top: 16px;
+ left: 14px;
+ height: 20px;
+ width: 20px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 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;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.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--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ 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: 8px;
+}
+
+.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--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ 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;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ 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: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ 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--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
+.ms-PeoplePicker-result .ms-Persona:hover .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: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ 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.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.ms-PersonaCard-detailChat,
+.ms-PersonaCard-detailPhone,
+.ms-PersonaCard-detailVideo,
+.ms-PersonaCard-detailMail,
+.ms-PersonaCard-detailOrg {
+ overflow: hidden;
+ width: 500%;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-PersonaCard-detailOrg {
+ overflow-y: auto;
+}
+
+.ms-PersonaCard-detailChat {
+ margin-left: 0;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.ms-PersonaCard-detailChat .detail-1,
+.ms-PersonaCard-detailPhone .detail-2,
+.ms-PersonaCard-detailVideo .detail-3,
+.ms-PersonaCard-detailMail .detail-4 {
+ max-height: 78px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.ms-PersonaCard-detailChat .detail-2,
+.ms-PersonaCard-detailChat .detail-3,
+.ms-PersonaCard-detailChat .detail-4,
+.ms-PersonaCard-detailChat .detail-5,
+.ms-PersonaCard-detailPhone .detail-1,
+.ms-PersonaCard-detailPhone .detail-3,
+.ms-PersonaCard-detailPhone .detail-4,
+.ms-PersonaCard-detailPhone .detail-5,
+.ms-PersonaCard-detailVideo .detail-1,
+.ms-PersonaCard-detailVideo .detail-2,
+.ms-PersonaCard-detailVideo .detail-4,
+.ms-PersonaCard-detailVideo .detail-5,
+.ms-PersonaCard-detailMail .detail-1,
+.ms-PersonaCard-detailMail .detail-2,
+.ms-PersonaCard-detailMail .detail-3,
+.ms-PersonaCard-detailMail .detail-5,
+.ms-PersonaCard-detailOrg .detail-1,
+.ms-PersonaCard-detailOrg .detail-2,
+.ms-PersonaCard-detailOrg .detail-3,
+.ms-PersonaCard-detailOrg .detail-4 {
+ max-height: 48px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
+
+.ms-Pivot {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 40px;
+ list-style-type: none;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ position: relative;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 15px;
+ line-height: 40px;
+ margin-right: 8px;
+}
+
+.ms-Pivot-link:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:after {
+ background-color: #37006e;
+ }
+}
+
+.ms-Pivot-link:hover,
+.ms-Pivot-link:focus,
+.ms-Pivot-link:active {
+ color: #000000;
+ cursor: pointer;
+}
+
+.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon,
+.ms-Pivot-link:active + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-link:active {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link:active {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link:active {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link:active:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected {
+ color: #000000;
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot-link.is-selected {
+ color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot-link.is-selected {
+ color: #37006e;
+ }
+}
+
+.ms-Pivot-link.is-selected:after {
+ display: block;
+}
+
+.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon {
+ color: #212121;
+}
+
+.ms-Pivot-dropdownIcon {
+ font-size: 16px;
+ position: relative;
+ top: 2px;
+}
+
+.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:after {
+ display: none;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs {
+ height: 40px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important;
+}
+
+.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 !important;
+ background-color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #1aebff;
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.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 !important;
+}
+
+@media (min-width: 640px) {
+ .ms-Pivot-link {
+ font-size: 14px;
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 14px;
+ }
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+ }
+}
+
+.ms-ProgressIndicator-itemName {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ 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 {
+ position: absolute;
+ height: 2px;
+ background-color: #0078d7;
+}
+
+@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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #600000;
+ }
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon {
+ color: #c8c8c8;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-closeButton {
+ display: block;
+ outline: transparent 1px solid;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #71afe5;
+ outline: transparent 1px solid;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ color: #000000;
+ height: 32px;
+ padding: 6px 3px 7px 10px;
+ width: 180px;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-SearchBox-field.hovering {
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-closeButton {
+ border: none;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 32px;
+ width: 32px;
+ background-color: #0078d7;
+ text-align: center;
+ display: none;
+ font-size: 17px;
+ color: #ffffff;
+ z-index: 10;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-left: 8px;
+ line-height: 32px;
+ color: #666666;
+}
+
+.ms-SearchBox-icon {
+ margin-right: 7px;
+ font-size: 17px;
+ color: #767676;
+}
+
+.ms-Spinner {
+ 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 {
+ position: relative;
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
+
+.ms-Table {
+ 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-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table tr:hover,
+.ms-Table-row:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-Table tr.is-selected,
+.ms-Table-row.is-selected {
+ background-color: #c7e0f4;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck,
+.ms-Table-row.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:before,
+.ms-Table-row.is-selected .ms-Table-rowCheck:before {
+ display: none;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck:after,
+.ms-Table-row.is-selected .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #ffffff;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table thead th,
+.ms-Table-head {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table thead td,
+.ms-Table thead th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table thead .ms-Table-rowCheck:after,
+.ms-Table-head .ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+ content: '\e041';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 9px;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck:before {
+ border: 1px solid #a6a6a6;
+ content: '';
+ display: block;
+ height: 14px;
+ left: 2px;
+ position: absolute;
+ top: 6px;
+ width: 14px;
+}
+
+@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 {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 8px;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder,
+.ms-TextField.is-disabled::-moz-placeholder,
+.ms-TextField.is-disabled:-moz-placeholder,
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder:after,
+.ms-TextField.is-required::-moz-placeholder:after,
+.ms-TextField.is-required:-moz-placeholder:after,
+.ms-TextField.is-required:-ms-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 10px 8px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field::-webkit-input-placeholder,
+.ms-TextField-field::-moz-placeholder,
+.ms-TextField-field:-moz-placeholder,
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ color: #666666;
+ padding: 7px 0 7px 10px;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 12px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: bottom;
+ padding-left: 12px;
+ padding-bottom: 5px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 2px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.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: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+}
+
+.ms-Toggle .ms-Label {
+ position: relative;
+ padding: 0 0 0 62px;
+ font-size: 12px;
+}
+
+.ms-Toggle:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff !important;
+ border-color: #c8c8c8 !important;
+ pointer-events: none !important;
+ cursor: default !important;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field:before {
+ background-color: #c8c8c8 !important;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 12px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 57px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2.5px #c8c8c8 solid;
+ cursor: pointer;
+}
+
+.ms-Toggle-input {
+ position: absolute;
+ opacity: 0;
+ top: 0;
+}
+
+.ms-Toggle-input + .ms-Toggle-field {
+ background-color: #f4f4f4;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ left: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input + .ms-Toggle-field:before {
+ right: auto;
+ border-right: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle-input + .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ position: absolute;
+ display: block;
+ box-sizing: content-box;
+ content: '';
+ top: -2.5px;
+ right: -2.5px;
+ width: 12px;
+ height: 20px;
+ background-color: #767676;
+ outline: 2px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:before {
+ left: auto;
+ border-left: 2.5px solid #ffffff;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field:active {
+ background-color: #0078d7;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle-input:checked + .ms-Toggle-field {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle-input:focus + .ms-Toggle-field,
+.ms-Toggle-input:hover + .ms-Toggle-field {
+ background-color: #eaeaea;
+}
+
+.ms-Toggle-input:focus:checked + .ms-Toggle-field,
+.ms-Toggle-input:hover:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+}
+
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field {
+ float: right;
+}
+
+.u-contentCenter {
+ position: relative;
+ margin: 0 auto;
+ max-width: 100%;
+ transition: 0.167s all cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+ .u-contentCenter {
+ max-width: 960px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .HomePage .u-contentCenter,
+ .ChannelPage .u-contentCenter {
+ max-width: 1200px;
+ }
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+ font-size: inherit;
+ text-decoration: none;
+}
+
+a:hover,
+a:focus {
+ color: #004578;
+}
+
+a:active {
+ color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ a {
+ color: #8080ff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ a {
+ color: #00009f;
+ }
+}
+
+.VideoPortal-content {
+ position: relative;
+}
+
+.VideoPortal-navBar {
+ display: block;
+ top: 0;
+ width: 100%;
+ z-index: 101;
+ height: 40px;
+}
+
+.VideoPortal-page {
+ overflow: visible;
+ position: relative;
+ padding-bottom: 50px;
+}
+
+.ms-NavBar.is-open .ms-NavBar-items {
+ z-index: 1;
+}
+
+.ms-NavBar-link {
+ color: #333333;
+ text-decoration: none;
+}
+
+@media (min-width: 480px) {
+ .ms-NavBar-item.is-selected {
+ font-size: inherit;
+ }
+}
+
+.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%;
+ -webkit-transform: translate(-50%, -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/samples/VideoPortal/css/VideoPortal.min.css b/dist/samples/VideoPortal/css/VideoPortal.min.css
new file mode 100644
index 000000000..c9c578dd9
--- /dev/null
+++ b/dist/samples/VideoPortal/css/VideoPortal.min.css
@@ -0,0 +1 @@
+.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;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{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Callout{z-index:100;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:10}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.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-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:105;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.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}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:10}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:10}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:105}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-DatePicker{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{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.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;line-height:40px;text-align:center;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:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.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-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:300;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:10}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.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-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;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,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{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-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--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-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.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-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-MessageBanner{overflow:hidden;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-MessageBanner{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;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid 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-expand{display:inline-block}.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{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:5}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.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;outline:transparent}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:200}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:300}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:10;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.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;float:left;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{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:305}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.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}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.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:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.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:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index: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}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.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--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{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:8px}.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--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{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}.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--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{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:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;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--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.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:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.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:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.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!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.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!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;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{position:absolute;height:2px;background-color:#0078d7}@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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:5}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:10}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676}.ms-Spinner{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;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.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-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@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{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.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{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;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;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.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:.167s all cubic-bezier(.1,.9,.2,1)}@media (min-width:640px){.u-contentCenter{max-width:960px}}@media (min-width:1366px){.ChannelPage .u-contentCenter,.HomePage .u-contentCenter{max-width:1200px}}*{box-sizing:border-box}body,html{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;padding:0;margin:0}a{color:#0078d7;cursor:pointer;font-size:inherit;text-decoration:none}a:focus,a:hover{color:#004578}a:active{color:#0078d7}@media screen and (-ms-high-contrast:active){a{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){a{color:#00009f}}.VideoPortal-content{position:relative}.VideoPortal-navBar{display:block;top:0;width:100%;z-index:101;height:40px}.VideoPortal-page{overflow:visible;position:relative;padding-bottom:50px}.ms-NavBar.is-open .ms-NavBar-items{z-index:1}.ms-NavBar-link{color:#333;text-decoration:none}@media (min-width:480px){.ms-NavBar-item.is-selected{font-size:inherit}}.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%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:.167s border-color 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/samples/VideoPortal/index.html b/dist/samples/VideoPortal/index.html
new file mode 100644
index 000000000..562c496ee
--- /dev/null
+++ b/dist/samples/VideoPortal/index.html
@@ -0,0 +1,275 @@
+
+
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/VideoPortal/player.html b/dist/samples/VideoPortal/player.html
new file mode 100644
index 000000000..5c221b85c
--- /dev/null
+++ b/dist/samples/VideoPortal/player.html
@@ -0,0 +1,188 @@
+
+
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Uploaded on
+ July 27, 2014
+ |
+ 345 views
+
+
+
+ Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
+
+
+
+
+
+
You might also like
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/VideoPortal/sass/Base.scss b/dist/samples/VideoPortal/sass/Base.scss
new file mode 100644
index 000000000..13e67dd08
--- /dev/null
+++ b/dist/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/samples/VideoPortal/sass/ChannelPage.scss b/dist/samples/VideoPortal/sass/ChannelPage.scss
new file mode 100644
index 000000000..23e9446c9
--- /dev/null
+++ b/dist/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/samples/VideoPortal/sass/ChannelsPage.scss b/dist/samples/VideoPortal/sass/ChannelsPage.scss
new file mode 100644
index 000000000..4d49d1b46
--- /dev/null
+++ b/dist/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/samples/VideoPortal/sass/HomePage.scss b/dist/samples/VideoPortal/sass/HomePage.scss
new file mode 100644
index 000000000..a936a063d
--- /dev/null
+++ b/dist/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/samples/VideoPortal/sass/NavBar.scss b/dist/samples/VideoPortal/sass/NavBar.scss
new file mode 100644
index 000000000..ca2fc3642
--- /dev/null
+++ b/dist/samples/VideoPortal/sass/NavBar.scss
@@ -0,0 +1,26 @@
+// 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-NavBar.is-open {
+ .ms-NavBar-items {
+ z-index: 1;
+ }
+}
+
+.ms-NavBar-link {
+ color: $ms-color-neutralPrimary;
+ text-decoration: none;
+}
+
+@media (min-width: $ms-screen-md-min) {
+ .ms-NavBar-item {
+ &.is-selected {
+ font-size: inherit;
+ }
+ }
+}
diff --git a/dist/samples/VideoPortal/sass/PlayerPage.scss b/dist/samples/VideoPortal/sass/PlayerPage.scss
new file mode 100644
index 000000000..719880480
--- /dev/null
+++ b/dist/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/samples/VideoPortal/sass/SpotLight.scss b/dist/samples/VideoPortal/sass/SpotLight.scss
new file mode 100644
index 000000000..031dffaaf
--- /dev/null
+++ b/dist/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/samples/VideoPortal/sass/Utilities.scss b/dist/samples/VideoPortal/sass/Utilities.scss
new file mode 100644
index 000000000..d5afe890a
--- /dev/null
+++ b/dist/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/samples/VideoPortal/sass/VideoListItem.scss b/dist/samples/VideoPortal/sass/VideoListItem.scss
new file mode 100644
index 000000000..fa9bfae97
--- /dev/null
+++ b/dist/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/samples/VideoPortal/sass/VideoPortal.scss b/dist/samples/VideoPortal/sass/VideoPortal.scss
new file mode 100644
index 000000000..19217f94c
--- /dev/null
+++ b/dist/samples/VideoPortal/sass/VideoPortal.scss
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Load all page and component styles
+
+
+// Import both Fabric and Fabric Components by reference to access variables
+// and mixins from each without compiling their contents.
+@import '../../../sass/Fabric.Common.scss';
+@import '../../../sass/Fabric.Components.scss';
+
+// Import all LESS
+@import 'Utilities';
+@import 'Base.scss';
+@import 'NavBar';
+@import 'VideoListItem';
+@import 'SpotLight';
+@import 'HomePage';
+@import 'PlayerPage';
+@import 'ChannelPage';
+@import 'ChannelsPage';
diff --git a/dist/samples/index.html b/dist/samples/index.html
new file mode 100644
index 000000000..b2fc0c0ee
--- /dev/null
+++ b/dist/samples/index.html
@@ -0,0 +1,111 @@
+
+
+
+
+
+ Fabric Samples Index
+
+
+
+
+
+
+
+ Components
+
+
+ Samples
+
+
+
+
\ No newline at end of file
diff --git a/dist/sass/Fabric.Animations.Output.scss b/dist/sass/Fabric.Animations.Output.scss
new file mode 100644
index 000000000..38227eb79
--- /dev/null
+++ b/dist/sass/Fabric.Animations.Output.scss
@@ -0,0 +1,419 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Animations
+
+
+// Note that all animation classes should begin with the "ms-u" utility prefix.
+// The original class names are deprecated and will be removed in a future release.
+
+@import "Fabric.Animations";
+
+// slideRightIn10
+.ms-u-slideRightIn10 {
+ @include ms-u-slideRightIn10;
+}
+@-webkit-keyframes slideRightIn10 {
+ from { -webkit-transform:translate3d(-10px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideRightIn10 {
+ from { transform:translate3d(-10px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideRightIn20
+.ms-u-slideRightIn20 {
+ @include ms-u-slideRightIn20;
+}
+@-webkit-keyframes slideRightIn20 {
+ from { -webkit-transform:translate3d(-20px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideRightIn20 {
+ from { transform:translate3d(-20px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideRightIn40
+.ms-u-slideRightIn40 {
+ @include ms-u-slideRightIn40;
+}
+@-webkit-keyframes slideRightIn40 {
+ from { -webkit-transform:translate3d(-40px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideRightIn40 {
+ from { transform:translate3d(-40px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideLeftIn10
+.ms-u-slideLeftIn10 {
+ @include ms-u-slideLeftIn10;
+}
+@-webkit-keyframes slideLeftIn10 {
+ from { -webkit-transform:translate3d(10px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideLeftIn10 {
+ from { transform:translate3d(10px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideLeftIn20
+.ms-u-slideLeftIn20 {
+ @include ms-u-slideLeftIn20;
+}
+@-webkit-keyframes slideLeftIn20 {
+ from { -webkit-transform:translate3d(20px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideLeftIn20 {
+ from { transform:translate3d(20px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideLeftIn40
+.ms-u-slideLeftIn40 {
+ @include ms-u-slideLeftIn40;
+}
+@-webkit-keyframes slideLeftIn40 {
+ from { -webkit-transform:translate3d(40px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideLeftIn40 {
+ from { transform:translate3d(40px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideRightIn400
+.ms-u-slideRightIn400 {
+ @include ms-u-slideRightIn400;
+}
+@-webkit-keyframes slideRightIn400 {
+ from { -webkit-transform:translate3d(-400px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideRightIn400 {
+ from { transform:translate3d(-400px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideLeftIn400
+.ms-u-slideLeftIn400 {
+ @include ms-u-slideLeftIn400;
+}
+@-webkit-keyframes slideLeft400 {
+ from { -webkit-transform:translate3d(400px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideLeft400 {
+ from { transform:translate3d(400px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideUpIn20
+.ms-u-slideUpIn20 {
+ @include ms-u-slideUpIn20;
+}
+@-webkit-keyframes slideUpIn20 {
+ from { -webkit-transform:translate3d(0px, 20px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideUpIn20 {
+ from { transform:translate3d(0px, 20px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideUpIn10
+.ms-u-slideUpIn10 {
+ @include ms-u-slideUpIn10;
+}
+@-webkit-keyframes slideUpIn10 {
+ from { -webkit-transform:translate3d(0px, 10px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideUpIn10 {
+ from { transform:translate3d(0px, 10px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideDownIn20
+.ms-u-slideDownIn20 {
+ @include ms-u-slideDownIn20;
+}
+@-webkit-keyframes slideDownIn20 {
+ from { -webkit-transform:translate3d(0px, -20px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideDownIn20 {
+ from { transform:translate3d(0px, -20px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideDownIn10
+.ms-u-slideDownIn10 {
+ @include ms-u-slideDownIn10;
+}
+@-webkit-keyframes slideDownIn10 {
+ from { -webkit-transform:translate3d(0px, -10px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideDownIn10 {
+ from { transform:translate3d(0px, -10px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideRightOut40
+.ms-u-slideRightOut40 {
+ @include ms-u-slideRightOut40;
+}
+@-webkit-keyframes slideRightOut40 {
+ from { -webkit-transform:translate3d(0px, 0px, 0px); }
+ to { -webkit-transform:translate3d(40px, 0px, 0px); }
+}
+@keyframes slideRightOut40 {
+ from { transform:translate3d(0px, 0px, 0px); }
+ to { transform:translate3d(40px, 0px, 0px); }
+}
+
+// slideLeftOut40
+.ms-u-slideLeftOut40 {
+ @include ms-u-slideLeftOut40;
+}
+@-webkit-keyframes slideLeftOut40 {
+ from { -webkit-transform:translate3d(0, 0px, 0px); }
+ to { -webkit-transform:translate3d(-40px, 0px, 0px); }
+}
+@keyframes slideLeftOut40 {
+ from { transform:translate3d(0, 0px, 0px); }
+ to { transform:translate3d(-40px, 0px, 0px); }
+}
+
+// slideRightOut400
+.ms-u-slideRightOut400 {
+ @include ms-u-slideRightOut400;
+}
+@-webkit-keyframes slideRightOut400 {
+ from { -webkit-transform:translate3d(0, 0px, 0px); }
+ to { -webkit-transform:translate3d(400px, 0px, 0px); }
+}
+@keyframes slideRightOut400 {
+ from { transform:translate3d(0, 0px, 0px); }
+ to { transform:translate3d(400px, 0px, 0px); }
+}
+
+// slideLeftOut400
+.ms-u-slideLeftOut400 {
+ @include ms-u-slideLeftOut400;
+}
+@-webkit-keyframes slideLeftOut400 {
+ from { -webkit-transform:translate3d(0, 0px, 0px); }
+ to { -webkit-transform:translate3d(-400px, 0px, 0px); }
+}
+@keyframes slideLeftOut400 {
+ from { transform:translate3d(0, 0px, 0px); }
+ to { transform:translate3d(-400px, 0px, 0px); }
+}
+
+// slideUpOut20
+.ms-u-slideUpOut20 {
+ @include ms-u-slideUpOut20;
+}
+@-webkit-keyframes slideUpOut20 {
+ from { -webkit-transform:translate3d(0px, 0, 0px); }
+ to { -webkit-transform:translate3d(0px, -20px, 0px); }
+}
+@keyframes slideUpOut20 {
+ from { transform:translate3d(0px, 0, 0px); }
+ to { transform:translate3d(0px, -20px, 0px); }
+}
+
+// slideUpOut10
+.ms-u-slideUpOut10 {
+ @include ms-u-slideUpOut10;
+}
+@-webkit-keyframes slideUpOut10 {
+ from { -webkit-transform:translate3d(0px, 0, 0px); }
+ to { -webkit-transform:translate3d(0px, -10px, 0px); }
+}
+@keyframes slideUpOut10 {
+ from { transform:translate3d(0px, 0, 0px); }
+ to { transform:translate3d(0px, -10px, 0px); }
+}
+
+// slideDownOut20
+.ms-u-slideDownOut20 {
+ @include ms-u-slideDownOut20;
+}
+@-webkit-keyframes slideDownOut20 {
+ from { -webkit-transform:translate3d(0px, 0, 0px); }
+ to { -webkit-transform:translate3d(0px, 20px, 0px); }
+}
+@keyframes slideDownOut20 {
+ from { transform:translate3d(0px, 0, 0px); }
+ to { transform:translate3d(0px, 20px, 0px); }
+}
+
+// slideDownOut10
+.ms-u-slideDownOut10 {
+ @include ms-u-slideDownOut10;
+}
+@-webkit-keyframes slideDownOut10 {
+ from { -webkit-transform:translate3d(0px, 0, 0px); }
+ to { -webkit-transform:translate3d(0px, 10px, 0px); }
+}
+@keyframes slideDownOut10 {
+ from { transform:translate3d(0px, 0, 0px); }
+ to { transform:translate3d(0px, 10px, 0px); }
+}
+
+// scaleUpIn100
+.ms-u-scaleUpIn100 {
+ @include ms-u-scaleUpIn100;
+}
+@-webkit-keyframes scaleUp100 {
+ from { -webkit-transform:scale3d(.98, .98, 1); }
+ to { -webkit-transform:scale3d(1, 1, 1); }
+}
+@keyframes scaleUp100 {
+ from { transform:scale3d(.98, .98, 1); }
+ to { transform:scale3d(1, 1, 1); }
+}
+
+// scaleDownIn100
+.ms-u-scaleDownIn100 {
+ @include ms-u-scaleDownIn100;
+}
+@-webkit-keyframes scaleDown100 {
+ from { -webkit-transform:scale3d(1.03, 1.03, 1); }
+ to { -webkit-transform:scale3d(1, 1, 1); }
+}
+@keyframes scaleDown100 {
+ from { transform:scale3d(1.03, 1.03, 1); }
+ to { transform:scale3d(1, 1, 1); }
+}
+
+// scaleUpOut103
+.ms-u-scaleUpOut103 {
+ @include ms-u-scaleUpOut103;
+}
+@-webkit-keyframes scaleUp103 {
+ from { -webkit-transform:scale3d(1, 1, 1); }
+ to { -webkit-transform:scale3d(1.03, 1.03, 1); }
+}
+@keyframes scaleUp103 {
+ from { transform:scale3d(1, 1, 1); }
+ to { transform:scale3d(1.03, 1.03, 1); }
+}
+
+// scaleDownOut98
+.ms-u-scaleDownOut98 {
+ @include ms-u-scaleDownOut98;
+}
+@-webkit-keyframes scaleDown98 {
+ from { -webkit-transform:scale3d(1, 1, 1); }
+ to { -webkit-transform:scale3d(0.98, 0.98, 1); }
+}
+@keyframes scaleDown98 {
+ from { transform:scale3d(1, 1, 1); }
+ to { transform:scale3d(0.98, 0.98, 1); }
+}
+
+// fadeIn
+.ms-u-fadeIn400 {
+ @include ms-u-fadeIn400;
+}
+.ms-u-fadeIn100 {
+ @include ms-u-fadeIn100;
+}
+.ms-u-fadeIn200 {
+ @include ms-u-fadeIn200;
+}
+.ms-u-fadeIn500 {
+ @include ms-u-fadeIn500;
+}
+@-webkit-keyframes fadeIn {
+ from { opacity: 0; -webkit-animation-timing-function: $ms-ease2; }
+ to { opacity: 1; }
+}
+@keyframes fadeIn {
+ from { opacity: 0; animation-timing-function: $ms-ease2; }
+ to { opacity: 1; }
+}
+
+// fadeOut
+.ms-u-fadeOut400 {
+ @include ms-u-fadeOut400;
+}
+.ms-u-fadeOut100 {
+ @include ms-u-fadeOut100;
+}
+.ms-u-fadeOut200 {
+ @include ms-u-fadeOut200;
+}
+.ms-u-fadeOut500 {
+ @include ms-u-fadeOut500;
+}
+@-webkit-keyframes fadeOut {
+ from { opacity: 1; -webkit-animation-timing-function: $ms-ease2; }
+ to { opacity: 0; }
+}
+@keyframes fadeOut {
+ from { opacity: 1; animation-timing-function: $ms-ease2; }
+ to { opacity: 0; }
+}
+
+// rotate90deg
+.ms-u-rotate90deg {
+ @include ms-u-rotate90deg;
+}
+@-webkit-keyframes rotate90 {
+ from { -webkit-transform:rotateZ(0deg); }
+ to { -webkit-transform:rotateZ(90deg); }
+}
+@keyframes rotate90 {
+ from { transform:rotateZ(0deg); }
+ to { transform:rotateZ(90deg); }
+}
+
+// rotateN90deg
+.ms-u-rotateN90deg {
+ @include ms-u-rotateN90deg;
+}
+@-webkit-keyframes rotateN90 {
+ from { -webkit-transform:rotateZ(90deg); }
+ to { -webkit-transform:rotateZ(0deg); }
+}
+@keyframes rotateN90 {
+ from { transform:rotateZ(90deg); }
+ to { transform:rotateZ(0deg); }
+}
+
+// expandCollapse400
+.ms-u-expandCollapse400 {
+ @include ms-u-expandCollapse400;
+}
+
+// expandCollapse200
+.ms-u-expandCollapse200 {
+ @include ms-u-expandCollapse200;
+}
+
+// expandCollapse100
+.ms-u-expandCollapse100 {
+ @include ms-u-expandCollapse100;
+}
+
+// delay100
+.ms-u-delay100 {
+ @include ms-u-delay100;
+}
+
+// delay200
+.ms-u-delay200 {
+ @include ms-u-delay200;
+}
diff --git a/dist/sass/Fabric.Animations.RTL.Output.scss b/dist/sass/Fabric.Animations.RTL.Output.scss
new file mode 100644
index 000000000..8ad465a5b
--- /dev/null
+++ b/dist/sass/Fabric.Animations.RTL.Output.scss
@@ -0,0 +1,80 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// RTL overrides for Fabric Animations
+
+
+@import "Fabric.Animations.Output";
+@import "Fabric.Animations.RTL";
+
+// slideRightIn10
+.ms-u-slideRightIn10 {
+ @include ms-u-slideRightIn10;
+}
+
+// slideRightIn20
+.ms-u-slideRightIn20 {
+ @include ms-u-slideRightIn20;
+}
+
+// slideRightIn40
+.ms-u-slideRightIn40 {
+ @include ms-u-slideRightIn40;
+}
+
+// slideLeftIn10
+.ms-u-slideLeftIn10 {
+ @include ms-u-slideLeftIn10;
+}
+
+// slideLeftIn20
+.ms-u-slideLeftIn20 {
+ @include ms-u-slideLeftIn20;
+}
+
+// slideLeftIn40
+.ms-u-slideLeftIn40 {
+ @include ms-u-slideLeftIn40;
+}
+
+// slideRightIn400
+.ms-u-slideRightIn400 {
+ @include ms-u-slideRightIn400;
+}
+
+// slideLeftIn400
+.ms-u-slideLeftIn400 {
+ @include ms-u-slideLeftIn400;
+}
+
+// slideRightOut40
+.ms-u-slideRightOut40 {
+ @include ms-u-slideRightOut40;
+}
+
+// slideLeftOut40
+.ms-u-slideLeftOut40 {
+ @include ms-u-slideLeftOut40;
+}
+
+// slideRightOut400
+.ms-u-slideRightOut400 {
+ @include ms-u-slideRightOut400;
+}
+
+// slideLeftOut400
+.ms-u-slideLeftOut400 {
+ @include ms-u-slideLeftOut400;
+}
+
+// rotate90deg
+.ms-u-rotate90deg {
+ @include ms-u-rotate90deg;
+}
+
+// rotateN90deg
+.ms-u-rotateN90deg {
+ @include ms-u-rotateN90deg;
+}
diff --git a/dist/sass/Fabric.Color.Mixins.Output.scss b/dist/sass/Fabric.Color.Mixins.Output.scss
new file mode 100644
index 000000000..69e206fda
--- /dev/null
+++ b/dist/sass/Fabric.Color.Mixins.Output.scss
@@ -0,0 +1,448 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Core Color Mixins
+
+@import "Fabric.Color.Mixins";
+
+//== Background colors
+//
+// Theme colors
+.ms-bgColor-themeDark,
+.ms-bgColor-themeDark--hover:hover {
+ @include ms-bgColor-themeDark;
+}
+
+.ms-bgColor-themeDarkAlt,
+.ms-bgColor-themeDarkAlt--hover:hover {
+ @include ms-bgColor-themeDarkAlt;
+}
+
+.ms-bgColor-themeDarker,
+.ms-bgColor-themeDarker--hover:hover {
+ @include ms-bgColor-themeDarker;
+}
+
+.ms-bgColor-themePrimary,
+.ms-bgColor-themePrimary--hover:hover {
+ @include ms-bgColor-themePrimary;
+}
+
+.ms-bgColor-themeSecondary,
+.ms-bgColor-themeSecondary--hover:hover {
+ @include ms-bgColor-themeSecondary;
+}
+
+.ms-bgColor-themeTertiary,
+.ms-bgColor-themeTertiary--hover:hover {
+ @include ms-bgColor-themeTertiary;
+}
+
+.ms-bgColor-themeLight,
+.ms-bgColor-themeLight--hover:hover {
+ @include ms-bgColor-themeLight;
+}
+
+.ms-bgColor-themeLighter,
+.ms-bgColor-themeLighter--hover:hover {
+ @include ms-bgColor-themeLighter;
+}
+
+.ms-bgColor-themeLighterAlt,
+.ms-bgColor-themeLighterAlt--hover:hover {
+ @include ms-bgColor-themeLighterAlt;
+}
+
+// Neutral colors
+.ms-bgColor-black,
+.ms-bgColor-black--hover:hover {
+ @include ms-bgColor-black;
+}
+
+.ms-bgColor-neutralDark,
+.ms-bgColor-neutralDark--hover:hover {
+ @include ms-bgColor-neutralDark;
+}
+
+.ms-bgColor-neutralPrimary,
+.ms-bgColor-neutralPrimary--hover:hover {
+ @include ms-bgColor-neutralPrimary;
+}
+
+.ms-bgColor-neutralSecondary,
+.ms-bgColor-neutralSecondary--hover:hover {
+ @include ms-bgColor-neutralSecondary;
+}
+
+.ms-bgColor-neutralSecondaryAlt,
+.ms-bgColor-neutralSecondaryAlt--hover:hover {
+ @include ms-bgColor-neutralSecondaryAlt;
+}
+
+.ms-bgColor-neutralTertiary,
+.ms-bgColor-neutralTertiary--hover:hover {
+ @include ms-bgColor-neutralTertiary;
+}
+
+.ms-bgColor-neutralTertiaryAlt,
+.ms-bgColor-neutralTertiaryAlt--hover:hover {
+ @include ms-bgColor-neutralTertiaryAlt;
+}
+
+.ms-bgColor-neutralLight,
+.ms-bgColor-neutralLight--hover:hover {
+ @include ms-bgColor-neutralLight;
+}
+
+.ms-bgColor-neutralLighter,
+.ms-bgColor-neutralLighter--hover:hover {
+ @include ms-bgColor-neutralLighter;
+}
+
+.ms-bgColor-neutralLighterAlt,
+.ms-bgColor-neutralLighterAlt--hover:hover {
+ @include ms-bgColor-neutralLighterAlt;
+}
+
+.ms-bgColor-white,
+.ms-bgColor-white--hover:hover {
+ @include ms-bgColor-white;
+}
+
+
+// Brand and accent colors
+.ms-bgColor-yellow {
+ @include ms-bgColor-yellow;
+}
+
+.ms-bgColor-yellowLight {
+ @include ms-bgColor-yellowLight;
+}
+
+.ms-bgColor-orange {
+ @include ms-bgColor-orange;
+}
+
+.ms-bgColor-orangeLight {
+ @include ms-bgColor-orangeLight;
+}
+
+.ms-bgColor-orangeLighter {
+ @include ms-bgColor-orangeLighter;
+}
+
+.ms-bgColor-redDark {
+ @include ms-bgColor-redDark;
+}
+
+.ms-bgColor-red {
+ @include ms-bgColor-red;
+}
+
+.ms-bgColor-magentaDark {
+ @include ms-bgColor-magentaDark;
+}
+
+.ms-bgColor-magenta {
+ @include ms-bgColor-magenta;
+}
+
+.ms-bgColor-magentaLight {
+ @include ms-bgColor-magentaLight;
+}
+
+.ms-bgColor-purpleDark {
+ @include ms-bgColor-purpleDark;
+}
+
+.ms-bgColor-purple {
+ @include ms-bgColor-purple;
+}
+
+.ms-bgColor-purpleLight {
+ @include ms-bgColor-purpleLight;
+}
+
+.ms-bgColor-blueDark {
+ @include ms-bgColor-blueDark;
+}
+
+.ms-bgColor-blueMid {
+ @include ms-bgColor-blueMid;
+}
+
+.ms-bgColor-blue {
+ @include ms-bgColor-blue;
+}
+
+.ms-bgColor-blueLight {
+ @include ms-bgColor-blueLight;
+}
+
+.ms-bgColor-tealDark {
+ @include ms-bgColor-tealDark;
+}
+
+.ms-bgColor-teal {
+ @include ms-bgColor-teal;
+}
+
+.ms-bgColor-tealLight {
+ @include ms-bgColor-tealLight;
+}
+
+.ms-bgColor-greenDark {
+ @include ms-bgColor-greenDark;
+}
+
+.ms-bgColor-green {
+ @include ms-bgColor-green;
+}
+
+.ms-bgColor-greenLight {
+ @include ms-bgColor-greenLight;
+}
+
+// Message colors
+.ms-bgColor-info {
+ @include ms-bgColor-info;
+}
+
+.ms-bgColor-success {
+ @include ms-bgColor-success;
+}
+
+.ms-bgColor-alert {
+ @include ms-bgColor-alert;
+}
+
+.ms-bgColor-error {
+ @include ms-bgColor-error;
+}
+
+
+//== Border colors
+//
+
+// Theme colors
+.ms-borderColor-themeDark,
+.ms-borderColor-themeDark--hover:hover {
+ @include ms-borderColor-themeDark;
+}
+
+.ms-borderColor-themeDarkAlt,
+.ms-borderColor-themeDarkAlt--hover:hover {
+ @include ms-borderColor-themeDarkAlt;
+}
+
+.ms-borderColor-themeDarker,
+.ms-borderColor-themeDarker--hover:hover {
+ @include ms-borderColor-themeDarker;
+}
+
+.ms-borderColor-themePrimary,
+.ms-borderColor-themePrimary--hover:hover {
+ @include ms-borderColor-themePrimary;
+}
+
+.ms-borderColor-themeSecondary,
+.ms-borderColor-themeSecondary--hover:hover {
+ @include ms-borderColor-themeSecondary;
+}
+
+.ms-borderColor-themeTertiary,
+.ms-borderColor-themeTertiary--hover:hover {
+ @include ms-borderColor-themeTertiary;
+}
+
+.ms-borderColor-themeLight,
+.ms-borderColor-themeLight--hover:hover {
+ @include ms-borderColor-themeLight;
+}
+
+.ms-borderColor-themeLighter,
+.ms-borderColor-themeLighter--hover:hover {
+ @include ms-borderColor-themeLighter;
+}
+
+.ms-borderColor-themeLighterAlt,
+.ms-borderColor-themeLighterAlt--hover:hover {
+ @include ms-borderColor-themeLighterAlt;
+}
+
+
+// Neutral colors
+.ms-borderColor-black,
+.ms-borderColor-black--hover:hover {
+ @include ms-borderColor-black;
+}
+
+.ms-borderColor-neutralDark,
+.ms-borderColor-neutralDark--hover:hover {
+ @include ms-borderColor-neutralDark;
+}
+
+.ms-borderColor-neutralPrimary,
+.ms-borderColor-neutralPrimary--hover:hover {
+ @include ms-borderColor-neutralPrimary;
+}
+
+.ms-borderColor-neutralSecondary,
+.ms-borderColor-neutralSecondary--hover:hover {
+ @include ms-borderColor-neutralSecondary;
+}
+
+.ms-borderColor-neutralSecondaryAlt,
+.ms-borderColor-neutralSecondaryAlt--hover:hover {
+ @include ms-borderColor-neutralSecondaryAlt;
+}
+
+.ms-borderColor-neutralTertiary,
+.ms-borderColor-neutralTertiary--hover:hover {
+ @include ms-borderColor-neutralTertiary;
+}
+
+.ms-borderColor-neutralTertiaryAlt,
+.ms-borderColor-neutralTertiaryAlt--hover:hover {
+ @include ms-borderColor-neutralTertiaryAlt;
+}
+
+.ms-borderColor-neutralLight,
+.ms-borderColor-neutralLight--hover:hover {
+ @include ms-borderColor-neutralLight;
+}
+
+.ms-borderColor-neutralLighter,
+.ms-borderColor-neutralLighter--hover:hover {
+ @include ms-borderColor-neutralLighter;
+}
+
+.ms-borderColor-neutralLighterAlt,
+.ms-borderColor-neutralLighterAlt--hover:hover {
+ @include ms-borderColor-neutralLighterAlt;
+}
+
+.ms-borderColor-white,
+.ms-borderColor-white--hover:hover {
+ @include ms-borderColor-white;
+}
+
+// Brand and accent colors
+.ms-borderColor-yellow {
+ @include ms-borderColor-yellow;
+}
+
+.ms-borderColor-yellowLight {
+ @include ms-borderColor-yellowLight;
+}
+
+.ms-borderColor-orange {
+ @include ms-borderColor-orange;
+}
+
+.ms-borderColor-orangeLight {
+ @include ms-borderColor-orangeLight;
+}
+
+.ms-borderColor-orangeLighter {
+ @include ms-borderColor-orangeLighter;
+}
+
+.ms-borderColor-redDark {
+ @include ms-borderColor-redDark;
+}
+
+.ms-borderColor-red {
+ @include ms-borderColor-red;
+}
+
+.ms-borderColor-magentaDark {
+ @include ms-borderColor-magentaDark;
+}
+
+.ms-borderColor-magenta {
+ @include ms-borderColor-magenta;
+}
+
+.ms-borderColor-magentaLight {
+ @include ms-borderColor-magentaLight;
+}
+
+.ms-borderColor-purpleDark {
+ @include ms-borderColor-purpleDark;
+}
+
+.ms-borderColor-purple {
+ @include ms-borderColor-purple;
+}
+
+.ms-borderColor-purpleLight {
+ @include ms-borderColor-purpleLight;
+}
+
+.ms-borderColor-blueDark {
+ @include ms-borderColor-blueDark;
+}
+
+.ms-borderColor-blueMid {
+ @include ms-borderColor-blueMid;
+}
+
+.ms-borderColor-blue {
+ @include ms-borderColor-blue;
+}
+
+.ms-borderColor-blueLight {
+ @include ms-borderColor-blueLight;
+}
+
+.ms-borderColor-tealDark {
+ @include ms-borderColor-tealDark;
+}
+
+.ms-borderColor-teal {
+ @include ms-borderColor-teal;
+}
+
+.ms-borderColor-tealLight {
+ @include ms-borderColor-tealLight;
+}
+
+.ms-borderColor-greenDark {
+ @include ms-borderColor-greenDark;
+}
+
+.ms-borderColor-green {
+ @include ms-borderColor-green;
+}
+
+.ms-borderColor-greenLight {
+ @include ms-borderColor-greenLight;
+}
+
+
+// Message colors
+.ms-borderColor-info {
+ @include ms-borderColor-info;
+}
+
+.ms-borderColor-success {
+ @include ms-borderColor-success;
+}
+
+.ms-borderColor-alert {
+ @include ms-borderColor-alert;
+}
+
+.ms-borderColor-error {
+ @include ms-borderColor-error;
+}
+
+
+// Individual borders, by request
+.ms-borderColorTop-themePrimary,
+.ms-borderColorTop-themePrimary--hover:hover {
+ @include ms-borderColorTop-themePrimary;
+}
diff --git a/dist/sass/Fabric.Components.scss b/dist/sass/Fabric.Components.scss
new file mode 100644
index 000000000..d26c653ee
--- /dev/null
+++ b/dist/sass/Fabric.Components.scss
@@ -0,0 +1,31 @@
+@import 'Fabric.Common';
+
+@import '../components/Breadcrumb/Breadcrumb';
+@import '../components/Button/Button';
+@import '../components/Callout/Callout';
+@import '../components/ChoiceField/ChoiceField';
+@import '../components/CommandBar/CommandBar';
+@import '../components/ContextualMenu/ContextualMenu';
+@import '../components/DatePicker/DatePicker';
+@import '../components/Dialog/Dialog';
+@import '../components/Dropdown/Dropdown';
+@import '../components/Facepile/Facepile';
+@import '../components/Label/Label';
+@import '../components/Link/Link';
+@import '../components/List/List';
+@import '../components/ListItem/ListItem';
+@import '../components/MessageBanner/MessageBanner';
+@import '../components/NavBar/NavBar';
+@import '../components/OrgChart/OrgChart';
+@import '../components/Overlay/Overlay';
+@import '../components/Panel/Panel';
+@import '../components/PeoplePicker/PeoplePicker';
+@import '../components/Persona/Persona';
+@import '../components/PersonaCard/PersonaCard';
+@import '../components/Pivot/Pivot';
+@import '../components/ProgressIndicator/ProgressIndicator';
+@import '../components/SearchBox/SearchBox';
+@import '../components/Spinner/Spinner';
+@import '../components/Table/Table';
+@import '../components/TextField/TextField';
+@import '../components/Toggle/Toggle';
diff --git a/dist/sass/Fabric.Grid.Output.scss b/dist/sass/Fabric.Grid.Output.scss
new file mode 100644
index 000000000..eabedd697
--- /dev/null
+++ b/dist/sass/Fabric.Grid.Output.scss
@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fluid 12-column grids for small, medium, and large devices
+
+@import "Fabric.Grid";
+
+//== Grid container (same for all sizes)
+//
+.ms-Grid {
+ @include ms-Grid;
+}
+
+//== Grid rows (pull first and last column out)
+//
+.ms-Grid-row {
+ @include ms-Grid-row;
+}
+
+//== Grid cells
+//
+.ms-Grid-col {
+ @include ms-Grid-col;
+}
+
+// For nested grids (a grid inside a column), removing the padding
+// so that the nested grid's columns go to the edge of the parent's.
+.ms-Grid-col .ms-Grid {
+ padding: 0;
+}
diff --git a/dist/sass/Fabric.Icons.Font.Output.scss b/dist/sass/Fabric.Icons.Font.Output.scss
new file mode 100644
index 000000000..d15af33a2
--- /dev/null
+++ b/dist/sass/Fabric.Icons.Font.Output.scss
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon font-family definition
+
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+@import "Fabric.Typography.Fonts";
+
+@font-face {
+ font-family: 'Office365Icons';
+ src: url('#{$ms-font-directory}/icons/office365icons.eot?');
+ src: url('#{$ms-font-directory}/icons/office365icons.eot?#iefix') format('embedded-opentype'),
+ url('#{$ms-font-directory}/icons/office365icons.woff?') format('woff'),
+ url('#{$ms-font-directory}/icons/office365icons.ttf?') format('truetype'),
+ url('#{$ms-font-directory}/icons/office365icons.svg?#office365icons') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
diff --git a/dist/sass/Fabric.Icons.Output.scss b/dist/sass/Fabric.Icons.Output.scss
new file mode 100644
index 000000000..d5c733d74
--- /dev/null
+++ b/dist/sass/Fabric.Icons.Output.scss
@@ -0,0 +1,771 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon definitions
+
+
+@import './Fabric.Icons';
+
+// Base icon definition
+.ms-Icon {
+ @include ms-Icon();
+}
+
+// Modifiers: Each of the icons.
+//*-- Start
+.ms-Icon--circleEmpty:before { @include ms-Icon--circleEmpty; }
+.ms-Icon--circleFill:before { @include ms-Icon--circleFill; }
+.ms-Icon--placeholder:before { @include ms-Icon--placeholder; }
+.ms-Icon--star:before { @include ms-Icon--star; }
+.ms-Icon--plus:before { @include ms-Icon--plus; }
+.ms-Icon--minus:before { @include ms-Icon--minus; }
+.ms-Icon--question:before { @include ms-Icon--question; }
+.ms-Icon--exclamation:before { @include ms-Icon--exclamation; }
+.ms-Icon--person:before { @include ms-Icon--person; }
+.ms-Icon--mail:before { @include ms-Icon--mail; }
+.ms-Icon--infoCircle:before { @include ms-Icon--infoCircle; }
+.ms-Icon--alert:before { @include ms-Icon--alert; }
+.ms-Icon--xCircle:before { @include ms-Icon--xCircle; }
+.ms-Icon--mailOpen:before { @include ms-Icon--mailOpen; }
+.ms-Icon--people:before { @include ms-Icon--people; }
+.ms-Icon--bell:before { @include ms-Icon--bell; }
+.ms-Icon--calendar:before { @include ms-Icon--calendar; }
+.ms-Icon--scheduling:before { @include ms-Icon--scheduling; }
+.ms-Icon--event:before { @include ms-Icon--event; }
+.ms-Icon--folder:before { @include ms-Icon--folder; }
+.ms-Icon--documents:before { @include ms-Icon--documents; }
+.ms-Icon--onedrive:before { @include ms-Icon--onedrive; }
+.ms-Icon--chat:before { @include ms-Icon--chat; }
+.ms-Icon--sites:before { @include ms-Icon--sites; }
+.ms-Icon--listBullets:before { @include ms-Icon--listBullets; }
+.ms-Icon--calendarWeek:before { @include ms-Icon--calendarWeek; }
+.ms-Icon--calendarWorkWeek:before { @include ms-Icon--calendarWorkWeek; }
+.ms-Icon--calendarDay:before { @include ms-Icon--calendarDay; }
+.ms-Icon--folderMove:before { @include ms-Icon--folderMove; }
+.ms-Icon--panel:before { @include ms-Icon--panel; }
+.ms-Icon--popout:before { @include ms-Icon--popout; }
+.ms-Icon--menu:before { @include ms-Icon--menu; }
+.ms-Icon--home:before { @include ms-Icon--home; }
+.ms-Icon--favorites:before { @include ms-Icon--favorites; }
+.ms-Icon--phone:before { @include ms-Icon--phone; }
+.ms-Icon--mailSend:before { @include ms-Icon--mailSend; }
+.ms-Icon--save:before { @include ms-Icon--save; }
+.ms-Icon--trash:before { @include ms-Icon--trash; }
+.ms-Icon--pencil:before { @include ms-Icon--pencil; }
+.ms-Icon--flag:before { @include ms-Icon--flag; }
+.ms-Icon--reply:before { @include ms-Icon--reply; }
+.ms-Icon--miniatures:before { @include ms-Icon--miniatures; }
+.ms-Icon--voicemail:before { @include ms-Icon--voicemail; }
+.ms-Icon--play:before { @include ms-Icon--play; }
+.ms-Icon--pause:before { @include ms-Icon--pause; }
+.ms-Icon--onlineAdd:before { @include ms-Icon--onlineAdd; }
+.ms-Icon--onlineJoin:before { @include ms-Icon--onlineJoin; }
+.ms-Icon--replyAll:before { @include ms-Icon--replyAll; }
+.ms-Icon--attachment:before { @include ms-Icon--attachment; }
+.ms-Icon--drm:before { @include ms-Icon--drm; }
+.ms-Icon--pinDown:before { @include ms-Icon--pinDown; }
+.ms-Icon--refresh:before { @include ms-Icon--refresh; }
+.ms-Icon--gear:before { @include ms-Icon--gear; }
+.ms-Icon--smiley:before { @include ms-Icon--smiley; }
+.ms-Icon--info:before { @include ms-Icon--info; }
+.ms-Icon--lock:before { @include ms-Icon--lock; }
+.ms-Icon--search:before { @include ms-Icon--search; }
+.ms-Icon--questionReverse:before { @include ms-Icon--questionReverse; }
+.ms-Icon--notRecurring:before { @include ms-Icon--notRecurring; }
+.ms-Icon--tasks:before { @include ms-Icon--tasks; }
+.ms-Icon--check:before { @include ms-Icon--check; }
+.ms-Icon--x:before { @include ms-Icon--x; }
+.ms-Icon--ellipsis:before { @include ms-Icon--ellipsis; }
+.ms-Icon--dot:before { @include ms-Icon--dot; }
+.ms-Icon--arrowUp:before { @include ms-Icon--arrowUp; }
+.ms-Icon--arrowDown:before { @include ms-Icon--arrowDown; }
+.ms-Icon--arrowLeft:before { @include ms-Icon--arrowLeft; }
+.ms-Icon--arrowRight:before { @include ms-Icon--arrowRight; }
+.ms-Icon--download:before { @include ms-Icon--download; }
+.ms-Icon--directions:before { @include ms-Icon--directions; }
+.ms-Icon--microphone:before { @include ms-Icon--microphone; }
+.ms-Icon--caretUp:before { @include ms-Icon--caretUp; }
+.ms-Icon--caretDown:before { @include ms-Icon--caretDown; }
+.ms-Icon--caretLeft:before { @include ms-Icon--caretLeft; }
+.ms-Icon--caretRight:before { @include ms-Icon--caretRight; }
+.ms-Icon--caretUpLeft:before { @include ms-Icon--caretUpLeft; }
+.ms-Icon--caretUpRight:before { @include ms-Icon--caretUpRight; }
+.ms-Icon--caretDownRight:before { @include ms-Icon--caretDownRight; }
+.ms-Icon--caretDownLeft:before { @include ms-Icon--caretDownLeft; }
+.ms-Icon--note:before { @include ms-Icon--note; }
+.ms-Icon--noteReply:before { @include ms-Icon--noteReply; }
+.ms-Icon--noteForward:before { @include ms-Icon--noteForward; }
+.ms-Icon--key:before { @include ms-Icon--key; }
+.ms-Icon--tile:before { @include ms-Icon--tile; }
+.ms-Icon--taskRecurring:before { @include ms-Icon--taskRecurring; }
+.ms-Icon--starEmpty:before { @include ms-Icon--starEmpty; }
+.ms-Icon--upload:before { @include ms-Icon--upload; }
+.ms-Icon--wrench:before { @include ms-Icon--wrench; }
+.ms-Icon--share:before { @include ms-Icon--share; }
+.ms-Icon--documentReply:before { @include ms-Icon--documentReply; }
+.ms-Icon--documentForward:before { @include ms-Icon--documentForward; }
+.ms-Icon--partner:before { @include ms-Icon--partner; }
+.ms-Icon--reactivate:before { @include ms-Icon--reactivate; }
+.ms-Icon--sort:before { @include ms-Icon--sort; }
+.ms-Icon--personAdd:before { @include ms-Icon--personAdd; }
+.ms-Icon--chevronUp:before { @include ms-Icon--chevronUp; }
+.ms-Icon--chevronDown:before { @include ms-Icon--chevronDown; }
+.ms-Icon--chevronLeft:before { @include ms-Icon--chevronLeft; }
+.ms-Icon--chevronRight:before { @include ms-Icon--chevronRight; }
+.ms-Icon--peopleAdd:before { @include ms-Icon--peopleAdd; }
+.ms-Icon--newsfeed:before { @include ms-Icon--newsfeed; }
+.ms-Icon--notebook:before { @include ms-Icon--notebook; }
+.ms-Icon--link:before { @include ms-Icon--link; }
+.ms-Icon--chevronsUp:before { @include ms-Icon--chevronsUp; }
+.ms-Icon--chevronsDown:before { @include ms-Icon--chevronsDown; }
+.ms-Icon--chevronsLeft:before { @include ms-Icon--chevronsLeft; }
+.ms-Icon--chevronsRight:before { @include ms-Icon--chevronsRight; }
+.ms-Icon--clutter:before { @include ms-Icon--clutter; }
+.ms-Icon--subscribe:before { @include ms-Icon--subscribe; }
+.ms-Icon--unsubscribe:before { @include ms-Icon--unsubscribe; }
+.ms-Icon--personRemove:before { @include ms-Icon--personRemove; }
+.ms-Icon--receiptForward:before { @include ms-Icon--receiptForward; }
+.ms-Icon--receiptReply:before { @include ms-Icon--receiptReply; }
+.ms-Icon--receiptCheck:before { @include ms-Icon--receiptCheck; }
+.ms-Icon--peopleRemove:before { @include ms-Icon--peopleRemove; }
+.ms-Icon--merge:before { @include ms-Icon--merge; }
+.ms-Icon--split:before { @include ms-Icon--split; }
+.ms-Icon--eventCancel:before { @include ms-Icon--eventCancel; }
+.ms-Icon--eventShare:before { @include ms-Icon--eventShare; }
+.ms-Icon--today:before { @include ms-Icon--today; }
+.ms-Icon--oofReply:before { @include ms-Icon--oofReply; }
+.ms-Icon--voicemailReply:before { @include ms-Icon--voicemailReply; }
+.ms-Icon--voicemailForward:before { @include ms-Icon--voicemailForward; }
+.ms-Icon--ribbon:before { @include ms-Icon--ribbon; }
+.ms-Icon--contact:before { @include ms-Icon--contact; }
+.ms-Icon--eye:before { @include ms-Icon--eye; }
+.ms-Icon--glasses:before { @include ms-Icon--glasses; }
+.ms-Icon--print:before { @include ms-Icon--print; }
+.ms-Icon--room:before { @include ms-Icon--room; }
+.ms-Icon--post:before { @include ms-Icon--post; }
+.ms-Icon--toggle:before { @include ms-Icon--toggle; }
+.ms-Icon--touch:before { @include ms-Icon--touch; }
+.ms-Icon--clock:before { @include ms-Icon--clock; }
+.ms-Icon--fax:before { @include ms-Icon--fax; }
+.ms-Icon--lightning:before { @include ms-Icon--lightning; }
+.ms-Icon--dialpad:before { @include ms-Icon--dialpad; }
+.ms-Icon--phoneTransfer:before { @include ms-Icon--phoneTransfer; }
+.ms-Icon--phoneAdd:before { @include ms-Icon--phoneAdd; }
+.ms-Icon--late:before { @include ms-Icon--late; }
+.ms-Icon--chatAdd:before { @include ms-Icon--chatAdd; }
+.ms-Icon--conflict:before { @include ms-Icon--conflict; }
+.ms-Icon--navigate:before { @include ms-Icon--navigate; }
+.ms-Icon--camera:before { @include ms-Icon--camera; }
+.ms-Icon--filter:before { @include ms-Icon--filter; }
+.ms-Icon--fullscreen:before { @include ms-Icon--fullscreen; }
+.ms-Icon--new:before { @include ms-Icon--new; }
+.ms-Icon--mailEmpty:before { @include ms-Icon--mailEmpty; }
+.ms-Icon--editBox:before { @include ms-Icon--editBox; }
+.ms-Icon--waffle:before { @include ms-Icon--waffle; }
+.ms-Icon--work:before { @include ms-Icon--work; }
+.ms-Icon--eventRecurring:before { @include ms-Icon--eventRecurring; }
+.ms-Icon--cart:before { @include ms-Icon--cart; }
+.ms-Icon--socialListening:before { @include ms-Icon--socialListening; }
+.ms-Icon--mapMarker:before { @include ms-Icon--mapMarker; }
+.ms-Icon--org:before { @include ms-Icon--org; }
+.ms-Icon--replyAlt:before { @include ms-Icon--replyAlt; }
+.ms-Icon--replyAllAlt:before { @include ms-Icon--replyAllAlt; }
+.ms-Icon--eventInfo:before { @include ms-Icon--eventInfo; }
+.ms-Icon--group:before { @include ms-Icon--group; }
+.ms-Icon--money:before { @include ms-Icon--money; }
+.ms-Icon--graph:before { @include ms-Icon--graph; }
+.ms-Icon--noteEdit:before { @include ms-Icon--noteEdit; }
+.ms-Icon--dashboard:before { @include ms-Icon--dashboard; }
+.ms-Icon--mailEdit:before { @include ms-Icon--mailEdit; }
+.ms-Icon--pinLeft:before { @include ms-Icon--pinLeft; }
+.ms-Icon--heart:before { @include ms-Icon--heart; }
+.ms-Icon--heartEmpty:before { @include ms-Icon--heartEmpty; }
+.ms-Icon--picture:before { @include ms-Icon--picture; }
+.ms-Icon--cake:before { @include ms-Icon--cake; }
+.ms-Icon--books:before { @include ms-Icon--books; }
+.ms-Icon--chart:before { @include ms-Icon--chart; }
+.ms-Icon--video:before { @include ms-Icon--video; }
+.ms-Icon--soccer:before { @include ms-Icon--soccer; }
+.ms-Icon--meal:before { @include ms-Icon--meal; }
+.ms-Icon--balloon:before { @include ms-Icon--balloon; }
+.ms-Icon--cat:before { @include ms-Icon--cat; }
+.ms-Icon--dog:before { @include ms-Icon--dog; }
+.ms-Icon--bag:before { @include ms-Icon--bag; }
+.ms-Icon--music:before { @include ms-Icon--music; }
+.ms-Icon--stopwatch:before { @include ms-Icon--stopwatch; }
+.ms-Icon--coffee:before { @include ms-Icon--coffee; }
+.ms-Icon--briefcase:before { @include ms-Icon--briefcase; }
+.ms-Icon--pill:before { @include ms-Icon--pill; }
+.ms-Icon--trophy:before { @include ms-Icon--trophy; }
+.ms-Icon--firstAid:before { @include ms-Icon--firstAid; }
+.ms-Icon--plane:before { @include ms-Icon--plane; }
+.ms-Icon--page:before { @include ms-Icon--page; }
+.ms-Icon--car:before { @include ms-Icon--car; }
+.ms-Icon--dogAlt:before { @include ms-Icon--dogAlt; }
+.ms-Icon--document:before { @include ms-Icon--document; }
+.ms-Icon--metadata:before { @include ms-Icon--metadata; }
+.ms-Icon--pointItem:before { @include ms-Icon--pointItem; }
+.ms-Icon--text:before { @include ms-Icon--text; }
+.ms-Icon--fieldText:before { @include ms-Icon--fieldText; }
+.ms-Icon--fieldNumber:before { @include ms-Icon--fieldNumber; }
+.ms-Icon--dropdown:before { @include ms-Icon--dropdown; }
+.ms-Icon--radioButton:before { @include ms-Icon--radioButton; }
+.ms-Icon--checkbox:before { @include ms-Icon--checkbox; }
+.ms-Icon--story:before { @include ms-Icon--story; }
+.ms-Icon--bold:before { @include ms-Icon--bold; }
+.ms-Icon--italic:before { @include ms-Icon--italic; }
+.ms-Icon--underline:before { @include ms-Icon--underline; }
+.ms-Icon--quote:before { @include ms-Icon--quote; }
+.ms-Icon--styleRemove:before { @include ms-Icon--styleRemove; }
+.ms-Icon--pictureAdd:before { @include ms-Icon--pictureAdd; }
+.ms-Icon--pictureRemove:before { @include ms-Icon--pictureRemove; }
+.ms-Icon--desktop:before { @include ms-Icon--desktop; }
+.ms-Icon--tablet:before { @include ms-Icon--tablet; }
+.ms-Icon--mobile:before { @include ms-Icon--mobile; }
+.ms-Icon--table:before { @include ms-Icon--table; }
+.ms-Icon--hide:before { @include ms-Icon--hide; }
+.ms-Icon--shield:before { @include ms-Icon--shield; }
+.ms-Icon--header:before { @include ms-Icon--header; }
+.ms-Icon--paint:before { @include ms-Icon--paint; }
+.ms-Icon--support:before { @include ms-Icon--support; }
+.ms-Icon--settings:before { @include ms-Icon--settings; }
+.ms-Icon--creditCard:before { @include ms-Icon--creditCard; }
+.ms-Icon--reload:before { @include ms-Icon--reload; }
+.ms-Icon--peopleSecurity:before { @include ms-Icon--peopleSecurity; }
+.ms-Icon--fieldTextBox:before { @include ms-Icon--fieldTextBox; }
+.ms-Icon--multiChoice:before { @include ms-Icon--multiChoice; }
+.ms-Icon--fieldMail:before { @include ms-Icon--fieldMail; }
+.ms-Icon--contactForm:before { @include ms-Icon--contactForm; }
+.ms-Icon--circleHalfFilled:before { @include ms-Icon--circleHalfFilled; }
+.ms-Icon--documentPDF:before { @include ms-Icon--documentPDF; }
+.ms-Icon--bookmark:before { @include ms-Icon--bookmark; }
+.ms-Icon--circleUnfilled:before { @include ms-Icon--circleUnfilled; }
+.ms-Icon--circleFilled:before { @include ms-Icon--circleFilled; }
+.ms-Icon--textBox:before { @include ms-Icon--textBox; }
+.ms-Icon--drop:before { @include ms-Icon--drop; }
+.ms-Icon--sun:before { @include ms-Icon--sun; }
+.ms-Icon--lifesaver:before { @include ms-Icon--lifesaver; }
+.ms-Icon--lifesaverLock:before { @include ms-Icon--lifesaverLock; }
+.ms-Icon--mailUnread:before { @include ms-Icon--mailUnread; }
+.ms-Icon--mailRead:before { @include ms-Icon--mailRead; }
+.ms-Icon--inboxCheck:before { @include ms-Icon--inboxCheck; }
+.ms-Icon--folderSearch:before { @include ms-Icon--folderSearch; }
+.ms-Icon--collapse:before { @include ms-Icon--collapse; }
+.ms-Icon--expand:before { @include ms-Icon--expand; }
+.ms-Icon--ascending:before { @include ms-Icon--ascending; }
+.ms-Icon--descending:before { @include ms-Icon--descending; }
+.ms-Icon--filterClear:before { @include ms-Icon--filterClear; }
+.ms-Icon--checkboxEmpty:before { @include ms-Icon--checkboxEmpty; }
+.ms-Icon--checkboxMixed:before { @include ms-Icon--checkboxMixed; }
+.ms-Icon--boards:before { @include ms-Icon--boards; }
+.ms-Icon--checkboxCheck:before { @include ms-Icon--checkboxCheck; }
+.ms-Icon--frowny:before { @include ms-Icon--frowny; }
+.ms-Icon--lightBulb:before { @include ms-Icon--lightBulb; }
+.ms-Icon--globe:before { @include ms-Icon--globe; }
+.ms-Icon--deviceWipe:before { @include ms-Icon--deviceWipe; }
+.ms-Icon--listCheck:before { @include ms-Icon--listCheck; }
+.ms-Icon--listGroup:before { @include ms-Icon--listGroup; }
+.ms-Icon--timeline:before { @include ms-Icon--timeline; }
+.ms-Icon--fontIncrease:before { @include ms-Icon--fontIncrease; }
+.ms-Icon--fontDecrease:before { @include ms-Icon--fontDecrease; }
+.ms-Icon--fontColor:before { @include ms-Icon--fontColor; }
+.ms-Icon--mailCheck:before { @include ms-Icon--mailCheck; }
+.ms-Icon--mailDown:before { @include ms-Icon--mailDown; }
+.ms-Icon--listCheckbox:before { @include ms-Icon--listCheckbox; }
+.ms-Icon--sunAdd:before { @include ms-Icon--sunAdd; }
+.ms-Icon--sunQuestion:before { @include ms-Icon--sunQuestion; }
+.ms-Icon--chevronThinUp:before { @include ms-Icon--chevronThinUp; }
+.ms-Icon--chevronThinDown:before { @include ms-Icon--chevronThinDown; }
+.ms-Icon--chevronThinLeft:before { @include ms-Icon--chevronThinLeft; }
+.ms-Icon--chevronThinRight:before { @include ms-Icon--chevronThinRight; }
+.ms-Icon--chevronThickUp:before { @include ms-Icon--chevronThickUp; }
+.ms-Icon--chevronThickDown:before { @include ms-Icon--chevronThickDown; }
+.ms-Icon--chevronThickLeft:before { @include ms-Icon--chevronThickLeft; }
+.ms-Icon--chevronThickRight:before { @include ms-Icon--chevronThickRight; }
+.ms-Icon--linkRemove:before { @include ms-Icon--linkRemove; }
+.ms-Icon--alertOutline:before { @include ms-Icon--alertOutline; }
+.ms-Icon--documentLandscape:before { @include ms-Icon--documentLandscape; }
+.ms-Icon--documentAdd:before { @include ms-Icon--documentAdd; }
+.ms-Icon--toggleMiddle:before { @include ms-Icon--toggleMiddle; }
+.ms-Icon--embed:before { @include ms-Icon--embed; }
+.ms-Icon--listNumbered:before { @include ms-Icon--listNumbered; }
+.ms-Icon--peopleCheck:before { @include ms-Icon--peopleCheck; }
+.ms-Icon--caretUpOutline:before { @include ms-Icon--caretUpOutline; }
+.ms-Icon--caretDownOutline:before { @include ms-Icon--caretDownOutline; }
+.ms-Icon--caretLeftOutline:before { @include ms-Icon--caretLeftOutline; }
+.ms-Icon--caretRightOutline:before { @include ms-Icon--caretRightOutline; }
+.ms-Icon--mailSync:before { @include ms-Icon--mailSync; }
+.ms-Icon--mailError:before { @include ms-Icon--mailError; }
+.ms-Icon--mailPause:before { @include ms-Icon--mailPause; }
+.ms-Icon--peopleSync:before { @include ms-Icon--peopleSync; }
+.ms-Icon--peopleError:before { @include ms-Icon--peopleError; }
+.ms-Icon--peoplePause:before { @include ms-Icon--peoplePause; }
+.ms-Icon--circleBall:before { @include ms-Icon--circleBall; }
+.ms-Icon--circleBalloons:before { @include ms-Icon--circleBalloons; }
+.ms-Icon--circleCar:before { @include ms-Icon--circleCar; }
+.ms-Icon--circleCat:before { @include ms-Icon--circleCat; }
+.ms-Icon--circleCoffee:before { @include ms-Icon--circleCoffee; }
+.ms-Icon--circleDog:before { @include ms-Icon--circleDog; }
+.ms-Icon--circleLightning:before { @include ms-Icon--circleLightning; }
+.ms-Icon--circlePill:before { @include ms-Icon--circlePill; }
+.ms-Icon--circlePlane:before { @include ms-Icon--circlePlane; }
+.ms-Icon--circlePoodle:before { @include ms-Icon--circlePoodle; }
+.ms-Icon--checkPeople:before { @include ms-Icon--checkPeople; }
+.ms-Icon--documentSearch:before { @include ms-Icon--documentSearch; }
+.ms-Icon--sortLines:before { @include ms-Icon--sortLines; }
+.ms-Icon--calendarPublic:before { @include ms-Icon--calendarPublic; }
+.ms-Icon--contactPublic:before { @include ms-Icon--contactPublic; }
+.ms-Icon--classNotebook:before { @include ms-Icon--classNotebook; }
+.ms-Icon--triangleUp:before { @include ms-Icon--triangleUp; }
+.ms-Icon--triangleRight:before { @include ms-Icon--triangleRight; }
+.ms-Icon--triangleDown:before { @include ms-Icon--triangleDown; }
+.ms-Icon--triangleLeft:before { @include ms-Icon--triangleLeft; }
+.ms-Icon--triangleEmptyUp:before { @include ms-Icon--triangleEmptyUp; }
+.ms-Icon--triangleEmptyRight:before { @include ms-Icon--triangleEmptyRight; }
+.ms-Icon--triangleEmptyDown:before { @include ms-Icon--triangleEmptyDown; }
+.ms-Icon--triangleEmptyLeft:before { @include ms-Icon--triangleEmptyLeft; }
+.ms-Icon--filePDF:before { @include ms-Icon--filePDF; }
+.ms-Icon--fileImage:before { @include ms-Icon--fileImage; }
+.ms-Icon--fileDocument:before { @include ms-Icon--fileDocument; }
+.ms-Icon--listGroup2:before { @include ms-Icon--listGroup2; }
+.ms-Icon--copy:before { @include ms-Icon--copy; }
+.ms-Icon--creditCardOutline:before { @include ms-Icon--creditCardOutline; }
+.ms-Icon--mailPublic:before { @include ms-Icon--mailPublic; }
+.ms-Icon--folderPublic:before { @include ms-Icon--folderPublic; }
+.ms-Icon--teamwork:before { @include ms-Icon--teamwork; }
+.ms-Icon--move:before { @include ms-Icon--move; }
+.ms-Icon--classroom:before { @include ms-Icon--classroom; }
+.ms-Icon--menu2:before { @include ms-Icon--menu2; }
+.ms-Icon--plus2:before { @include ms-Icon--plus2; }
+.ms-Icon--tag:before { @include ms-Icon--tag; }
+.ms-Icon--arrowUp2:before { @include ms-Icon--arrowUp2; }
+.ms-Icon--arrowDown2:before { @include ms-Icon--arrowDown2; }
+.ms-Icon--circlePlus:before { @include ms-Icon--circlePlus; }
+.ms-Icon--circleInfo:before { @include ms-Icon--circleInfo; }
+.ms-Icon--section:before { @include ms-Icon--section; }
+.ms-Icon--sections:before { @include ms-Icon--sections; }
+.ms-Icon--at:before { @include ms-Icon--at; }
+.ms-Icon--arrowUpRight:before { @include ms-Icon--arrowUpRight; }
+.ms-Icon--arrowDownRight:before { @include ms-Icon--arrowDownRight; }
+.ms-Icon--arrowDownLeft:before { @include ms-Icon--arrowDownLeft; }
+.ms-Icon--arrowUpLeft:before { @include ms-Icon--arrowUpLeft; }
+.ms-Icon--bundle:before { @include ms-Icon--bundle; }
+.ms-Icon--pictureEdit:before { @include ms-Icon--pictureEdit; }
+.ms-Icon--protectionCenter:before { @include ms-Icon--protectionCenter; }
+.ms-Icon--alert2:before { @include ms-Icon--alert2; }
+
+//*-- end
+// Modifier: Place the icon in a circle.
+.ms-Icon--circle {
+ @include ms-Icon--circle;
+}
+
+// Modifiers: Some icons require custom alignment when placed in circles.
+.ms-Icon--circle {
+ &.ms-Icon--star:before {
+ top: -2%;
+ left: 1%;
+ }
+ &.ms-Icon--person:before {
+ top: -2%;
+ left: -3%;
+ }
+ &.ms-Icon--alert:before {
+ top: -4%;
+ }
+ &.ms-Icon--mailOpen:before {
+ top: -5%;
+ }
+ &.ms-Icon--people:before {
+ top: -4%;
+ left: -7%;
+ }
+ &.ms-Icon--bell:before {
+ top: -3%;
+ }
+ &.ms-Icon--scheduling:before {
+ top: -3%;
+ left: 6%;
+ }
+ &.ms-Icon--documents:before {
+ top: -1%;
+ left: -2%;
+ }
+ &.ms-Icon--listBullets:before {
+ top: -1%;
+ left: 5%;
+ }
+ &.ms-Icon--panel:before {
+ left: -2%;
+ }
+ &.ms-Icon--popout:before {
+ top: -2%;
+ left: -2%;
+ }
+ &.ms-Icon--home:before {
+ top: -4%;
+ }
+ &.ms-Icon--favorites:before {
+ top: -2%;
+ left: 2%;
+ }
+ &.ms-Icon--phone:before {
+ top: -2%;
+ left: -2%;
+ }
+ &.ms-Icon--mailSend:before {
+ left: -10%;
+ }
+ &.ms-Icon--pencil:before {
+ top: -2%;
+ left: 3%;
+ }
+ &.ms-Icon--flag:before {
+ left: 3%;
+ }
+ &.ms-Icon--miniatures:before {
+ left: -3%;
+ }
+ &.ms-Icon--voicemail:before {
+ top: 2%;
+ left: -7%;
+ }
+ &.ms-Icon--onlineAdd:before {
+ top: -1%;
+ left: 2%;
+ }
+ &.ms-Icon--pinDown:before {
+ top: 5%;
+ }
+ &.ms-Icon--gear:before {
+ left: 2%;
+ }
+ &.ms-Icon--check:before {
+ top: 3%;
+ }
+ &.ms-Icon--ellipsis:before {
+ top: 2%;
+ left: -12%;
+ }
+ &.ms-Icon--directions:before {
+ left: 10%;
+ }
+ &.ms-Icon--microphone:before {
+ top: -3%;
+ }
+ &.ms-Icon--caretDown:before {
+ top: 5%;
+ left: 2%;
+ }
+ &.ms-Icon--caretLeft:before {
+ left: -6%;
+ }
+ &.ms-Icon--caretRight:before {
+ left: 6%;
+ }
+ &.ms-Icon--caretUpLeft:before {
+ top: 5%;
+ left: 5%;
+ }
+ &.ms-Icon--caretUpRight:before {
+ top: 5%;
+ left: -3%;
+ }
+ &.ms-Icon--caretDownRight:before {
+ left: -3%;
+ }
+ &.ms-Icon--caretDownLeft:before {
+ left: 4%;
+ }
+ &.ms-Icon--note:before {
+ top: 2%;
+ left: -3%;
+ }
+ &.ms-Icon--noteReply:before {
+ top: 6%;
+ left: 3%;
+ }
+ &.ms-Icon--noteForward:before {
+ top: 6%;
+ }
+ &.ms-Icon--key:before {
+ top: 5%;
+ left: 1%;
+ }
+ &.ms-Icon--tile:before {
+ top: -1%;
+ left: -18%;
+ }
+ &.ms-Icon--taskRecurring:before {
+ top: 2%;
+ left: -1%;
+ }
+ &.ms-Icon--starEmpty:before {
+ top: -4%;
+ left: 1%;
+ }
+ &.ms-Icon--documentReply:before {
+ top: -2%;
+ left: 7%;
+ }
+ &.ms-Icon--documentForward:before {
+ left: 5%;
+ }
+ &.ms-Icon--partner:before {
+ top: -2%;
+ }
+ &.ms-Icon--reactivate:before {
+ top: -2%;
+ left: 6%;
+ }
+ &.ms-Icon--sort:before {
+ left: -19%;
+ }
+ &.ms-Icon--personAdd:before {
+ top: -2%;
+ left: 6%;
+ }
+ &.ms-Icon--chevronDown:before {
+ top: 4%;
+ }
+ &.ms-Icon--chevronLeft:before {
+ left: -5%;
+ }
+ &.ms-Icon--chevronRight:before {
+ left: 4%;
+ }
+ &.ms-Icon--peopleAdd:before {
+ top: -5%;
+ left: -12%;
+ }
+ &.ms-Icon--newsfeed:before {
+ left: -4%;
+ }
+ &.ms-Icon--notebook:before {
+ left: -4%;
+ }
+ &.ms-Icon--link:before {
+ top: 2%;
+ left: -18%;
+ }
+ &.ms-Icon--chevronsDown:before {
+ top: 5%;
+ }
+ &.ms-Icon--chevronsLeft:before {
+ left: -5%;
+ }
+ &.ms-Icon--chevronsRight:before {
+ left: 4%;
+ }
+ &.ms-Icon--personRemove:before {
+ left: 5%;
+ }
+ &.ms-Icon--receiptForward:before {
+ left: -20%;
+ }
+ &.ms-Icon--receiptReply:before {
+ left: -20%;
+ }
+ &.ms-Icon--receiptCheck:before {
+ left: -20%;
+ }
+ &.ms-Icon--peopleRemove:before {
+ top: -3%;
+ left: -12%;
+ }
+ &.ms-Icon--merge:before {
+ top: 2%;
+ }
+ &.ms-Icon--split:before {
+ top: 2%;
+ }
+ &.ms-Icon--eventCancel:before {
+ left: -2%;
+ }
+ &.ms-Icon--today:before {
+ top: -2%;
+ }
+ &.ms-Icon--oofReply:before {
+ left: 5%;
+ }
+ &.ms-Icon--voicemailReply:before {
+ top: 4%;
+ left: -25%;
+ }
+ &.ms-Icon--voicemailForward:before {
+ top: 4%;
+ left: -20%;
+ }
+ &.ms-Icon--eye:before {
+ top: -4%;
+ }
+ &.ms-Icon--post:before {
+ top: -4%;
+ left: 4%;
+ }
+ &.ms-Icon--fax:before {
+ top: -3%;
+ left: -2%;
+ }
+ &.ms-Icon--lightning:before {
+ top: 2%;
+ left: 1%;
+ }
+ &.ms-Icon--filter:before {
+ top: 7%;
+ }
+ &.ms-Icon--cart:before {
+ left: 3%;
+ }
+ &.ms-Icon--socialListening:before {
+ top: 2%;
+ }
+ &.ms-Icon--mapMarker:before {
+ top: 2%;
+ }
+ &.ms-Icon--replyAllAlt:before {
+ left: -16%;
+ }
+ &.ms-Icon--group:before {
+ left: -33%;
+ }
+ &.ms-Icon--money:before {
+ left: -8%;
+ }
+ &.ms-Icon--noteEdit:before {
+ left: 4%;
+ }
+ &.ms-Icon--mailEdit:before {
+ top: 3%;
+ left: 7%;
+ }
+ &.ms-Icon--pinLeft:before {
+ left: -6%;
+ }
+ &.ms-Icon--heart:before {
+ top: 5%;
+ }
+ &.ms-Icon--heartEmpty:before {
+ top: 5%;
+ }
+ &.ms-Icon--cake:before {
+ top: -5%;
+ }
+ &.ms-Icon--books:before {
+ left: -8%;
+ }
+ &.ms-Icon--video:before {
+ top: -3%;
+ left: 3%;
+ }
+ &.ms-Icon--balloon:before {
+ top: 4%;
+ left: -1%;
+ }
+ &.ms-Icon--music:before {
+ top: -2%;
+ left: -5%;
+ }
+ &.ms-Icon--stopwatch:before {
+ top: -3%;
+ left: 3%;
+ }
+ &.ms-Icon--coffee:before {
+ top: -3%;
+ left: 3%;
+ }
+ &.ms-Icon--plane:before {
+ left: 4%;
+ }
+ &.ms-Icon--dogAlt:before {
+ left: -15%;
+ }
+ &.ms-Icon--metadata:before {
+ top: -4%;
+ left: 4%;
+ }
+ &.ms-Icon--text:before {
+ top: -4%;
+ left: 10%;
+ }
+ &.ms-Icon--fieldText:before {
+ left: -14%;
+ }
+ &.ms-Icon--fieldNumber:before {
+ left: -14%;
+ }
+ &.ms-Icon--dropdown:before {
+ left: -14%;
+ }
+ &.ms-Icon--story:before {
+ left: -5%;
+ }
+ &.ms-Icon--bold:before {
+ left: 4%;
+ }
+ &.ms-Icon--underline:before {
+ top: 4%;
+ }
+ &.ms-Icon--quote:before {
+ left: -4%;
+ }
+ &.ms-Icon--styleRemove:before {
+ top: 4%;
+ left: 5%;
+ }
+ &.ms-Icon--pictureAdd:before {
+ left: -6%;
+ }
+ &.ms-Icon--pictureRemove:before {
+ left: -6%;
+ }
+ &.ms-Icon--mobile:before {
+ left: -3%;
+ }
+ &.ms-Icon--hide:before {
+ top: -4%;
+ }
+ &.ms-Icon--header:before {
+ left: -9%;
+ }
+ &.ms-Icon--msn:before {
+ left: 3%;
+ }
+ &.ms-Icon--peopleCheck:before {
+ left: -7%;
+ top: -3%;
+ }
+ &.ms-Icon--caretDownOutline:before {
+ top: 6%;
+ }
+ &.ms-Icon--caretLeftOutline:before {
+ left: -5%;
+ }
+ &.ms-Icon--caretRightOutline:before {
+ left: 5%;
+ }
+ &.ms-Icon--sway:before {
+ left: -3%;
+ }
+ &.ms-Icon--mailSync:before {
+ left: 8%;
+ top: 3%;
+ }
+ &.ms-Icon--peopleSync:before {
+ left: -8%;
+ }
+ &.ms-Icon--peopleError:before {
+ left: -8%;
+ }
+ &.ms-Icon--peoplePause:before {
+ left: -8%;
+ }
+ &.ms-Icon--documentSearch:before {
+ left: 8%;
+ }
+ &.ms-Icon--dynamicsMarketing:before {
+ left: -8%;
+ }
+}
diff --git a/dist/sass/Fabric.Icons.RTL.Output.scss b/dist/sass/Fabric.Icons.RTL.Output.scss
new file mode 100644
index 000000000..d7dfcaf13
--- /dev/null
+++ b/dist/sass/Fabric.Icons.RTL.Output.scss
@@ -0,0 +1,114 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// RTL overrides for Fabricicons
+
+
+@import 'Fabric.Icons.Output';
+
+// Flip icons with 'directionality'
+.ms-Icon--question,
+.ms-Icon--calendar,
+.ms-Icon--folder,
+.ms-Icon--chat,
+.ms-Icon--listBullets,
+.ms-Icon--folderMove,
+.ms-Icon--mailSend,
+.ms-Icon--reply,
+.ms-Icon--play,
+.ms-Icon--replyAll,
+.ms-Icon--refresh,
+.ms-Icon--questionReverse,
+.ms-Icon--notRecurring,
+.ms-Icon--tasks,
+.ms-Icon--check,
+.ms-Icon--arrowLeft,
+.ms-Icon--arrowRight,
+.ms-Icon--directions,
+.ms-Icon--caretLeft,
+.ms-Icon--caretRight,
+.ms-Icon--caretUpLeft,
+.ms-Icon--caretUpRight,
+.ms-Icon--caretDownRight,
+.ms-Icon--caretDownLeft,
+.ms-Icon--note,
+.ms-Icon--noteReply,
+.ms-Icon--noteForward,
+.ms-Icon--taskRecurring,
+.ms-Icon--documentReply,
+.ms-Icon--documentForward,
+.ms-Icon--reactivate,
+.ms-Icon--chevronLeft,
+.ms-Icon--chevronRight,
+.ms-Icon--notebook,
+.ms-Icon--chevronsLeft,
+.ms-Icon--chevronsRight,
+.ms-Icon--receiptForward,
+.ms-Icon--receiptReply,
+.ms-Icon--receiptCheck,
+.ms-Icon--eventShare,
+.ms-Icon--oofReply,
+.ms-Icon--voicemailReply,
+.ms-Icon--voicemailForward,
+.ms-Icon--post,
+.ms-Icon--toggle,
+.ms-Icon--late,
+.ms-Icon--eventRecurring,
+.ms-Icon--cart,
+.ms-Icon--socialListening,
+.ms-Icon--replyAlt,
+.ms-Icon--replyAllAlt,
+.ms-Icon--graph,
+.ms-Icon--pinLeft,
+.ms-Icon--chart,
+.ms-Icon--page,
+.ms-Icon--document,
+.ms-Icon--metadata,
+.ms-Icon--pointItem,
+.ms-Icon--dropdown,
+.ms-Icon--checkbox,
+.ms-Icon--reload,
+.ms-Icon--multiChoice,
+.ms-Icon--contactForm,
+.ms-Icon--inboxCheck,
+.ms-Icon--checkboxCheck,
+.ms-Icon--folderSearch,
+.ms-Icon--listCheck,
+.ms-Icon--listGroup,
+.ms-Icon--timeline
+.ms-Icon--mailCheck,
+.ms-Icon--listCheckbox,
+.ms-Icon--sunQuestion,
+.ms-Icon--chevronThinLeft,
+.ms-Icon--chevronThinRight,
+.ms-Icon--chevronThickLeft,
+.ms-Icon--chevronThickRight,
+.ms-Icon--documentLandscape,
+.ms-Icon--peopleCheck,
+.ms-Icon--caretLeftOutline,
+.ms-Icon--caretRightOutline,
+.ms-Icon--mailSync,
+.ms-Icon--peopleSync,
+.ms-Icon--checkPeople,
+.ms-Icon--sortLines,
+.ms-Icon--triangleRight:before,
+.ms-Icon--triangleLeft:before,
+.ms-Icon--contactPublic:before,
+.ms-Icon--triangleEmptyRight:before,
+.ms-Icon--triangleEmptyLeft:before,
+.ms-Icon--fileDocument:before,
+.ms-Icon--listGroup2:before,
+.ms-Icon--copy:before,
+.ms-Icon--sections:before,
+.ms-Icon--arrowUpRight:before,
+.ms-Icon--arrowDownRight:before,
+.ms-Icon--arrowDownLeft:before,
+.ms-Icon--arrowUpLeft:before,
+.ms-Icon--bundle:before {
+ -moz-transform: scaleX(-1);
+ -webkit-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ transform: scaleX(-1);
+}
\ No newline at end of file
diff --git a/dist/sass/Fabric.RTL.scss b/dist/sass/Fabric.RTL.scss
new file mode 100644
index 000000000..b3e6562fa
--- /dev/null
+++ b/dist/sass/Fabric.RTL.scss
@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// OSS Framework Design Language
+// --------------------------------------------------
+// Fabric Core Module Loader (RTL)
+
+// Common utilities
+@import './Fabric.Utilities.Output';
+@import './Fabric.ZIndex.Variables';
+@import './Fabric.Mixins';
+@import './Fabric.Mixins.RTL';
+
+// Colors
+@import './Fabric.Color.Variables';
+@import './Fabric.Color.Mixins.Output';
+
+// Typography
+@import './Fabric.Typography.Variables';
+@import './Fabric.Typography.Fonts.Output';
+@import './Fabric.Typography.Output';
+@import './Fabric.Typography.Language.Overrides.Output';
+
+// Icons
+@import './Fabric.Icons.Font.Output';
+@import './Fabric.Icons.RTL.Output';
+
+// Animations
+@import './Fabric.Animations.RTL.Output';
+
+// Responsive
+@import './Fabric.Responsive.Variables';
+@import './Fabric.Responsive.Utilities.Output';
+
+// Grid
+@import './Fabric.Grid.Output';
+
+// Office colors
+@import './Office.Color.Variables';
\ No newline at end of file
diff --git a/dist/sass/Fabric.Responsive.Utilities.Output.scss b/dist/sass/Fabric.Responsive.Utilities.Output.scss
new file mode 100644
index 000000000..caa7c267b
--- /dev/null
+++ b/dist/sass/Fabric.Responsive.Utilities.Output.scss
@@ -0,0 +1,1022 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Responsive utilities based on defined variables, component visibility,
+// and size for different displays.
+@import "./Fabric.Responsive.Variables";
+@import "./Fabric.Responsive.Utilities.Variables";
+
+//== Responsive visiblity classes
+//
+
+// Hidden on small
+@media (max-width: $ms-screen-sm-max) {
+ .ms-u-hiddenSm,
+ .ms-u-hiddenMdDown,
+ .ms-u-hiddenLgDown,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+// Hidden on medium
+@media (min-width: $ms-screen-md-min) and (max-width: $ms-screen-md-max) {
+ .ms-u-hiddenMd,
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenMdDown,
+ .ms-u-hiddenLgDown,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+// Hidden on large
+@media (min-width: $ms-screen-lg-min) and (max-width: $ms-screen-lg-max) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLg,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenLgDown,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+// Hidden on extra large
+@media (min-width: $ms-screen-xl-min) and (max-width: $ms-screen-xl-max) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenXl,
+ .ms-u-hiddenXlUp,
+ .ms-u-hiddenXlDown,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+// Hidden on extra extra large
+@media (min-width: $ms-screen-xxl-min) and (max-width: $ms-screen-xxl-max) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenXlUp,
+ .ms-u-hiddenXxl,
+ .ms-u-hiddenXxlUp,
+ .ms-u-hiddenXxlDown {
+ display: none !important;
+ }
+}
+
+// Hidden on extra extra extra large
+@media (min-width: $ms-screen-xxxl-min) {
+ .ms-u-hiddenMdUp,
+ .ms-u-hiddenLgUp,
+ .ms-u-hiddenXlUp,
+ .ms-u-hiddenXxlUp,
+ .ms-u-hiddenXxxl {
+ display: none !important;
+ }
+}
+
+
+//== Responsive sizes
+//
+// These are all based on a 12 column grid. For example,
+// ms-u-sm6 sets the width to 50% (6/12) on small screens.
+
+// Small screens (default)
+.ms-u-sm12 {
+ @include ms-u-sm12;
+}
+.ms-u-sm11 {
+ @include ms-u-sm11;
+}
+.ms-u-sm10 {
+ @include ms-u-sm10;
+}
+.ms-u-sm9 {
+ @include ms-u-sm9;
+}
+.ms-u-sm8 {
+ @include ms-u-sm8;
+}
+.ms-u-sm7 {
+ @include ms-u-sm7;
+}
+.ms-u-sm6 {
+ @include ms-u-sm6;
+}
+.ms-u-sm5 {
+ @include ms-u-sm5;
+}
+.ms-u-sm4 {
+ @include ms-u-sm4;
+}
+.ms-u-sm3 {
+ @include ms-u-sm3;
+}
+.ms-u-sm2 {
+ @include ms-u-sm2;
+}
+.ms-u-sm1 {
+ @include ms-u-sm1;
+}
+.ms-u-smPull12 {
+ @include ms-u-smPull12;
+}
+.ms-u-smPull11 {
+ @include ms-u-smPull11;
+}
+.ms-u-smPull10 {
+ @include ms-u-smPull10;
+}
+.ms-u-smPull9 {
+ @include ms-u-smPull9;
+}
+.ms-u-smPull8 {
+ @include ms-u-smPull8;
+}
+.ms-u-smPull7 {
+ @include ms-u-smPull7;
+}
+.ms-u-smPull6 {
+ @include ms-u-smPull6;
+}
+.ms-u-smPull5 {
+ @include ms-u-smPull5;
+}
+.ms-u-smPull4 {
+ @include ms-u-smPull4;
+}
+.ms-u-smPull3 {
+ @include ms-u-smPull3;
+}
+.ms-u-smPull2 {
+ @include ms-u-smPull2;
+}
+.ms-u-smPull1 {
+ @include ms-u-smPull1;
+}
+.ms-u-smPull0 {
+ @include ms-u-smPull0;
+}
+.ms-u-smPush12 {
+ @include ms-u-smPush12;
+}
+.ms-u-smPush11 {
+ @include ms-u-smPush11;
+}
+.ms-u-smPush10 {
+ @include ms-u-smPush10;
+}
+.ms-u-smPush9 {
+ @include ms-u-smPush9;
+}
+.ms-u-smPush8 {
+ @include ms-u-smPush8;
+}
+.ms-u-smPush7 {
+ @include ms-u-smPush7;
+}
+.ms-u-smPush6 {
+ @include ms-u-smPush6;
+}
+.ms-u-smPush5 {
+ @include ms-u-smPush5;
+}
+.ms-u-smPush4 {
+ @include ms-u-smPush4;
+}
+.ms-u-smPush3 {
+ @include ms-u-smPush3;
+}
+.ms-u-smPush2 {
+ @include ms-u-smPush2;
+}
+.ms-u-smPush1 {
+ @include ms-u-smPush1;
+}
+.ms-u-smPush0 {
+ @include ms-u-smPush0;
+}
+
+// Small Offset classes 0 ... 11
+.ms-u-smOffset11 {
+ margin-left: 91.66666666666666%;
+}
+.ms-u-smOffset10 {
+ margin-left: 83.33333333333334%;
+}
+.ms-u-smOffset9 {
+ margin-left: 75%;
+}
+.ms-u-smOffset8 {
+ margin-left: 66.66666666666666%;
+}
+.ms-u-smOffset7 {
+ margin-left: 58.333333333333336%;
+}
+.ms-u-smOffset6 {
+ margin-left: 50%;
+}
+.ms-u-smOffset5 {
+ margin-left: 41.66666666666667%;
+}
+.ms-u-smOffset4 {
+ margin-left: 33.33333333333333%;
+}
+.ms-u-smOffset3 {
+ margin-left: 25%;
+}
+.ms-u-smOffset2 {
+ margin-left: 16.666666666666664%;
+}
+.ms-u-smOffset1 {
+ margin-left: 8.333333333333332%;
+}
+.ms-u-smOffset0 {
+ margin-left: 0;
+}
+
+// Medium screens
+@media (min-width: $ms-screen-md-min) {
+ .ms-u-md12 {
+ @include ms-u-md12;
+ }
+ .ms-u-md11 {
+ @include ms-u-md11;
+ }
+ .ms-u-md10 {
+ @include ms-u-md10;
+ }
+ .ms-u-md9 {
+ @include ms-u-md9;
+ }
+ .ms-u-md8 {
+ @include ms-u-md8;
+ }
+ .ms-u-md7 {
+ @include ms-u-md7;
+ }
+ .ms-u-md6 {
+ @include ms-u-md6;
+ }
+ .ms-u-md5 {
+ @include ms-u-md5;
+ }
+ .ms-u-md4 {
+ @include ms-u-md4;
+ }
+ .ms-u-md3 {
+ @include ms-u-md3;
+ }
+ .ms-u-md2 {
+ @include ms-u-md2;
+ }
+ .ms-u-md1 {
+ @include ms-u-md1;
+ }
+ .ms-u-mdPull12 {
+ @include ms-u-mdPull12;
+ }
+ .ms-u-mdPull11 {
+ @include ms-u-mdPull11;
+ }
+ .ms-u-mdPull10 {
+ @include ms-u-mdPull10;
+ }
+ .ms-u-mdPull9 {
+ @include ms-u-mdPull9;
+ }
+ .ms-u-mdPull8 {
+ @include ms-u-mdPull8;
+ }
+ .ms-u-mdPull7 {
+ @include ms-u-mdPull7;
+ }
+ .ms-u-mdPull6 {
+ @include ms-u-mdPull6;
+ }
+ .ms-u-mdPull5 {
+ @include ms-u-mdPull5;
+ }
+ .ms-u-mdPull4 {
+ @include ms-u-mdPull4;
+ }
+ .ms-u-mdPull3 {
+ @include ms-u-mdPull3;
+ }
+ .ms-u-mdPull2 {
+ @include ms-u-mdPull2;
+ }
+ .ms-u-mdPull1 {
+ @include ms-u-mdPull1;
+ }
+ .ms-u-mdPull0 {
+ @include ms-u-mdPull0;
+ }
+ .ms-u-mdPush12 {
+ @include ms-u-mdPush12;
+ }
+ .ms-u-mdPush11 {
+ @include ms-u-mdPush11;
+ }
+ .ms-u-mdPush10 {
+ @include ms-u-mdPush10;
+ }
+ .ms-u-mdPush9 {
+ @include ms-u-mdPush9;
+ }
+ .ms-u-mdPush8 {
+ @include ms-u-mdPush8;
+ }
+ .ms-u-mdPush7 {
+ @include ms-u-mdPush7;
+ }
+ .ms-u-mdPush6 {
+ @include ms-u-mdPush6;
+ }
+ .ms-u-mdPush5 {
+ @include ms-u-mdPush5;
+ }
+ .ms-u-mdPush4 {
+ @include ms-u-mdPush4;
+ }
+ .ms-u-mdPush3 {
+ @include ms-u-mdPush3;
+ }
+ .ms-u-mdPush2 {
+ @include ms-u-mdPush2;
+ }
+ .ms-u-mdPush1 {
+ @include ms-u-mdPush1;
+ }
+ .ms-u-mdPush0 {
+ @include ms-u-mdPush0;
+ }
+
+ // Medium Offset classes 0 ... 11
+ .ms-u-mdOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-mdOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-mdOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-mdOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-mdOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-mdOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-mdOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-mdOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-mdOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-mdOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-mdOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-mdOffset0 {
+ margin-left: 0;
+ }
+}
+
+// Large screens
+@media (min-width: $ms-screen-lg-min) {
+ .ms-u-lg12 {
+ @include ms-u-lg12;
+ }
+ .ms-u-lg11 {
+ @include ms-u-lg11;
+ }
+ .ms-u-lg10 {
+ @include ms-u-lg10;
+ }
+ .ms-u-lg9 {
+ @include ms-u-lg9;
+ }
+ .ms-u-lg8 {
+ @include ms-u-lg8;
+ }
+ .ms-u-lg7 {
+ @include ms-u-lg7;
+ }
+ .ms-u-lg6 {
+ @include ms-u-lg6;
+ }
+ .ms-u-lg5 {
+ @include ms-u-lg5;
+ }
+ .ms-u-lg4 {
+ @include ms-u-lg4;
+ }
+ .ms-u-lg3 {
+ @include ms-u-lg3;
+ }
+ .ms-u-lg2 {
+ @include ms-u-lg2;
+ }
+ .ms-u-lg1 {
+ @include ms-u-lg1;
+ }
+ .ms-u-lgPull12 {
+ @include ms-u-lgPull12;
+ }
+ .ms-u-lgPull11 {
+ @include ms-u-lgPull11;
+ }
+ .ms-u-lgPull10 {
+ @include ms-u-lgPull10;
+ }
+ .ms-u-lgPull9 {
+ @include ms-u-lgPull9;
+ }
+ .ms-u-lgPull8 {
+ @include ms-u-lgPull8;
+ }
+ .ms-u-lgPull7 {
+ @include ms-u-lgPull7;
+ }
+ .ms-u-lgPull6 {
+ @include ms-u-lgPull6;
+ }
+ .ms-u-lgPull5 {
+ @include ms-u-lgPull5;
+ }
+ .ms-u-lgPull4 {
+ @include ms-u-lgPull4;
+ }
+ .ms-u-lgPull3 {
+ @include ms-u-lgPull3;
+ }
+ .ms-u-lgPull2 {
+ @include ms-u-lgPull2;
+ }
+ .ms-u-lgPull1 {
+ @include ms-u-lgPull1;
+ }
+ .ms-u-lgPull0 {
+ @include ms-u-lgPull0;
+ }
+ .ms-u-lgPush12 {
+ @include ms-u-lgPush12;
+ }
+ .ms-u-lgPush11 {
+ @include ms-u-lgPush11;
+ }
+ .ms-u-lgPush10 {
+ @include ms-u-lgPush10;
+ }
+ .ms-u-lgPush9 {
+ @include ms-u-lgPush9;
+ }
+ .ms-u-lgPush8 {
+ @include ms-u-lgPush8;
+ }
+ .ms-u-lgPush7 {
+ @include ms-u-lgPush7;
+ }
+ .ms-u-lgPush6 {
+ @include ms-u-lgPush6;
+ }
+ .ms-u-lgPush5 {
+ @include ms-u-lgPush5;
+ }
+ .ms-u-lgPush4 {
+ @include ms-u-lgPush4;
+ }
+ .ms-u-lgPush3 {
+ @include ms-u-lgPush3;
+ }
+ .ms-u-lgPush2 {
+ @include ms-u-lgPush2;
+ }
+ .ms-u-lgPush1 {
+ @include ms-u-lgPush1;
+ }
+ .ms-u-lgPush0 {
+ @include ms-u-lgPush0;
+ }
+
+ // Large Offset classes 0 ... 11
+ .ms-u-lgOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-lgOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-lgOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-lgOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-lgOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-lgOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-lgOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-lgOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-lgOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-lgOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-lgOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-lgOffset0 {
+ margin-left: 0;
+ }
+}
+
+// Extra large screens
+@media (min-width: $ms-screen-xl-min) {
+ .ms-u-xl12 {
+ @include ms-u-xl12;
+ }
+ .ms-u-xl11 {
+ @include ms-u-xl11;
+ }
+ .ms-u-xl10 {
+ @include ms-u-xl10;
+ }
+ .ms-u-xl9 {
+ @include ms-u-xl9;
+ }
+ .ms-u-xl8 {
+ @include ms-u-xl8;
+ }
+ .ms-u-xl7 {
+ @include ms-u-xl7;
+ }
+ .ms-u-xl6 {
+ @include ms-u-xl6;
+ }
+ .ms-u-xl5 {
+ @include ms-u-xl5;
+ }
+ .ms-u-xl4 {
+ @include ms-u-xl4;
+ }
+ .ms-u-xl3 {
+ @include ms-u-xl3;
+ }
+ .ms-u-xl2 {
+ @include ms-u-xl2;
+ }
+ .ms-u-xl1 {
+ @include ms-u-xl1;
+ }
+ .ms-u-xlPull12 {
+ @include ms-u-xlPull12;
+ }
+ .ms-u-xlPull11 {
+ @include ms-u-xlPull11;
+ }
+ .ms-u-xlPull10 {
+ @include ms-u-xlPull10;
+ }
+ .ms-u-xlPull9 {
+ @include ms-u-xlPull9;
+ }
+ .ms-u-xlPull8 {
+ @include ms-u-xlPull8;
+ }
+ .ms-u-xlPull7 {
+ @include ms-u-xlPull7;
+ }
+ .ms-u-xlPull6 {
+ @include ms-u-xlPull6;
+ }
+ .ms-u-xlPull5 {
+ @include ms-u-xlPull5;
+ }
+ .ms-u-xlPull4 {
+ @include ms-u-xlPull4;
+ }
+ .ms-u-xlPull3 {
+ @include ms-u-xlPull3;
+ }
+ .ms-u-xlPull2 {
+ @include ms-u-xlPull2;
+ }
+ .ms-u-xlPull1 {
+ @include ms-u-xlPull1;
+ }
+ .ms-u-xlPull0 {
+ @include ms-u-xlPull0;
+ }
+ .ms-u-xlPush12 {
+ @include ms-u-xlPush12;
+ }
+ .ms-u-xlPush11 {
+ @include ms-u-xlPush11;
+ }
+ .ms-u-xlPush10 {
+ @include ms-u-xlPush10;
+ }
+ .ms-u-xlPush9 {
+ @include ms-u-xlPush9;
+ }
+ .ms-u-xlPush8 {
+ @include ms-u-xlPush8;
+ }
+ .ms-u-xlPush7 {
+ @include ms-u-xlPush7;
+ }
+ .ms-u-xlPush6 {
+ @include ms-u-xlPush6;
+ }
+ .ms-u-xlPush5 {
+ @include ms-u-xlPush5;
+ }
+ .ms-u-xlPush4 {
+ @include ms-u-xlPush4;
+ }
+ .ms-u-xlPush3 {
+ @include ms-u-xlPush3;
+ }
+ .ms-u-xlPush2 {
+ @include ms-u-xlPush2;
+ }
+ .ms-u-xlPush1 {
+ @include ms-u-xlPush1;
+ }
+ .ms-u-xlPush0 {
+ @include ms-u-xlPush0;
+ }
+
+ // Large Offset classes 0 ... 11
+ .ms-u-xlOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-xlOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-xlOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-xlOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-xlOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-xlOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-xlOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-xlOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-xlOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-xlOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-xlOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-xlOffset0 {
+ margin-left: 0;
+ }
+}
+
+// Extra extra large screens
+@media (min-width: $ms-screen-xxl-min) {
+ .ms-u-xxl12 {
+ @include ms-u-xxl12;
+ }
+ .ms-u-xxl11 {
+ @include ms-u-xxl11;
+ }
+ .ms-u-xxl10 {
+ @include ms-u-xxl10;
+ }
+ .ms-u-xxl9 {
+ @include ms-u-xxl9;
+ }
+ .ms-u-xxl8 {
+ @include ms-u-xxl8;
+ }
+ .ms-u-xxl7 {
+ @include ms-u-xxl7;
+ }
+ .ms-u-xxl6 {
+ @include ms-u-xxl6;
+ }
+ .ms-u-xxl5 {
+ @include ms-u-xxl5;
+ }
+ .ms-u-xxl4 {
+ @include ms-u-xxl4;
+ }
+ .ms-u-xxl3 {
+ @include ms-u-xxl3;
+ }
+ .ms-u-xxl2 {
+ @include ms-u-xxl2;
+ }
+ .ms-u-xxl1 {
+ @include ms-u-xxl1;
+ }
+ .ms-u-xxlPull12 {
+ @include ms-u-xxlPull12;
+ }
+ .ms-u-xxlPull11 {
+ @include ms-u-xxlPull11;
+ }
+ .ms-u-xxlPull10 {
+ @include ms-u-xxlPull10;
+ }
+ .ms-u-xxlPull9 {
+ @include ms-u-xxlPull9;
+ }
+ .ms-u-xxlPull8 {
+ @include ms-u-xxlPull8;
+ }
+ .ms-u-xxlPull7 {
+ @include ms-u-xxlPull7;
+ }
+ .ms-u-xxlPull6 {
+ @include ms-u-xxlPull6;
+ }
+ .ms-u-xxlPull5 {
+ @include ms-u-xxlPull5;
+ }
+ .ms-u-xxlPull4 {
+ @include ms-u-xxlPull4;
+ }
+ .ms-u-xxlPull3 {
+ @include ms-u-xxlPull3;
+ }
+ .ms-u-xxlPull2 {
+ @include ms-u-xxlPull2;
+ }
+ .ms-u-xxlPull1 {
+ @include ms-u-xxlPull1;
+ }
+ .ms-u-xxlPull0 {
+ @include ms-u-xxlPull0;
+ }
+ .ms-u-xxlPush12 {
+ @include ms-u-xxlPush12;
+ }
+ .ms-u-xxlPush11 {
+ @include ms-u-xxlPush11;
+ }
+ .ms-u-xxlPush10 {
+ @include ms-u-xxlPush10;
+ }
+ .ms-u-xxlPush9 {
+ @include ms-u-xxlPush9;
+ }
+ .ms-u-xxlPush8 {
+ @include ms-u-xxlPush8;
+ }
+ .ms-u-xxlPush7 {
+ @include ms-u-xxlPush7;
+ }
+ .ms-u-xxlPush6 {
+ @include ms-u-xxlPush6;
+ }
+ .ms-u-xxlPush5 {
+ @include ms-u-xxlPush5;
+ }
+ .ms-u-xxlPush4 {
+ @include ms-u-xxlPush4;
+ }
+ .ms-u-xxlPush3 {
+ @include ms-u-xxlPush3;
+ }
+ .ms-u-xxlPush2 {
+ @include ms-u-xxlPush2;
+ }
+ .ms-u-xxlPush1 {
+ @include ms-u-xxlPush1;
+ }
+ .ms-u-xxlPush0 {
+ @include ms-u-xxlPush0;
+ }
+
+ // Extra extra large Offset classes 0 ... 11
+ .ms-u-xxlOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-xxlOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-xxlOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-xxlOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-xxlOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-xxlOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-xxlOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-xxlOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-xxlOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-xxlOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-xxlOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-xxlOffset0 {
+ margin-left: 0;
+ }
+}
+
+// Extra extra extra large screens
+@media (min-width: $ms-screen-xxxl-min) {
+ .ms-u-xxxl12 {
+ @include ms-u-xxxl12;
+ }
+ .ms-u-xxxl11 {
+ @include ms-u-xxxl11;
+ }
+ .ms-u-xxxl10 {
+ @include ms-u-xxxl10;
+ }
+ .ms-u-xxxl9 {
+ @include ms-u-xxxl9;
+ }
+ .ms-u-xxxl8 {
+ @include ms-u-xxxl8;
+ }
+ .ms-u-xxxl7 {
+ @include ms-u-xxxl7;
+ }
+ .ms-u-xxxl6 {
+ @include ms-u-xxxl6;
+ }
+ .ms-u-xxxl5 {
+ @include ms-u-xxxl5;
+ }
+ .ms-u-xxxl4 {
+ @include ms-u-xxxl4;
+ }
+ .ms-u-xxxl3 {
+ @include ms-u-xxxl3;
+ }
+ .ms-u-xxxl2 {
+ @include ms-u-xxxl2;
+ }
+ .ms-u-xxxl1 {
+ @include ms-u-xxxl1;
+ }
+ .ms-u-xxxlPull12 {
+ @include ms-u-xxxlPull12;
+ }
+ .ms-u-xxxlPull11 {
+ @include ms-u-xxxlPull11;
+ }
+ .ms-u-xxxlPull10 {
+ @include ms-u-xxxlPull10;
+ }
+ .ms-u-xxxlPull9 {
+ @include ms-u-xxxlPull9;
+ }
+ .ms-u-xxxlPull8 {
+ @include ms-u-xxxlPull8;
+ }
+ .ms-u-xxxlPull7 {
+ @include ms-u-xxxlPull7;
+ }
+ .ms-u-xxxlPull6 {
+ @include ms-u-xxxlPull6;
+ }
+ .ms-u-xxxlPull5 {
+ @include ms-u-xxxlPull5;
+ }
+ .ms-u-xxxlPull4 {
+ @include ms-u-xxxlPull4;
+ }
+ .ms-u-xxxlPull3 {
+ @include ms-u-xxxlPull3;
+ }
+ .ms-u-xxxlPull2 {
+ @include ms-u-xxxlPull2;
+ }
+ .ms-u-xxxlPull1 {
+ @include ms-u-xxxlPull1;
+ }
+ .ms-u-xxxlPull0 {
+ @include ms-u-xxxlPull0;
+ }
+ .ms-u-xxxlPush12 {
+ @include ms-u-xxxlPush12;
+ }
+ .ms-u-xxxlPush11 {
+ @include ms-u-xxxlPush11;
+ }
+ .ms-u-xxxlPush10 {
+ @include ms-u-xxxlPush10;
+ }
+ .ms-u-xxxlPush9 {
+ @include ms-u-xxxlPush9;
+ }
+ .ms-u-xxxlPush8 {
+ @include ms-u-xxxlPush8;
+ }
+ .ms-u-xxxlPush7 {
+ @include ms-u-xxxlPush7;
+ }
+ .ms-u-xxxlPush6 {
+ @include ms-u-xxxlPush6;
+ }
+ .ms-u-xxxlPush5 {
+ @include ms-u-xxxlPush5;
+ }
+ .ms-u-xxxlPush4 {
+ @include ms-u-xxxlPush4;
+ }
+ .ms-u-xxxlPush3 {
+ @include ms-u-xxxlPush3;
+ }
+ .ms-u-xxxlPush2 {
+ @include ms-u-xxxlPush2;
+ }
+ .ms-u-xxxlPush1 {
+ @include ms-u-xxxlPush1;
+ }
+ .ms-u-xxxlPush0 {
+ @include ms-u-xxxlPush0;
+ }
+
+ // Extra extra extra large Offset classes 0 ... 11
+ .ms-u-xxxlOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-xxxlOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-xxxlOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-xxxlOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-xxxlOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-xxxlOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-xxxlOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-xxxlOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-xxxlOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-xxxlOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-xxxlOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-xxxlOffset0 {
+ margin-left: 0;
+ }
+}
diff --git a/dist/sass/Fabric.Typography.Fonts.Output.scss b/dist/sass/Fabric.Typography.Fonts.Output.scss
new file mode 100644
index 000000000..63edecd6a
--- /dev/null
+++ b/dist/sass/Fabric.Typography.Fonts.Output.scss
@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Font definitions
+
+@import "Fabric.Typography.Fonts";
+
+// Additional @font-face rules for the Leelawadee font.
+@font-face {
+ font-family: "Leelawadee UI Bold";
+ src: url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot?#iefix') format('embedded-opentype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff') format('woff'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf') format('truetype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Leelawadee UI";
+ src: url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot?#iefix') format('embedded-opentype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff') format('woff'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf') format('truetype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Leelawadee UI Semilight";
+ src: url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot?#iefix') format('embedded-opentype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff') format('woff'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf') format('truetype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+// Mixins to generate language-specific font faces.
+@include SegoeUIArabicLight;
+@include SegoeUIArabicRegular;
+@include SegoeUIArabicSemibold;
+@include SegoeUIArabicSemilight;
+
+@include SegoeUICyrillicLight;
+@include SegoeUICyrillicRegular;
+@include SegoeUICyrillicSemibold;
+@include SegoeUICyrillicSemilight;
+
+@include SegoeUIEastEuropeanLight;
+@include SegoeUIEastEuropeanRegular;
+@include SegoeUIEastEuropeanSemibold;
+@include SegoeUIEastEuropeanSemilight;
+
+@include SegoeUIGreekLight;
+@include SegoeUIGreekRegular;
+@include SegoeUIGreekSemibold;
+@include SegoeUIGreekSemilight;
+
+@include SegoeUIHebrewLight;
+@include SegoeUIHebrewRegular;
+@include SegoeUIHebrewSemibold;
+@include SegoeUIHebrewSemilight;
+
+@include SegoeUIVietnameseLight;
+@include SegoeUIVietnameseRegular;
+@include SegoeUIVietnameseSemibold;
+@include SegoeUIVietnameseSemilight;
+
+@include SegoeUIWestEuropeanLight;
+@include SegoeUIWestEuropeanRegular;
+@include SegoeUIWestEuropeanSemibold;
+@include SegoeUIWestEuropeanSemilight;
\ No newline at end of file
diff --git a/dist/sass/Fabric.Typography.Language.Overrides.Output.scss b/dist/sass/Fabric.Typography.Language.Overrides.Output.scss
new file mode 100644
index 000000000..66f464b58
--- /dev/null
+++ b/dist/sass/Fabric.Typography.Language.Overrides.Output.scss
@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Language override definitions
+
+@import "./Fabric.Typography.Language.Overrides";
+
+// Generate the override classes for non-distributed fonts.
+@include language-override-system-fonts(ja-JP, $ms-font-stack-japanese);
+@include language-override-system-fonts(ko-KR, $ms-font-stack-korean);
+@include language-override-system-fonts(ch-ZHS, $ms-font-stack-chinese-simplified);
+@include language-override-system-fonts(ch-ZHT, $ms-font-stack-chinese-traditional);
+@include language-override-system-fonts(hi-IN, $ms-font-stack-hindi);
+
+// Generate the override classes for web fonts.
+// Leelawadee
+// th-TH
+@include language-override-web-fonts(th-TH, $ms-font-family-semilight-leelawadee, $ms-font-family-semilight-leelawadee, $ms-font-family-regular-leelawadee, $ms-font-family-semibold-leelawadee);
+
+// Arabic
+// ar
+@include language-override-web-fonts(ar, $ms-font-family-light-arabic, $ms-font-family-semilight-arabic, $ms-font-family-regular-arabic, $ms-font-family-semibold-arabic);
+
+// Cyrillic
+// bg-BG, ru-RU, uk-UA
+@include language-override-web-fonts(bg-BG, $ms-font-family-light-cyrillic, $ms-font-family-semilight-cyrillic, $ms-font-family-regular-cyrillic, $ms-font-family-semibold-cyrillic);
+@include language-override-web-fonts(ru-RU, $ms-font-family-light-cyrillic, $ms-font-family-semilight-cyrillic, $ms-font-family-regular-cyrillic, $ms-font-family-semibold-cyrillic);
+@include language-override-web-fonts(uk-UA, $ms-font-family-light-cyrillic, $ms-font-family-semilight-cyrillic, $ms-font-family-regular-cyrillic, $ms-font-family-semibold-cyrillic);
+
+// East European
+// cs-CZ, et-EE, hr-HR, hu-HU, lt-LT, pl-PL, lt-sr-SP, tr-TR, sk-SK, kk-KZ
+@include language-override-web-fonts(cs-CZ, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(et-EE, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(hr-HR, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(hu-HU, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(lt-LT, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(lv-LV, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(pl-PL, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(lt-sr-SP, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(tr-TR, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(sk-SK, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+@include language-override-web-fonts(kk-KZ, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean);
+
+// Greek
+// el-GR
+@include language-override-web-fonts(el-GR, $ms-font-family-light-greek, $ms-font-family-semilight-greek, $ms-font-family-regular-greek, $ms-font-family-semibold-greek);
+
+// Hebrew
+// he-IL
+@include language-override-web-fonts(he-IL, $ms-font-family-light-hebrew, $ms-font-family-semilight-hebrew, $ms-font-family-regular-hebrew, $ms-font-family-semibold-hebrew);
+
+// Vietnamese
+// vi-VN
+@include language-override-web-fonts(vi-VN, $ms-font-family-light-vietnamese, $ms-font-family-semilight-vietnamese, $ms-font-family-regular-vietnamese, $ms-font-family-semibold-vietnamese);
\ No newline at end of file
diff --git a/dist/sass/Fabric.Typography.Output.scss b/dist/sass/Fabric.Typography.Output.scss
new file mode 100644
index 000000000..8ae0fa58f
--- /dev/null
+++ b/dist/sass/Fabric.Typography.Output.scss
@@ -0,0 +1,374 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Typographic mixins arranged with appropriate size and family combinations.
+@import './Fabric.Typography';
+
+// Super Styles (LIMITED USE)
+// Weights: Light
+.ms-font-su {
+ @include ms-font-su;
+}
+// No touch class for Super
+
+// Extra-Extra-Large
+// Allowed weights: Light, SemiLight
+.ms-font-xxl {
+ @include ms-font-xxl;
+}
+
+// Extra-Large Styles
+// Allowed weights: Light, SemiLight
+.ms-font-xl {
+ @include ms-font-xl;
+}
+
+// Large Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-l {
+ @include ms-font-l;
+}
+
+// Medium Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-m-plus {
+ @include ms-font-m-plus;
+}
+
+// Medium Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-m {
+ @include ms-font-m;
+}
+
+// Small Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-s-plus {
+ @include ms-font-s-plus;
+}
+
+// Small Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-s {
+ @include ms-font-s;
+}
+
+// XS Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-xs {
+ @include ms-font-xs;
+}
+
+// Micro Styles (LIMITED USE)
+// Weights: Semibold
+.ms-font-mi {
+ @include ms-font-mi;
+}
+
+//== Helper classes & mixins
+//
+// Helper mixins to override default type values
+
+// Font weights
+.ms-fontWeight-light,
+.ms-fontWeight-light--hover:hover {
+ @include ms-fontWeight-light;
+}
+
+.ms-fontWeight-semilight,
+.ms-fontWeight-semilight--hover:hover {
+ @include ms-fontWeight-semilight;
+}
+
+.ms-fontWeight-regular,
+.ms-fontWeight-regular--hover:hover {
+ @include ms-fontWeight-regular;
+}
+
+.ms-fontWeight-semibold,
+.ms-fontWeight-semibold--hover:hover {
+ @include ms-fontWeight-semibold;
+}
+
+// Font sizes
+.ms-fontSize-su {
+ @include ms-fontSize-su;
+}
+
+.ms-fontSize-xxl {
+ @include ms-fontSize-xxl;
+}
+
+.ms-fontSize-xl {
+ @include ms-fontSize-xl;
+}
+
+.ms-fontSize-l {
+ @include ms-fontSize-l;
+}
+
+.ms-fontSize-mPlus {
+ @include ms-fontSize-mPlus;
+}
+
+.ms-fontSize-m {
+ @include ms-fontSize-m;
+}
+
+.ms-fontSize-sPlus {
+ @include ms-fontSize-sPlus;
+}
+
+.ms-fontSize-s {
+ @include ms-fontSize-s;
+}
+
+.ms-fontSize-xs {
+ @include ms-fontSize-xs;
+}
+
+.ms-fontSize-mi {
+ @include ms-fontSize-mi;
+}
+
+// Theme colors
+.ms-fontColor-themeDarker,
+.ms-fontColor-themeDarker--hover:hover {
+ @include ms-fontColor-themeDarker;
+}
+
+.ms-fontColor-themeDark,
+.ms-fontColor-themeDark--hover:hover {
+ @include ms-fontColor-themeDark;
+}
+
+.ms-fontColor-themeDarkAlt,
+.ms-fontColor-themeDarkAlt--hover:hover {
+ @include ms-fontColor-themeDarkAlt;
+}
+
+.ms-fontColor-themePrimary,
+.ms-fontColor-themePrimary--hover:hover {
+ @include ms-fontColor-themePrimary;
+}
+
+.ms-fontColor-themeSecondary,
+.ms-fontColor-themeSecondary--hover:hover {
+ @include ms-fontColor-themeSecondary;
+}
+
+.ms-fontColor-themeTertiary,
+.ms-fontColor-themeTertiary--hover:hover {
+ @include ms-fontColor-themeTertiary;
+}
+
+.ms-fontColor-themeLight,
+.ms-fontColor-themeLight--hover:hover {
+ @include ms-fontColor-themeLight;
+}
+
+.ms-fontColor-themeLighter,
+.ms-fontColor-themeLighter--hover:hover {
+ @include ms-fontColor-themeLighter;
+}
+
+.ms-fontColor-themeLighterAlt,
+.ms-fontColor-themeLighterAlt--hover:hover {
+ @include ms-fontColor-themeLighterAlt;
+}
+
+
+// Neutral colors
+.ms-fontColor-black,
+.ms-fontColor-black--hover:hover {
+ @include ms-fontColor-black;
+}
+
+.ms-fontColor-neutralDark,
+.ms-fontColor-neutralDark--hover:hover {
+ @include ms-fontColor-neutralDark;
+}
+
+.ms-fontColor-neutralPrimary,
+.ms-fontColor-neutralPrimary--hover:hover {
+ @include ms-fontColor-neutralPrimary;
+}
+
+.ms-fontColor-neutralSecondary,
+.ms-fontColor-neutralSecondary--hover:hover {
+ @include ms-fontColor-neutralSecondary;
+}
+
+.ms-fontColor-neutralSecondaryAlt,
+.ms-fontColor-neutralSecondaryAlt--hover:hover {
+ @include ms-fontColor-neutralSecondaryAlt;
+}
+
+.ms-fontColor-neutralTertiary,
+.ms-fontColor-neutralTertiary--hover:hover {
+ @include ms-fontColor-neutralTertiary;
+}
+
+.ms-fontColor-neutralTertiaryAlt,
+.ms-fontColor-neutralTertiaryAlt--hover:hover {
+ @include ms-fontColor-neutralTertiaryAlt;
+}
+
+.ms-fontColor-neutralLight,
+.ms-fontColor-neutralLight--hover:hover {
+ @include ms-fontColor-neutralLight;
+}
+
+.ms-fontColor-neutralLighter,
+.ms-fontColor-neutralLighter--hover:hover {
+ @include ms-fontColor-neutralLighter;
+}
+
+.ms-fontColor-neutralLighterAlt,
+.ms-fontColor-neutralLighterAlt--hover:hover {
+ @include ms-fontColor-neutralLighterAlt;
+}
+
+.ms-fontColor-white,
+.ms-fontColor-white--hover:hover {
+ @include ms-fontColor-white;
+}
+
+// Brand and accent colors
+.ms-fontColor-yellow,
+.ms-fontColor-yellow--hover:hover {
+ @include ms-fontColor-yellow;
+}
+
+.ms-fontColor-yellowLight,
+.ms-fontColor-yellowLight--hover:hover {
+ @include ms-fontColor-yellowLight;
+}
+
+.ms-fontColor-orange,
+.ms-fontColor-orange--hover:hover {
+ @include ms-fontColor-orange;
+}
+
+.ms-fontColor-orangeLight,
+.ms-fontColor-orangeLight--hover:hover {
+ @include ms-fontColor-orangeLight;
+}
+
+.ms-fontColor-orangeLighter,
+.ms-fontColor-orangeLighter--hover:hover {
+ @include ms-fontColor-orangeLighter;
+}
+
+.ms-fontColor-redDark,
+.ms-fontColor-redDark--hover:hover {
+ @include ms-fontColor-redDark;
+}
+
+.ms-fontColor-red,
+.ms-fontColor-red--hover:hover {
+ @include ms-fontColor-red;
+}
+
+.ms-fontColor-magentaDark,
+.ms-fontColor-magentaDark--hover:hover {
+ @include ms-fontColor-magentaDark;
+}
+
+.ms-fontColor-magenta,
+.ms-fontColor-magenta--hover:hover {
+ @include ms-fontColor-magenta;
+}
+
+.ms-fontColor-magentaLight,
+.ms-fontColor-magentaLight--hover:hover {
+ @include ms-fontColor-magentaLight;
+}
+
+.ms-fontColor-purpleDark,
+.ms-fontColor-purpleDark--hover:hover {
+ @include ms-fontColor-purpleDark;
+}
+
+.ms-fontColor-purple,
+.ms-fontColor-purple--hover:hover {
+ @include ms-fontColor-purple;
+}
+
+.ms-fontColor-purpleLight,
+.ms-fontColor-purpleLight--hover:hover {
+ @include ms-fontColor-purpleLight;
+}
+
+.ms-fontColor-blueDark,
+.ms-fontColor-blueDark--hover:hover {
+ @include ms-fontColor-blueDark;
+}
+
+.ms-fontColor-blueMid,
+.ms-fontColor-blueMid--hover:hover {
+ @include ms-fontColor-blueMid;
+}
+
+.ms-fontColor-blue,
+.ms-fontColor-blue--hover:hover {
+ @include ms-fontColor-blue;
+}
+
+.ms-fontColor-blueLight,
+.ms-fontColor-blueLight--hover:hover {
+ @include ms-fontColor-blueLight;
+}
+
+.ms-fontColor-tealDark,
+.ms-fontColor-tealDark--hover:hover {
+ @include ms-fontColor-tealDark;
+}
+
+.ms-fontColor-teal,
+.ms-fontColor-teal--hover:hover {
+ @include ms-fontColor-teal;
+}
+
+.ms-fontColor-tealLight,
+.ms-fontColor-tealLight--hover:hover {
+ @include ms-fontColor-tealLight;
+}
+
+.ms-fontColor-greenDark,
+.ms-fontColor-greenDark--hover:hover {
+ @include ms-fontColor-greenDark;
+}
+
+.ms-fontColor-green,
+.ms-fontColor-green--hover:hover {
+ @include ms-fontColor-green;
+}
+
+.ms-fontColor-greenLight,
+.ms-fontColor-greenLight--hover:hover {
+ @include ms-fontColor-greenLight;
+}
+
+// Message colors
+.ms-fontColor-info,
+.ms-fontColor-info--hover:hover {
+ @include ms-fontColor-info;
+}
+
+.ms-fontColor-success,
+.ms-fontColor-success--hover:hover {
+ @include ms-fontColor-success;
+}
+
+.ms-fontColor-alert,
+.ms-fontColor-alert--hover:hover {
+ @include ms-fontColor-alert;
+}
+
+.ms-fontColor-error,
+.ms-fontColor-error--hover:hover {
+ @include ms-fontColor-error;
+}
diff --git a/dist/sass/Fabric.Utilities.Output.scss b/dist/sass/Fabric.Utilities.Output.scss
new file mode 100644
index 000000000..c34806274
--- /dev/null
+++ b/dist/sass/Fabric.Utilities.Output.scss
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Utility classes and mixins used throughout Fabric.
+
+@import "Fabric.Utilities";
+
+// The best box is a border box.
+.ms-u-borderBox, .ms-u-borderBox:before, .ms-u-borderBox:after {
+ @include ms-u-borderBox;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+.ms-u-clearfix {
+ @include ms-u-clearfix;
+}
+
+// Basic border-box, margin, and padding reset.
+.ms-u-normalize {
+ @include ms-u-normalize;
+}
diff --git a/dist/sass/Fabric.scss b/dist/sass/Fabric.scss
new file mode 100644
index 000000000..c76c2f066
--- /dev/null
+++ b/dist/sass/Fabric.scss
@@ -0,0 +1,40 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// Core Module Loader
+
+
+// Common utilities
+@import './Fabric.Utilities.Output';
+@import './Fabric.ZIndex.Variables';
+@import './Fabric.Mixins';
+@import "./Fabric.Mixins.RTL";
+
+// Colors
+@import './Fabric.Color.Variables';
+@import './Fabric.Color.Mixins.Output';
+
+// Typography
+@import './Fabric.Typography.Variables';
+@import './Fabric.Typography.Output';
+@import './Fabric.Typography.Fonts.Output';
+@import './Fabric.Typography.Language.Overrides.Output';
+
+// Icons
+@import './Fabric.Icons.Font.Output';
+@import './Fabric.Icons.Output';
+
+// Animations
+@import './Fabric.Animations.Output';
+
+// Responsive
+@import './Fabric.Responsive.Variables';
+@import './Fabric.Responsive.Utilities.Variables';
+@import './Fabric.Responsive.Utilities.Output';
+
+// Grid
+@import './Fabric.Grid.Output';
+
+// Office colors
+@import './Office.Color.Variables';
diff --git a/dist/sass/_Fabric.Animations.RTL.scss b/dist/sass/_Fabric.Animations.RTL.scss
new file mode 100644
index 000000000..c6d1a6190
--- /dev/null
+++ b/dist/sass/_Fabric.Animations.RTL.scss
@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// RTL overrides for Fabric Animations
+
+
+@import 'Fabric.Animations';
+
+// slideRightIn10
+@mixin ms-u-slideRightIn10 {
+ @include animationMix((fadeIn, slideLeft10), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn20
+@mixin ms-u-slideRightIn20 {
+ @include animationMix((fadeIn, slideLeft20), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn40
+@mixin ms-u-slideRightIn40 {
+ @include animationMix((fadeIn, slideLeft40), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn10
+@mixin ms-u-slideLeftIn10 {
+ @include animationMix((fadeIn, slideRight10), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn20
+@mixin ms-u-slideLeftIn20 {
+ @include animationMix((fadeIn, slideRight20), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn40
+@mixin ms-u-slideLeftIn40 {
+ @include animationMix((fadeIn, slideRight40), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn400
+@mixin ms-u-slideRightIn400 {
+ @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn400
+@mixin ms-u-slideLeftIn400 {
+ @include animationMix((fadeIn, slideRight400), $ms-duration3, $ms-ease1);
+}
+
+// slideRightOut40
+@mixin ms-u-slideRightOut40 {
+ @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut40
+@mixin ms-u-slideLeftOut40 {
+ @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideRightOut400
+@mixin ms-u-slideRightOut400 {
+ @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut400
+@mixin ms-u-slideLeftOut400 {
+ @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2);
+}
+
+// rotate90deg
+@mixin ms-u-rotate90deg {
+ @include animationMix(rotateN90, 0.1s, $ms-ease2);
+}
+
+// rotateN90deg
+@mixin ms-u-rotateN90deg {
+ @include animationMix(rotate90, 0.1s, $ms-ease2);
+}
diff --git a/dist/sass/_Fabric.Animations.scss b/dist/sass/_Fabric.Animations.scss
new file mode 100644
index 000000000..5b92983de
--- /dev/null
+++ b/dist/sass/_Fabric.Animations.scss
@@ -0,0 +1,237 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Animations
+
+
+// Note that all animation classes should begin with the "ms-u" utility prefix.
+// The original class names are deprecated and will be removed in a future release.
+
+// Variables
+$ms-ease1: cubic-bezier(0.1,0.9,0.2,1);
+$ms-ease2: cubic-bezier(0.1,0.25,0.75,0.9);
+$ms-duration1: 0.167s;
+$ms-duration2: 0.267s;
+$ms-duration3: 0.367s;
+$ms-duration4: 0.467s;
+
+
+// Animation mixin
+@mixin animationMix($ms-name, $ms-duration, $ms-ease: $ms-ease1, $ms-fillMode: both) {
+ @include animationName($ms-name);
+ @include animationDuration($ms-duration);
+ @include animationTiming($ms-ease);
+ @include animationFillMode($ms-fillMode);
+}
+
+// slideRightIn10
+@mixin ms-u-slideRightIn10 {
+ @include animationMix((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn20
+@mixin ms-u-slideRightIn20 {
+ @include animationMix((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn40
+@mixin ms-u-slideRightIn40 {
+ @include animationMix((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn10
+@mixin ms-u-slideLeftIn10 {
+ @include animationMix((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn20
+@mixin ms-u-slideLeftIn20 {
+ @include animationMix((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn40
+@mixin ms-u-slideLeftIn40 {
+ @include animationMix((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn400
+@mixin ms-u-slideRightIn400 {
+ @include animationMix((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn400
+@mixin ms-u-slideLeftIn400 {
+ @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1);
+}
+
+// slideUpIn20
+@mixin ms-u-slideUpIn20 {
+ @include animationMix((fadeIn, slideUpIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideUpIn10
+@mixin ms-u-slideUpIn10 {
+ @include animationMix((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2);
+}
+
+// slideDownIn20
+@mixin ms-u-slideDownIn20 {
+ @include animationMix((fadeIn, slideDownIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideDownIn10
+@mixin ms-u-slideDownIn10 {
+ @include animationMix((fadeIn, slideDownIn10), $ms-duration1, $ms-ease2);
+}
+
+// slideRightOut40
+@mixin ms-u-slideRightOut40 {
+ @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut40
+@mixin ms-u-slideLeftOut40 {
+ @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideRightOut400
+@mixin ms-u-slideRightOut400 {
+ @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut400
+@mixin ms-u-slideLeftOut400 {
+ @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2);
+}
+
+// slideUpOut20
+@mixin ms-u-slideUpOut20 {
+ @include animationMix((fadeOut, slideUpOut20), $ms-duration1, $ms-ease2);
+}
+
+// slideUpOut10
+@mixin ms-u-slideUpOut10 {
+ @include animationMix((fadeOut, slideUpOut10), $ms-duration1, $ms-ease2);
+}
+
+// slideDownOut20
+@mixin ms-u-slideDownOut20 {
+ @include animationMix((fadeOut, slideDownOut20), $ms-duration1, $ms-ease2);
+}
+
+// slideDownOut10
+@mixin ms-u-slideDownOut10 {
+ @include animationMix((fadeOut, slideDownOut10), $ms-duration1, $ms-ease2);
+}
+
+// scaleUpIn100
+@mixin ms-u-scaleUpIn100 {
+ @include animationMix((fadeIn, scaleUp100), $ms-duration3, $ms-ease1);
+}
+
+// scaleDownIn100
+@mixin ms-u-scaleDownIn100 {
+ @include animationMix((fadeIn, scaleDown100), $ms-duration3, $ms-ease1);
+}
+
+// scaleUpOut103
+@mixin ms-u-scaleUpOut103 {
+ @include animationMix((fadeOut, scaleUp103), $ms-duration1, $ms-ease2);
+}
+
+// scaleDownOut98
+@mixin ms-u-scaleDownOut98 {
+ @include animationMix((fadeOut, scaleDown98), $ms-duration1, $ms-ease2);
+}
+
+// fadeIn
+@mixin ms-u-fadeIn400 {
+ -webkit-animation-duration: $ms-duration3;
+ -webkit-animation-name: fadeIn;
+ -webkit-animation-fill-mode: both;
+ animation-duration: $ms-duration3;
+ animation-name: fadeIn;
+ animation-fill-mode: both;
+}
+@mixin ms-u-fadeIn100 {
+ @include ms-u-fadeIn400;
+ -webkit-animation-duration: $ms-duration1;
+ animation-duration: $ms-duration1;
+}
+@mixin ms-u-fadeIn200 {
+ @include ms-u-fadeIn400;
+ -webkit-animation-duration: $ms-duration2;
+ animation-duration: $ms-duration2;
+}
+@mixin ms-u-fadeIn500 {
+ @include ms-u-fadeIn400;
+ -webkit-animation-duration: $ms-duration4;
+ animation-duration: $ms-duration4;
+}
+
+// fadeOut
+@mixin ms-u-fadeOut400 {
+ -webkit-animation-duration: $ms-duration3;
+ -webkit-animation-name: fadeOut;
+ -webkit-animation-fill-mode: both;
+ animation-duration: $ms-duration3;
+ animation-name: fadeOut;
+ animation-fill-mode: both;
+}
+@mixin ms-u-fadeOut100 {
+ @include ms-u-fadeOut400;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+@mixin ms-u-fadeOut200 {
+ @include ms-u-fadeOut400;
+ -webkit-animation-duration: $ms-duration1;
+ animation-duration: $ms-duration1;
+}
+@mixin ms-u-fadeOut500 {
+ @include ms-u-fadeOut400;
+ -webkit-animation-duration: $ms-duration4;
+ animation-duration: $ms-duration4;
+}
+
+// rotate90deg
+@mixin ms-u-rotate90deg {
+ @include animationMix(rotate90, 0.1s, $ms-ease2);
+}
+
+// rotateN90deg
+@mixin ms-u-rotateN90deg {
+ @include animationMix(rotateN90, 0.1s, $ms-ease2);
+}
+
+// expandCollapse400
+@mixin ms-u-expandCollapse400 {
+ -webkit-transition: height $ms-duration3 $ms-ease2;
+ transition: height $ms-duration3 $ms-ease2;
+}
+
+// expandCollapse200
+@mixin ms-u-expandCollapse200 {
+ -webkit-transition: height $ms-duration1 $ms-ease2;
+ transition: height $ms-duration1 $ms-ease2;
+}
+
+// expandCollapse100
+@mixin ms-u-expandCollapse100 {
+ -webkit-transition: height 0.1s $ms-ease2;
+ transition: height 0.1s $ms-ease2;
+}
+
+// delay100
+@mixin ms-u-delay100 {
+ -webkit-animation-delay: $ms-duration1;
+ animation-delay: $ms-duration1;
+}
+
+// delay200
+@mixin ms-u-delay200 {
+ -webkit-animation-delay: 0.267s;
+ animation-delay: 0.267s;
+}
diff --git a/dist/sass/_Fabric.Color.Mixins.scss b/dist/sass/_Fabric.Color.Mixins.scss
new file mode 100644
index 000000000..c2778a252
--- /dev/null
+++ b/dist/sass/_Fabric.Color.Mixins.scss
@@ -0,0 +1,406 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Core Color Mixins
+
+
+//== Background colors
+//
+// Theme colors
+@mixin ms-bgColor-themeDark {
+ background-color: $ms-color-themeDark;
+}
+
+@mixin ms-bgColor-themeDarkAlt {
+ background-color: $ms-color-themeDarkAlt;
+}
+
+@mixin ms-bgColor-themeDarker {
+ background-color: $ms-color-themeDarker;
+}
+
+@mixin ms-bgColor-themePrimary {
+ background-color: $ms-color-themePrimary;
+}
+
+@mixin ms-bgColor-themeSecondary {
+ background-color: $ms-color-themeSecondary;
+}
+
+@mixin ms-bgColor-themeTertiary {
+ background-color: $ms-color-themeTertiary;
+}
+
+@mixin ms-bgColor-themeLight {
+ background-color: $ms-color-themeLight;
+}
+
+@mixin ms-bgColor-themeLighter {
+ background-color: $ms-color-themeLighter;
+}
+
+@mixin ms-bgColor-themeLighterAlt {
+ background-color: $ms-color-themeLighterAlt;
+}
+
+// Neutral colors
+@mixin ms-bgColor-black {
+ background-color: $ms-color-black;
+}
+
+@mixin ms-bgColor-neutralDark {
+ background-color: $ms-color-neutralDark;
+}
+
+@mixin ms-bgColor-neutralPrimary {
+ background-color: $ms-color-neutralPrimary;
+}
+
+@mixin ms-bgColor-neutralSecondary {
+ background-color: $ms-color-neutralSecondary;
+}
+
+@mixin ms-bgColor-neutralSecondaryAlt {
+ background-color: $ms-color-neutralSecondaryAlt;
+}
+
+@mixin ms-bgColor-neutralTertiary {
+ background-color: $ms-color-neutralTertiary;
+}
+
+@mixin ms-bgColor-neutralTertiaryAlt {
+ background-color: $ms-color-neutralTertiaryAlt;
+}
+
+@mixin ms-bgColor-neutralLight {
+ background-color: $ms-color-neutralLight;
+}
+
+@mixin ms-bgColor-neutralLighter {
+ background-color: $ms-color-neutralLighter;
+}
+
+@mixin ms-bgColor-neutralLighterAlt {
+ background-color: $ms-color-neutralLighterAlt;
+}
+
+@mixin ms-bgColor-white {
+ background-color: $ms-color-white;
+}
+
+
+// Brand and accent colors
+@mixin ms-bgColor-yellow {
+ background-color: $ms-color-yellow;
+}
+
+@mixin ms-bgColor-yellowLight {
+ background-color: $ms-color-yellowLight;
+}
+
+@mixin ms-bgColor-orange {
+ background-color: $ms-color-orange;
+}
+
+@mixin ms-bgColor-orangeLight {
+ background-color: $ms-color-orangeLight;
+}
+
+@mixin ms-bgColor-orangeLighter {
+ background-color: $ms-color-orangeLighter;
+}
+
+@mixin ms-bgColor-redDark {
+ background-color: $ms-color-redDark;
+}
+
+@mixin ms-bgColor-red {
+ background-color: $ms-color-red;
+}
+
+@mixin ms-bgColor-magentaDark {
+ background-color: $ms-color-magentaDark;
+}
+
+@mixin ms-bgColor-magenta {
+ background-color: $ms-color-magenta;
+}
+
+@mixin ms-bgColor-magentaLight {
+ background-color: $ms-color-magentaLight;
+}
+
+@mixin ms-bgColor-purpleDark {
+ background-color: $ms-color-purpleDark;
+}
+
+@mixin ms-bgColor-purple {
+ background-color: $ms-color-purple;
+}
+
+@mixin ms-bgColor-purpleLight {
+ background-color: $ms-color-purpleLight;
+}
+
+@mixin ms-bgColor-blueDark {
+ background-color: $ms-color-blueDark;
+}
+
+@mixin ms-bgColor-blueMid {
+ background-color: $ms-color-blueMid;
+}
+
+@mixin ms-bgColor-blue {
+ background-color: $ms-color-blue;
+}
+
+@mixin ms-bgColor-blueLight {
+ background-color: $ms-color-blueLight;
+}
+
+@mixin ms-bgColor-tealDark {
+ background-color: $ms-color-tealDark;
+}
+
+@mixin ms-bgColor-teal {
+ background-color: $ms-color-teal;
+}
+
+@mixin ms-bgColor-tealLight {
+ background-color: $ms-color-tealLight;
+}
+
+@mixin ms-bgColor-greenDark {
+ background-color: $ms-color-greenDark;
+}
+
+@mixin ms-bgColor-green {
+ background-color: $ms-color-green;
+}
+
+@mixin ms-bgColor-greenLight {
+ background-color: $ms-color-greenLight;
+}
+
+// Message colors
+@mixin ms-bgColor-info {
+ background-color: $ms-color-infoBackground;
+}
+
+@mixin ms-bgColor-success {
+ background-color: $ms-color-successBackground;
+}
+
+@mixin ms-bgColor-alert {
+ background-color: $ms-color-alertBackground;
+}
+
+@mixin ms-bgColor-error {
+ background-color: $ms-color-errorBackground;
+}
+
+
+//== Border colors
+//
+
+// Theme colors
+@mixin ms-borderColor-themeDark {
+ border-color: $ms-color-themeDark;
+}
+
+@mixin ms-borderColor-themeDarkAlt {
+ border-color: $ms-color-themeDarkAlt;
+}
+
+@mixin ms-borderColor-themeDarker {
+ border-color: $ms-color-themeDarker;
+}
+
+@mixin ms-borderColor-themePrimary {
+ border-color: $ms-color-themePrimary;
+}
+
+@mixin ms-borderColor-themeSecondary {
+ border-color: $ms-color-themeSecondary;
+}
+
+@mixin ms-borderColor-themeTertiary {
+ border-color: $ms-color-themeTertiary;
+}
+
+@mixin ms-borderColor-themeLight {
+ border-color: $ms-color-themeLight;
+}
+
+@mixin ms-borderColor-themeLighter {
+ border-color: $ms-color-themeLighter;
+}
+
+@mixin ms-borderColor-themeLighterAlt {
+ border-color: $ms-color-themeLighterAlt;
+}
+
+
+// Neutral colors
+@mixin ms-borderColor-black {
+ border-color: $ms-color-black;
+}
+
+@mixin ms-borderColor-neutralDark {
+ border-color: $ms-color-neutralDark;
+}
+
+@mixin ms-borderColor-neutralPrimary {
+ border-color: $ms-color-neutralPrimary;
+}
+
+@mixin ms-borderColor-neutralSecondary {
+ border-color: $ms-color-neutralSecondary;
+}
+
+@mixin ms-borderColor-neutralSecondaryAlt {
+ border-color: $ms-color-neutralSecondaryAlt;
+}
+
+@mixin ms-borderColor-neutralTertiary {
+ border-color: $ms-color-neutralTertiary;
+}
+
+@mixin ms-borderColor-neutralTertiaryAlt {
+ border-color: $ms-color-neutralTertiaryAlt;
+}
+
+@mixin ms-borderColor-neutralLight {
+ border-color: $ms-color-neutralLight;
+}
+
+@mixin ms-borderColor-neutralLighter {
+ border-color: $ms-color-neutralLighter;
+}
+
+@mixin ms-borderColor-neutralLighterAlt {
+ border-color: $ms-color-neutralLighterAlt;
+}
+
+@mixin ms-borderColor-white {
+ border-color: $ms-color-white;
+}
+
+// Brand and accent colors
+@mixin ms-borderColor-yellow {
+ border-color: $ms-color-yellow;
+}
+
+@mixin ms-borderColor-yellowLight {
+ border-color: $ms-color-yellowLight;
+}
+
+@mixin ms-borderColor-orange {
+ border-color: $ms-color-orange;
+}
+
+@mixin ms-borderColor-orangeLight {
+ border-color: $ms-color-orangeLight;
+}
+
+@mixin ms-borderColor-orangeLighter {
+ border-color: $ms-color-orangeLighter;
+}
+
+@mixin ms-borderColor-redDark {
+ border-color: $ms-color-redDark;
+}
+
+@mixin ms-borderColor-red {
+ border-color: $ms-color-red;
+}
+
+@mixin ms-borderColor-magentaDark {
+ border-color: $ms-color-magentaDark;
+}
+
+@mixin ms-borderColor-magenta {
+ border-color: $ms-color-magenta;
+}
+
+@mixin ms-borderColor-magentaLight {
+ border-color: $ms-color-magentaLight;
+}
+
+@mixin ms-borderColor-purpleDark {
+ border-color: $ms-color-purpleDark;
+}
+
+@mixin ms-borderColor-purple {
+ border-color: $ms-color-purple;
+}
+
+@mixin ms-borderColor-purpleLight {
+ border-color: $ms-color-purpleLight;
+}
+
+@mixin ms-borderColor-blueDark {
+ border-color: $ms-color-blueDark;
+}
+
+@mixin ms-borderColor-blueMid {
+ border-color: $ms-color-blueMid;
+}
+
+@mixin ms-borderColor-blue {
+ border-color: $ms-color-blue;
+}
+
+@mixin ms-borderColor-blueLight {
+ border-color: $ms-color-blueLight;
+}
+
+@mixin ms-borderColor-tealDark {
+ border-color: $ms-color-tealDark;
+}
+
+@mixin ms-borderColor-teal {
+ border-color: $ms-color-teal;
+}
+
+@mixin ms-borderColor-tealLight {
+ border-color: $ms-color-tealLight;
+}
+
+@mixin ms-borderColor-greenDark {
+ border-color: $ms-color-greenDark;
+}
+
+@mixin ms-borderColor-green {
+ border-color: $ms-color-green;
+}
+
+@mixin ms-borderColor-greenLight {
+ border-color: $ms-color-greenLight;
+}
+
+
+// Message colors
+@mixin ms-borderColor-info {
+ border-color: $ms-color-info;
+}
+
+@mixin ms-borderColor-success {
+ border-color: $ms-color-success;
+}
+
+@mixin ms-borderColor-alert {
+ border-color: $ms-color-alert;
+}
+
+@mixin ms-borderColor-error {
+ border-color: $ms-color-error;
+}
+
+
+// Individual borders, by request
+@mixin ms-borderColorTop-themePrimary {
+ border-top-color: $ms-color-themePrimary;
+}
diff --git a/dist/sass/_Fabric.Color.Variables.scss b/dist/sass/_Fabric.Color.Variables.scss
new file mode 100644
index 000000000..978d889dc
--- /dev/null
+++ b/dist/sass/_Fabric.Color.Variables.scss
@@ -0,0 +1,89 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Core Color Variables
+
+
+//== Theme Colors
+//
+$ms-color-themeDarker: #004578;
+$ms-color-themeDark: #005a9e;
+$ms-color-themeDarkAlt: #106ebe;
+$ms-color-themePrimary: #0078d7;
+$ms-color-themeSecondary: #2b88d8;
+$ms-color-themeTertiary: #71afe5;
+$ms-color-themeLight: #c7e0f4;
+$ms-color-themeLighter: #deecf9;
+$ms-color-themeLighterAlt: #eff6fc;
+
+
+//== Grayscale Colors
+//
+$ms-color-black: #000000;
+$ms-color-neutralDark: #212121;
+$ms-color-neutralPrimary: #333333;
+$ms-color-neutralSecondary: #666666;
+$ms-color-neutralSecondaryAlt: #767676;
+$ms-color-neutralTertiary: #a6a6a6;
+$ms-color-neutralTertiaryAlt: #c8c8c8;
+$ms-color-neutralLight: #eaeaea;
+$ms-color-neutralLighter: #f4f4f4;
+$ms-color-neutralLighterAlt: #f8f8f8;
+$ms-color-white: #ffffff;
+
+
+//== Translucent Colors
+//
+$ms-color-blackTranslucent40: rgba(0,0,0,.4);
+$ms-color-whiteTranslucent40: rgba(255,255,255,.4);
+
+
+//== Core brand and accent colors
+//
+$ms-color-yellow: #ffb900;
+$ms-color-yellowLight: #fff100;
+$ms-color-orange: #d83b01;
+$ms-color-orangeLight: #ea4300;
+$ms-color-orangeLighter: #ff8c00;
+$ms-color-redDark: #a80000;
+$ms-color-red: #e81123;
+$ms-color-magentaDark: #5c005c;
+$ms-color-magenta: #b4009e;
+$ms-color-magentaLight: #e3008c;
+$ms-color-purpleDark: #32145a;
+$ms-color-purple: #5c2d91;
+$ms-color-purpleLight: #b4a0ff;
+$ms-color-blueDark: #002050;
+$ms-color-blueMid: #00188f;
+$ms-color-blue: #0078d7;
+$ms-color-blueLight: #00bcf2;
+$ms-color-tealDark: #004b50;
+$ms-color-teal: #008272;
+$ms-color-tealLight: #00b294;
+$ms-color-greenDark: #004b1c;
+$ms-color-green: #107c10;
+$ms-color-greenLight: #bad80a;
+
+
+//== Message colors
+//
+$ms-color-info: $ms-color-green;
+$ms-color-infoBackground: $ms-color-neutralLighter;
+$ms-color-success: $ms-color-green;
+$ms-color-successBackground: #dff6dd;
+$ms-color-alert: $ms-color-orange;
+$ms-color-alertBackground: $ms-color-neutralLighter;
+$ms-color-error: $ms-color-redDark;
+$ms-color-errorBackground: #fde7e9;
+
+
+//== High contrast colors
+//
+$ms-color-contrastBlackDisabled: #00ff00;
+$ms-color-contrastWhiteDisabled: #600000;
+$ms-color-contrastBlackSelected: #1AEBFF;
+$ms-color-contrastWhiteSelected: #37006E;
+$ms-color-contrastBlackLink: #8080ff;
+$ms-color-contrastWhiteLink: #00009F;
diff --git a/dist/sass/_Fabric.Common.scss b/dist/sass/_Fabric.Common.scss
new file mode 100644
index 000000000..73f289f58
--- /dev/null
+++ b/dist/sass/_Fabric.Common.scss
@@ -0,0 +1,15 @@
+@import "./Fabric.Animations";
+@import "./Fabric.Color.Mixins";
+@import "./Fabric.Color.Variables";
+@import "./Fabric.Grid";
+@import "./Fabric.Icons";
+@import "./Fabric.Mixins";
+@import "./Fabric.Mixins.RTL";
+@import './Fabric.Responsive.Utilities.Variables';
+@import "./Fabric.Responsive.Variables";
+@import "./Fabric.Typography";
+@import "./Fabric.Typography.Fonts";
+@import "./Fabric.Typography.Variables";
+@import "./Fabric.Utilities";
+@import "./Fabric.ZIndex.Variables";
+@import "./Office.Color.Variables";
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Grid.scss b/dist/sass/_Fabric.Grid.scss
new file mode 100644
index 000000000..14430d2d8
--- /dev/null
+++ b/dist/sass/_Fabric.Grid.scss
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fluid 12-column grids for small, medium, and large devices
+
+
+//== Grid container (same for all sizes)
+//
+@mixin ms-Grid {
+ @include ms-u-borderBox;
+ @include ms-u-clearfix;
+ padding: 0 8px;
+}
+
+//== Grid rows (pull first and last column out)
+//
+@mixin ms-Grid-row {
+ margin: 0 -8px;
+ @include ms-u-borderBox;
+ @include ms-u-clearfix;
+}
+
+//== Grid cells
+//
+@mixin ms-Grid-col {
+ position: relative;
+ min-height: 1px;
+ padding-left: 8px;
+ padding-right: 8px;
+ @include ms-u-borderBox;
+ float: left;
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Icons.scss b/dist/sass/_Fabric.Icons.scss
new file mode 100644
index 000000000..929059d65
--- /dev/null
+++ b/dist/sass/_Fabric.Icons.scss
@@ -0,0 +1,397 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon definitions
+
+@mixin ms-Icon {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'Office365Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ speak: none;
+}
+
+// Modifiers: Each of the icons.
+@mixin ms-Icon--circleEmpty { content: '\e000'; } // ''
+@mixin ms-Icon--circleFill { content: '\e001'; } // ''
+@mixin ms-Icon--placeholder { content: '\e002'; } // ''
+@mixin ms-Icon--star { content: '\e003'; } // ''
+@mixin ms-Icon--plus { content: '\e004'; } // ''
+@mixin ms-Icon--minus { content: '\e005'; } // ''
+@mixin ms-Icon--question { content: '\e006'; } // ''
+@mixin ms-Icon--exclamation { content: '\e007'; } // ''
+@mixin ms-Icon--person { content: '\e008'; } // ''
+@mixin ms-Icon--mail { content: '\e009'; } // ''
+@mixin ms-Icon--infoCircle { content: '\e00a'; } // ''
+@mixin ms-Icon--alert { content: '\e00b'; } // ''
+@mixin ms-Icon--xCircle { content: '\e00c'; } // ''
+@mixin ms-Icon--mailOpen { content: '\e00d'; } // ''
+@mixin ms-Icon--people { content: '\e00e'; } // ''
+@mixin ms-Icon--bell { content: '\e010'; } // ''
+@mixin ms-Icon--calendar { content: '\e011'; } // ''
+@mixin ms-Icon--scheduling { content: '\e012'; } // ''
+@mixin ms-Icon--event { content: '\e013'; } // ''
+@mixin ms-Icon--folder { content: '\e014'; } // ''
+@mixin ms-Icon--documents { content: '\e015'; } // ''
+@mixin ms-Icon--onedrive { content: '\e016'; } // ''
+@mixin ms-Icon--chat { content: '\e017'; } // ''
+@mixin ms-Icon--sites { content: '\e018'; } // ''
+@mixin ms-Icon--listBullets { content: '\e019'; } // ''
+@mixin ms-Icon--calendarWeek { content: '\e01a'; } // ''
+@mixin ms-Icon--calendarWorkWeek { content: '\e01b'; } // ''
+@mixin ms-Icon--calendarDay { content: '\e01c'; } // ''
+@mixin ms-Icon--folderMove { content: '\e01d'; } // ''
+@mixin ms-Icon--panel { content: '\e01e'; } // ''
+@mixin ms-Icon--popout { content: '\e01f'; } // ''
+@mixin ms-Icon--menu { content: '\e020'; } // ''
+@mixin ms-Icon--home { content: '\e021'; } // ''
+@mixin ms-Icon--favorites { content: '\e022'; } // ''
+@mixin ms-Icon--phone { content: '\e023'; } // ''
+@mixin ms-Icon--mailSend { content: '\e024'; } // ''
+@mixin ms-Icon--save { content: '\e025'; } // ''
+@mixin ms-Icon--trash { content: '\e026'; } // ''
+@mixin ms-Icon--pencil { content: '\e027'; } // ''
+@mixin ms-Icon--flag { content: '\e028'; } // ''
+@mixin ms-Icon--reply { content: '\e029'; } // ''
+@mixin ms-Icon--miniatures { content: '\e02a'; } // ''
+@mixin ms-Icon--voicemail { content: '\e02b'; } // ''
+@mixin ms-Icon--play { content: '\e02c'; } // ''
+@mixin ms-Icon--pause { content: '\e02d'; } // ''
+@mixin ms-Icon--onlineAdd { content: '\e02e'; } // ''
+@mixin ms-Icon--onlineJoin { content: '\e02f'; } // ''
+@mixin ms-Icon--replyAll { content: '\e030'; } // ''
+@mixin ms-Icon--attachment { content: '\e031'; } // ''
+@mixin ms-Icon--drm { content: '\e032'; } // ''
+@mixin ms-Icon--pinDown { content: '\e033'; } // ''
+@mixin ms-Icon--refresh { content: '\e034'; } // ''
+@mixin ms-Icon--gear { content: '\e035'; } // ''
+@mixin ms-Icon--smiley { content: '\e036'; } // ''
+@mixin ms-Icon--info { content: '\e037'; } // ''
+@mixin ms-Icon--lock { content: '\e038'; } // ''
+@mixin ms-Icon--search { content: '\e039'; } // ''
+@mixin ms-Icon--questionReverse { content: '\e03a'; } // ''
+@mixin ms-Icon--notRecurring { content: '\e03b'; } // ''
+@mixin ms-Icon--tasks { content: '\e040'; } // ''
+@mixin ms-Icon--check { content: '\e041'; } // ''
+@mixin ms-Icon--x { content: '\e042'; } // ''
+@mixin ms-Icon--ellipsis { content: '\e045'; } // ''
+@mixin ms-Icon--dot { content: '\e046'; } // ''
+@mixin ms-Icon--arrowUp { content: '\e047'; } // ''
+@mixin ms-Icon--arrowDown { content: '\e048'; } // ''
+@mixin ms-Icon--arrowLeft { content: '\e049'; } // ''
+@mixin ms-Icon--arrowRight { content: '\e04a'; } // ''
+@mixin ms-Icon--download { content: '\e04b'; } // ''
+@mixin ms-Icon--directions { content: '\e04c'; } // ''
+@mixin ms-Icon--microphone { content: '\e04f'; } // ''
+@mixin ms-Icon--caretUp { content: '\e051'; } // ''
+@mixin ms-Icon--caretDown { content: '\e052'; } // ''
+@mixin ms-Icon--caretLeft { content: '\e053'; } // ''
+@mixin ms-Icon--caretRight { content: '\e054'; } // ''
+@mixin ms-Icon--caretUpLeft { content: '\e05a'; } // ''
+@mixin ms-Icon--caretUpRight { content: '\e05b'; } // ''
+@mixin ms-Icon--caretDownRight { content: '\e05c'; } // ''
+@mixin ms-Icon--caretDownLeft { content: '\e05d'; } // ''
+@mixin ms-Icon--note { content: '\e06a'; } // ''
+@mixin ms-Icon--noteReply { content: '\e06b'; } // ''
+@mixin ms-Icon--noteForward { content: '\e06c'; } // ''
+@mixin ms-Icon--key { content: '\e06f'; } // ''
+@mixin ms-Icon--tile { content: '\e070'; } // ''
+@mixin ms-Icon--taskRecurring { content: '\e071'; } // ''
+@mixin ms-Icon--starEmpty { content: '\e073'; } // ''
+@mixin ms-Icon--upload { content: '\e076'; } // ''
+@mixin ms-Icon--wrench { content: '\e077'; } // ''
+@mixin ms-Icon--share { content: '\e078'; } // ''
+@mixin ms-Icon--documentReply { content: '\e079'; } // ''
+@mixin ms-Icon--documentForward { content: '\e07a'; } // ''
+@mixin ms-Icon--partner { content: '\e080'; } // ''
+@mixin ms-Icon--reactivate { content: '\e084'; } // ''
+@mixin ms-Icon--sort { content: '\e085'; } // ''
+@mixin ms-Icon--personAdd { content: '\e086'; } // ''
+@mixin ms-Icon--chevronUp { content: '\e087'; } // ''
+@mixin ms-Icon--chevronDown { content: '\e088'; } // ''
+@mixin ms-Icon--chevronLeft { content: '\e089'; } // ''
+@mixin ms-Icon--chevronRight { content: '\e08a'; } // ''
+@mixin ms-Icon--peopleAdd { content: '\e08c'; } // ''
+@mixin ms-Icon--newsfeed { content: '\e08d'; } // ''
+@mixin ms-Icon--notebook { content: '\e08e'; } // ''
+@mixin ms-Icon--link { content: '\e08f'; } // ''
+@mixin ms-Icon--chevronsUp { content: '\e090'; } // ''
+@mixin ms-Icon--chevronsDown { content: '\e091'; } // ''
+@mixin ms-Icon--chevronsLeft { content: '\e092'; } // ''
+@mixin ms-Icon--chevronsRight { content: '\e093'; } // ''
+@mixin ms-Icon--clutter { content: '\e09a'; } // ''
+@mixin ms-Icon--subscribe { content: '\e09c'; } // ''
+@mixin ms-Icon--unsubscribe { content: '\e09d'; } // ''
+@mixin ms-Icon--personRemove { content: '\e09e'; } // ''
+@mixin ms-Icon--receiptForward { content: '\e0a0'; } // ''
+@mixin ms-Icon--receiptReply { content: '\e0a1'; } // ''
+@mixin ms-Icon--receiptCheck { content: '\e0a2'; } // ''
+@mixin ms-Icon--peopleRemove { content: '\e0a3'; } // ''
+@mixin ms-Icon--merge { content: '\e0a4'; } // ''
+@mixin ms-Icon--split { content: '\e0a5'; } // ''
+@mixin ms-Icon--eventCancel { content: '\e0a6'; } // ''
+@mixin ms-Icon--eventShare { content: '\e0a7'; } // ''
+@mixin ms-Icon--today { content: '\e0a9'; } // ''
+@mixin ms-Icon--oofReply { content: '\e0aa'; } // ''
+@mixin ms-Icon--voicemailReply { content: '\e0ac'; } // ''
+@mixin ms-Icon--voicemailForward { content: '\e0ad'; } // ''
+@mixin ms-Icon--ribbon { content: '\e0af'; } // ''
+@mixin ms-Icon--contact { content: '\e0b0'; } // ''
+@mixin ms-Icon--eye { content: '\e0b1'; } // ''
+@mixin ms-Icon--glasses { content: '\e0b2'; } // ''
+@mixin ms-Icon--print { content: '\e100'; } // ''
+@mixin ms-Icon--room { content: '\e101'; } // ''
+@mixin ms-Icon--post { content: '\e102'; } // ''
+@mixin ms-Icon--toggle { content: '\e103'; } // ''
+@mixin ms-Icon--touch { content: '\e104'; } // ''
+@mixin ms-Icon--clock { content: '\e105'; } // ''
+@mixin ms-Icon--fax { content: '\e106'; } // ''
+@mixin ms-Icon--lightning { content: '\e110'; } // ''
+@mixin ms-Icon--dialpad { content: '\e111'; } // ''
+@mixin ms-Icon--phoneTransfer { content: '\e112'; } // ''
+@mixin ms-Icon--phoneAdd { content: '\e113'; } // ''
+@mixin ms-Icon--late { content: '\e114'; } // ''
+@mixin ms-Icon--chatAdd { content: '\e115'; } // ''
+@mixin ms-Icon--conflict { content: '\e116'; } // ''
+@mixin ms-Icon--navigate { content: '\e117'; } // ''
+@mixin ms-Icon--camera { content: '\e119'; } // ''
+@mixin ms-Icon--filter { content: '\e11a'; } // ''
+@mixin ms-Icon--fullscreen { content: '\e11b'; } // ''
+@mixin ms-Icon--new { content: '\e11c'; } // ''
+@mixin ms-Icon--mailEmpty { content: '\e11d'; } // ''
+@mixin ms-Icon--editBox { content: '\e11e'; } // ''
+@mixin ms-Icon--waffle { content: '\e11f'; } // ''
+@mixin ms-Icon--work { content: '\e120'; } // ''
+@mixin ms-Icon--eventRecurring { content: '\e121'; } // ''
+@mixin ms-Icon--cart { content: '\e122'; } // ''
+@mixin ms-Icon--socialListening { content: '\e123'; } // ''
+@mixin ms-Icon--mapMarker { content: '\e124'; } // ''
+@mixin ms-Icon--org { content: '\e125'; } // ''
+@mixin ms-Icon--replyAlt { content: '\e150'; } // ''
+@mixin ms-Icon--replyAllAlt { content: '\e152'; } // ''
+@mixin ms-Icon--eventInfo { content: '\e154'; } // ''
+@mixin ms-Icon--group { content: '\e155'; } // ''
+@mixin ms-Icon--money { content: '\e161'; } // ''
+@mixin ms-Icon--graph { content: '\e162'; } // ''
+@mixin ms-Icon--noteEdit { content: '\e163'; } // ''
+@mixin ms-Icon--dashboard { content: '\e164'; } // ''
+@mixin ms-Icon--mailEdit { content: '\e165'; } // ''
+@mixin ms-Icon--pinLeft { content: '\e167'; } // ''
+@mixin ms-Icon--heart { content: '\e16a'; } // ''
+@mixin ms-Icon--heartEmpty { content: '\e16b'; } // ''
+@mixin ms-Icon--picture { content: '\e16c'; } // ''
+@mixin ms-Icon--cake { content: '\e16d'; } // ''
+@mixin ms-Icon--books { content: '\e16e'; } // ''
+@mixin ms-Icon--chart { content: '\e16f'; } // ''
+@mixin ms-Icon--video { content: '\e170'; } // ''
+@mixin ms-Icon--soccer { content: '\e171'; } // ''
+@mixin ms-Icon--meal { content: '\e172'; } // ''
+@mixin ms-Icon--balloon { content: '\e173'; } // ''
+@mixin ms-Icon--cat { content: '\e174'; } // ''
+@mixin ms-Icon--dog { content: '\e175'; } // ''
+@mixin ms-Icon--bag { content: '\e176'; } // ''
+@mixin ms-Icon--music { content: '\e177'; } // ''
+@mixin ms-Icon--stopwatch { content: '\e178'; } // ''
+@mixin ms-Icon--coffee { content: '\e179'; } // ''
+@mixin ms-Icon--briefcase { content: '\e17a'; } // ''
+@mixin ms-Icon--pill { content: '\e17b'; } // ''
+@mixin ms-Icon--trophy { content: '\e17c'; } // ''
+@mixin ms-Icon--firstAid { content: '\e17d'; } // ''
+@mixin ms-Icon--plane { content: '\e17e'; } // ''
+@mixin ms-Icon--page { content: '\e17f'; } // ''
+@mixin ms-Icon--car { content: '\e180'; } // ''
+@mixin ms-Icon--dogAlt { content: '\e181'; } // ''
+@mixin ms-Icon--document { content: '\e182'; } // ''
+@mixin ms-Icon--metadata { content: '\e183'; } // ''
+@mixin ms-Icon--pointItem { content: '\e184'; } // ''
+@mixin ms-Icon--text { content: '\e185'; } // ''
+@mixin ms-Icon--fieldText { content: '\e186'; } // ''
+@mixin ms-Icon--fieldNumber { content: '\e187'; } // ''
+@mixin ms-Icon--dropdown { content: '\e188'; } // ''
+@mixin ms-Icon--radioButton { content: '\e189'; } // ''
+@mixin ms-Icon--checkbox { content: '\e18a'; } // ''
+@mixin ms-Icon--story { content: '\e18b'; } // ''
+@mixin ms-Icon--bold { content: '\e18c'; } // ''
+@mixin ms-Icon--italic { content: '\e18d'; } // ''
+@mixin ms-Icon--underline { content: '\e18e'; } // ''
+@mixin ms-Icon--quote { content: '\e18f'; } // ''
+@mixin ms-Icon--styleRemove { content: '\e190'; } // ''
+@mixin ms-Icon--pictureAdd { content: '\e191'; } // ''
+@mixin ms-Icon--pictureRemove { content: '\e192'; } // ''
+@mixin ms-Icon--desktop { content: '\e193'; } // ''
+@mixin ms-Icon--tablet { content: '\e194'; } // ''
+@mixin ms-Icon--mobile { content: '\e195'; } // ''
+@mixin ms-Icon--table { content: '\e196'; } // ''
+@mixin ms-Icon--hide { content: '\e197'; } // ''
+@mixin ms-Icon--shield { content: '\e198'; } // ''
+@mixin ms-Icon--header { content: '\e19a'; } // ''
+@mixin ms-Icon--paint { content: '\e19b'; } // ''
+@mixin ms-Icon--support { content: '\e19c'; } // ''
+@mixin ms-Icon--settings { content: '\e19d'; } // ''
+@mixin ms-Icon--creditCard { content: '\e19e'; } // ''
+@mixin ms-Icon--reload { content: '\e19f'; } // ''
+@mixin ms-Icon--peopleSecurity { content: '\e200'; } // ''
+@mixin ms-Icon--fieldTextBox { content: '\e203'; } // ''
+@mixin ms-Icon--multiChoice { content: '\e204'; } // ''
+@mixin ms-Icon--fieldMail { content: '\e205'; } // ''
+@mixin ms-Icon--contactForm { content: '\e206'; } // ''
+@mixin ms-Icon--circleHalfFilled { content: '\e207'; } // ''
+@mixin ms-Icon--documentPDF { content: '\e208'; } // ''
+@mixin ms-Icon--bookmark { content: '\e209'; } // ''
+@mixin ms-Icon--circleUnfilled { content: '\e20b'; } // ''
+@mixin ms-Icon--circleFilled { content: '\e20c'; } // ''
+@mixin ms-Icon--textBox { content: '\e20e'; } // ''
+@mixin ms-Icon--drop { content: '\e20f'; } // ''
+@mixin ms-Icon--sun { content: '\e210'; } // ''
+@mixin ms-Icon--lifesaver { content: '\e211'; } // ''
+@mixin ms-Icon--lifesaverLock { content: '\e212'; } // ''
+@mixin ms-Icon--mailUnread { content: '\e213'; } // ''
+@mixin ms-Icon--mailRead { content: '\e214'; } // ''
+@mixin ms-Icon--inboxCheck { content: '\e215'; } // ''
+@mixin ms-Icon--folderSearch { content: '\e216'; } // ''
+@mixin ms-Icon--collapse { content: '\e217'; } // ''
+@mixin ms-Icon--expand { content: '\e218'; } // ''
+@mixin ms-Icon--ascending { content: '\e219'; } // ''
+@mixin ms-Icon--descending { content: '\e21a'; } // ''
+@mixin ms-Icon--filterClear { content: '\e21b'; } // ''
+@mixin ms-Icon--checkboxEmpty { content: '\e21c'; } // ''
+@mixin ms-Icon--checkboxMixed { content: '\e21d'; } // ''
+@mixin ms-Icon--boards { content: '\e21e'; } // ''
+@mixin ms-Icon--checkboxCheck { content: '\e21f'; } // ''
+@mixin ms-Icon--frowny { content: '\e220'; } // ''
+@mixin ms-Icon--lightBulb { content: '\e221'; } // ''
+@mixin ms-Icon--globe { content: '\e222'; } // ''
+@mixin ms-Icon--deviceWipe { content: '\e223'; } // ''
+@mixin ms-Icon--listCheck { content: '\e226'; } // ''
+@mixin ms-Icon--listGroup { content: '\e227'; } // ''
+@mixin ms-Icon--timeline { content: '\e228'; } // ''
+@mixin ms-Icon--fontIncrease { content: '\e229'; } // ''
+@mixin ms-Icon--fontDecrease { content: '\e22a'; } // ''
+@mixin ms-Icon--fontColor { content: '\e22b'; } // ''
+@mixin ms-Icon--mailCheck { content: '\e22c'; } // ''
+@mixin ms-Icon--mailDown { content: '\e22d'; } // ''
+@mixin ms-Icon--listCheckbox { content: '\e22e'; } // ''
+@mixin ms-Icon--sunAdd { content: '\e22f'; } // ''
+@mixin ms-Icon--sunQuestion { content: '\e230'; } // ''
+@mixin ms-Icon--chevronThinUp { content: '\e231'; } // ''
+@mixin ms-Icon--chevronThinDown { content: '\e232'; } // ''
+@mixin ms-Icon--chevronThinLeft { content: '\e233'; } // ''
+@mixin ms-Icon--chevronThinRight { content: '\e234'; } // ''
+@mixin ms-Icon--chevronThickUp { content: '\e235'; } // ''
+@mixin ms-Icon--chevronThickDown { content: '\e236'; } // ''
+@mixin ms-Icon--chevronThickLeft { content: '\e237'; } // ''
+@mixin ms-Icon--chevronThickRight { content: '\e238'; } // ''
+@mixin ms-Icon--linkRemove { content: '\e239'; } // ''
+@mixin ms-Icon--alertOutline { content: '\e23b'; } // ''
+@mixin ms-Icon--documentLandscape { content: '\e23c'; } // ''
+@mixin ms-Icon--documentAdd { content: '\e23d'; } // ''
+@mixin ms-Icon--toggleMiddle { content: '\e23e'; } // ''
+@mixin ms-Icon--embed { content: '\e23f'; } // ''
+@mixin ms-Icon--listNumbered { content: '\e240'; } // ''
+@mixin ms-Icon--peopleCheck { content: '\e242'; } // ''
+@mixin ms-Icon--caretUpOutline { content: '\e243'; } // ''
+@mixin ms-Icon--caretDownOutline { content: '\e244'; } // ''
+@mixin ms-Icon--caretLeftOutline { content: '\e245'; } // ''
+@mixin ms-Icon--caretRightOutline { content: '\e246'; } // ''
+@mixin ms-Icon--mailSync { content: '\e248'; } // ''
+@mixin ms-Icon--mailError { content: '\e249'; } // ''
+@mixin ms-Icon--mailPause { content: '\e24a'; } // ''
+@mixin ms-Icon--peopleSync { content: '\e24b'; } // ''
+@mixin ms-Icon--peopleError { content: '\e24c'; } // ''
+@mixin ms-Icon--peoplePause { content: '\e24d'; } // ''
+@mixin ms-Icon--circleBall { content: '\e24e'; } // ''
+@mixin ms-Icon--circleBalloons { content: '\e24f'; } // ''
+@mixin ms-Icon--circleCar { content: '\e250'; } // ''
+@mixin ms-Icon--circleCat { content: '\e251'; } // ''
+@mixin ms-Icon--circleCoffee { content: '\e252'; } // ''
+@mixin ms-Icon--circleDog { content: '\e253'; } // ''
+@mixin ms-Icon--circleLightning { content: '\e254'; } // ''
+@mixin ms-Icon--circlePill { content: '\e255'; } // ''
+@mixin ms-Icon--circlePlane { content: '\e256'; } // ''
+@mixin ms-Icon--circlePoodle { content: '\e257'; } // ''
+@mixin ms-Icon--checkPeople { content: '\e259'; } // ''
+@mixin ms-Icon--documentSearch { content: '\e25a'; } // ''
+@mixin ms-Icon--sortLines { content: '\e25c'; } // ''
+@mixin ms-Icon--calendarPublic { content: '\e25d'; } // ''
+@mixin ms-Icon--contactPublic { content: '\e25e'; } // ''
+@mixin ms-Icon--classNotebook { content: '\e25f'; } // ''
+@mixin ms-Icon--triangleUp { content: '\e260'; } // ''
+@mixin ms-Icon--triangleRight { content: '\e261'; } // ''
+@mixin ms-Icon--triangleDown { content: '\e262'; } // ''
+@mixin ms-Icon--triangleLeft { content: '\e263'; } // ''
+@mixin ms-Icon--triangleEmptyUp { content: '\e264'; } // ''
+@mixin ms-Icon--triangleEmptyRight { content: '\e265'; } // ''
+@mixin ms-Icon--triangleEmptyDown { content: '\e266'; } // ''
+@mixin ms-Icon--triangleEmptyLeft { content: '\e267'; } // ''
+@mixin ms-Icon--filePDF { content: '\e268'; } // ''
+@mixin ms-Icon--fileImage { content: '\e26c'; } // ''
+@mixin ms-Icon--fileDocument { content: '\e26d'; } // ''
+@mixin ms-Icon--listGroup2 { content: '\e26e'; } // ''
+@mixin ms-Icon--copy { content: '\e26f'; } // ''
+@mixin ms-Icon--creditCardOutline { content: '\e270'; } // ''
+@mixin ms-Icon--mailPublic { content: '\e272'; } // ''
+@mixin ms-Icon--folderPublic { content: '\e273'; } // ''
+@mixin ms-Icon--teamwork { content: '\e274'; } // ''
+@mixin ms-Icon--move { content: '\e275'; } // ''
+@mixin ms-Icon--classroom { content: '\e276'; } // ''
+@mixin ms-Icon--menu2 { content: '\e277'; } // ''
+@mixin ms-Icon--plus2 { content: '\e278'; } // ''
+@mixin ms-Icon--tag { content: '\e279'; } // ''
+@mixin ms-Icon--arrowUp2 { content: '\e27a'; } // ''
+@mixin ms-Icon--arrowDown2 { content: '\e27b'; } // ''
+@mixin ms-Icon--circlePlus { content: '\e27c'; } // ''
+@mixin ms-Icon--circleInfo { content: '\e27d'; } // ''
+@mixin ms-Icon--section { content: '\e27e'; } // ''
+@mixin ms-Icon--sections { content: '\e27f'; } // ''
+@mixin ms-Icon--at { content: '\e282'; } // ''
+@mixin ms-Icon--arrowUpRight { content: '\e283'; } // ''
+@mixin ms-Icon--arrowDownRight { content: '\e284'; } // ''
+@mixin ms-Icon--arrowDownLeft { content: '\e285'; } // ''
+@mixin ms-Icon--arrowUpLeft { content: '\e286'; } // ''
+@mixin ms-Icon--bundle { content: '\e287'; } // ''
+@mixin ms-Icon--pictureEdit { content: '\e288'; } // ''
+@mixin ms-Icon--protectionCenter { content: '\e289'; } // ''
+@mixin ms-Icon--alert2 { content: '\e28a'; } // ''
+
+
+@mixin ms-Icon--circle {
+ position: relative;
+ display: inline-block;
+ font-size: 1rem;
+ width: 1em;
+ height: 1em;
+ margin: 0 0.5em 0 0;
+ padding: 0;
+ text-align: left;
+ -webkit-font-smoothing: antialiased;
+
+ &:before, &:after {
+ line-height: 1;
+ font-size: inherit;
+ }
+
+ &:before {
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ position: absolute;
+ }
+
+ &:after {
+ content: '\e000';
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: scale(2);
+ transform-origin: 50% 50%;
+ z-index: $ms-zIndex-back;
+ }
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Mixins.RTL.scss b/dist/sass/_Fabric.Mixins.RTL.scss
new file mode 100644
index 000000000..553e72f91
--- /dev/null
+++ b/dist/sass/_Fabric.Mixins.RTL.scss
@@ -0,0 +1,315 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Internationalization mixins
+
+
+// Base left-to-right mixin definition.
+@mixin LTR {
+ [dir='ltr'] & {
+ @content;
+ }
+}
+
+// Base right-to-left mixin definition.
+@mixin RTL {
+ [dir='rtl'] & {
+ @content;
+ }
+}
+
+// Use baseRTL on a root element (e.g. page or region) that needs RTL support.
+@mixin baseRtl {
+ @include RTL {
+ direction: rtl;
+ unicode-bidi: bidi-override;
+ }
+}
+
+
+// Common CSS property mixins with support for RTL.
+// Use to automatically create RTL versions of your properties.
+
+// Border styles.
+@mixin border-color($top, $right, $bottom, $left) {
+ border-color: $top $right $bottom $left;
+
+ @include RTL {
+ border-color: $top $left $bottom $right;
+ }
+}
+
+@mixin border-left($width, $style, $color) {
+ @include LTR {
+ border-left: $width $style $color;
+ }
+
+ @include RTL {
+ border-right: $width $style $color;
+ }
+}
+
+@mixin border-left-color($color) {
+ @include LTR {
+ border-left-color: $color;
+ }
+
+ @include RTL {
+ border-right-color: $color;
+ }
+}
+
+@mixin border-left-style($style) {
+ @include LTR {
+ border-left-style: $style;
+ }
+
+ @include RTL {
+ border-right-style: $style;
+ }
+}
+
+@mixin border-left-width($width) {
+ @include LTR {
+ border-left-width: $width;
+ }
+
+ @include RTL {
+ border-right-width: $width;
+ }
+}
+
+@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
+ border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+
+ @include RTL {
+ border-radius: $topRight $topLeft $bottomLeft $bottomRight;
+ }
+}
+
+@mixin border-right($width, $style, $color) {
+ @include LTR {
+ border-right: $width $style $color;
+ }
+
+ @include RTL {
+ border-left: $width $style $color;
+ }
+}
+
+@mixin border-right-color($color) {
+ @include LTR {
+ border-right-color: $color;
+ }
+
+ @include RTL {
+ border-left-color: $color;
+ }
+}
+
+@mixin border-right-style($style) {
+ @include LTR {
+ border-right-style: $style;
+ }
+
+ @include RTL {
+ border-left-style: $style;
+ }
+}
+
+@mixin border-right-width($width) {
+ @include LTR {
+ border-right-width: $width;
+ }
+
+ @include RTL {
+ border-left-width: $width;
+ }
+}
+
+// Floats.
+@mixin clear($side) {
+ @if $side == left {
+ @include LTR {
+ clear: $side;
+ }
+
+ @include RTL {
+ clear: right;
+ }
+ } @else if $side == right {
+ @include LTR {
+ clear: $side;
+ }
+
+ @include RTL {
+ clear: left;
+ }
+ } @else {
+ clear: $side;
+ }
+}
+
+@mixin float($direction) {
+ @if $direction == left {
+ @include LTR {
+ float: left;
+ }
+
+ @include RTL {
+ float: right;
+ }
+ } @else {
+ @include LTR {
+ float: right;
+ }
+
+ @include RTL {
+ float: left;
+ }
+ }
+}
+
+// Positioning.
+@mixin left($distance) {
+ @include LTR {
+ left: $distance;
+ }
+
+ @include RTL {
+ right: $distance;
+ }
+}
+
+@mixin right($distance) {
+ @include LTR {
+ right: $distance;
+ }
+
+ @include RTL {
+ left: $distance;
+ }
+}
+
+// Margins.
+@mixin margin($top, $right, $bottom, $left) {
+ margin: $top $right $bottom $left;
+
+ @include RTL {
+ margin: $top $left $bottom $right;
+ }
+}
+
+@mixin margin-left($distance) {
+ @include LTR {
+ margin-left: $distance;
+ }
+
+ @include RTL {
+ margin-right: $distance;
+ }
+}
+
+@mixin margin-right($distance) {
+ @include LTR {
+ margin-right: $distance;
+ }
+ @include RTL {
+ margin-left: $distance;
+ }
+}
+
+// Padding.
+@mixin padding($top, $right, $bottom, $left) {
+ padding: $top $right $bottom $left;
+
+ @include RTL {
+ padding: $top $left $bottom $right;
+ }
+}
+
+@mixin padding-left($distance) {
+ @include LTR {
+ padding-left: $distance;
+ }
+
+ @include RTL {
+ padding-right: $distance;
+ }
+}
+
+@mixin padding-right($distance) {
+ @include LTR {
+ padding-right: $distance;
+ }
+
+ @include RTL {
+ padding-left: $distance;
+ }
+}
+
+// Text-alignment.
+@mixin text-align($direction) {
+ @if $direction == left {
+ @include LTR {
+ text-align: left;
+ }
+
+ @include RTL {
+ text-align: right;
+ }
+ } @else {
+ @include LTR {
+ text-align: right;
+ }
+
+ @include RTL {
+ text-align: left;
+ }
+ }
+}
+
+// Box-shadow.
+@mixin box-shadow($left, $etc) {
+ @include LTR {
+ box-shadow: $left $etc;
+ }
+
+ @include RTL {
+ box-shadow: -$left $etc;
+ }
+}
+
+// Transforms.
+@mixin transform-rtl() {
+ @include LTR {
+ transform: scaleX(1);
+ }
+
+ @include RTL {
+ transform: scaleX(-1);
+ }
+}
+
+// Transitions. Only supported when ONLY left/right are declared
+@mixin transition-property($direction) {
+ @if $direction == left {
+ @include LTR {
+ transition-property: left;
+ }
+
+ @include RTL {
+ transition-property: right;
+ }
+ } @else {
+ @include LTR {
+ transition-property: right;
+ }
+
+ @include RTL {
+ transition-property: left;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Mixins.scss b/dist/sass/_Fabric.Mixins.scss
new file mode 100644
index 000000000..518d9bf04
--- /dev/null
+++ b/dist/sass/_Fabric.Mixins.scss
@@ -0,0 +1,274 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Vendor-prefixed mixins
+
+
+// Border radius.
+@mixin border-radius($ms-radius: 5px) {
+ border-radius: $ms-radius;
+ background-clip: padding-box;
+}
+
+// Drop shadow.
+@mixin drop-shadow($ms-x-offset: 0, $ms-y-offset: 0, $ms-blur: 5px, $ms-spread: 0, $ms-alpha: 0.4) {
+ box-shadow: $ms-x-offset $ms-y-offset $ms-blur $ms-spread rgba(0, 0, 0, $ms-alpha);
+}
+
+// Background gradient.
+@mixin background-gradient($ms-origin: left, $ms-start: #000, $ms-start-location: 0%, $ms-stop: #FFF, $ms-stop-location: 100%) {
+ background-color: $ms-start;
+ background-image: linear-gradient($ms-origin, $ms-start $ms-start-location, $ms-stop $ms-stop-location);
+}
+
+// Rotation.
+@mixin rotate($ms-deg) {
+ transform: rotate($ms-deg);
+}
+
+// Reset button styles.
+@mixin button-reset() {
+ background: none;
+ border: 0;
+ cursor: pointer;
+}
+
+@mixin resetAnimation() {
+ -webkit-animation: none;
+ -moz-animation: none;
+ -ms-animation: none;
+ -o-animation: none;
+ animation: none;
+}
+
+@mixin resetBackface() {
+ backface-visibility: visible;
+}
+
+@mixin resetBackground() {
+ background: 0;
+ background-clip: border-box;
+ background-origin: padding-box;
+}
+
+@mixin resetBorder() {
+ border: 0;
+ border-collapse: separate;
+ border-image: none;
+ border-radius: 0;
+ border-spacing: 0;
+}
+
+@mixin resetBoxShadow() {
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+
+@mixin resetBoxSizing() {
+ box-sizing: content-box;
+}
+
+@mixin resetColumns() {
+ columns: auto;
+ column-count: auto;
+ column-fill: balance;
+ column-gap: normal;
+ column-rule: medium none currentColor;
+ column-rule-color: currentColor;
+ column-rule-style: none;
+ column-rule-width: none;
+ column-span: 1;
+ column-width: auto;
+}
+
+
+// Fonts and Typography Resets
+@mixin resetFont() {
+ font: normal;
+ font-family: inherit;
+ font-size: normal;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+}
+
+@mixin resetTextStyling() {
+ text-align: inherit;
+ text-align-last: auto;
+ text-decoration: none;
+ text-decoration-color: inherit;
+ text-decoration-line: none;
+ text-decoration-style: solid;
+ text-indent: 0;
+ text-shadow: none;
+ text-transform: none;
+ line-height: normal;
+ letter-spacing: normal;
+ word-spacing: normal;
+}
+
+
+// Box Model Resets
+@mixin resetPadding() {
+ padding: 0;
+}
+
+@mixin resetMargins() {
+ margin: 0;
+}
+
+@mixin resetOverflow() {
+ overflow: visible;
+}
+
+@mixin resetMax() {
+ max-height: none;
+ max-width: none;
+}
+
+@mixin resetMin() {
+ min-height: 0;
+ min-width: 0;
+}
+
+@mixin resetPositioning() {
+ bottom: auto;
+ left: auto;
+ top: auto;
+ left: auto;
+}
+
+@mixin resetFloat() {
+ float: none;
+}
+
+@mixin resetHeight($ms-useMaxMin: false) {
+ height: auto;
+ @if $ms-useMaxMin == true {
+ min-height: 0;
+ max-height: 0;
+ }
+}
+
+@mixin resetWidth($ms-useMaxMin: false) {
+ width: auto;
+ @if $ms-useMaxMin == true {
+ min-width: 0;
+ max-width: 0;
+ }
+}
+
+@mixin resetPosition() {
+ position: static;
+}
+
+@mixin resetPerspective() {
+ -webkit-perspective: none;
+ -webkit-perspective-origin: 50% 50%;
+ perspective: none;
+ perspective-origin: 50% 50%;
+
+}
+
+@mixin resetTransition() {
+ -webkit-transition: none;
+ transition: none;
+}
+
+@mixin resetListStyle() {
+ list-style: none;
+}
+
+@mixin resetTransform() {
+ -ms-transform: none;
+ -webkit-transform: none;
+ -webkit-transform-style: flat;
+ transform: none;
+ transform-style: flat;
+}
+
+@mixin resetOutline() {
+ outline: 0;
+}
+
+@mixin resetPageBreak() {
+ page-break-after: auto;
+ page-break-before: auto;
+ page-break-inside: auto;
+}
+
+@mixin resetDisplay() {
+ display: block;
+}
+
+@mixin resetVerticalAlign() {
+ vertical-align: baseline;
+}
+
+// Prevents the text within a block element from wrapping to second line.
+@mixin noWrap() {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+// Input placehoder
+@mixin input-placeholder {
+ &::-webkit-input-placeholder,
+ &::-moz-placeholder,
+ &:-moz-placeholder,
+ &:-ms-input-placeholder {
+ @content;
+ }
+}
+
+// Animations
+@mixin animationName($ms-name) {
+ -webkit-animation-name: $ms-name;
+ -moz-animation-name: $ms-name;
+ -ms-animation-name: $ms-name;
+ -o-animation-name: $ms-name;
+ animation-name: $ms-name;
+}
+
+@mixin animationDuration($ms-duration) {
+ -webkit-animation-duration: $ms-duration;
+ -moz-animation-duration: $ms-duration;
+ -ms-animation-duration: $ms-duration;
+ -o-animation-duration: $ms-duration;
+}
+
+@mixin animationTiming($ms-function) {
+ -webkit-animation-timing-function: $ms-function;
+ -moz-animation-timing-function: $ms-function;
+ -ms-animation-timing-function: $ms-function;
+ -o-animation-timing-function: $ms-function;
+ animation-timing-function: $ms-function;
+}
+
+@mixin animationFillMode($ms-mode) {
+ -webkit-animation-fill-mode: $ms-mode;
+ -moz-animation-fill-mode: $ms-mode;
+ -ms-animation-fill-mode: $ms-mode;
+ -o-animation-fill-mode: $ms-mode;
+ animation-fill-mode: $ms-mode;
+}
+
+// Flexbox
+@mixin flexBox() {
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+@mixin alignItems($ms-mode) {
+ -webkit-box-align: $ms-mode;
+ -moz-box-align: $ms-mode;
+ -ms-flex-align: $ms-mode;
+ -webkit-align-items: $ms-mode;
+ align-items: $ms-mode;
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Responsive.Utilities.Variables.scss b/dist/sass/_Fabric.Responsive.Utilities.Variables.scss
new file mode 100644
index 000000000..ab234df8f
--- /dev/null
+++ b/dist/sass/_Fabric.Responsive.Utilities.Variables.scss
@@ -0,0 +1,697 @@
+// Small Screens
+@mixin ms-u-sm12 {
+ width: 100%;
+}
+@mixin ms-u-sm11 {
+ width: 91.66666666666666%;
+}
+@mixin ms-u-sm10 {
+ width: 83.33333333333334%;
+}
+@mixin ms-u-sm9 {
+ width: 75%;
+}
+@mixin ms-u-sm8 {
+ width: 66.66666666666666%;
+}
+@mixin ms-u-sm7 {
+ width: 58.333333333333336%;
+}
+@mixin ms-u-sm6 {
+ width: 50%;
+}
+@mixin ms-u-sm5 {
+ width: 41.66666666666667%;
+}
+@mixin ms-u-sm4 {
+ width: 33.33333333333333%;
+}
+@mixin ms-u-sm3 {
+ width: 25%;
+}
+@mixin ms-u-sm2 {
+ width: 16.666666666666664%;
+}
+@mixin ms-u-sm1 {
+ width: 8.333333333333332%;
+}
+@mixin ms-u-smPull12 {
+ right: 100%;
+}
+@mixin ms-u-smPull11 {
+ right: 91.66666666666666%;
+}
+@mixin ms-u-smPull10 {
+ right: 83.33333333333334%;
+}
+@mixin ms-u-smPull9 {
+ right: 75%;
+}
+@mixin ms-u-smPull8 {
+ right: 66.66666666666666%;
+}
+@mixin ms-u-smPull7 {
+ right: 58.333333333333336%;
+}
+@mixin ms-u-smPull6 {
+ right: 50%;
+}
+@mixin ms-u-smPull5 {
+ right: 41.66666666666667%;
+}
+@mixin ms-u-smPull4 {
+ right: 33.33333333333333%;
+}
+@mixin ms-u-smPull3 {
+ right: 25%;
+}
+@mixin ms-u-smPull2 {
+ right: 16.666666666666664%;
+}
+@mixin ms-u-smPull1 {
+ right: 8.333333333333332%;
+}
+@mixin ms-u-smPull0 {
+ right: auto;
+}
+@mixin ms-u-smPush12 {
+ left: 100%;
+}
+@mixin ms-u-smPush11 {
+ left: 91.66666666666666%;
+}
+@mixin ms-u-smPush10 {
+ left: 83.33333333333334%;
+}
+@mixin ms-u-smPush9 {
+ left: 75%;
+}
+@mixin ms-u-smPush8 {
+ left: 66.66666666666666%;
+}
+@mixin ms-u-smPush7 {
+ left: 58.333333333333336%;
+}
+@mixin ms-u-smPush6 {
+ left: 50%;
+}
+@mixin ms-u-smPush5 {
+ left: 41.66666666666667%;
+}
+@mixin ms-u-smPush4 {
+ left: 33.33333333333333%;
+}
+@mixin ms-u-smPush3 {
+ left: 25%;
+}
+@mixin ms-u-smPush2 {
+ left: 16.666666666666664%;
+}
+@mixin ms-u-smPush1 {
+ left: 8.333333333333332%;
+}
+@mixin ms-u-smPush0 {
+ left: auto;
+}
+
+// Medium Screens
+@mixin ms-u-md12 {
+width: 100%;
+}
+@mixin ms-u-md11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-md10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-md9 {
+width: 75%;
+}
+@mixin ms-u-md8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-md7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-md6 {
+width: 50%;
+}
+@mixin ms-u-md5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-md4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-md3 {
+width: 25%;
+}
+@mixin ms-u-md2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-md1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-mdPull12 {
+right: 100%;
+}
+@mixin ms-u-mdPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-mdPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-mdPull9 {
+right: 75%;
+}
+@mixin ms-u-mdPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-mdPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-mdPull6 {
+right: 50%;
+}
+@mixin ms-u-mdPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-mdPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-mdPull3 {
+right: 25%;
+}
+@mixin ms-u-mdPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-mdPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-mdPull0 {
+right: auto;
+}
+@mixin ms-u-mdPush12 {
+left: 100%;
+}
+@mixin ms-u-mdPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-mdPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-mdPush9 {
+left: 75%;
+}
+@mixin ms-u-mdPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-mdPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-mdPush6 {
+left: 50%;
+}
+@mixin ms-u-mdPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-mdPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-mdPush3 {
+left: 25%;
+}
+@mixin ms-u-mdPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-mdPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-mdPush0 {
+left: auto;
+}
+
+// Large screens
+@mixin ms-u-lg12 {
+width: 100%;
+}
+@mixin ms-u-lg11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-lg10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-lg9 {
+width: 75%;
+}
+@mixin ms-u-lg8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-lg7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-lg6 {
+width: 50%;
+}
+@mixin ms-u-lg5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-lg4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-lg3 {
+width: 25%;
+}
+@mixin ms-u-lg2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-lg1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-lgPull12 {
+right: 100%;
+}
+@mixin ms-u-lgPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-lgPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-lgPull9 {
+right: 75%;
+}
+@mixin ms-u-lgPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-lgPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-lgPull6 {
+right: 50%;
+}
+@mixin ms-u-lgPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-lgPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-lgPull3 {
+right: 25%;
+}
+@mixin ms-u-lgPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-lgPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-lgPull0 {
+right: auto;
+}
+@mixin ms-u-lgPush12 {
+left: 100%;
+}
+@mixin ms-u-lgPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-lgPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-lgPush9 {
+left: 75%;
+}
+@mixin ms-u-lgPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-lgPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-lgPush6 {
+left: 50%;
+}
+@mixin ms-u-lgPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-lgPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-lgPush3 {
+left: 25%;
+}
+@mixin ms-u-lgPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-lgPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-lgPush0 {
+left: auto;
+}
+
+// Extra Large Screens
+@mixin ms-u-xl12 {
+width: 100%;
+}
+@mixin ms-u-xl11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-xl10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-xl9 {
+width: 75%;
+}
+@mixin ms-u-xl8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-xl7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-xl6 {
+width: 50%;
+}
+@mixin ms-u-xl5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-xl4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-xl3 {
+width: 25%;
+}
+@mixin ms-u-xl2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-xl1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-xlPull12 {
+right: 100%;
+}
+@mixin ms-u-xlPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-xlPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-xlPull9 {
+right: 75%;
+}
+@mixin ms-u-xlPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-xlPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-xlPull6 {
+right: 50%;
+}
+@mixin ms-u-xlPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-xlPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-xlPull3 {
+right: 25%;
+}
+@mixin ms-u-xlPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-xlPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-xlPull0 {
+right: auto;
+}
+@mixin ms-u-xlPush12 {
+left: 100%;
+}
+@mixin ms-u-xlPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-xlPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-xlPush9 {
+left: 75%;
+}
+@mixin ms-u-xlPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-xlPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-xlPush6 {
+left: 50%;
+}
+@mixin ms-u-xlPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-xlPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-xlPush3 {
+left: 25%;
+}
+@mixin ms-u-xlPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-xlPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-xlPush0 {
+left: auto;
+}
+
+
+// XXL Screens
+@mixin ms-u-xxl12 {
+width: 100%;
+}
+@mixin ms-u-xxl11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-xxl10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-xxl9 {
+width: 75%;
+}
+@mixin ms-u-xxl8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-xxl7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-xxl6 {
+width: 50%;
+}
+@mixin ms-u-xxl5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-xxl4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-xxl3 {
+width: 25%;
+}
+@mixin ms-u-xxl2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-xxl1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-xxlPull12 {
+right: 100%;
+}
+@mixin ms-u-xxlPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-xxlPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-xxlPull9 {
+right: 75%;
+}
+@mixin ms-u-xxlPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-xxlPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-xxlPull6 {
+right: 50%;
+}
+@mixin ms-u-xxlPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-xxlPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-xxlPull3 {
+right: 25%;
+}
+@mixin ms-u-xxlPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-xxlPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-xxlPull0 {
+right: auto;
+}
+@mixin ms-u-xxlPush12 {
+left: 100%;
+}
+@mixin ms-u-xxlPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-xxlPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-xxlPush9 {
+left: 75%;
+}
+@mixin ms-u-xxlPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-xxlPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-xxlPush6 {
+left: 50%;
+}
+@mixin ms-u-xxlPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-xxlPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-xxlPush3 {
+left: 25%;
+}
+@mixin ms-u-xxlPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-xxlPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-xxlPush0 {
+left: auto;
+}
+
+// Extra extra extra large screens
+
+@mixin ms-u-xxxl12 {
+width: 100%;
+}
+@mixin ms-u-xxxl11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-xxxl10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-xxxl9 {
+width: 75%;
+}
+@mixin ms-u-xxxl8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-xxxl7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-xxxl6 {
+width: 50%;
+}
+@mixin ms-u-xxxl5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-xxxl4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-xxxl3 {
+width: 25%;
+}
+@mixin ms-u-xxxl2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-xxxl1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-xxxlPull12 {
+right: 100%;
+}
+@mixin ms-u-xxxlPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-xxxlPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-xxxlPull9 {
+right: 75%;
+}
+@mixin ms-u-xxxlPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-xxxlPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-xxxlPull6 {
+right: 50%;
+}
+@mixin ms-u-xxxlPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-xxxlPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-xxxlPull3 {
+right: 25%;
+}
+@mixin ms-u-xxxlPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-xxxlPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-xxxlPull0 {
+right: auto;
+}
+@mixin ms-u-xxxlPush12 {
+left: 100%;
+}
+@mixin ms-u-xxxlPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-xxxlPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-xxxlPush9 {
+left: 75%;
+}
+@mixin ms-u-xxxlPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-xxxlPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-xxxlPush6 {
+left: 50%;
+}
+@mixin ms-u-xxxlPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-xxxlPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-xxxlPush3 {
+left: 25%;
+}
+@mixin ms-u-xxxlPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-xxxlPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-xxxlPush0 {
+left: auto;
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Responsive.Variables.scss b/dist/sass/_Fabric.Responsive.Variables.scss
new file mode 100644
index 000000000..e553f6a8f
--- /dev/null
+++ b/dist/sass/_Fabric.Responsive.Variables.scss
@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric responsive variables
+
+
+//== Variables for responsive breakpoints
+//
+
+// Small screen / phone (320px - 479px)
+$ms-screen-sm-min: 320px;
+
+// Medium screen / tablet (480px - 639px)
+$ms-screen-md-min: 480px;
+
+// Large screen / tablet (640px - 1023px)
+$ms-screen-lg-min: 640px;
+
+// Extra large screen / tablet (1024px - 1365px)
+$ms-screen-xl-min: 1024px;
+
+// Extra extra large screen / desktop (1366px - 1919px)
+$ms-screen-xxl-min: 1366px;
+
+// Extra extra extra large screen / desktop (1366px and up)
+$ms-screen-xxxl-min: 1920px;
+
+// Set all maxes since order matters in SASS
+$ms-screen-sm-max: ($ms-screen-md-min - 1);
+$ms-screen-md-max: ($ms-screen-lg-min - 1);
+$ms-screen-lg-max: ($ms-screen-xl-min - 1);
+$ms-screen-xl-max: ($ms-screen-xxl-min - 1);
+$ms-screen-xxl-max: ($ms-screen-xxxl-min - 1);
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Typography.Fonts.scss b/dist/sass/_Fabric.Typography.Fonts.scss
new file mode 100644
index 000000000..1b56a88cb
--- /dev/null
+++ b/dist/sass/_Fabric.Typography.Fonts.scss
@@ -0,0 +1,170 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Font definitions
+
+
+// Font weights.
+$ms-light: "Segoe UI Light";
+$ms-regular: "Segoe UI Regular";
+$ms-semibold: "Segoe UI Semibold";
+$ms-semilight: "Segoe UI Semilight";
+
+
+// Font paths.
+$ms-font-directory: "https://appsforoffice.microsoft.com/fabric/fonts";
+$ms-font-path-arabic: "SegoeUI-Arabic";
+$ms-font-path-cyrillic: "SegoeUI-Cyrillic";
+$ms-font-path-easteuropean: "SegoeUI-EastEuropean";
+$ms-font-path-greek: "SegoeUI-Greek";
+$ms-font-path-hebrew: "SegoeUI-Hebrew";
+$ms-font-path-vietnamese: "SegoeUI-Vietnamese";
+$ms-font-path-westeuropean: "SegoeUI-WestEuropean";
+
+
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+// Mixins to generate @font-face rules for unique languages.
+@mixin SegoeUILight($ms-font-language, $ms-font-path) {
+ @font-face {
+ font-family: "#{$ms-light} #{$ms-font-language}";
+ src: local("Segoe UI Light"),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff2') format('woff2'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff') format('woff'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+}
+
+@mixin SegoeUIRegular($ms-font-language, $ms-font-path) {
+ @font-face {
+ font-family: "#{$ms-regular} #{$ms-font-language}";
+ src: local("Segoe UI"),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff2') format('woff2'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff') format('woff'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+}
+
+@mixin SegoeUISemilight($ms-font-language, $ms-font-path) {
+ @font-face {
+ font-family: "#{$ms-semilight} #{$ms-font-language}";
+ src: local("Segoe UI Semilight"),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff2') format('woff2'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff') format('woff'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+}
+
+@mixin SegoeUISemibold($ms-font-language, $ms-font-path) {
+ @font-face {
+ font-family: "#{$ms-semibold} #{$ms-font-language}";
+ src: local("Segoe UI Semibold"),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff2') format('woff2'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff') format('woff'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+}
+
+// Mixins to generate language-specific font faces.
+@mixin SegoeUIArabicLight {
+ @include SegoeUILight("Arabic", $ms-font-path-arabic);
+}
+@mixin SegoeUIArabicRegular {
+ @include SegoeUIRegular("Arabic", $ms-font-path-arabic);
+}
+@mixin SegoeUIArabicSemibold {
+ @include SegoeUISemibold("Arabic", $ms-font-path-arabic);
+}
+@mixin SegoeUIArabicSemilight {
+ @include SegoeUISemilight("Arabic", $ms-font-path-arabic);
+}
+
+@mixin SegoeUICyrillicLight {
+ @include SegoeUILight("Cyrillic", $ms-font-path-cyrillic);
+}
+@mixin SegoeUICyrillicRegular {
+ @include SegoeUIRegular("Cyrillic", $ms-font-path-cyrillic);
+}
+@mixin SegoeUICyrillicSemibold {
+ @include SegoeUISemibold("Cyrillic", $ms-font-path-cyrillic);
+}
+@mixin SegoeUICyrillicSemilight {
+ @include SegoeUISemilight("Cyrillic", $ms-font-path-cyrillic);
+}
+
+@mixin SegoeUIEastEuropeanLight {
+ @include SegoeUILight("EastEuropean", $ms-font-path-easteuropean);
+}
+@mixin SegoeUIEastEuropeanRegular {
+ @include SegoeUIRegular("EastEuropean", $ms-font-path-easteuropean);
+}
+@mixin SegoeUIEastEuropeanSemibold {
+ @include SegoeUISemibold("EastEuropean", $ms-font-path-easteuropean);
+}
+@mixin SegoeUIEastEuropeanSemilight {
+ @include SegoeUISemilight("EastEuropean", $ms-font-path-easteuropean);
+}
+
+@mixin SegoeUIGreekLight {
+ @include SegoeUILight("Greek", $ms-font-path-greek);
+}
+@mixin SegoeUIGreekRegular {
+ @include SegoeUIRegular("Greek", $ms-font-path-greek);
+}
+@mixin SegoeUIGreekSemibold {
+ @include SegoeUISemibold("Greek", $ms-font-path-greek);
+}
+@mixin SegoeUIGreekSemilight {
+ @include SegoeUISemilight("Greek", $ms-font-path-greek);
+}
+
+@mixin SegoeUIHebrewLight {
+ @include SegoeUILight("Hebrew", $ms-font-path-hebrew);
+}
+@mixin SegoeUIHebrewRegular {
+ @include SegoeUIRegular("Hebrew", $ms-font-path-hebrew);
+}
+@mixin SegoeUIHebrewSemibold {
+ @include SegoeUISemibold("Hebrew", $ms-font-path-hebrew);
+}
+@mixin SegoeUIHebrewSemilight {
+ @include SegoeUISemilight("Hebrew", $ms-font-path-hebrew);
+}
+
+@mixin SegoeUIVietnameseLight {
+ @include SegoeUILight("Vietnamese", $ms-font-path-vietnamese);
+}
+@mixin SegoeUIVietnameseRegular {
+ @include SegoeUIRegular("Vietnamese", $ms-font-path-vietnamese);
+}
+@mixin SegoeUIVietnameseSemibold {
+ @include SegoeUISemibold("Vietnamese", $ms-font-path-vietnamese);
+}
+@mixin SegoeUIVietnameseSemilight {
+ @include SegoeUISemilight("Vietnamese", $ms-font-path-vietnamese);
+}
+
+@mixin SegoeUIWestEuropeanLight {
+ @include SegoeUILight("WestEuropean", $ms-font-path-westeuropean);
+}
+@mixin SegoeUIWestEuropeanRegular {
+ @include SegoeUIRegular("WestEuropean", $ms-font-path-westeuropean);
+}
+@mixin SegoeUIWestEuropeanSemibold {
+ @include SegoeUISemibold("WestEuropean", $ms-font-path-westeuropean);
+}
+@mixin SegoeUIWestEuropeanSemilight {
+ @include SegoeUISemilight("WestEuropean", $ms-font-path-westeuropean);
+}
diff --git a/dist/sass/_Fabric.Typography.Language.Overrides.scss b/dist/sass/_Fabric.Typography.Language.Overrides.scss
new file mode 100644
index 000000000..c47014a67
--- /dev/null
+++ b/dist/sass/_Fabric.Typography.Language.Overrides.scss
@@ -0,0 +1,118 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Language override definitions
+
+
+// A mixin that overrides all of the font classes for languages that
+// use system fonts. A single font-family is used for all weights.
+@mixin language-override-system-fonts($ms-lang-code, $ms-font-family) {
+ *[lang="#{$ms-lang-code}"] {
+ .ms-font-mi,
+ .ms-font-xs,
+ .ms-font-s,
+ .ms-font-s-plus,
+ .ms-font-m,
+ .ms-font-m-plus,
+ .ms-font-l,
+ .ms-font-xl,
+ .ms-font-xxl,
+ .ms-font-su,
+ .ms-fontWeight-light,
+ .ms-fontWeight-light-hover:hover,
+ .ms-fontWeight-semilight,
+ .ms-fontWeight-semilight-hover:hover,
+ .ms-fontWeight-regular,
+ .ms-fontWeight-regular-hover:hover,
+ .ms-fontWeight-semibold,
+ .ms-fontWeight-semibold-hover:hover {
+ font-family: $ms-font-family;
+ }
+ }
+}
+
+// Base font stack.
+$ms-font-system-base: 'Segoe UI', Tahoma, Arial, sans-serif;
+
+// Variables for each of the non-distributed (native) font stacks.
+$ms-font-stack-japanese: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-system-base;
+$ms-font-stack-korean: 'Malgun Gothic', Gulim, $ms-font-system-base;
+$ms-font-stack-chinese-simplified: 'Microsoft Yahei', Verdana, Simsun, $ms-font-system-base;
+$ms-font-stack-chinese-traditional: 'Microsoft Jhenghei', Pmingliu, $ms-font-system-base;
+$ms-font-stack-hindi: 'Nirmala UI', $ms-font-system-base;
+
+
+//== Web fonts
+//
+// A mixin that overrides all of the font classes for languages that use
+// distributed web fonts. These reference different fonts for each weight.
+@mixin language-override-web-fonts($ms-lang-code, $ms-font-family-light, $ms-font-family-semilight, $ms-font-family-regular, $ms-font-family-semibold) {
+ *[lang="#{$ms-lang-code}"] {
+ .ms-font-xl,
+ .ms-font-xxl,
+ .ms-fontWeight-light,
+ .ms-fontWeight-light-hover:hover {
+ font-family: $ms-font-family-light;
+ }
+ .ms-font-l,
+ .ms-font-su,
+ .ms-fontWeight-semilight,
+ .ms-fontWeight-semilight-hover:hover {
+ font-family: $ms-font-family-semilight;
+ }
+ .ms-fontWeight-regular,
+ .ms-fontweight-regular-hover:hover {
+ font-family: $ms-font-family-regular;
+ }
+ .ms-font-mi,
+ .ms-fontWeight-semibold,
+ .ms-fontWeight-semibold-hover:hover {
+ font-family: $ms-font-family-semibold;
+ }
+ }
+}
+
+// Variables for each of the web font stacks.
+
+// East European
+$ms-font-family-light-eastEuropean: 'Segoe UI Light EastEuropean', $ms-font-family-light;
+$ms-font-family-semilight-eastEuropean: 'Segoe UI Semilight EastEuropean', $ms-font-family-semilight;
+$ms-font-family-regular-eastEuropean: 'Segoe UI Regular EastEuropean', $ms-font-family-regular;
+$ms-font-family-semibold-eastEuropean: 'Segoe UI Semibold EastEuropean', $ms-font-family-semibold;
+
+// Cyrillic
+$ms-font-family-light-cyrillic: 'Segoe UI Light Cyrillic', $ms-font-family-light;
+$ms-font-family-semilight-cyrillic: 'Segoe UI Semilight Cyrillic', $ms-font-family-semilight;
+$ms-font-family-regular-cyrillic: 'Segoe UI Regular Cyrillic', $ms-font-family-regular;
+$ms-font-family-semibold-cyrillic: 'Segoe UI Semibold Cyrillic', $ms-font-family-semibold;
+
+// Leelawadee
+$ms-font-family-semilight-leelawadee: 'Leelawadee UI Semilight', 'Kmer UI', $ms-font-family-semilight;
+$ms-font-family-regular-leelawadee: 'Leelawadee UI Regular', 'Kmer UI', $ms-font-family-regular;
+$ms-font-family-semibold-leelawadee: 'Leelawadee UI Bold', 'Kmer UI', $ms-font-family-semibold;
+
+// Arabic
+$ms-font-family-light-arabic: 'Segoe UI Light Arabic', $ms-font-family-light;
+$ms-font-family-semilight-arabic: 'Segoe UI Semilight Arabic', $ms-font-family-semilight;
+$ms-font-family-regular-arabic: 'Segoe UI Regular Arabic', $ms-font-family-regular;
+$ms-font-family-semibold-arabic: 'Segoe UI Semibold Arabic', $ms-font-family-semibold;
+
+// Greek
+$ms-font-family-light-greek: 'Segoe UI Light Greek', $ms-font-family-light;
+$ms-font-family-semilight-greek: 'Segoe UI Semilight Greek', $ms-font-family-semilight;
+$ms-font-family-regular-greek: 'Segoe UI Regular Greek', $ms-font-family-regular;
+$ms-font-family-semibold-greek: 'Segoe UI Semibold Greek', $ms-font-family-semibold;
+
+// Hebrew
+$ms-font-family-light-hebrew: 'Segoe UI Light Hebrew', $ms-font-family-light;
+$ms-font-family-semilight-hebrew: 'Segoe UI Semilight Hebrew', $ms-font-family-semilight;
+$ms-font-family-regular-hebrew: 'Segoe UI Regular Hebrew', $ms-font-family-regular;
+$ms-font-family-semibold-hebrew: 'Segoe UI Semibold Hebrew', $ms-font-family-semibold;
+
+// Vietnamese
+$ms-font-family-light-vietnamese: 'Segoe UI Light Vietnamese', $ms-font-family-light;
+$ms-font-family-semilight-vietnamese: 'Segoe UI Semilight Vietnamese', $ms-font-family-semilight;
+$ms-font-family-regular-vietnamese: 'Segoe UI Regular Vietnamese', $ms-font-family-regular;
+$ms-font-family-semibold-vietnamese: 'Segoe UI Semibold Vietnamese', $ms-font-family-semibold;
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Typography.Variables.scss b/dist/sass/_Fabric.Typography.Variables.scss
new file mode 100644
index 000000000..71a556581
--- /dev/null
+++ b/dist/sass/_Fabric.Typography.Variables.scss
@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Core Typography variables
+
+
+$ms-font-family-light: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+$ms-font-family-regular: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+$ms-font-family-semilight: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+$ms-font-family-semibold: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
+
+
+//== Type sizes
+//
+
+$ms-font-size-su: 42px;
+$ms-font-size-xxl: 28px;
+$ms-font-size-xl: 21px;
+$ms-font-size-l: 17px;
+$ms-font-size-m-plus: 15px;
+$ms-font-size-m: 14px;
+$ms-font-size-s-plus: 13px;
+$ms-font-size-s: 12px;
+$ms-font-size-xs: 11px;
+$ms-font-size-mi: 10px;
diff --git a/dist/sass/_Fabric.Typography.scss b/dist/sass/_Fabric.Typography.scss
new file mode 100644
index 000000000..0881937e9
--- /dev/null
+++ b/dist/sass/_Fabric.Typography.scss
@@ -0,0 +1,353 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Typographic mixins arranged with appropriate size and family combinations.
+@import 'Fabric.Typography.Variables';
+
+// Super Styles (LIMITED USE)
+// Weights: Light
+@mixin ms-font-su {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-light;
+ font-size: $ms-font-size-su;
+ font-weight: normal;
+}
+// No touch class for Super
+
+// Extra-Extra-Large
+// Allowed weights: Light, SemiLight
+@mixin ms-font-xxl {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-light;
+ font-size: $ms-font-size-xxl;
+ font-weight: normal;
+}
+
+// Extra-Large Styles
+// Allowed weights: Light, SemiLight
+@mixin ms-font-xl {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-light;
+ font-size: $ms-font-size-xl;
+ font-weight: normal;
+}
+
+// Large Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-l {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-semilight;
+ font-size: $ms-font-size-l;
+ font-weight: normal;
+}
+
+// Medium Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-m-plus {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-regular;
+ font-size: $ms-font-size-m-plus;
+ font-weight: normal;
+}
+
+// Medium Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-m {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-regular;
+ font-size: $ms-font-size-m;
+ font-weight: normal;
+}
+
+// Small Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-s-plus {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-regular;
+ font-size: $ms-font-size-s-plus;
+ font-weight: normal;
+}
+
+// Small Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-s {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-regular;
+ font-size: $ms-font-size-s;
+ font-weight: normal;
+}
+
+// XS Styles
+// Allowed weights: SemiLight, Regular, Semibold
+@mixin ms-font-xs {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-regular;
+ font-size: $ms-font-size-xs;
+ font-weight: normal;
+}
+
+// Micro Styles (LIMITED USE)
+// Weights: Semibold
+@mixin ms-font-mi {
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-semibold;
+ font-size: $ms-font-size-mi;
+ font-weight: normal;
+}
+
+//== Helper classes & mixins
+//
+// Helper mixins to override default type values
+
+// Font weights
+@mixin ms-fontWeight-light{
+ font-family: $ms-font-family-light;
+}
+
+@mixin ms-fontWeight-semilight{
+ font-family: $ms-font-family-semilight;
+}
+
+@mixin ms-fontWeight-regular {
+ font-family: $ms-font-family-regular;
+}
+
+@mixin ms-fontWeight-semibold {
+ font-family: $ms-font-family-semibold;
+}
+
+// Font sizes
+@mixin ms-fontSize-su {
+ font-size: $ms-font-size-su;
+}
+
+@mixin ms-fontSize-xxl {
+ font-size: $ms-font-size-xxl;
+}
+
+@mixin ms-fontSize-xl {
+ font-size: $ms-font-size-xl;
+}
+
+@mixin ms-fontSize-l {
+ font-size: $ms-font-size-l;
+}
+
+@mixin ms-fontSize-mPlus {
+ font-size: $ms-font-size-m-plus;
+}
+
+@mixin ms-fontSize-m {
+ font-size: $ms-font-size-m;
+}
+
+@mixin ms-fontSize-sPlus {
+ font-size: $ms-font-size-s-plus;
+}
+
+@mixin ms-fontSize-s {
+ font-size: $ms-font-size-s;
+}
+
+@mixin ms-fontSize-xs {
+ font-size: $ms-font-size-xs;
+}
+
+@mixin ms-fontSize-mi {
+ font-size: $ms-font-size-mi;
+}
+
+// Theme colors
+@mixin ms-fontColor-themeDarker {
+ color: $ms-color-themeDarker;
+}
+
+@mixin ms-fontColor-themeDark {
+ color: $ms-color-themeDark;
+}
+
+@mixin ms-fontColor-themeDarkAlt {
+ color: $ms-color-themeDarkAlt;
+}
+
+@mixin ms-fontColor-themePrimary {
+ color: $ms-color-themePrimary;
+}
+
+@mixin ms-fontColor-themeSecondary {
+ color: $ms-color-themeSecondary;
+}
+
+@mixin ms-fontColor-themeTertiary {
+ color: $ms-color-themeTertiary;
+}
+
+@mixin ms-fontColor-themeLight {
+ color: $ms-color-themeLight;
+}
+
+@mixin ms-fontColor-themeLighter {
+ color: $ms-color-themeLighter;
+}
+
+@mixin ms-fontColor-themeLighterAlt {
+ color: $ms-color-themeLighterAlt;
+}
+
+
+// Neutral colors
+@mixin ms-fontColor-black {
+ color: $ms-color-black;
+}
+
+@mixin ms-fontColor-neutralDark {
+ color: $ms-color-neutralDark;
+}
+
+@mixin ms-fontColor-neutralPrimary {
+ color: $ms-color-neutralPrimary;
+}
+
+@mixin ms-fontColor-neutralSecondary {
+ color: $ms-color-neutralSecondary;
+}
+
+@mixin ms-fontColor-neutralSecondaryAlt {
+ color: $ms-color-neutralSecondaryAlt;
+}
+
+@mixin ms-fontColor-neutralTertiary {
+ color: $ms-color-neutralTertiary;
+}
+
+@mixin ms-fontColor-neutralTertiaryAlt {
+ color: $ms-color-neutralTertiaryAlt;
+}
+
+@mixin ms-fontColor-neutralLight {
+ color: $ms-color-neutralLight;
+}
+
+@mixin ms-fontColor-neutralLighter {
+ color: $ms-color-neutralLighter;
+}
+
+@mixin ms-fontColor-neutralLighterAlt {
+ color: $ms-color-neutralLighterAlt;
+}
+
+@mixin ms-fontColor-white {
+ color: $ms-color-white;
+}
+
+// Brand and accent colors
+@mixin ms-fontColor-yellow {
+ color: $ms-color-yellow;
+}
+
+@mixin ms-fontColor-yellowLight {
+ color: $ms-color-yellowLight;
+}
+
+@mixin ms-fontColor-orange {
+ color: $ms-color-orange;
+}
+
+@mixin ms-fontColor-orangeLight {
+ color: $ms-color-orangeLight;
+}
+
+@mixin ms-fontColor-orangeLighter {
+ color: $ms-color-orangeLighter;
+}
+
+@mixin ms-fontColor-redDark {
+ color: $ms-color-redDark;
+}
+
+@mixin ms-fontColor-red {
+ color: $ms-color-red;
+}
+
+@mixin ms-fontColor-magentaDark {
+ color: $ms-color-magentaDark;
+}
+
+@mixin ms-fontColor-magenta {
+ color: $ms-color-magenta;
+}
+
+@mixin ms-fontColor-magentaLight {
+ color: $ms-color-magentaLight;
+}
+
+@mixin ms-fontColor-purpleDark {
+ color: $ms-color-purpleDark;
+}
+
+@mixin ms-fontColor-purple {
+ color: $ms-color-purple;
+}
+
+@mixin ms-fontColor-purpleLight {
+ color: $ms-color-purpleLight;
+}
+
+@mixin ms-fontColor-blueDark {
+ color: $ms-color-blueDark;
+}
+
+@mixin ms-fontColor-blueMid {
+ color: $ms-color-blueMid;
+}
+
+@mixin ms-fontColor-blue {
+ color: $ms-color-blue;
+}
+
+@mixin ms-fontColor-blueLight {
+ color: $ms-color-blueLight;
+}
+
+@mixin ms-fontColor-tealDark {
+ color: $ms-color-tealDark;
+}
+
+@mixin ms-fontColor-teal {
+ color: $ms-color-teal;
+}
+
+@mixin ms-fontColor-tealLight {
+ color: $ms-color-tealLight;
+}
+
+@mixin ms-fontColor-greenDark {
+ color: $ms-color-greenDark;
+}
+
+@mixin ms-fontColor-green {
+ color: $ms-color-green;
+}
+
+@mixin ms-fontColor-greenLight {
+ color: $ms-color-greenLight;
+}
+
+// Message colors
+@mixin ms-fontColor-info {
+ color: $ms-color-info;
+}
+
+@mixin ms-fontColor-success {
+ color: $ms-color-success;
+}
+
+@mixin ms-fontColor-alert {
+ color: $ms-color-alert;
+}
+
+@mixin ms-fontColor-error {
+ color: $ms-color-error;
+}
diff --git a/dist/sass/_Fabric.Utilities.scss b/dist/sass/_Fabric.Utilities.scss
new file mode 100644
index 000000000..ced677042
--- /dev/null
+++ b/dist/sass/_Fabric.Utilities.scss
@@ -0,0 +1,36 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Utility classes and mixins used throughout Fabric.
+
+@import "Fabric.Mixins";
+
+// The best box is a border box.
+@mixin ms-u-borderBox {
+ box-sizing: border-box;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+
+@mixin ms-u-clearfix {
+ *zoom: 1;
+ &:before,
+ &:after {
+ display: table;
+ content: "";
+ line-height: 0;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+// Basic border-box, margin, and padding reset.
+@mixin ms-u-normalize {
+ @include ms-u-borderBox;
+ @include resetMargins;
+ @include resetPadding;
+ @include resetBoxShadow;
+}
diff --git a/dist/sass/_Fabric.ZIndex.Variables.scss b/dist/sass/_Fabric.ZIndex.Variables.scss
new file mode 100644
index 000000000..4855d7cd0
--- /dev/null
+++ b/dist/sass/_Fabric.ZIndex.Variables.scss
@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Z-Index Layeringz
+
+
+// Base Layer Variables
+$ms-zIndex-0: 0;
+$ms-zIndex-1: 100;
+$ms-zIndex-2: 200;
+$ms-zIndex-3: 300;
+$ms-zIndex-4: 400;
+$ms-zIndex-5: 500;
+
+// Base Layer Modifier Variables
+$ms-zIndex-back: 0;
+$ms-zIndex-middle: 5;
+$ms-zIndex-front: 10;
+
+
+// Fabric Component Base Layer Assignments
+
+$ms-zIndex-Callout: $ms-zIndex-1;
+$ms-zIndex-ContextualMenu: $ms-zIndex-1;
+$ms-zIndex-Overlay: $ms-zIndex-2;
+$ms-zIndex-Panel: $ms-zIndex-3;
+$ms-zIndex-DatePicker: $ms-zIndex-3;
+$ms-zIndex-Dialog: $ms-zIndex-3;
+$ms-zIndex-PeoplePicker: $ms-zIndex-3;
+$ms-zIndex-Dropdown: $ms-zIndex-4;
diff --git a/dist/sass/_Office.Color.Variables.scss b/dist/sass/_Office.Color.Variables.scss
new file mode 100644
index 000000000..d8df9a710
--- /dev/null
+++ b/dist/sass/_Office.Color.Variables.scss
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Office Core Color Variables
+
+
+//== Theme/Accent colors
+//
+// Colors used in Office 15 color pickers
+// These are deprecated as of Fabric 0.6
+
+$ms-color-officeAccent1: #FFFFFF;
+$ms-color-officeAccent2: #000000;
+$ms-color-officeAccent3: #E7E6E5;
+$ms-color-officeAccent4: #44546A;
+$ms-color-officeAccent5: #5B9BD5;
+$ms-color-officeAccent6: #ED7D31;
+$ms-color-officeAccent7: #A5A5A5;
+$ms-color-officeAccent8: #FFC001;
+$ms-color-officeAccent9: #4472C4;
+$ms-color-officeAccent10: #70AD47;
+
+$ms-color-presence-available: #5dd255;
+$ms-color-presence-away: #ffd200;
+$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;
+$ms-color-presence-dnd-background: #c72d25;
+$ms-color-presence-dnd-line: #ffffff;
+$ms-color-presence-offline: #b6cfd8;