diff --git a/.gitignore b/.gitignore index aa136ba48..fc8a85f55 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..0ac501793 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.css @@ -0,0 +1,48 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Breadcrumb { + height: 40px; +} + +.ms-Breadcrumb .ms-Breadcrumb-currentLarge { + display: none; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent, +.ms-Breadcrumb .ms-Breadcrumb-current { + font-size: 14px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + line-height: 50px; + color: #666666; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent { + color: #333333; + text-decoration: none; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent:hover { + color: #000000; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent:active { + color: #0078d7; +} + +.ms-Breadcrumb .ms-Breadcrumb-chevron { + padding: 0 7px 0 5px; +} + +@media (min-width: 640px) { + .ms-Breadcrumb .ms-Breadcrumb-currentLarge { + display: inline; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #0078d7; + line-height: 42px; + margin-right: 20px; + } +} diff --git a/dist/components/Breadcrumb/Breadcrumb.html b/dist/components/Breadcrumb/Breadcrumb.html new file mode 100644 index 000000000..17fa4736c --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.html @@ -0,0 +1,7 @@ + + +
+ Working files + OneDrive @ Contoso + Working files +
\ No newline at end of file diff --git a/dist/components/Breadcrumb/Breadcrumb.json b/dist/components/Breadcrumb/Breadcrumb.json new file mode 100644 index 000000000..fefb2648c --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.json @@ -0,0 +1,6 @@ +{ + "name": "Breadcrumb", + "notes": "Shows the user's current location in a hierarchy and provides a means of navigating upward.", + "template": "Breadcrumb.html", + "class": "ms-Breadcrumb" +} diff --git a/dist/components/Breadcrumb/Breadcrumb.less b/dist/components/Breadcrumb/Breadcrumb.less new file mode 100644 index 000000000..658b9aa48 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.less @@ -0,0 +1,51 @@ +// 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 { + height: 40px; + + .ms-Breadcrumb-currentLarge { + display: none; + } + .ms-Breadcrumb-parent, .ms-Breadcrumb-current { + font-size: @ms-font-size-m; + font-family: @ms-font-family-semilight; + line-height: 50px; + color: @ms-color-neutralSecondary; + } + .ms-Breadcrumb-parent { + color: @ms-color-neutralPrimary; + text-decoration: none; + + &:hover { + color: @ms-color-black; + } + + &:active { + color: @ms-color-themePrimary; + } + } + + // Right-pointing chevron + // TODO: Localization, point arrow to left. + .ms-Breadcrumb-chevron { + padding: 0 7px 0 5px; + } + + // Only show the big title on large and extra large displays. + @media (min-width: @ms-screen-lg-min) { + .ms-Breadcrumb-currentLarge { + display: inline; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-xl; + color: @ms-color-themePrimary; + line-height: 42px; + margin-right: 20px; + } + } +} diff --git a/dist/components/Breadcrumb/Breadcrumb.min.css b/dist/components/Breadcrumb/Breadcrumb.min.css new file mode 100644 index 000000000..bd5f5ef5c --- /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-Breadcrumb{height:40px}.ms-Breadcrumb .ms-Breadcrumb-currentLarge{display:none}.ms-Breadcrumb .ms-Breadcrumb-current,.ms-Breadcrumb .ms-Breadcrumb-parent{font-size:14px;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;line-height:50px;color:#666}.ms-Breadcrumb .ms-Breadcrumb-parent{color:#333;text-decoration:none}.ms-Breadcrumb .ms-Breadcrumb-parent:hover{color:#000}.ms-Breadcrumb .ms-Breadcrumb-parent:active{color:#0078d7}.ms-Breadcrumb .ms-Breadcrumb-chevron{padding:0 7px 0 5px}@media (min-width:640px){.ms-Breadcrumb .ms-Breadcrumb-currentLarge{display:inline;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;line-height:42px;margin-right:20px}} \ No newline at end of file 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + diff --git a/dist/components/Button/Button.css b/dist/components/Button/Button.css new file mode 100644 index 000000000..be23fd9a4 --- /dev/null +++ b/dist/components/Button/Button.css @@ -0,0 +1,870 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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.is-disabled:hover, +.ms-Button:disabled:focus, +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: 1px; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + 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; + border-width: 2px; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before, +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after { + line-height: 1; + font-size: inherit; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before { + top: -2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before { + top: -2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before { + top: -4%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before { + top: -3%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before { + top: -1%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before { + top: -1%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before { + top: -2%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before { + left: -10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before { + top: -2%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before { + top: 2%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before { + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before { + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before { + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before { + top: 5%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before { + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before { + top: 2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before { + top: 6%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before { + top: 5%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before { + top: -1%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before { + top: -2%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before { + left: -19%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before { + top: 2%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before { + top: -3%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before { + top: 2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before { + top: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before { + left: -16%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before { + left: -33%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before { + top: 4%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before { + top: -2%; + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before { + left: -15%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before { + top: -4%; + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before { + left: -9%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before { + left: 8%; + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before { + left: 8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.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.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.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', 'Segoe WP', 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 @@ + + + diff --git a/dist/components/Button/Button.json b/dist/components/Button/Button.json new file mode 100644 index 000000000..088f19cbb --- /dev/null +++ b/dist/components/Button/Button.json @@ -0,0 +1,92 @@ +{ + "name": "Button", + "notes": "", + "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.less b/dist/components/Button/Button.less new file mode 100644 index 000000000..7ec082310 --- /dev/null +++ b/dist/components/Button/Button.less @@ -0,0 +1,324 @@ +// 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 { + .ms-font-m; + .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; + + .ms-Button-icon { + color: @ms-color-themePrimary; + display: inline-block; + font-size: @ms-font-size-s; + position: relative; + top: 1px; + + .ms-Icon { + .ms-Icon--circle; + border-width: 2px; + 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; + } + + &: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/Button/Button.min.css b/dist/components/Button/Button.min.css new file mode 100644 index 000000000..dd363c139 --- /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','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin: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:focus .ms-Button-label,.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus,.ms-Button:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-Button:hover{border-color:#eaeaea}.ms-Button:focus{border-color:#0078d7}.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 WP Semibold','Segoe UI','Segoe WP',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}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:1px}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{position:relative;display:inline-block;padding:0;text-align:left;-webkit-font-smoothing:antialiased;border-width:2px;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{line-height:1;font-size:inherit}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before{top:-2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before{top:-2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before{top:-4%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before{top:-3%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before{top:-1%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before{top:-1%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before{top:-2%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before{left:-10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before{top:-2%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before{top:2%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before{top:-1%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before{left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before{top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before{top:2%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before{left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before{top:5%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before{left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before{top:5%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before{top:5%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before{top:2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before{top:6%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before{top:5%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before{top:-1%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before{top:2%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before{top:-4%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before{top:-2%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before{left:-19%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before{top:-5%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before{top:2%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before{left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before{top:-3%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before{top:4%;left:-25%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before{top:4%;left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before{top:-3%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before{top:2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before{top:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before{left:-16%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before{left:-33%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before{top:3%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before{top:4%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before{top:-2%;left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before{left:-15%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before{top:-4%;left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before{left:-14%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before{top:4%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before{left:-9%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before{left:-7%;top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before{left:8%;top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before{left:8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px}.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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--command .ms-Button-label,.ms-Button.ms-Button--compound .ms-Button-description{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;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.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 .ms-Button-description,.ms-Button.ms-Button--compound:disabled .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--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--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: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/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 @@ + + +
+
+
+

All of your favorite people

+
+
+
+

People automatically puts together all of the people you care most about in one place.

+
+
+ + +
+
+
+
diff --git a/dist/components/Callout/Callout.Close.html b/dist/components/Callout/Callout.Close.html new file mode 100644 index 000000000..60c933225 --- /dev/null +++ b/dist/components/Callout/Callout.Close.html @@ -0,0 +1,20 @@ + + +
+
+
+

All of your favorite people

+
+ +
+
+

Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.

+
+
+ Learn more +
+
+
+
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 @@ + + +
+
+
+

All of your favorite people

+
+
+
+

People automatically puts together all of the people you care most about in one place.

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

Uploaded 2 items to Alton's OneDrive

+
+
+
+ +
+
+
+
\ 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..ec97d40d2 --- /dev/null +++ b/dist/components/Callout/Callout.css @@ -0,0 +1,1166 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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.is-disabled:hover, +.ms-Button:disabled:focus, +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: 1px; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + 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; + border-width: 2px; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before, +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after { + line-height: 1; + font-size: inherit; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before { + top: -2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before { + top: -2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before { + top: -4%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before { + top: -3%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before { + top: -1%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before { + top: -1%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before { + top: -2%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before { + left: -10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before { + top: -2%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before { + top: 2%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before { + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before { + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before { + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before { + top: 5%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before { + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before { + top: 2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before { + top: 6%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before { + top: 5%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before { + top: -1%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before { + top: -2%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before { + left: -19%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before { + top: 2%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before { + top: -3%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before { + top: 2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before { + top: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before { + left: -16%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before { + left: -33%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before { + top: 4%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before { + top: -2%; + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before { + left: -15%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before { + top: -4%; + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before { + left: -9%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before { + left: 8%; + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before { + left: 8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.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.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.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', 'Segoe WP', 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', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-Link.ms-Link--hero { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + padding: 2px 8px 4px; +} + +.ms-Callout { + z-index: 100; + margin: 16px auto; + position: relative; + width: 288px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:after, +.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--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.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--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:after, +.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; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Callout-link { + font-size: 14px; +} + +.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--arrowLeft:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after, +.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 WP Light', 'Segoe UI', 'Segoe WP', 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--arrowBottom:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after, +.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--arrowLeft:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after, +.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--arrowLeft:before, + .ms-Callout.ms-Callout--arrowRight:after, + .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..bc9899252 --- /dev/null +++ b/dist/components/Callout/Callout.html @@ -0,0 +1,17 @@ + + +
+
+
+

All of your favorite people

+
+
+
+

Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.

+
+
+ Learn more +
+
+
+
diff --git a/dist/components/Callout/Callout.json b/dist/components/Callout/Callout.json new file mode 100644 index 000000000..bfe381d60 --- /dev/null +++ b/dist/components/Callout/Callout.json @@ -0,0 +1,139 @@ +{ + "name": "Callout", + "notes": "Callouts & Peeks.", + "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.less b/dist/components/Callout/Callout.less new file mode 100644 index 000000000..058a8b12b --- /dev/null +++ b/dist/components/Callout/Callout.less @@ -0,0 +1,295 @@ +// 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 +.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; + .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 { + .arrowBorders(@ms-color-white, transparent, transparent, @ms-color-white); + left: -10px; + } +} + +.ms-Callout.ms-Callout--arrowRight { + &:before, + &:after { + .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 { + .arrowBorders(@ms-color-white, @ms-color-white, transparent, transparent); + top: -10px; + } +} + +.ms-Callout.ms-Callout--arrowBottom { + &:before, + &:after { + .arrowBorders(transparent, transparent, @ms-color-white, @ms-color-white); + bottom: -10px; + } +} + +// 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; + .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; +} + +.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/Callout/Callout.min.css b/dist/components/Callout/Callout.min.css new file mode 100644 index 000000000..6dc0f3ec3 --- /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,.ms-Label{box-shadow:none;box-sizing:border-box}.ms-Button,.ms-Callout-main,.ms-Label{box-sizing:border-box}.ms-Button{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;margin:0;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:focus .ms-Button-label,.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus,.ms-Button:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-Button:hover{border-color:#eaeaea}.ms-Button:focus{border-color:#0078d7}.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 WP Semibold','Segoe UI','Segoe WP',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}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:1px}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{position:relative;display:inline-block;padding:0;text-align:left;-webkit-font-smoothing:antialiased;border-width:2px;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{line-height:1;font-size:inherit}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before{top:-2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before{top:-2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before{top:-4%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before{top:-3%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before{top:-1%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before{top:-1%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before{top:-2%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before{left:-10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before{top:-2%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before{top:2%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before{top:-1%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before{left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before{top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before{top:2%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before{left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before{top:5%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before{left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before{top:5%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before{top:5%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before{top:2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before{top:6%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before{top:5%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before{top:-1%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before{top:2%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before{top:-4%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before{top:-2%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before{left:-19%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before{top:-5%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before{top:2%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before{left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before{top:-3%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before{top:4%;left:-25%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before{top:4%;left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before{top:-3%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before{top:2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before{top:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before{left:-16%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before{left:-33%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before{top:3%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before{top:4%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before{top:-2%;left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before{left:-15%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before{top:-4%;left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before{left:-14%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before{top:4%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before{left:-9%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before{left:-7%;top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before{left:8%;top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before{left:8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px}.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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--command .ms-Button-label,.ms-Button.ms-Button--compound .ms-Button-description,.ms-Label{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;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.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 .ms-Button-description,.ms-Button.ms-Button--compound:disabled .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--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--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: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-size:12px;font-weight:400;margin:0;display:block;padding:5px 0}.ms-Callout-subText,.ms-Callout-title,.ms-Link.ms-Link--hero{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-Link.ms-Link--hero{padding:2px 8px 4px}.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);-ms-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:transparent solid 1px;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-action,.ms-Callout-actions .ms-Link.ms-Link--hero{left:-8px;position:relative}.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}.ms-Callout-main{position:relative;background-color:#fff;outline:transparent solid 1px;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout-close{margin:0;border:0;background:0 0;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{margin:0;font-size:21px}.ms-Callout-subText{margin:0;color:#333;font-size:12px}.ms-Callout-link{font-size:14px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.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 WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText,.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.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-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/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 @@ + + +
+ + +
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 @@ + + +
+ + +
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 @@ + + +
+ + +
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 @@ + + +
+ + +
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 @@ + + +
+ + +
diff --git a/dist/components/ChoiceField/ChoiceField.css b/dist/components/ChoiceField/ChoiceField.css new file mode 100644 index 000000000..a698a51be --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.css @@ -0,0 +1,149 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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; +} + +.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 @@ + + +
+ + +
diff --git a/dist/components/ChoiceField/ChoiceField.json b/dist/components/ChoiceField/ChoiceField.json new file mode 100644 index 000000000..49c91b6d8 --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.json @@ -0,0 +1,95 @@ +{ + "name": "ChoiceField", + "notes": "Radio buttons and checkboxes.", + "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.less b/dist/components/ChoiceField/ChoiceField.less new file mode 100644 index 000000000..527cf943f --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.less @@ -0,0 +1,146 @@ +// 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 { + .ms-font-m; + .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; + } + } +} + +// 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; + } + + &: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 { + .ms-Icon; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: @ms-font-size-s-plus; + top: 3px; + left: 3px; + } + } +} + + +//== Component: Choicefield group +// +// Choice field groups contain multiple radio buttons or checkboxes +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} diff --git a/dist/components/ChoiceField/ChoiceField.min.css b/dist/components/ChoiceField/ChoiceField.min.css new file mode 100644 index 000000000..09e17fa73 --- /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-ChoiceField,.ms-Label{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;margin:0;box-shadow:none;box-sizing:border-box;font-weight:400}.ms-Label{color:#333;font-size:12px;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-ChoiceField{color:#333;font-size:14px;padding:0;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}.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;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}.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}.ms-ChoiceFieldGroup{margin-bottom:4px} \ No newline at end of file diff --git a/dist/components/CommandBar/CommandBar.css b/dist/components/CommandBar/CommandBar.css new file mode 100644 index 000000000..062a87d79 --- /dev/null +++ b/dist/components/CommandBar/CommandBar.css @@ -0,0 +1,465 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 30px; +} + +.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; +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active { + background-color: #eaeaea; + color: #000000; +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +.ms-ContextualMenu-link.is-disabled { + background-color: #ffffff; + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active { + border-color: #ffffff; +} + +.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-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; + padding-right: 15px; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; +} + +@media only screen and (min-width: 480px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +.ms-CommandBarItem { + display: inline-block; + margin-right: 8px; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; +} + +.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 .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + display: none; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-link { + line-height: 39px; + cursor: pointer; + height: 40px; + min-width: 22px; + text-align: center; + position: relative; + padding: 0 6px; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem-link { + padding-right: 8px; + padding-left: 6px; + } +} + +.ms-CommandBarItem-chevronDown { + vertical-align: top; + 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.367s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 639px) { + .ms-CommandBarSearch { + overflow: hidden; + background-color: transparent; + width: 40px; + } +} + +@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 .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: 639px) { + .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; +} + +.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..b1feebdad --- /dev/null +++ b/dist/components/CommandBar/CommandBar.html @@ -0,0 +1,113 @@ + + +
+
+ + + + + + + + + + +
+
+
+
+
+ + Stars + +
+
+
+
+
+
+ + Stars + +
+
+
+
+
+
+ + Stars + +
+
+
+
+
+
+
+
+ + Stars + +
+
+
+
+
+
+ + Documents + +
+
+
+
+
+
+ + Flags + +
+
+
+
+
+
+ + Smiley + +
+
+
+
+
+
+ + Office Store + +
+
+
+
+
+
+ + Lync + +
+
+
+ +
+
+
+ + Ellipsis + +
+
+
    +
    + +
    +
    diff --git a/dist/components/CommandBar/CommandBar.json b/dist/components/CommandBar/CommandBar.json new file mode 100644 index 000000000..ac3910230 --- /dev/null +++ b/dist/components/CommandBar/CommandBar.json @@ -0,0 +1,31 @@ +{ + "name": "CommandBar", + "notes": "", + "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.less b/dist/components/CommandBar/CommandBar.less new file mode 100644 index 000000000..6b5ba75a0 --- /dev/null +++ b/dist/components/CommandBar/CommandBar.less @@ -0,0 +1,333 @@ +// 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: 40px; +@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; + +.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; + padding-right: 15px; + border: 0; + position: relative; + + &:focus { + outline: none; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + + @media only screen and (min-width: @ms-screen-md-min) { + min-width: @CommandBar-sideAreaWidthsm; + } +} + +// Command Bar Item +.ms-CommandBarItem { + display: inline-block; + margin-right: 8px; + color: @ms-color-themePrimary; + height: @CommandBarItem-height; + outline: none; + vertical-align: top; + + .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem-commandText { + display: none; + } + + @media screen and (-ms-high-contrast: active) { + .highContrastBorder(@ms-color-black); + height: 38px; + outline: none; + } + + @media screen and (-ms-high-contrast: black-on-white) { + .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) { + .highContrastBorder(@ms-color-white); + } + + @media screen and (-ms-high-contrast: black-on-white) { + .highContrastBorder(@ms-color-black); + } + } + + // Hide labels and Chevrons SM-MD + @media only screen and (min-width: @ms-screen-lg-min) { + .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem-commandText { + display: inline; + } + } + +} + +.ms-CommandBarItem.is-hidden { + display: none; +} + +//== 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-overflow { + display: none; + + &.is-visible { + display: inline-block; + } +} + +.ms-CommandBarItem-link { + line-height: @CommandBarItem-height - 1; + padding: 0 6px; + cursor: pointer; + height: @CommandBarItem-height; + min-width: 22px; + text-align: center; + position: relative; + padding: 0 6px; + + @media only screen and (min-width: @ms-screen-lg-min) { + padding-right: 8px; + padding-left: 6px; + } +} + +.ms-CommandBarItem-chevronDown { + vertical-align: top; + 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-md-max) { + overflow: hidden; + background-color: transparent; + width: @SearchBox-widthLgCollapsed; + } + + transition: @ms-duration3 @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; + } + + .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-md-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; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: @SearchBox-iconSize; + color: @ms-color-themePrimary; +} + diff --git a/dist/components/CommandBar/CommandBar.min.css b/dist/components/CommandBar/CommandBar.min.css new file mode 100644 index 000000000..f6c6a2f9c --- /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','Segoe WP',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 30px}.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}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}.ms-ContextualMenu-link.is-disabled{background-color:#fff;color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active{border-color:#fff}.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-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;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;padding-right:15px;border:0;position:relative}.ms-CommandBar:focus{outline:0}.ms-CommandBar-mainArea{overflow-x:hidden;display:block}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto}@media only screen and (min-width:480px){.ms-CommandBar-sideCommands{min-width:128px}}.ms-CommandBarItem{display:inline-block;margin-right:8px;color:#0078d7;height:40px;outline:0;vertical-align:top}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:0}.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:0}.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem-overflow,.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.is-hidden,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-link{line-height:39px;cursor:pointer;height:40px;min-width:22px;text-align:center;position:relative;padding:0 6px}@media only screen and (min-width:640px){.ms-CommandBarItem-link{padding-right:8px;padding-left:6px}}.ms-CommandBarItem-chevronDown{vertical-align:top;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:367ms cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:639px){.ms-CommandBarSearch{overflow:hidden;background-color:transparent;width:40px}.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}@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 .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:0;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{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch.is-active,.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch-iconSearchWrapper{display:block}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{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 .ms-CommandBarSearch-input{cursor:text;border-left-width:8px;padding-right:40px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper,.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7} \ No newline at end of file diff --git a/dist/components/CommandBar/Jquery.CommandBar.js b/dist/components/CommandBar/Jquery.CommandBar.js new file mode 100644 index 000000000..2b4fce859 --- /dev/null +++ b/dist/components/CommandBar/Jquery.CommandBar.js @@ -0,0 +1,149 @@ +// 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, icon, link) { + var item = '
  • '; + item += text; + item += '
    • '; + + return item; + } + + var saveCommands = function($commands, $commandWidth, $commandarea) { + var commands = []; + $commands.each(function(index) { + var $Item = $(this); + var $rightOffset = ($Item.offset().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.offset().left; // Added padding of 10 + commands.push({ jquery: $Item, rightOffset: $rightOffset}); + }); + return commands; + } + + var processCommands = function(commands, width) { + 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 > 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(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'); + 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()); + processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu); + + // Set Search Behavior + if($(window).width() < 640) { + + $('.ms-CommandBarSearch').click(function() { + $(this).addClass('is-active'); + }); + + } + + // Add resize event handler on commandBar + $(window).resize(function() { + var overFlowCommands; + overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth()); + processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu); + + if($(window).width() < 640 && mobileSwitch == false) { + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + mobileSwitch = true; + + // Search Behavior + $('.ms-CommandBarSearch').unbind(); + $('.ms-CommandBarSearch').click(function() { + $(this).addClass('is-active'); + }); + + } else if($(window).width() > 639 && mobileSwitch == true) { + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + mobileSwitch = false; + + $('.ms-CommandBarSearch').unbind(); + } + + }); + + // Hook up contextual menu + $OverflowCommand.click(function() { + $OverflowMenu.toggleClass('is-open'); + }); + + $SearchBox.find('.ms-CommandBarSearch-input').click(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/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..94e984976 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.css @@ -0,0 +1,143 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 30px; +} + +.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; +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active { + background-color: #eaeaea; + color: #000000; +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +.ms-ContextualMenu-link.is-disabled { + background-color: #ffffff; + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active { + border-color: #ffffff; +} + +.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-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..4a15456ec --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.json @@ -0,0 +1,31 @@ +{ + "name": "ContextualMenu", + "notes": "", + "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.less b/dist/components/ContextualMenu/ContextualMenu.less new file mode 100644 index 000000000..64dbe9d50 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.less @@ -0,0 +1,148 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Contextual Menu styles + + +.ms-ContextualMenu { + .ms-font-m; + .ms-u-normalize; + display: none; + + // Hidden by default, then trigger this state to show it. + &.is-open { + .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 { + .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 30px; +} + +.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; + + // Shorten the first and last items to maintain baseline alignment. + &:first-child, + &:last-child { + height: 39px; + } + + &:hover, + &:active { + background-color: @ms-color-neutralLight; + color: @ms-color-black; + } + + &:active { + border: 1px solid @ms-color-themePrimary; + } + + &.is-selected { + background-color: @ms-color-themeLight; + color: @ms-color-black; + font-family: @ms-font-family-semibold; + + &:hover { + background-color: @ms-color-themeLight; + } + } + + &.is-disabled { + background-color: @ms-color-white; + color: @ms-color-neutralTertiary; + cursor: default; + pointer-events: none; + + &:active { + border-color: @ms-color-white; + } + } +} + +// 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 { + .ms-ContextualMenu-link { + padding: 0 30px; + + // Multi-select checkmark + &.is-selected { + background-color: @ms-color-white; + + // Checkmark + &:after { + .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/ContextualMenu/ContextualMenu.min.css b/dist/components/ContextualMenu/ContextualMenu.min.css new file mode 100644 index 000000000..950fc379f --- /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','Segoe WP',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 30px}.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}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}.ms-ContextualMenu-link.is-disabled{background-color:#fff;color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active{border-color:#fff}.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-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;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/Jquery.ContextualMenu.js b/dist/components/ContextualMenu/Jquery.ContextualMenu.js new file mode 100644 index 000000000..2a27de244 --- /dev/null +++ b/dist/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/components/DatePicker/DatePicker.css b/dist/components/DatePicker/DatePicker.css new file mode 100644 index 000000000..cade3b842 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.css @@ -0,0 +1,675 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 !important; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 1px solid transparent; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +.ms-TextField-field:hover, +.ms-TextField-field:focus { + outline: 1px solid transparent; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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: none; + 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 { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-Link.ms-Link--hero { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + padding: 2px 8px 4px; +} + +.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, slideDown10; + animation-name: fadeIn, slideDown10; + -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--focused.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 WP Light', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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', 'Segoe WP', 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; + 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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-pickingMonths .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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; + } +} diff --git a/dist/components/DatePicker/DatePicker.html b/dist/components/DatePicker/DatePicker.html new file mode 100644 index 000000000..fc7d42ae5 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.html @@ -0,0 +1,3 @@ + + +
    diff --git a/dist/components/DatePicker/DatePicker.json b/dist/components/DatePicker/DatePicker.json new file mode 100644 index 000000000..690fdf6f0 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.json @@ -0,0 +1,17 @@ +{ + "name": "DatePicker", + "notes": "This is a sample Date Picker that works for Gregorian calendars. It uses jQuery and pickadate.js for demonstration.", + "template": "DatePicker.html", + "class": "ms-DatePicker", + "dependencies": [ + "TextField", + "Label", + "Link" + ], + "branches": [ + { + "name": "Default", + "default": true + } + ] +} diff --git a/dist/components/DatePicker/DatePicker.less b/dist/components/DatePicker/DatePicker.less new file mode 100644 index 000000000..3414e6132 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.less @@ -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 { + .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; + .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 { + .ms-u-slideDownIn10; + .ms-u-borderBox; + .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--focused.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 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; + } + +} + +// 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 { + .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 { + .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; + } + } +} diff --git a/dist/components/DatePicker/DatePicker.min.css b/dist/components/DatePicker/DatePicker.min.css new file mode 100644 index 000000000..7cefa51e0 --- /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-field,.ms-TextField-field:focus,.ms-TextField-field:hover{outline:transparent solid 1px}.ms-DatePicker,.ms-Label,.ms-TextField,.ms-TextField-field{box-shadow:none;box-sizing:border-box}.ms-DatePicker,.ms-DatePicker-holder,.ms-Label,.ms-TextField,.ms-TextField-field{box-sizing:border-box}.ms-TextField{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;margin:0 0 8px;padding:0}.ms-TextField-field,.ms-TextField.ms-TextField--placeholder .ms-Label{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.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!important}.ms-TextField-field{margin:0;border:1px solid #c8c8c8;border-radius:0;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}.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-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,.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}.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:none;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{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-TextField.ms-TextField--multiline .ms-TextField-field{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label{margin:0;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-Link.ms-Link--hero{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;padding:2px 8px 4px}.ms-DatePicker{margin:0 0 17px;padding:0;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;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{-webkit-animation-name:fadeIn,slideDown10;animation-name:fadeIn,slideDown10;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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--focused.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 WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-day,.ms-DatePicker-day--outfocus,.ms-DatePicker-weekday{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.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:transparent solid 1px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;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}.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:transparent solid 1px}.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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',Tahoma,Arial,sans-serif;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:transparent solid 1px}.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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:transparent solid 1px}.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-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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:17px;color:#333}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-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 WP Semibold','Segoe UI','Segoe WP',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:transparent solid 1px}.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}} \ No newline at end of file diff --git a/dist/components/DatePicker/Jquery.DatePicker.js b/dist/components/DatePicker/Jquery.DatePicker.js new file mode 100644 index 000000000..73c4f5cdb --- /dev/null +++ b/dist/components/DatePicker/Jquery.DatePicker.js @@ -0,0 +1,365 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +(function ($) { + + /** + * @param {object} options DatePicker options + * @param {array} options.optionMonths An array of month abbreviations for the options grid + * @param {string} options.label A label for the DatePicker + * @param {string} options.placeholderText Placeholder text for the DatePicker textfield + */ + $.fn.DatePicker = function (options) { + + var datePicker; + var self = this; + var optionMonths = options && options.optionMonths || ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + var label = options && options.label || "Start Date"; + var placeholderText = options && options.placeholderText || "Select a date"; + + /** check if the PickaDate plugin exists, if not load the plugin */ + if (!$().pickadate) { + var firstScript = document.getElementsByTagName("script")[0]; + var script = document.createElement("script"); + script.onload = returnDatePicker; + script.src = "PickaDate.js"; + firstScript.parentNode.insertBefore(script, firstScript); + } else { + datePicker = returnDatePicker(); + } + + function returnDatePicker() { + /** Iterate through each date picker provided. */ + return self.each(function () { + + var $datePicker = $(this); + + /**create the body of the datepicker */ + appendElements($datePicker, optionMonths); + + /** insert label and placeholder text */ + $datePicker.find('.ms-Label').text(label); + $datePicker.find('.ms-TextField-field').attr("placeholder", placeholderText + "..."); + + /** Set up variables and run the Pickadate plugin. */ + var $dateField = $datePicker.find('.ms-TextField-field').pickadate({ + // 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', + now: 'ms-DatePicker-day--today', + infocus: 'ms-DatePicker-day--infocus', + outfocus: 'ms-DatePicker-day--outfocus' + } + }); + var $picker = $dateField.pickadate('picker'); + + /** Respond to built-in picker events. */ + $picker.on({ + render: function() { + updateCustomView($datePicker); + }, + open: function() { + scrollUp($datePicker); + } + }); + + }); + } + + return datePicker; + }; + + /** + * Create the body of the DatePicker plugin and + * append it to the date picker element + * @param {object} $datePicker JQuery object + * @param {array} optionMonths + */ + function appendElements($datePicker, optionMonths) { + var elements = '
    '; + elements += ''; + elements += ''; + elements += ''; + elements += '
    '; + elements += '
    '; + elements += ''; + elements += ''; + elements += '
    '; + elements += '
    '; + elements += 'Go to today'; + elements += '
    '; + elements += '
    '; + elements += '
    '; + elements += ''; + elements += ''; + elements += '
    '; + elements += '
    '; + elements += '
    '; + elements += '
    '; + elements += '
    '; + elements += '
    '; + elements += '
    '; + elements += ''; + elements += ''; + elements += '
    '; + $datePicker.append(elements); + $datePicker.find('.ms-DatePicker-optionGrid').append(createMonthOptions(optionMonths)); + } + /** + * creates month elements for the month grid + * @param {array} optionMonths + * @returns {string} + */ + function createMonthOptions(optionMonths) { + var i = 0; + var content = ""; + for(i; i < 12; i++) { + content += '' + optionMonths[i] + ''; + } + return content; + } + /** + * 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 $dayPicker = $datePicker.find('.ms-DatePicker-dayPicker'); + 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(event) { + $datePicker.removeClass('is-pickingMonths'); + $datePicker.removeClass('is-pickingYears'); + }); + + /** Switch to the is-pickingMonths state. */ + $monthControls.on('click', '.js-showMonthPicker', function(event) { + $datePicker.toggleClass('is-pickingMonths'); + }); + + /** Switch to the is-pickingYears state. */ + $monthPicker.on('click', '.js-showYearPicker', function(event) { + $datePicker.toggleClass('is-pickingYears'); + }); + + } + + /** Change the highlighted date. */ + function changeHighlightedDate($picker, newYear, newMonth, newDay) { + + /** All variables are optional. If not provided, default to the current value. */ + if (newYear == null) { + newYear = $picker.get('highlight').year; + } + if (newMonth == null) { + newMonth = $picker.get('highlight').month; + } + if (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 $pickerWrapper = $datePicker.find('.ms-DatePicker-wrap'); + 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 (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); \ No newline at end of file diff --git a/dist/components/DatePicker/PickaDate.js b/dist/components/DatePicker/PickaDate.js new file mode 100644 index 000000000..d539613f7 --- /dev/null +++ b/dist/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+""):""},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/components/Dialog/Dialog.Close.html b/dist/components/Dialog/Dialog.Close.html new file mode 100644 index 000000000..5162738de --- /dev/null +++ b/dist/components/Dialog/Dialog.Close.html @@ -0,0 +1,36 @@ + + +
    +
    +
    + +
    +

    All emails together

    +
    +
    +
    +

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

    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    diff --git a/dist/components/Dialog/Dialog.LgHeader.html b/dist/components/Dialog/Dialog.LgHeader.html new file mode 100644 index 000000000..352fcf390 --- /dev/null +++ b/dist/components/Dialog/Dialog.LgHeader.html @@ -0,0 +1,28 @@ + + +
    +
    +
    + +
    +

    All emails together now

    +
    +
    +
    +

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

    +
    +
    +
    + + +
    +
    +
    +
    +
    diff --git a/dist/components/Dialog/Dialog.Multiline.html b/dist/components/Dialog/Dialog.Multiline.html new file mode 100644 index 000000000..c9d82f81f --- /dev/null +++ b/dist/components/Dialog/Dialog.Multiline.html @@ -0,0 +1,32 @@ + + +
    +
    +
    + +
    +

    Create account

    +
    +
    +
    + + + +
    +
    +
    +
    diff --git a/dist/components/Dialog/Dialog.css b/dist/components/Dialog/Dialog.css new file mode 100644 index 000000000..06ea9b8fa --- /dev/null +++ b/dist/components/Dialog/Dialog.css @@ -0,0 +1,1164 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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.is-disabled:hover, +.ms-Button:disabled:focus, +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: 1px; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + 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; + border-width: 2px; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before, +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after { + line-height: 1; + font-size: inherit; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before { + top: -2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before { + top: -2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before { + top: -4%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before { + top: -3%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before { + top: -1%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before { + top: -1%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before { + top: -2%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before { + left: -10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before { + top: -2%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before { + top: 2%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before { + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before { + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before { + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before { + top: 5%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before { + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before { + top: 2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before { + top: 6%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before { + top: 5%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before { + top: -1%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before { + top: -2%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before { + left: -19%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before { + top: 2%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before { + top: -3%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before { + top: 2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before { + top: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before { + left: -16%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before { + left: -33%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before { + top: 4%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before { + top: -2%; + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before { + left: -15%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before { + top: -4%; + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before { + left: -9%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before { + left: 8%; + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before { + left: 8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.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.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.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', 'Segoe WP', 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', 'Segoe WP', 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; +} + +.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; +} + +.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; +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +.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; +} + +.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: 1px 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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..3e2ef88a5 --- /dev/null +++ b/dist/components/Dialog/Dialog.html @@ -0,0 +1,36 @@ + + +
    +
    +
    + +
    +

    All emails together

    +
    +
    +
    +

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

    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    diff --git a/dist/components/Dialog/Dialog.json b/dist/components/Dialog/Dialog.json new file mode 100644 index 000000000..1c9fb26ec --- /dev/null +++ b/dist/components/Dialog/Dialog.json @@ -0,0 +1,59 @@ +{ + "name": "Dialog", + "notes": "", + "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" + ], + "dependencies": [ + "Button", + "ChoiceField" + ], + "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" + } + ] +} diff --git a/dist/components/Dialog/Dialog.less b/dist/components/Dialog/Dialog.less new file mode 100644 index 000000000..e07230ac4 --- /dev/null +++ b/dist/components/Dialog/Dialog.less @@ -0,0 +1,207 @@ +// 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 +.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 + .flexBox(); + .alignItems(center); + + &::before { + .dialogPositioningIE9Fallback(); + content: ""; + height: 100%; + width: 0; + } + + .ms-Button.ms-Button--compound { + display: block; + margin-left: 0; + } + + .ms-Overlay { + z-index: @ms-zIndex-back; + } +} + +// The actual dialog element +.ms-Dialog-main { + .dialogPositioningIE9Fallback(); + .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: 1px 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/Dialog/Dialog.min.css b/dist/components/Dialog/Dialog.min.css new file mode 100644 index 000000000..1ae551d74 --- /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,.ms-ChoiceField,.ms-Dialog-header,.ms-Dialog-main{box-sizing:border-box}.ms-Button{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;margin: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:focus .ms-Button-label,.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus,.ms-Button:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-Button:hover{border-color:#eaeaea}.ms-Button:focus{border-color:#0078d7}.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 WP Semibold','Segoe UI','Segoe WP',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}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:1px}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{position:relative;display:inline-block;padding:0;text-align:left;-webkit-font-smoothing:antialiased;border-width:2px;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{line-height:1;font-size:inherit}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before{top:-2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before{top:-2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before{top:-4%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before{top:-3%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before{top:-1%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before{top:-1%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before{top:-2%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before{left:-10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before{top:-2%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before{top:2%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before{top:-1%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before{left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before{top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before{top:2%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before{left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before{top:5%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before{left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before{top:5%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before{top:5%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before{top:2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before{top:6%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before{top:5%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before{top:-1%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before{top:2%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before{top:-4%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before{top:-2%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before{left:-19%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before{top:-5%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before{top:2%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before{left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before{top:-3%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before{top:4%;left:-25%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before{top:4%;left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before{top:-3%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before{top:2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before{top:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before{left:-16%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before{left:-33%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before{top:3%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before{top:4%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before{top:-2%;left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before{left:-15%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before{top:-4%;left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before{left:-14%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before{top:4%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before{left:-9%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before{left:-7%;top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before{left:8%;top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before{left:8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px}.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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--command .ms-Button-label,.ms-Button.ms-Button--compound .ms-Button-description,.ms-ChoiceField{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;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.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 .ms-Button-description,.ms-Button.ms-Button--compound:disabled .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--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--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: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-size:14px;font-weight:400;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}.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;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}.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}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:300;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}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:transparent solid 1px}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;border:0;background:0 0;cursor:pointer;top:12px;right:12px;padding:8px;z-index:10}.ms-Dialog-actions,.ms-Dialog-content,.ms-Dialog-header{position:relative;width:100%}.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{padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px}.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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{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 WP Light','Segoe UI','Segoe WP',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/Dropdown/Dropdown.Disabled.html b/dist/components/Dropdown/Dropdown.Disabled.html new file mode 100644 index 000000000..c13838664 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.Disabled.html @@ -0,0 +1,12 @@ + + +
    + + +
    diff --git a/dist/components/Dropdown/Dropdown.css b/dist/components/Dropdown/Dropdown.css new file mode 100644 index 000000000..6161ce68f --- /dev/null +++ b/dist/components/Dropdown/Dropdown.css @@ -0,0 +1,175 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Dropdown { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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:focus .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.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.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +.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; + top: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; +} + +.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-width: 268px; + z-index: 400; + top: 0; + right: 0; + bottom: 0; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +.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; +} + +.ms-Dropdown-item:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; + outline: 1px solid transparent; +} + +.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 (min-width: 480px) { + .ms-Dropdown-items { + top: auto; + right: auto; + bottom: auto; + left: auto; + overflow-y: scroll; + 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..303e2cde6 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.html @@ -0,0 +1,12 @@ + + +
    + + +
    diff --git a/dist/components/Dropdown/Dropdown.json b/dist/components/Dropdown/Dropdown.json new file mode 100644 index 000000000..dfda7c0e2 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.json @@ -0,0 +1,20 @@ +{ + "name": "Dropdown", + "notes": "", + "template": "Dropdown.html", + "class": "ms-Dropdown", + "fileOrder": [ + "Dropdown.html", + "Dropdown.Disabled.html" + ], + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] +} diff --git a/dist/components/Dropdown/Dropdown.less b/dist/components/Dropdown/Dropdown.less new file mode 100644 index 000000000..7afa26fb8 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.less @@ -0,0 +1,184 @@ +// 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 + + +.ms-Dropdown { + .ms-font-m; + .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; + } + } +} + +//== 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; + } + + .ms-Dropdown-caretDown { + color: @ms-color-neutralTertiary; + } +} + +// 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; + top: 9px; + z-index: 1; + pointer-events: none; +} + +// Style the new, replacement component +.ms-Dropdown-title { + .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; +} + +// Container for the dropdown items, displayed as a panel on small screens. +.ms-Dropdown-items { + .ms-u-normalize; + .drop-shadow; + background-color: @ms-color-white; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-width: 268px; + z-index: (@ms-zIndex-Dropdown + @ms-zIndex-back); + top: 0; + right: 0; + bottom: 0; + + &:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid @ms-color-neutralLight; + } +} + +.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; + + // 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; + outline: 1px solid transparent; + } + + &: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; + } +} + + +@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; + overflow-y: scroll; + 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.min.css b/dist/components/Dropdown/Dropdown.min.css new file mode 100644 index 000000000..ae746b331 --- /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-Dropdown{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0 0 10px;padding:0;box-shadow:none;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.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}.ms-Dropdown-item,.ms-Dropdown-title{box-sizing:border-box;cursor:pointer}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}.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;top:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{margin:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-width:268px;z-index:400;top:0;right:0;bottom:0}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}.ms-Dropdown-item{display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000;outline:transparent solid 1px}.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 (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;overflow-y:scroll;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/Jquery.Dropdown.js b/dist/components/Dropdown/Jquery.Dropdown.js new file mode 100644 index 000000000..48fa6361b --- /dev/null +++ b/dist/components/Dropdown/Jquery.Dropdown.js @@ -0,0 +1,153 @@ +// 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 +
    + +
  • Home
    • +
  • + Channels + + +
    • +
  • My Videos
    • +
  • More
    • +
  • Upload
    • + +
    diff --git a/dist/components/NavBar/NavBar.json b/dist/components/NavBar/NavBar.json new file mode 100644 index 000000000..856b554c2 --- /dev/null +++ b/dist/components/NavBar/NavBar.json @@ -0,0 +1,12 @@ +{ + "name": "NavBar", + "notes": "", + "template": "NavBar.html", + "class": "ms-NavBar", + "dependencies": [ + "List", + "ListItem", + "ContextualMenu", + "Overlay" + ] +} diff --git a/dist/components/NavBar/NavBar.less b/dist/components/NavBar/NavBar.less new file mode 100644 index 000000000..1c3716a2d --- /dev/null +++ b/dist/components/NavBar/NavBar.less @@ -0,0 +1,275 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Nav Bar styles + + +// On small screens, the nav bar contains only the hamburger icon. +.ms-NavBar { + .ms-font-m; + .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 { + .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 { + .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 { + .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; + } + } +} + +// 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: 20px; + 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 0 0 20px; + } +} diff --git a/dist/components/NavBar/NavBar.min.css b/dist/components/NavBar/NavBar.min.css new file mode 100644 index 000000000..bc563e430 --- /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,.ms-ListItem.ms-ListItem--document{padding:0}.ms-List,.ms-ListItem{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;margin:0;box-shadow:none;box-sizing:border-box}@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{padding:9px 28px 3px;position:relative}.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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{font-size:14px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-secondaryText{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;line-height:25px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ListItem-tertiaryText{color:#767676;line-height:15px}.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:transparent solid 1px}.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 WP Semibold','Segoe UI','Segoe WP',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:hover:before,.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{display:inline-block;font-family:Office365Icons;line-height:1;position:absolute;top:12px;left:6px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:400;speak:none}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:transparent solid 1px}.ms-ListItem.is-selectable:hover:before{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{content:'\e041';font-size:15px;color:#767676}.ms-ContextualMenu,.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:transparent solid 1px}.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-ContextualMenu{color:#333;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 30px}.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}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}.ms-ContextualMenu-link.is-disabled{background-color:#fff;color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active{border-color:#fff}.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-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;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Overlay{background-color:rgba(255,255,255,.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-NavBar{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:transparent solid 1px}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity 367ms 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 WP Semilight','Segoe UI','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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;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:transparent solid 1px;z-index:5}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link,.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent}.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-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:20px;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 WP Semibold','Segoe UI','Segoe WP',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 0 0 20px}} \ No newline at end of file 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 @@ +
    +
    + +
    +
    +
    Manager
    + +
    +
    +
    Staff
    + +
    +
    \ 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..5db6b148b --- /dev/null +++ b/dist/components/OrgChart/OrgChart.css @@ -0,0 +1,411 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; + background-color: transparent; + overflow: hidden; + width: 52px; + height: 52px; + border-radius: 50%; + background-color: #a6a6a6; +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 7px; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 52px; + height: 52px; +} + +.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; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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: 52px; + width: 5px; + border-radius: 0; + border: 0; +} + +.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; +} + +.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: 4px; +} + +.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-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: 9px; +} + +.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-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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 { + 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 @@ + + +
    +
    + +
    +
    +
    Manager
    + +
    +
    +
    Staff
    + +
    +
    \ 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..3e1b51f7c --- /dev/null +++ b/dist/components/OrgChart/OrgChart.json @@ -0,0 +1,25 @@ +{ + "name": "OrgChart", + "notes": "", + "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.less b/dist/components/OrgChart/OrgChart.less new file mode 100644 index 000000000..8c5cf1070 --- /dev/null +++ b/dist/components/OrgChart/OrgChart.less @@ -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 { + .ms-font-m; + .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 { + .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/OrgChart/OrgChart.min.css b/dist/components/OrgChart/OrgChart.min.css new file mode 100644 index 000000000..013d9eddc --- /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,.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-OrgChart,.ms-Persona{font-weight:400;box-sizing:border-box;box-shadow:none}.ms-Persona{color:#333;font-size:14px;margin:0;padding:0;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;width:52px;height:52px;border-radius:50%;background-color:#a6a6a6}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:7px}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:52px;height:52px}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ms-Persona-primaryText{color:#333;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;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:52px;width:5px;border-radius:0;border:0}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:0 0;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}.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--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--sm .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.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:4px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.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-presence{left:27px}.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:9px}.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-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 WP Semilight','Segoe UI','Segoe WP',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:transparent solid 1px}.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:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{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%,#fff 48%,#fff 52%,#c72d25 52%,#c72d25 100%)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;margin:0;padding:0}.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:0 0;border:0;text-align:left;margin:0;padding:0;outline:transparent} \ No newline at end of file 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..f4e21fa94 --- /dev/null +++ b/dist/components/Overlay/Overlay.css @@ -0,0 +1,22 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.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..5c39c35ff --- /dev/null +++ b/dist/components/Overlay/Overlay.json @@ -0,0 +1,27 @@ +{ + "name": "Overlay", + "notes": "", + "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.less b/dist/components/Overlay/Overlay.less new file mode 100644 index 000000000..2ad167a50 --- /dev/null +++ b/dist/components/Overlay/Overlay.less @@ -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/Overlay/Overlay.min.css b/dist/components/Overlay/Overlay.min.css new file mode 100644 index 000000000..fb688ea26 --- /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:rgba(255,255,255,.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} \ No newline at end of file diff --git a/dist/components/Panel/Jquery.Panel.js b/dist/components/Panel/Jquery.Panel.js new file mode 100644 index 000000000..4b59370d4 --- /dev/null +++ b/dist/components/Panel/Jquery.Panel.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. + +/** + * 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 () { + + /** 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. */ + $(".js-togglePanel").on("click", function() { + // Panel must be set to display "block" in order for animations to render + $panelMain.css({display: "block"}); + $panel.toggleClass("is-open"); + }); + + $panelMain.on("animationend webkitAnimationEnd MSAnimationEnd", function(event) { + if (event.originalEvent.animationName === "fadeOut") { + // Hide and Prevent ms-Panel-main from being interactive + $(this).css({display: "none"}); + } + }); + + }); + + }; +})(jQuery); diff --git a/dist/components/Panel/Panel.ExtraLarge.html b/dist/components/Panel/Panel.ExtraLarge.html new file mode 100644 index 000000000..36d00d975 --- /dev/null +++ b/dist/components/Panel/Panel.ExtraLarge.html @@ -0,0 +1,116 @@ + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + Stars + +
    +
    +
    +
    +
    +
    + + Stars + +
    +
    +
    +
    +
    +
    + + Stars + +
    +
    +
    +
    +
    +
    +
    +
    + + Stars + +
    +
    +
    +
    +
    +
    + + Documents + +
    +
    +
    +
    +
    +
    + + Flags + +
    +
    +
    +
    +
    +
    + + Smiley + +
    +
    +
    +
    +
    +
    + + Office Store + +
    +
    +
    +
    +
    +
    + + Lync + +
    +
    +
    + +
    +
    +
    + + Ellipsis + +
    +
    +
      +
      + +
      +
      +
      +
      + 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..763b2c81e --- /dev/null +++ b/dist/components/Panel/Panel.Large.html @@ -0,0 +1,116 @@ + + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      + + Stars + +
      +
      +
      +
      +
      +
      + + Stars + +
      +
      +
      +
      +
      +
      + + Stars + +
      +
      +
      +
      +
      +
      +
      +
      + + Stars + +
      +
      +
      +
      +
      +
      + + Documents + +
      +
      +
      +
      +
      +
      + + Flags + +
      +
      +
      +
      +
      +
      + + Smiley + +
      +
      +
      +
      +
      +
      + + Office Store + +
      +
      +
      +
      +
      +
      + + Lync + +
      +
      +
      + +
      +
      +
      + + Ellipsis + +
      +
      +
        +
        + +
        +
        +
        +
        + Panel +

        Content goes here.

        +
        +
        +
        diff --git a/dist/components/Panel/Panel.Medium.html b/dist/components/Panel/Panel.Medium.html new file mode 100644 index 000000000..05056d8c2 --- /dev/null +++ b/dist/components/Panel/Panel.Medium.html @@ -0,0 +1,116 @@ + + + + +
        +
        +
        +
        +
        +
        +
        +
        +
        + + Stars + +
        +
        +
        +
        +
        +
        + + Stars + +
        +
        +
        +
        +
        +
        + + Stars + +
        +
        +
        +
        +
        +
        +
        +
        + + Stars + +
        +
        +
        +
        +
        +
        + + Documents + +
        +
        +
        +
        +
        +
        + + Flags + +
        +
        +
        +
        +
        +
        + + Smiley + +
        +
        +
        +
        +
        +
        + + Office Store + +
        +
        +
        +
        +
        +
        + + Lync + +
        +
        +
        + +
        +
        +
        + + Ellipsis + +
        +
        +
          +
          + +
          +
          +
          +
          + Panel +

          Content goes here.

          +
          +
          +
          diff --git a/dist/components/Panel/Panel.css b/dist/components/Panel/Panel.css new file mode 100644 index 000000000..4bcf1223d --- /dev/null +++ b/dist/components/Panel/Panel.css @@ -0,0 +1,1419 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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.is-disabled:hover, +.ms-Button:disabled:focus, +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: 1px; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + 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; + border-width: 2px; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before, +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after { + line-height: 1; + font-size: inherit; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before { + top: -2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before { + top: -2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before { + top: -4%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before { + top: -3%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before { + top: -1%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before { + top: -1%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before { + top: -2%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before { + left: -10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before { + top: -2%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before { + top: 2%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before { + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before { + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before { + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before { + top: 5%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before { + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before { + top: 2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before { + top: 6%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before { + top: 5%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before { + top: -1%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before { + top: -2%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before { + left: -19%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before { + top: 2%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before { + top: -3%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before { + top: 2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before { + top: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before { + left: -16%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before { + left: -33%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before { + top: 4%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before { + top: -2%; + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before { + left: -15%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before { + top: -4%; + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before { + left: -9%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before { + left: 8%; + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before { + left: 8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.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.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.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', 'Segoe WP', 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; + padding-right: 15px; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; +} + +@media only screen and (min-width: 480px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +.ms-CommandBarItem { + display: inline-block; + margin-right: 8px; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; +} + +.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 .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + display: none; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-link { + line-height: 39px; + cursor: pointer; + height: 40px; + min-width: 22px; + text-align: center; + position: relative; + padding: 0 6px; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem-link { + padding-right: 8px; + padding-left: 6px; + } +} + +.ms-CommandBarItem-chevronDown { + vertical-align: top; + 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.367s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 639px) { + .ms-CommandBarSearch { + overflow: hidden; + background-color: transparent; + width: 40px; + } +} + +@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 .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: 639px) { + .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; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.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; +} + +.ms-Panel .ms-Overlay { + z-index: 0; +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: 10; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; + padding: 0 32px 20px 32px; + overflow-y: auto; +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 70px; +} + +@media (min-width: 320px) { + .ms-Panel { + display: none; + } + + .ms-Panel.is-open { + display: block; + } + + .ms-Panel .ms-Overlay { + display: none; + } + + .ms-Panel.is-open .ms-Panel-main { + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 1; + } +} + +@media (min-width: 480px) { + .ms-Panel { + display: block; + pointer-events: none; + } + + .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + right: -40px; + pointer-events: auto; + width: 341px; + -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-main { + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + left: auto; + -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-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main { + box-shadow: 30px 0px 30px -30px rgba(0, 0, 0, 0.2); + -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-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main { + left: 0; + right: auto; + -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-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--medium .ms-Panel-main, + .ms-Panel.ms-Panel--large .ms-Panel-main, + .ms-Panel.ms-Panel--extraLarge .ms-Panel-main { + left: 47px; + width: auto; + } + + .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main, + .ms-Panel.ms-Panel--large.is-open .ms-Panel-main, + .ms-Panel.ms-Panel--extraLarge.is-open .ms-Panel-main { + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--medium .ms-Panel-main { + left: auto; + width: 644px; + } + + .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main { + left: auto; + right: 0; + width: 644px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--large .ms-Panel-main { + left: 427px; + } + + .ms-Panel.ms-Panel--extraLarge .ms-Panel-main { + left: 175px; + } + + .ms-Panel.ms-Panel--small.ms-Panel--left { + display: none; + } +} diff --git a/dist/components/Panel/Panel.html b/dist/components/Panel/Panel.html new file mode 100644 index 000000000..1f192e7f0 --- /dev/null +++ b/dist/components/Panel/Panel.html @@ -0,0 +1,116 @@ + + + + +
          +
          +
          +
          +
          +
          +
          +
          +
          + + Stars + +
          +
          +
          +
          +
          +
          + + Stars + +
          +
          +
          +
          +
          +
          + + Stars + +
          +
          +
          +
          +
          +
          +
          +
          + + Stars + +
          +
          +
          +
          +
          +
          + + Documents + +
          +
          +
          +
          +
          +
          + + Flags + +
          +
          +
          +
          +
          +
          + + Smiley + +
          +
          +
          +
          +
          +
          + + Office Store + +
          +
          +
          +
          +
          +
          + + Lync + +
          +
          +
          + +
          +
          +
          + + Ellipsis + +
          +
          +
            +
            + +
            +
            +
            +
            + Panel +

            Content goes here.

            +
            +
            +
            diff --git a/dist/components/Panel/Panel.json b/dist/components/Panel/Panel.json new file mode 100644 index 000000000..4c43d4da6 --- /dev/null +++ b/dist/components/Panel/Panel.json @@ -0,0 +1,45 @@ +{ + "name": "Panel", + "notes": "", + "template": "Panel.html", + "class": "ms-Panel", + "dependencies": [ + "Button", + "CommandBar", + "Label", + "Overlay" + ], + "wrapBranches": true, + "fileOrder": [ + "Panel.html" + ], + "branches": [ + { + "name": "Small", + "default": true, + "class": "ms-Panel--small", + "branches": [ + { + "name": "Right", + "default": true + }, + { + "name": "Left", + "class": "ms-Panel--left" + } + ] + }, + { + "name": "Medium", + "class": "ms-Panel--medium" + }, + { + "name": "Large", + "class": "ms-Panel--large" + }, + { + "name": "Extra Large", + "class": "ms-Panel--extraLarge" + } + ] +} diff --git a/dist/components/Panel/Panel.less b/dist/components/Panel/Panel.less new file mode 100644 index 000000000..5c50d72a5 --- /dev/null +++ b/dist/components/Panel/Panel.less @@ -0,0 +1,195 @@ +// 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 + + +// The panel covers the entire screen. +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: @ms-zIndex-Panel; + + // Overlay used within panel + .ms-Overlay { + z-index: @ms-zIndex-back; + } +} + +// 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; //prevent the panel from briefly showing up when the page loads + z-index: @ms-zIndex-front; +} + +// Scrollable content area, below the command buttons. +.ms-Panel-contentInner { + position: absolute; + top: 40px; // Push it below the commands. + bottom: 0; + left: 0; + right: 0; + padding: 0 32px 20px 32px; + overflow-y: auto; +} + +// 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; + line-height: 82px; // Magic number that places text baseline at 50px. + height: 70px; +} + + +// Small screens. +@media (min-width: @ms-screen-sm-min) { + + .ms-Panel { + display: none; + } + + .ms-Panel.is-open { + display: block; + } + + // Always hide overlay on small screens. + .ms-Panel .ms-Overlay { + display: none; + } + + .ms-Panel.is-open .ms-Panel-main { + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 1; + } + +} + +// Medium screens. +@media (min-width: @ms-screen-md-min) { + + .ms-Panel { + display: block; + pointer-events: none; + } + + // When opened, the full-width panel is replaced with one that is 340px wide + // and attached to the right of the screen. + .ms-Panel-main { + border-left: 1px solid @ms-color-neutralLight; + border-right: 1px solid @ms-color-neutralLight; + right: -40px; + pointer-events: auto; + width: 341px; // Add a pixel due to border-box. + .ms-u-slideRightOut40; + } + + .ms-Panel.is-open .ms-Panel-main { + .drop-shadow(-30px, 0px, 30px, -30px, .2); + left: auto; + .ms-u-slideLeftIn40; + } + + // On medium screens and up, the small panel attached to the left is a variant. + .ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main { + .drop-shadow(30px, 0px, 30px, -30px, .2); + .ms-u-slideRightIn40; + } + + .ms-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main { + left: 0; + right: auto; + .ms-u-slideLeftOut40; + } + + // Display the overlay, but with 0 opacity so that we can animate it. + .ms-Panel .ms-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity @ms-duration3 @ms-ease1; + } + + // When the panel is opened, animate to full opacity + // and activate pointer events so can be clicked. + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +// Large screens. +@media (min-width: @ms-screen-lg-min) { + + // All but the small panel (medium to extra large) become + // fluid with a fixed left margin of 48px when opened. + .ms-Panel.ms-Panel--medium, + .ms-Panel.ms-Panel--large, + .ms-Panel.ms-Panel--extraLarge { + .ms-Panel-main { + left: 47px; // Remove a pixel due to border-box. + width: auto; + } + } + + .ms-Panel.ms-Panel--medium.is-open, + .ms-Panel.ms-Panel--large.is-open, + .ms-Panel.ms-Panel--extraLarge.is-open { + .ms-Panel-main { + width: auto; + } + } + +} + +// Extra large screens. +@media (min-width: @ms-screen-xl-min) { + + // Medium panel changes to 643px fixed width, while all other + // sizes remain the same as they were on large screens. + .ms-Panel.ms-Panel--medium .ms-Panel-main { + left: auto; + width: 644px; // Add a pixel due to border-box. + } + + .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main { + left: auto; + right: 0; + width: 644px; // Add a pixel due to border-box. + } + +} + +// Extra extra large screens. +@media (min-width: @ms-screen-xxl-min) { + + // Large panels have an increased left margin of 428px. + .ms-Panel.ms-Panel--large .ms-Panel-main { + left: 427px; // Remove a pixel due to border-box. + } + + // Extra large panels have an increased left margin of 176px. + .ms-Panel.ms-Panel--extraLarge .ms-Panel-main { + left: 175px; // Remove a pixel due to border-box. + } + + // For now, the small left panel is hidden on XXL screens and up. + .ms-Panel.ms-Panel--small.ms-Panel--left { + display: none; + } +} diff --git a/dist/components/Panel/Panel.min.css b/dist/components/Panel/Panel.min.css new file mode 100644 index 000000000..5040ae6c3 --- /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,.ms-Label{font-weight:400;box-shadow:none;box-sizing:border-box}.ms-Button,.ms-CommandBarSearch,.ms-Label{box-sizing:border-box}.ms-Button{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;margin:0;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:focus .ms-Button-label,.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus,.ms-Button:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-Button:hover{border-color:#eaeaea}.ms-Button:focus{border-color:#0078d7}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover,.ms-CommandBar:focus,.ms-CommandBarItem{outline:0}.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+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',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}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:1px}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{position:relative;display:inline-block;padding:0;text-align:left;-webkit-font-smoothing:antialiased;border-width:2px;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{line-height:1;font-size:inherit}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before{top:-2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before{top:-2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before{top:-4%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before{top:-3%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before{top:-1%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before{top:-1%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before{top:-2%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before{left:-10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before{top:-2%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before{top:2%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before{top:-1%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before{left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before{top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before{top:2%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before{left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before{top:5%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before{left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before{top:5%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before{top:5%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before{top:2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before{top:6%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before{top:5%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before{top:-1%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before{top:2%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before{top:-4%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before{top:-2%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before{left:-19%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before{top:-5%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before{top:2%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before{left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before{top:-3%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before{top:4%;left:-25%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before{top:4%;left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before{top:-3%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before{top:2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before{top:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before{left:-16%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before{left:-33%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before{top:3%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before{top:4%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before{top:-2%;left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before{left:-15%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before{top:-4%;left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before{left:-14%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before{top:4%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before{left:-9%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before{left:-7%;top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before{left:8%;top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before{left:8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px}.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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--command .ms-Button-label,.ms-Button.ms-Button--compound .ms-Button-description,.ms-Label{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;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.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 .ms-Button-description,.ms-Button.ms-Button--compound:disabled .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--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--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: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;padding-right:15px;border:0;position:relative}.ms-CommandBar-mainArea{overflow-x:hidden;display:block}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto}@media only screen and (min-width:480px){.ms-CommandBar-sideCommands{min-width:128px}}.ms-CommandBarItem{display:inline-block;margin-right:8px;color:#0078d7;height:40px;vertical-align:top}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:0}.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:0}.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem-overflow,.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.is-hidden,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-link{line-height:39px;cursor:pointer;height:40px;min-width:22px;text-align:center;position:relative;padding:0 6px}@media only screen and (min-width:640px){.ms-CommandBarItem-link{padding-right:8px;padding-left:6px}}.ms-CommandBarItem-chevronDown{vertical-align:top;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;border-color:transparent;transition:367ms cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:639px){.ms-CommandBarSearch{overflow:hidden;background-color:transparent;width:40px}.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}@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 .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:0;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{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch.is-active,.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch-iconSearchWrapper{display:block}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{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 .ms-CommandBarSearch-input{cursor:text;border-left-width:8px;padding-right:40px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper,.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper,.ms-Label{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-Label{color:#333;font-size:12px;margin:0;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Overlay{background-color:rgba(255,255,255,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:200}.ms-Panel,.ms-Panel-main{position:fixed;top:0;bottom:0;right:0}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{left:0;z-index:300}.ms-Panel .ms-Overlay{z-index:0}.ms-Panel-main{background-color:#fff;display:none;z-index:10}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 32px 20px;overflow-y:auto}.ms-Panel-headerText{font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:70px}@media (min-width:320px){.ms-Panel{display:none}.ms-Panel.is-open{display:block}.ms-Panel .ms-Overlay{display:none}.ms-Panel.is-open .ms-Panel-main{top:0;right:0;bottom:0;left:0;opacity:1}}@media (min-width:480px){.ms-Panel{display:block;pointer-events:none}.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;right:-40px;pointer-events:auto;width:341px;-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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-main,.ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main{-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;-webkit-animation-fill-mode:both}.ms-Panel.is-open .ms-Panel-main{box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto;-webkit-animation-name:fadeIn,slideLeft40;animation-name:fadeIn,slideLeft40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main{box-shadow:30px 0 30px -30px rgba(0,0,0,.2);-webkit-animation-name:fadeIn,slideRight40;animation-name:fadeIn,slideRight40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main{left:0;right:auto;-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity 367ms cubic-bezier(.1,.9,.2,1)}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:640px){.ms-Panel.ms-Panel--extraLarge .ms-Panel-main,.ms-Panel.ms-Panel--large .ms-Panel-main,.ms-Panel.ms-Panel--medium .ms-Panel-main{left:47px;width:auto}.ms-Panel.ms-Panel--extraLarge.is-open .ms-Panel-main,.ms-Panel.ms-Panel--large.is-open .ms-Panel-main,.ms-Panel.ms-Panel--medium.is-open .ms-Panel-main{width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--medium .ms-Panel-main{left:auto;width:644px}.ms-Panel.ms-Panel--medium.is-open .ms-Panel-main{left:auto;right:0;width:644px}}@media (min-width:1366px){.ms-Panel.ms-Panel--large .ms-Panel-main{left:427px}.ms-Panel.ms-Panel--extraLarge .ms-Panel-main{left:175px}.ms-Panel.ms-Panel--small.ms-Panel--left{display:none}} \ No newline at end of file diff --git a/dist/components/PeoplePicker/Jquery.PeoplePicker.js b/dist/components/PeoplePicker/Jquery.PeoplePicker.js new file mode 100644 index 000000000..9ce2c8dd2 --- /dev/null +++ b/dist/components/PeoplePicker/Jquery.PeoplePicker.js @@ -0,0 +1,211 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * 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 $searchMore = $peoplePicker.find(".ms-PeoplePicker-searchMore"); + var $selected = $peoplePicker.find('.ms-PeoplePicker-selected'); + var $selectedPeople = $peoplePicker.find(".ms-PeoplePicker-selectedPeople") + var $selectedCount = $peoplePicker.find(".ms-PeoplePicker-selectedCount") + var isActive = false; + var spinner; + + // 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 ( $('.ms-PeoplePicker').hasClass('is-active') ) { + $(".ms-PeoplePicker").removeClass("is-active"); + } + + 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. */ + $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(event) { + $peoplePicker.removeClass('is-active'); + $(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 (event) { + var selectedName = $(this).find(".ms-Persona-primaryText").html(); + var selectedTitle = $(this).find(".ms-Persona-secondaryText").html(); + var personaHTML = '
            ' + + '
            ' + + '
            ' + + '' + + '' + + '
            ' + + '
            ' + + '
            ' + + '
            ' + selectedName + '
            ' + + '
            ' + + '
            ' + + '' + + '
            '; + var personaListItem = '
          • ' + + '
            ' + + '
            ' + + '' + + '
            ' + + '
            ' + + '
            ' + + '
            ' + selectedName + '
            ' + + '
            ' + selectedTitle + '
            ' + + '
            ' + + '
            ' + + '' + + '
            • '; + if (!$peoplePicker.hasClass('ms-PeoplePicker--facePile')) { + $searchField.before(personaHTML); + $peoplePicker.removeClass("is-active"); + resizeSearchField($peoplePicker); + } + else { + if (!$selected.hasClass('is-active')) { + $selected.addClass('is-active'); + } + $selectedPeople.prepend(personaListItem); + $peoplePicker.removeClass("is-active"); + + var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length; + $selectedCount.html(count); + } + }); + + /** Remove the persona when clicking the personaRemove button. */ + $peoplePicker.on('click', '.ms-PeoplePicker-personaRemove', function(event) { + $(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(event) { + var $searchMore = $(this); + var primaryLabel = $searchMore.find(".ms-PeoplePicker-searchMorePrimary"); + var originalPrimaryLabelText = primaryLabel.html(); + + /** Change to searching state. */ + $searchMore.addClass("is-searching"); + primaryLabel.html("Searching for “Sen”"); + + /** Attach Spinner */ + if (!spinner) { + spinner = new fabric.Spinner($searchMore.get(0)); + } else { + spinner.start(); + } + + /** Return the original state. */ + setTimeout(function() { + $searchMore.removeClass("is-searching"); + primaryLabel.html(originalPrimaryLabelText); + spinner.stop(); + }, 3000); + }); + + /** 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'); + } + }); + + }); + }; + + 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%"; + } + + $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth(newFieldWidth); + } + +})(jQuery); \ No newline at end of file diff --git a/dist/components/PeoplePicker/PeoplePicker.Compact.html b/dist/components/PeoplePicker/PeoplePicker.Compact.html new file mode 100644 index 000000000..609de2af6 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.Compact.html @@ -0,0 +1,169 @@ + + +
            +
            + +
            +
            +
            +
            +
            Top results
            +
              +
            • + + +
              • +
            • + + +
              • +
            +
            +
            +
            Other results
            +
              +
            • + + +
              • +
            • + + +
              • +
            • + + +
              +
                +
              • + + +
                • +
              • + + +
                • +
              +
              +
              • +
            • + + +
              • +
            • + + +
              • +
            +
            +
            +
            + +
            +
            +
            diff --git a/dist/components/PeoplePicker/PeoplePicker.Disconnected.html b/dist/components/PeoplePicker/PeoplePicker.Disconnected.html new file mode 100644 index 000000000..30e666cab --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.Disconnected.html @@ -0,0 +1,168 @@ + + +
            +
            + +
            +
            +
            +
            +
            Top results
            +
              +
            • + + +
              • +
            • + + +
              • +
            +
            +
            +
            Other results
            +
              +
            • + + +
              • +
            • + + +
              • +
            • + + +
              +
                +
              • + + +
                • +
              • + + +
                • +
              +
              +
              • +
            • + + +
              • +
            • + + +
              • +
            +
            +
            +
            + +
            +
            +
            diff --git a/dist/components/PeoplePicker/PeoplePicker.FacePile.html b/dist/components/PeoplePicker/PeoplePicker.FacePile.html new file mode 100644 index 000000000..49582f22c --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.FacePile.html @@ -0,0 +1,112 @@ + + +
            + +
            + +
            +
            +
            +
            +
              +
            • + +
              • +
            • + +
              • +
            • + +
              • +
            • + +
              • +
            • + +
              • +
            • + +
              • +
            +
            +
            +
            +
            +
            + newly added members +
            + +
            +
            \ 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..3c823d953 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.css @@ -0,0 +1,1709 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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.is-disabled:hover, +.ms-Button:disabled:focus, +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: 1px; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + 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; + border-width: 2px; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before, +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after { + line-height: 1; + font-size: inherit; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before { + top: -2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before { + top: -2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before { + top: -4%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before { + top: -3%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before { + top: -1%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before { + top: -1%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before { + top: -2%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before { + left: -10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before { + top: -2%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before { + top: 2%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before { + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before { + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before { + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before { + top: 5%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before { + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before { + top: 2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before { + top: 6%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before { + top: 5%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before { + top: -1%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before { + top: -2%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before { + left: -19%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before { + top: 2%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before { + top: -3%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before { + top: 2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before { + top: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before { + left: -16%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before { + left: -33%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before { + top: 4%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before { + top: -2%; + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before { + left: -15%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before { + top: -4%; + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before { + left: -9%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before { + left: 8%; + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before { + left: 8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.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.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.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', 'Segoe WP', 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', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.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', 'Segoe WP', 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; + background-color: transparent; + overflow: hidden; + width: 52px; + height: 52px; + border-radius: 50%; + background-color: #a6a6a6; +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 7px; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 52px; + height: 52px; +} + +.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; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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: 52px; + width: 5px; + border-radius: 0; + border: 0; +} + +.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; +} + +.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: 4px; +} + +.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-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: 9px; +} + +.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-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 WP Semilight', 'Segoe UI', 'Segoe WP', 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-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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: none; + 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; +} + +.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; + height: 30px; + text-align: center; + width: 30px; +} + +.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; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: none; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn { + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; +} + +.ms-PeoplePicker-resultBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact { + height: 30px; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + height: 50px; + position: absolute; + right: 0; + top: 0; + width: 30px; + z-index: 300; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; + margin-top: -8px; + position: absolute; + text-align: center; + left: 8px; +} + +.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; +} + +.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 { + 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: 24px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 30px; +} + +.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; + margin-top: -12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader { + color: #0078d7; + text-transform: uppercase; + font-size: 12px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 10px; + position: relative; +} diff --git a/dist/components/PeoplePicker/PeoplePicker.html b/dist/components/PeoplePicker/PeoplePicker.html new file mode 100644 index 000000000..b24c752ba --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.html @@ -0,0 +1,178 @@ + + +
            +
            + +
            +
            +
            +
            +
            Top results
            +
              +
            • + + +
              • +
            • + + +
              • +
            +
            +
            +
            Other results
            +
              +
            • + + +
              • +
            • + + +
              • +
            • + + +
              +
                +
              • + + +
                • +
              • + + +
                • +
              +
              +
              • +
            • + + +
              • +
            • + + +
              • +
            +
            +
            +
            + +
            +
            +
            diff --git a/dist/components/PeoplePicker/PeoplePicker.json b/dist/components/PeoplePicker/PeoplePicker.json new file mode 100644 index 000000000..87ea662cf --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.json @@ -0,0 +1,40 @@ +{ + "name": "PeoplePicker", + "notes": "", + "template": "PeoplePicker.html", + "class": "ms-PeoplePicker", + "dependencies": [ + "Button", + "Label", + "Overlay", + "Persona" + ], + "wrapBranches": true, + "fileOrder": [ + "PeoplePicker.html", + "PeoplePicker.Compact.html", + "PeoplePicker.Disconnected.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.less b/dist/components/PeoplePicker/PeoplePicker.less new file mode 100644 index 000000000..50100929a --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.less @@ -0,0 +1,447 @@ +// 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 + + +.ms-PeoplePicker { + .ms-font-m; + .ms-u-normalize; + background-color: @ms-color-white; + margin-bottom: 10px; +} + +// Box that contains the search field and selected people. +.ms-PeoplePicker-searchBox { + .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: none; + 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; + + //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 { + .button-reset(); + background-color: @ms-color-neutralLighter; + color: @ms-color-neutralSecondary; + display: inline-block; + float: left; + height: 30px; + text-align: center; + width: 30px; + + &: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 { + .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; +} + + +// 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: none; + } +} + +// 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 { + .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 { + .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 { + .button-reset(); + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; + + &:hover { background-color: @ms-color-neutralLight; outline: 1px solid transparent; } + &:focus { outline: 1; } + + &.ms-PeoplePicker-resultBtn--compact { + height: 30px; + } +} + +// Actionable icon on a result +.ms-PeoplePicker-resultAction { + .button-reset(); + display: block; + transition: background-color .367s @ms-ease1; + height: 50px; + position: absolute; + right: 0; + top: 0; + width: 30px; + z-index: (@ms-zIndex-PeoplePicker + @ms-zIndex-back); + + .ms-Icon { + color: @ms-color-neutralSecondary; + font-size: @ms-font-size-m-plus; + margin-top: -8px; + position: absolute; + text-align: center; + left: 8px; + } + + &: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; + + .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 { + .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 + &: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-xl + 3; + 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; + } +} + +// Compact size +.ms-PeoplePicker.ms-PeoplePicker--compact { + + // Limit to 5 results before scrolling. + .ms-PeoplePicker-resultGroups { + max-height: 209px; + } + + .ms-PeoplePicker-resultAction { + height: 30px; + + .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; + margin-top: -12px; + } + } + + .ms-PeoplePicker-searchMorePrimary { + font-size: @ms-font-size-s; + } + + .ms-PeoplePicker-searchMoreSecondary { + display: none; + } +} + +// Facepile +.ms-PeoplePicker.ms-PeoplePicker--facePile { + + .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; + } + + .ms-PeoplePicker-searchField { + height: 28px; + } +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; + + &.is-active { + display: block; + } +} + +.ms-PeoplePicker-selectedHeader { + color: @ms-color-themePrimary; + text-transform: uppercase; + font-size: @ms-font-size-s; + font-family: @ms-font-family-light; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople { + .ms-u-normalize; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 10px; + position: relative; +} diff --git a/dist/components/PeoplePicker/PeoplePicker.min.css b/dist/components/PeoplePicker/PeoplePicker.min.css new file mode 100644 index 000000000..94485843c --- /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','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin: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:focus .ms-Button-label,.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus,.ms-Button:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-Button:hover{border-color:#eaeaea}.ms-Button:focus{border-color:#0078d7}.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 WP Semibold','Segoe UI','Segoe WP',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}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:1px}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{position:relative;display:inline-block;padding:0;text-align:left;-webkit-font-smoothing:antialiased;border-width:2px;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{line-height:1;font-size:inherit}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before{top:-2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before{top:-2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before{top:-4%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before{top:-3%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before{top:-1%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before{top:-1%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before{top:-2%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before{left:-10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before{top:-2%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before{top:2%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before{top:-1%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before{left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before{top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before{top:2%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before{left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before{top:5%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before{left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before{top:5%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before{top:5%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before{top:2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before{top:6%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before{top:5%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before{top:-1%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before{top:2%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before{top:-4%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before{top:-2%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before{left:-19%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before{top:-5%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before{top:2%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before{left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before{top:-3%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before{top:4%;left:-25%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before{top:4%;left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before{top:-3%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before{top:2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before{top:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before{left:-16%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before{left:-33%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before{top:3%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before{top:4%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before{top:-2%;left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before{left:-15%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before{top:-4%;left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before{left:-14%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before{top:4%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before{left:-9%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before{left:-7%;top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before{left:8%;top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before{left:8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px}.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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--command .ms-Button-label,.ms-Button.ms-Button--compound .ms-Button-description{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;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.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 .ms-Button-description,.ms-Button.ms-Button--compound:disabled .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--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--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: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,.ms-Persona{margin:0;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400;box-shadow:none;box-sizing:border-box}.ms-Label{color:#333;font-size:12px;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Overlay{background-color:rgba(255,255,255,.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-Persona{color:#333;font-size:14px;padding:0;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;width:52px;height:52px;border-radius:50%;background-color:#a6a6a6}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:7px}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:52px;height:52px}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ms-Persona-primaryText{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',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','Segoe WP',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:52px;width:5px;border-radius:0;border:0}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:0 0;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}.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--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--sm .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.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:4px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.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-presence{left:27px}.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:9px}.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-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 WP Semilight','Segoe UI','Segoe WP',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:transparent solid 1px}.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:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{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%,#fff 48%,#fff 52%,#c72d25 52%,#c72d25 100%)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PeoplePicker{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0 0 10px;padding:0;box-shadow:none;background-color:#fff}.ms-PeoplePicker-searchBox{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:none;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:0;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px}.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:#f4f4f4;border:0;cursor:pointer;color:#666;display:inline-block;float:left;height:30px;text-align:center;width:30px}.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:0}.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}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:none}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',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 0 -1px;padding:0;box-shadow:none;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:hover .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{color:#333}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;height:50px;width:100%;background:0 0;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:30px}.ms-PeoplePicker-resultAction{background:0 0;border:0;cursor:pointer;display:block;transition:background-color 367ms cubic-bezier(.1,.9,.2,1);height:50px;position:absolute;right:0;top:0;width:30px;z-index:300}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px;margin-top:-8px;position:absolute;text-align:center;left:8px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:transparent solid 1px}.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}.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,.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{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:0 0;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0 0 0 70px;margin:0;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.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:#333;font-size:24px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary,.ms-PeoplePicker-searchMoreSecondary{color:#666;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:11px}.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{line-height:20px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:30px}.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;margin-top:-12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-selectedHeader{color:#0078d7;text-transform:uppercase;font-size:12px;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:10px;position:relative} \ No newline at end of file diff --git a/dist/components/Persona/Persona.ExtraLarge.html b/dist/components/Persona/Persona.ExtraLarge.html new file mode 100644 index 000000000..3cc5c8267 --- /dev/null +++ b/dist/components/Persona/Persona.ExtraLarge.html @@ -0,0 +1,15 @@ + + +
            +
            + + +
            +
            +
            +
            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..13643f527 --- /dev/null +++ b/dist/components/Persona/Persona.ExtraSmall.html @@ -0,0 +1,12 @@ + + +
            +
            + + +
            +
            +
            +
            Alton Lafferty
            +
            +
            diff --git a/dist/components/Persona/Persona.Large.html b/dist/components/Persona/Persona.Large.html new file mode 100644 index 000000000..d7e112503 --- /dev/null +++ b/dist/components/Persona/Persona.Large.html @@ -0,0 +1,15 @@ + + +
            +
            + + +
            +
            +
            +
            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..70bffb04e --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Available.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..a647d82b1 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Away.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..65a37d37c --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Blocked.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..ba72df3b4 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Busy.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..835efbfa3 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Dnd.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..4371520c4 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Offline.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..7c667a2a6 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Available.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..ac783edce --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Away.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..04b71efea --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Blocked.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..685e052a4 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Busy.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..c8480381b --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Dnd.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..2056ccca6 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Offline.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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..2ec9e447c --- /dev/null +++ b/dist/components/Persona/Persona.Small.html @@ -0,0 +1,14 @@ + + +
            +
            + + +
            +
            +
            +
            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..65f392905 --- /dev/null +++ b/dist/components/Persona/Persona.Square.ExtraLarge.html @@ -0,0 +1,15 @@ + + +
            +
            + + +
            +
            +
            +
            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..87e6304b0 --- /dev/null +++ b/dist/components/Persona/Persona.Square.ExtraSmall.html @@ -0,0 +1,12 @@ + + +
            +
            + + +
            +
            +
            +
            Alton Lafferty
            +
            +
            diff --git a/dist/components/Persona/Persona.Square.Large.html b/dist/components/Persona/Persona.Square.Large.html new file mode 100644 index 000000000..490b8ad94 --- /dev/null +++ b/dist/components/Persona/Persona.Square.Large.html @@ -0,0 +1,14 @@ + + +
            +
            + + +
            +
            +
            +
            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..f70f2dd63 --- /dev/null +++ b/dist/components/Persona/Persona.Square.Small.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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 @@ + + +
            +
            +
            +
            Alton Lafferty
            +
            +
            diff --git a/dist/components/Persona/Persona.Square.html b/dist/components/Persona/Persona.Square.html new file mode 100644 index 000000000..cc013c40c --- /dev/null +++ b/dist/components/Persona/Persona.Square.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            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 @@ + + +
            +
            +
            +
            Alton Lafferty
            +
            +
            + diff --git a/dist/components/Persona/Persona.css b/dist/components/Persona/Persona.css new file mode 100644 index 000000000..a128009a2 --- /dev/null +++ b/dist/components/Persona/Persona.css @@ -0,0 +1,369 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; + background-color: transparent; + overflow: hidden; + width: 52px; + height: 52px; + border-radius: 50%; + background-color: #a6a6a6; +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 7px; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 52px; + height: 52px; +} + +.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; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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: 52px; + width: 5px; + border-radius: 0; + border: 0; +} + +.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; +} + +.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: 4px; +} + +.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-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: 9px; +} + +.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-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 WP Semilight', 'Segoe UI', 'Segoe WP', 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..abb2b619e --- /dev/null +++ b/dist/components/Persona/Persona.html @@ -0,0 +1,13 @@ + + +
            +
            + + +
            +
            +
            +
            Alton Lafferty
            +
            Accountant
            +
            +
            diff --git a/dist/components/Persona/Persona.json b/dist/components/Persona/Persona.json new file mode 100644 index 000000000..602e3629f --- /dev/null +++ b/dist/components/Persona/Persona.json @@ -0,0 +1,189 @@ +{ + "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.", + "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" + ], + "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.less b/dist/components/Persona/Persona.less new file mode 100644 index 000000000..9da429cc6 --- /dev/null +++ b/dist/components/Persona/Persona.less @@ -0,0 +1,519 @@ +// 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 + + +.ms-Persona { + .ms-font-m; + .ms-u-normalize; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + background-color: transparent; + overflow: hidden; + width: 52px; + height: 52px; + border-radius: 50%; + background-color: @ms-color-neutralTertiary; +} + +.ms-Persona-placeholder { + color: @ms-color-white; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 7px; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 52px; + height: 52px; + + &[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 { + .noWrap(); +} + +.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: 52px; + width: 5px; + border-radius: 0; + border: 0; + } +} + + +//== 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; + } + + .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: 4px; + } + + .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-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: 9px; + } + + .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-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: -webkit-linear-gradient( + 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% + ); + 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: -webkit-linear-gradient( + 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% + ); + 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/Persona/Persona.min.css b/dist/components/Persona/Persona.min.css new file mode 100644 index 000000000..f2641cf50 --- /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,.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Persona{color:#333;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;width:52px;height:52px;border-radius:50%;background-color:#a6a6a6}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:7px}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:52px;height:52px}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ms-Persona-primaryText{color:#333;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;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:52px;width:5px;border-radius:0;border:0}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:0 0;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}.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--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--sm .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.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:4px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.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-presence{left:27px}.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:9px}.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-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 WP Semilight','Segoe UI','Segoe WP',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:transparent solid 1px}.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:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{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%,#fff 48%,#fff 52%,#c72d25 52%,#c72d25 100%)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8} \ No newline at end of file diff --git a/dist/components/PersonaCard/Jquery.PersonaCard.js b/dist/components/PersonaCard/Jquery.PersonaCard.js new file mode 100644 index 000000000..f156ad583 --- /dev/null +++ b/dist/components/PersonaCard/Jquery.PersonaCard.js @@ -0,0 +1,58 @@ +// 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(item){ + var wrapper = document.getElementById("detailList"); + 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(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/components/PersonaCard/PersonaCard.Square.html b/dist/components/PersonaCard/PersonaCard.Square.html new file mode 100644 index 000000000..dea33386d --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.Square.html @@ -0,0 +1,169 @@ +
            +
            +
            +
            + + +
            +
            +
            +
            Alton Lafferty
            +
            Interior Designer, Contoso
            +
            Office: 7/1234
            +
            Available - Video capable
            +
            +
            +
            + +
            + +
            +
            + \ 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..39fcedf2f --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.css @@ -0,0 +1,746 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; + background-color: transparent; + overflow: hidden; + width: 52px; + height: 52px; + border-radius: 50%; + background-color: #a6a6a6; +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 7px; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 52px; + height: 52px; +} + +.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; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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: 52px; + width: 5px; + border-radius: 0; + border: 0; +} + +.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; +} + +.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: 4px; +} + +.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-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: 9px; +} + +.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-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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 { + 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; +} + +.ms-Link.ms-Link--hero { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + padding: 2px 8px 4px; +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUp10; + animation-name: fadeIn, slideUp10; + -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-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 { + 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 { + color: #212121; +} + +.ms-PersonaCard-action:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active: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: none; + border-bottom: none; + bottom: -4px; + left: 15px; +} + +.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; + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-overflow.is-active: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: none; + border-bottom: none; + bottom: -4px; + left: 15px; +} + +.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 !important; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100% !important; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200% !important; +} + +.ms-PersonaCard-detailMail { + margin-left: -300% !important; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400% !important; +} + +.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 { + 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..ef78349e5 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.html @@ -0,0 +1,171 @@ + + +
            +
            +
            +
            + + +
            +
            +
            +
            Alton Lafferty
            +
            Interior Designer, Contoso
            +
            Office: 7/1234
            +
            Available - Video capable
            +
            +
            +
            + +
            + +
            +
            + diff --git a/dist/components/PersonaCard/PersonaCard.json b/dist/components/PersonaCard/PersonaCard.json new file mode 100644 index 000000000..50f2acc49 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.json @@ -0,0 +1,27 @@ +{ + "name": "PersonaCard", + "notes": "", + "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.less b/dist/components/PersonaCard/PersonaCard.less new file mode 100644 index 000000000..00f89c5aa --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.less @@ -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 +// -------------------------------------------------- +// Persona Card styles + + +// Small +// +// The persona card docks to the bottom of the viewport. +.ms-PersonaCard { + .ms-font-m; + .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-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 { + .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; + .ms-u-borderBox; + + &:hover { + color: @ms-color-neutralDark; + } + + &:active { + color: @ms-color-themePrimary; + } + + // Currently-selected action + &.is-active { + color: @ms-color-themePrimary; + + // Arrow + &:after { + .ms-u-borderBox; + .rotate(45deg); + content: ""; + width: 10px; + height: 10px; + border: 1px solid @ms-color-neutralTertiaryAlt; + background-color: @ms-color-white; + position: absolute; + border-right: none; + border-bottom: none; + bottom: -4px; + left: 15px; + } + } +} + +.ms-PersonaCard-overflow { + .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 .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 !important; } +.ms-PersonaCard-detailPhone { margin-left: -100% !important; } +.ms-PersonaCard-detailVideo { margin-left: -200% !important; } +.ms-PersonaCard-detailMail { margin-left: -300% !important; } +.ms-PersonaCard-detailOrg { margin-left: -400% !important; } + +.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 .25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height .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 { + .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 { + .drop-shadow(); + max-width: 360px; + position: relative; + } +} diff --git a/dist/components/PersonaCard/PersonaCard.min.css b/dist/components/PersonaCard/PersonaCard.min.css new file mode 100644 index 000000000..75db8e30c --- /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,.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-OrgChart,.ms-Persona{box-sizing:border-box;box-shadow:none}.ms-Persona{color:#333;font-size:14px;font-weight:400;margin:0;padding:0;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;width:52px;height:52px;border-radius:50%;background-color:#a6a6a6}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:7px}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:52px;height:52px}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ms-Persona-primaryText{color:#333;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;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:52px;width:5px;border-radius:0;border:0}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:0 0;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}.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--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--sm .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.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:4px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.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-presence{left:27px}.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:9px}.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-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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;margin-top:0}.ms-OrgChart,.ms-PersonaCard{font-size:14px;font-weight:400}.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:transparent solid 1px}.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:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{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%,#fff 48%,#fff 52%,#c72d25 52%,#c72d25 100%)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;margin:0;padding:0}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-PersonaCard-action,.ms-PersonaCard-overflow{line-height:48px;padding:0 10px;display:inline-block}.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:0 0;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}.ms-Link.ms-Link--hero{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;padding:2px 8px 4px}.ms-PersonaCard{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;-webkit-animation-name:fadeIn,slideUp10;animation-name:fadeIn,slideUp10;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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:transparent solid 1px}.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-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{content:'';width:10px;bottom:-4px;left:15px;background-color:#fff;box-sizing:border-box}.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{cursor:pointer;font-size:17px;height:48px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover{color:#212121}.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active{color:#0078d7}.ms-PersonaCard-action.is-active:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:10px;border:1px solid #c8c8c8;position:absolute;border-right:none;border-bottom:none}.ms-PersonaCard-overflow{cursor:pointer;height:48px;position:relative;box-sizing:border-box;font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow.is-active,.ms-PersonaCard-overflow:active,.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-overflow.is-active:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:10px;border:1px solid #c8c8c8;position:absolute;border-right:none;border-bottom:none}.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 267ms 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-detailChat{margin-left:0!important}.ms-PersonaCard-detailPhone{margin-left:-100%!important}.ms-PersonaCard-detailVideo{margin-left:-200%!important}.ms-PersonaCard-detailMail{margin-left:-300%!important}.ms-PersonaCard-detailOrg{overflow-y:auto;margin-left:-400%!important}.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{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/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 @@ + + + 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 @@ + + + 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 @@ + + + diff --git a/dist/components/Pivot/Pivot.css b/dist/components/Pivot/Pivot.css new file mode 100644 index 000000000..fcfd1d404 --- /dev/null +++ b/dist/components/Pivot/Pivot.css @@ -0,0 +1,131 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Pivot { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 30px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 27px; + margin-right: 15px; +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:active { + color: #0078d7; +} + +.ms-Pivot-link.is-selected { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7 !important; +} + +.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 { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + } +} diff --git a/dist/components/Pivot/Pivot.html b/dist/components/Pivot/Pivot.html new file mode 100644 index 000000000..891e8ef05 --- /dev/null +++ b/dist/components/Pivot/Pivot.html @@ -0,0 +1,10 @@ + + + diff --git a/dist/components/Pivot/Pivot.json b/dist/components/Pivot/Pivot.json new file mode 100644 index 000000000..605d73e03 --- /dev/null +++ b/dist/components/Pivot/Pivot.json @@ -0,0 +1,44 @@ +{ + "name": "Pivot", + "notes": "", + "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.less b/dist/components/Pivot/Pivot.less new file mode 100644 index 000000000..4eaa0e270 --- /dev/null +++ b/dist/components/Pivot/Pivot.less @@ -0,0 +1,155 @@ +// 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 { + .ms-font-m; + .ms-u-normalize; + height: 30px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: @ms-color-neutralPrimary; + display: inline-block; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-m-plus; + line-height: 27px; + margin-right: 15px; + + &:hover, + &:focus { + color: @ms-color-black; + cursor: pointer; + } + + &:active { + color: @ms-color-themePrimary; + } + + //== State: Selected + &.is-selected { + color: @ms-color-themePrimary; + font-family: @ms-font-family-semibold; + } +} + +// Overflow (ellipsis) +.ms-Pivot-link.ms-Pivot-link--overflow { + color: @ms-color-neutralSecondary; + + &.is-selected { + color: @ms-color-themePrimary; + } + + &:hover:not(.is-selected), + &:focus:not(.is-selected) { + color: @ms-color-neutralDark; + } + + &:active { + color: @ms-color-themePrimary !important; + } +} + +// 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; + + &.is-selected { + font-family: @ms-font-family-semilight; + } + } + + .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; + + &: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; + } + + //== State: Selected + &.is-selected { + background-color: @ms-color-themePrimary; + color: @ms-color-white; + font-family: @ms-font-family-semilight; + } + } + + .ms-Pivot-link.ms-Pivot-link--overflow { + &:hover:not(.is-selected), + &:focus:not(.is-selected) { + background-color: @ms-color-white; + } + + &:active { + background-color: @ms-color-themePrimary !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/Pivot/Pivot.min.css b/dist/components/Pivot/Pivot.min.css new file mode 100644 index 000000000..9c9ae6514 --- /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{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:30px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:15px;line-height:27px;margin-right:15px}.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active{color:#0078d7}.ms-Pivot-link.is-selected{color:#0078d7;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7!important}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link,.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}.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}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}} \ No newline at end of file diff --git a/dist/components/Pivot/jquery.Pivot.js b/dist/components/Pivot/jquery.Pivot.js new file mode 100644 index 000000000..8a7ab24b8 --- /dev/null +++ b/dist/components/Pivot/jquery.Pivot.js @@ -0,0 +1,29 @@ +// 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(); + $(this).siblings('.ms-Pivot-link').removeClass('is-selected'); + $(this).addClass('is-selected'); + }); + + }); + + }; +})(jQuery); diff --git a/dist/components/ProgressIndicator/ProgressIndicator.css b/dist/components/ProgressIndicator/ProgressIndicator.css new file mode 100644 index 000000000..f589777e7 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.css @@ -0,0 +1,46 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-ProgressIndicator-itemName { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: #0078d7; +} 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.js b/dist/components/ProgressIndicator/ProgressIndicator.js new file mode 100644 index 000000000..fe6e8ddb3 --- /dev/null +++ b/dist/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/components/ProgressIndicator/ProgressIndicator.json b/dist/components/ProgressIndicator/ProgressIndicator.json new file mode 100644 index 000000000..6dbef0990 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.json @@ -0,0 +1,6 @@ +{ + "name": "OperationMonitor", + "notes": "A component for outputting determinate progress", + "template": "ProgressIndicator.html", + "class": "ms-ProgressIndicator" +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.less b/dist/components/ProgressIndicator/ProgressIndicator.less new file mode 100644 index 000000000..0425320ca --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.less @@ -0,0 +1,47 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// ProgressIndicator Styles + + +@ProgressIndicatorMarginBetweenText: 8px; +@ProgressIndicatorButtonsWidth: 218px; +@ProgressIndicatorTextHeight: 18px; + +.ms-ProgressIndicator-itemName { + .ms-font-m(); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: @ProgressIndicatorMarginBetweenText / 2; + line-height: @ProgressIndicatorTextHeight + 2; +} + +.ms-ProgressIndicator-itemDescription { + .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; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: @ms-color-themePrimary; +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.min.css b/dist/components/ProgressIndicator/ProgressIndicator.min.css new file mode 100644 index 000000000..f78b15ecf --- /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-itemDescription,.ms-ProgressIndicator-itemName{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea}.ms-ProgressIndicator-progressBar{position:absolute;height:2px;background-color:#0078d7} \ No newline at end of file diff --git a/dist/components/SearchBox/Jquery.SearchBox.js b/dist/components/SearchBox/Jquery.SearchBox.js new file mode 100644 index 000000000..b4037f641 --- /dev/null +++ b/dist/components/SearchBox/Jquery.SearchBox.js @@ -0,0 +1,58 @@ +// 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; + + /** SearchBox focus - hide label and show cancel button */ + $(this).find('.ms-SearchBox-field').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'); + }); + + + // 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 == true ) { + $(this).val(''); + $(this).siblings('.ms-SearchBox-label').show(); + } + + // Remove is-active class - hides cancel button + $(this).parent('.ms-SearchBox').removeClass('is-active'); + + /** 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/components/SearchBox/SearchBox.css b/dist/components/SearchBox/SearchBox.css new file mode 100644 index 000000000..01378cefe --- /dev/null +++ b/dist/components/SearchBox/SearchBox.css @@ -0,0 +1,124 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.ms-SearchBox { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 10px; + width: 180px; +} + +.ms-SearchBox-field:hover { + border-color: #0078d7; + background-color: #c7e0f4; +} + +.ms-SearchBox-field:hover + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field:hover + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #c7e0f4; +} + +.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; +} + +.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 @@ + + +
            + + + +
            diff --git a/dist/components/SearchBox/SearchBox.json b/dist/components/SearchBox/SearchBox.json new file mode 100644 index 000000000..18d939d66 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.json @@ -0,0 +1,19 @@ +{ + "name": "SearchBox", + "notes": "", + "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.less b/dist/components/SearchBox/SearchBox.less new file mode 100644 index 000000000..e7e3aaaf8 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.less @@ -0,0 +1,100 @@ +// 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 { + .ms-font-m; + .ms-u-normalize; + position: relative; + margin-bottom: 10px; + display: inline-block; + + // State: Disabled searchbox + &.is-disabled { + .ms-SearchBox-label { + .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: 1px solid transparent; + } + } +} + +.ms-SearchBox-field { + .ms-u-normalize; + border: 1px solid @ms-color-themeTertiary; + 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; + + &:hover { + border-color: @ms-color-themePrimary; + background-color: @ms-color-themeLight; + + & + .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-themeLight; + } +} + +.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; +} + +.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/SearchBox/SearchBox.min.css b/dist/components/SearchBox/SearchBox.min.css new file mode 100644 index 000000000..f00e653ed --- /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,.ms-SearchBox{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}.ms-Label{color:#333;font-size:12px;margin:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-SearchBox,.ms-SearchBox-field{box-sizing:border-box;box-shadow:none;font-size:14px}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-SearchBox{color:#333;margin:0 0 10px;padding:0;position:relative;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:transparent solid 1px}.ms-SearchBox-field{margin:0;border:1px solid #71afe5;border-radius:0;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px}.ms-SearchBox-field:focus,.ms-SearchBox-field:hover{border-color:#0078d7;background-color:#c7e0f4}.ms-SearchBox-field:hover+.ms-SearchBox-label{color:#000}.ms-SearchBox-field:hover+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px}.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}.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/Spinner/Spinner.css b/dist/components/Spinner/Spinner.css new file mode 100644 index 000000000..964fa9f90 --- /dev/null +++ b/dist/components/Spinner/Spinner.css @@ -0,0 +1,17 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Spinner { + position: relative; + width: 32px; + height: 32px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 999px; + background-color: black; + opacity: 0; +} 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.js b/dist/components/Spinner/Spinner.js new file mode 100644 index 000000000..7c92e3b8f --- /dev/null +++ b/dist/components/Spinner/Spinner.js @@ -0,0 +1,148 @@ +// 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. + * @param {string} type - The type of spinner. Set this property to "sixteen" for sixteen dot version. The default is eight. + */ + +fabric.Spinner = function(target, spinnerType) { + + var _target = target; + var _spinnerType = spinnerType || "eight"; + var eightSize = 0.18; + var sixteenSize = 0.1; + var circleObjects = []; + var animationSpeed = 100; + var interval; + var spinner; + var numCircles; + var offsetSize; + + /** + * @function start - starts or restarts the animation sequence + * @memberOf fabric.Spinner + */ + function start() { + 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() { + if(_spinnerType === "sixteen") { + offsetSize = sixteenSize; + numCircles = 16; + } else { + offsetSize = eightSize; + numCircles = 8; + } + _createCirclesAndArrange(); + _initializeOpacities(); + start(); + } + + function _initializeOpacities() { + var i = numCircles, j; + while(i--) { + j = circleObjects.length; + while(j--) { + _fade(circleObjects[j]); + } + } + } + + function _fade(circleObject) { + var opacity; + if(circleObject.j < numCircles) { + if(Math.floor(circleObject.j / (numCircles / 2))) { + opacity = _getOpacity(circleObject.element) - 2 / numCircles; + } else{ + opacity = _getOpacity(circleObject.element) + 2 / numCircles; + } + } else { + circleObject.j = 0; + opacity = 2/ numCircles; + } + _setOpacity(circleObject.element, opacity); + circleObject.j++; + } + + 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'); + var parentWidth = parseInt(window.getComputedStyle(spinner).getPropertyValue("width"), 10); + circle.className = "ms-Spinner-circle"; + circle.style.width = circle.style.height = parentWidth * offsetSize + "px"; + return circle; + } + + function _createCirclesAndArrange() { + //for backwards compatibility + if (_target.className !== "ms-Spinner") { + spinner = document.createElement("div"); + spinner.className = "ms-Spinner"; + _target.appendChild(spinner); + } else { + spinner = _target; + } + + var width = spinner.clientWidth; + var height = spinner.clientHeight; + var angle = 0; + var offset = width * offsetSize; + var step = (2 * Math.PI) / numCircles; + var i = numCircles; + var circleObject; + var radius = (width- offset) * 0.5; + while(i--) { + var circle = _createCircle(); + var x = Math.round(width * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5; + var y = Math.round(height * 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); + } + } + + _init(); + + return { + start:start, + stop:stop + }; +}; diff --git a/dist/components/Spinner/Spinner.json b/dist/components/Spinner/Spinner.json new file mode 100644 index 000000000..eba756317 --- /dev/null +++ b/dist/components/Spinner/Spinner.json @@ -0,0 +1,6 @@ +{ + "name": "Spinner", + "notes": "An animating activity indicator.", + "template": "Spinner.html", + "class": "ms-Spinner" +} diff --git a/dist/components/Spinner/Spinner.less b/dist/components/Spinner/Spinner.less new file mode 100644 index 000000000..7b25a8f7c --- /dev/null +++ b/dist/components/Spinner/Spinner.less @@ -0,0 +1,20 @@ +// 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; + width: 32px; + height: 32px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 999px; + background-color: black; + opacity: 0; +} diff --git a/dist/components/Spinner/Spinner.min.css b/dist/components/Spinner/Spinner.min.css new file mode 100644 index 000000000..c68b750d4 --- /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;width:32px;height:32px}.ms-Spinner-circle{position:absolute;border-radius:999px;background-color:#000;opacity:0} \ No newline at end of file diff --git a/dist/components/Table/Table.css b/dist/components/Table/Table.css new file mode 100644 index 000000000..75f1d5359 --- /dev/null +++ b/dist/components/Table/Table.css @@ -0,0 +1,113 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Table { + display: table; + width: 100%; +} + +.ms-Table-row { + display: table-row; + height: 30px; + line-height: 30px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table-row.is-selected { + background-color: #c7e0f4; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.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-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table-row:first-child { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table-row:first-child .ms-Table-cell, +.ms-Table-row:first-child .ms-Table-rowCheck { + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-row:first-child .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; +} + +.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..953ac8fb4 --- /dev/null +++ b/dist/components/Table/Table.html @@ -0,0 +1,46 @@ + + +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            diff --git a/dist/components/Table/Table.json b/dist/components/Table/Table.json new file mode 100644 index 000000000..e17595182 --- /dev/null +++ b/dist/components/Table/Table.json @@ -0,0 +1,12 @@ +{ + "name": "Table", + "notes": "", + "template": "Table.html", + "class": "ms-Table", + "branches": [ + { + "name": "Default", + "default": true + } + ] +} diff --git a/dist/components/Table/Table.less b/dist/components/Table/Table.less new file mode 100644 index 000000000..14a7ba08a --- /dev/null +++ b/dist/components/Table/Table.less @@ -0,0 +1,115 @@ +// 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%; +} + +.ms-Table-row { + display: table-row; + height: 30px; + 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 { + .ms-Icon; + content: '\e041'; + color: @ms-color-white; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; + } + } + } +} + +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +// Style the first row as a header. +.ms-Table-row:first-child { + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-xs; + color: @ms-color-neutralSecondary; + + .ms-Table-cell, .ms-Table-rowCheck { + border-bottom: 1px solid @ms-color-neutralLight; + } + + .ms-Table-rowCheck:after { + .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; + + // 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/Table/Table.min.css b/dist/components/Table/Table.min.css new file mode 100644 index 000000000..8ee52b240 --- /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%}.ms-Table-row{display:table-row;height:30px;line-height:30px;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table-row:first-child .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';position:absolute;left:4px;top:9px}.ms-Table-row:hover{background-color:#f4f4f4;cursor:pointer;outline:transparent solid 1px}.ms-Table-row.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after{display:inline-block;font-family:Office365Icons;color:#fff;font-size:12px}.ms-Table-cell{display:table-cell;padding:0 10px}.ms-Table-row:first-child{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-row:first-child .ms-Table-cell,.ms-Table-row:first-child .ms-Table-rowCheck{border-bottom:1px solid #eaeaea}.ms-Table-row:first-child .ms-Table-rowCheck:after{display:inline-block;font-family:Office365Icons;color:#a6a6a6;font-size:12px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative}.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:0 0}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}} \ No newline at end of file diff --git a/dist/components/TextField/Jquery.TextField.js b/dist/components/TextField/Jquery.TextField.js new file mode 100644 index 000000000..bcf584613 --- /dev/null +++ b/dist/components/TextField/Jquery.TextField.js @@ -0,0 +1,51 @@ +// 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(); + }); + + /** 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/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 @@ + + +
            + + +
            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 @@ + + +
            + + +
            +
            + + +
            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 @@ + + +
            + + +
            diff --git a/dist/components/TextField/TextField.css b/dist/components/TextField/TextField.css new file mode 100644 index 000000000..fb2eefad1 --- /dev/null +++ b/dist/components/TextField/TextField.css @@ -0,0 +1,198 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 !important; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 1px solid transparent; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +.ms-TextField-field:hover, +.ms-TextField-field:focus { + outline: 1px solid transparent; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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: none; + 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 { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 @@ + + +
            + + + 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..5ec5f1136 --- /dev/null +++ b/dist/components/TextField/TextField.json @@ -0,0 +1,107 @@ +{ + "name": "TextField", + "notes": "", + "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.less b/dist/components/TextField/TextField.less new file mode 100644 index 000000000..7a6ebbafc --- /dev/null +++ b/dist/components/TextField/TextField.less @@ -0,0 +1,177 @@ +// 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 (reference) '../Label/Label.less'; + + +.ms-TextField { + .ms-font-m; + .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; + } + + .input-placeholder({ + color: @ms-color-neutralTertiary; + }) +} + +//= State: A required textfield +.ms-TextField.is-required { + .ms-Label { + .ms-Label.is-required; + } + + .input-placeholder({ + .ms-Label.is-required; + }) +} + +//= State: An active textfield +.ms-TextField.is-active { + border-color: @ms-color-themePrimary !important; +} + +.ms-TextField-field { + .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: 1px solid transparent; + + &:hover { + border-color: @ms-color-neutralSecondaryAlt; + } + + &:focus { + border-color: @ms-color-themePrimary; + } + + &:hover, + &:focus { + outline: 1px solid transparent; + } + + .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 { + .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; + } + + &: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: none; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; + + &:active, + &:focus { + outline: 0; + } + } + + &.is-disabled { + border-bottom-color: @ms-color-neutralLight; + + .ms-Label { + .ms-Label.is-disabled; + } + + .ms-TextField-field { + background-color: transparent; + color: @ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Multiline textfield +// +.ms-TextField.ms-TextField--multiline { + .ms-TextField-field { + .ms-font-s; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; + } +} diff --git a/dist/components/TextField/TextField.min.css b/dist/components/TextField/TextField.min.css new file mode 100644 index 000000000..58c722dc5 --- /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,.ms-TextField{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}.ms-Label,.ms-TextField,.ms-TextField-field{box-sizing:border-box;box-shadow:none}.ms-TextField-field,.ms-TextField-field:focus,.ms-TextField-field:hover{outline:transparent solid 1px}.ms-Label{color:#333;font-size:12px;margin:0;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-TextField{color:#333;font-size:14px;margin:0 0 8px;padding:0}.ms-TextField-field,.ms-TextField.ms-TextField--placeholder .ms-Label{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.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!important}.ms-TextField-field{margin:0;border:1px solid #c8c8c8;border-radius:0;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}.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-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,.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}.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:none;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{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',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/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 + + +
            diff --git a/dist/components/Toggle/Toggle.css b/dist/components/Toggle/Toggle.css new file mode 100644 index 000000000..c300d616c --- /dev/null +++ b/dist/components/Toggle/Toggle.css @@ -0,0 +1,164 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Toggle { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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-left: 62px; + top: -2px; + 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 !important; +} + +.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; +} + +.ms-Toggle-input { + display: none; +} + +.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: relative; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input:not(: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; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:before { + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:hover { + background-color: #eaeaea; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input:not(:checked) + .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; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:hover { + background-color: #005a9e; +} + +.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; +} + +.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 + + +
            diff --git a/dist/components/Toggle/Toggle.json b/dist/components/Toggle/Toggle.json new file mode 100644 index 000000000..0c305a161 --- /dev/null +++ b/dist/components/Toggle/Toggle.json @@ -0,0 +1,41 @@ +{ + "name": "Toggle", + "notes": "", + "template": "Toggle.html", + "class": "ms-Toggle", + "fileOrder": [ + "Toggle.html", + "Toggle.TextLeft.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.less b/dist/components/Toggle/Toggle.less new file mode 100644 index 000000000..0f6fdb8ce --- /dev/null +++ b/dist/components/Toggle/Toggle.less @@ -0,0 +1,179 @@ +// 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 (reference) '../Label/Label.less'; + + +// Toggle +.ms-Toggle { + .ms-font-m; + .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-left: 62px; + top: -2px; + 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 { + .ms-Label.is-disabled !important; + } + .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-input { + display: none; // Hide the original, unstyled element +} + +// 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 +.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; + } + + & when (@direction = left) { + &:before { + border-right: 2.5px solid @ms-color-white; + } + + &:hover { + background-color: @ms-color-neutralLight; + } + } + + & when (@direction = right) { + &:before { + border-left: 2.5px solid @ms-color-white; + } + + &:hover { + background-color: @ms-color-themeDark; + } + } + + &:active { + background-color: @ms-color-themePrimary; + } +} + +// On/Off slide states +.ms-Toggle-input { + position: relative; + + // 'Off' state - slider on the left + &:not(:checked) + .ms-Toggle-field { + background-color: @ms-color-neutralLighter; + + .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; + + .ms-Toggle-slider(right); + + // Show the on label / hide the off label + .ms-Label--off { + display: none; + } + + .ms-Label--on { + display: block; + } + } + } +} + + +//== 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/components/Toggle/Toggle.min.css b/dist/components/Toggle/Toggle.min.css new file mode 100644 index 000000000..b3cd3df1f --- /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-Toggle,.ms-Toggle-field{position:relative;box-sizing:border-box}.ms-Toggle{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;margin:0 0 26px;padding:0;box-shadow:none;display:block}.ms-Toggle .ms-Label{position:relative;padding-left:62px;top:-2px;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!important}.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}.ms-Toggle-input{display:none;position:relative}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{display:inline-block;width:57px;height:20px;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input:checked+.ms-Toggle-field:before,.ms-Toggle-input:not(:checked)+.ms-Toggle-field:before{position:absolute;box-sizing:content-box;content:'';top:-2.5px;width:12px;height:20px;outline:transparent solid 2px}.ms-Toggle-input:not(:checked)+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input:not(:checked)+.ms-Toggle-field:before{display:block;left:-2.5px;background-color:#767676;border-right:2.5px solid #fff}.ms-Toggle-input:not(:checked)+.ms-Toggle-field:hover{background-color:#eaeaea}.ms-Toggle-input:checked+.ms-Toggle-field,.ms-Toggle-input:not(:checked)+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:not(:checked)+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input:not(:checked)+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field:before{display:block;right:-2.5px;background-color:#767676;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:hover{background-color:#005a9e}.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}.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.css b/dist/css/fabric.components.css new file mode 100644 index 000000000..c97279b56 --- /dev/null +++ b/dist/css/fabric.components.css @@ -0,0 +1,5132 @@ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Breadcrumb { + height: 40px; +} + +.ms-Breadcrumb .ms-Breadcrumb-currentLarge { + display: none; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent, +.ms-Breadcrumb .ms-Breadcrumb-current { + font-size: 14px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + line-height: 50px; + color: #666666; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent { + color: #333333; + text-decoration: none; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent:hover { + color: #000000; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent:active { + color: #0078d7; +} + +.ms-Breadcrumb .ms-Breadcrumb-chevron { + padding: 0 7px 0 5px; +} + +@media (min-width: 640px) { + .ms-Breadcrumb .ms-Breadcrumb-currentLarge { + display: inline; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #0078d7; + line-height: 42px; + margin-right: 20px; + } +} + +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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.is-disabled:hover, +.ms-Button:disabled:focus, +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: 1px; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + 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; + border-width: 2px; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before, +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after { + line-height: 1; + font-size: inherit; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before { + top: -2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before { + top: -2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before { + top: -4%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before { + top: -3%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before { + top: -1%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before { + top: -1%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before { + top: -2%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before { + top: -2%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before { + left: -10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before { + top: -2%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before { + top: 2%; + left: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before { + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before { + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before { + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before { + top: 5%; + left: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before { + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before { + top: 2%; + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before { + top: 6%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before { + top: 5%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before { + top: -1%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before { + top: -2%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before { + left: -19%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before { + top: -2%; + left: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before { + top: 2%; + left: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before { + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before { + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before { + top: -3%; + left: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before { + top: 2%; + left: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before { + top: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before { + left: -16%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before { + left: -33%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before { + top: 4%; + left: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before { + top: -2%; + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before { + top: -3%; + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before { + left: -15%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before { + top: -4%; + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before { + top: -4%; + left: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before { + left: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before { + left: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before { + left: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before { + left: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before { + left: -9%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before { + left: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before { + left: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before { + left: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before { + left: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before { + left: 8%; + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before { + left: 8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before { + left: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.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.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.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', 'Segoe WP', 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--arrowLeft:before, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:after, +.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--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.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--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:after, +.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; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Callout-link { + font-size: 14px; +} + +.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--arrowLeft:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after, +.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 WP Light', 'Segoe UI', 'Segoe WP', 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--arrowBottom:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after, +.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--arrowLeft:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after, +.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--arrowLeft:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:after { + display: block; + } +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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; +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + padding-right: 15px; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; +} + +@media only screen and (min-width: 480px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +.ms-CommandBarItem { + display: inline-block; + margin-right: 8px; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; +} + +.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 .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + display: none; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-link { + line-height: 39px; + cursor: pointer; + height: 40px; + min-width: 22px; + text-align: center; + position: relative; + padding: 0 6px; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem-link { + padding-right: 8px; + padding-left: 6px; + } +} + +.ms-CommandBarItem-chevronDown { + vertical-align: top; + 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.367s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 639px) { + .ms-CommandBarSearch { + overflow: hidden; + background-color: transparent; + width: 40px; + } +} + +@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 .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: 639px) { + .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; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} + +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 30px; +} + +.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; +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active { + background-color: #eaeaea; + color: #000000; +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +.ms-ContextualMenu-link.is-disabled { + background-color: #ffffff; + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active { + border-color: #ffffff; +} + +.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-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, slideDown10; + animation-name: fadeIn, slideDown10; + -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--focused.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 WP Light', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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', 'Segoe WP', 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; + 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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-pickingMonths .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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; + } +} + +.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; +} + +.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: 1px 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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:focus .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.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.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +.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; + top: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; +} + +.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-width: 268px; + z-index: 400; + top: 0; + right: 0; + bottom: 0; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +.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; +} + +.ms-Dropdown-item:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; + outline: 1px solid transparent; +} + +.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 (min-width: 480px) { + .ms-Dropdown-items { + top: auto; + right: auto; + bottom: auto; + left: auto; + overflow-y: scroll; + max-width: 100%; + } + + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, + .ms-Dropdown.is-open .ms-Dropdown-items { + position: absolute; + } +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-Link.ms-Link--hero { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + padding: 2px 8px 4px; +} + +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: 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', 'Segoe WP', 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; +} + +.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 { + 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 15px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} + +.ms-NavBar { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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; + } +} + +@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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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: 20px; + 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 0 0 20px; + } +} + +.ms-OrgChart { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 { + 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; +} + +.ms-Panel .ms-Overlay { + z-index: 0; +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: 10; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; + padding: 0 32px 20px 32px; + overflow-y: auto; +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 70px; +} + +@media (min-width: 320px) { + .ms-Panel { + display: none; + } + + .ms-Panel.is-open { + display: block; + } + + .ms-Panel .ms-Overlay { + display: none; + } + + .ms-Panel.is-open .ms-Panel-main { + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 1; + } +} + +@media (min-width: 480px) { + .ms-Panel { + display: block; + pointer-events: none; + } + + .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + right: -40px; + pointer-events: auto; + width: 341px; + -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-main { + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + left: auto; + -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-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main { + box-shadow: 30px 0px 30px -30px rgba(0, 0, 0, 0.2); + -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-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main { + left: 0; + right: auto; + -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-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--medium .ms-Panel-main, + .ms-Panel.ms-Panel--large .ms-Panel-main, + .ms-Panel.ms-Panel--extraLarge .ms-Panel-main { + left: 47px; + width: auto; + } + + .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main, + .ms-Panel.ms-Panel--large.is-open .ms-Panel-main, + .ms-Panel.ms-Panel--extraLarge.is-open .ms-Panel-main { + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--medium .ms-Panel-main { + left: auto; + width: 644px; + } + + .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main { + left: auto; + right: 0; + width: 644px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--large .ms-Panel-main { + left: 427px; + } + + .ms-Panel.ms-Panel--extraLarge .ms-Panel-main { + left: 175px; + } + + .ms-Panel.ms-Panel--small.ms-Panel--left { + display: none; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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: none; + 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; +} + +.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; + height: 30px; + text-align: center; + width: 30px; +} + +.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; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: none; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn { + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; +} + +.ms-PeoplePicker-resultBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact { + height: 30px; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + height: 50px; + position: absolute; + right: 0; + top: 0; + width: 30px; + z-index: 300; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; + margin-top: -8px; + position: absolute; + text-align: center; + left: 8px; +} + +.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; +} + +.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 { + 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: 24px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 30px; +} + +.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; + margin-top: -12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader { + color: #0078d7; + text-transform: uppercase; + font-size: 12px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 10px; + position: relative; +} + +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; + background-color: transparent; + overflow: hidden; + width: 52px; + height: 52px; + border-radius: 50%; + background-color: #a6a6a6; +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 7px; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 52px; + height: 52px; +} + +.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; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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: 52px; + width: 5px; + border-radius: 0; + border: 0; +} + +.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; +} + +.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: 4px; +} + +.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-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: 9px; +} + +.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-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 WP Semilight', 'Segoe UI', 'Segoe WP', 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-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUp10; + animation-name: fadeIn, slideUp10; + -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-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 { + 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 { + color: #212121; +} + +.ms-PersonaCard-action:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active: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: none; + border-bottom: none; + bottom: -4px; + left: 15px; +} + +.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; + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-overflow.is-active: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: none; + border-bottom: none; + bottom: -4px; + left: 15px; +} + +.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 !important; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100% !important; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200% !important; +} + +.ms-PersonaCard-detailMail { + margin-left: -300% !important; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400% !important; +} + +.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 { + 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', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 30px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 27px; + margin-right: 15px; +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:active { + color: #0078d7; +} + +.ms-Pivot-link.is-selected { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7 !important; +} + +.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 { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + } +} + +.ms-SearchBox { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 10px; + width: 180px; +} + +.ms-SearchBox-field:hover { + border-color: #0078d7; + background-color: #c7e0f4; +} + +.ms-SearchBox-field:hover + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field:hover + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #c7e0f4; +} + +.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; +} + +.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; + width: 32px; + height: 32px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 999px; + background-color: black; + opacity: 0; +} + +.ms-Table { + display: table; + width: 100%; +} + +.ms-Table-row { + display: table-row; + height: 30px; + line-height: 30px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table-row.is-selected { + background-color: #c7e0f4; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.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-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table-row:first-child { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table-row:first-child .ms-Table-cell, +.ms-Table-row:first-child .ms-Table-rowCheck { + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-row:first-child .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; +} + +.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: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 !important; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 1px solid transparent; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +.ms-TextField-field:hover, +.ms-TextField-field:focus { + outline: 1px solid transparent; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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: none; + 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 { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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-Toggle { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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-left: 62px; + top: -2px; + 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 !important; +} + +.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; +} + +.ms-Toggle-input { + display: none; +} + +.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: relative; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input:not(: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; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:before { + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:hover { + background-color: #eaeaea; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input:not(:checked) + .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; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:hover { + background-color: #005a9e; +} + +.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; +} + +.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..c474db1eb --- /dev/null +++ b/dist/css/fabric.components.min.css @@ -0,0 +1 @@ +.ms-ListItem:after,.ms-PeoplePicker-searchBox:after{clear:both}.ms-Breadcrumb{height:40px}.ms-Breadcrumb .ms-Breadcrumb-currentLarge{display:none}.ms-Breadcrumb .ms-Breadcrumb-current,.ms-Breadcrumb .ms-Breadcrumb-parent{font-size:14px;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;line-height:50px;color:#666}.ms-Breadcrumb .ms-Breadcrumb-parent{color:#333;text-decoration:none}.ms-Breadcrumb .ms-Breadcrumb-parent:hover{color:#000}.ms-Breadcrumb .ms-Breadcrumb-parent:active{color:#0078d7}.ms-Breadcrumb .ms-Breadcrumb-chevron{padding:0 7px 0 5px}@media (min-width:640px){.ms-Breadcrumb .ms-Breadcrumb-currentLarge{display:inline;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;line-height:42px;margin-right:20px}}.ms-Button{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin: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:focus .ms-Button-label,.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus,.ms-Button:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-Button:hover{border-color:#eaeaea}.ms-Button:focus{border-color:#0078d7}.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 WP Semibold','Segoe UI','Segoe WP',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}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:1px}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{position:relative;display:inline-block;padding:0;text-align:left;-webkit-font-smoothing:antialiased;border-width:2px;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{line-height:1;font-size:inherit}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before{top:-2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before{top:-2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before{top:-4%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before{top:-3%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before{top:-1%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before{top:-1%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before{top:-2%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before{top:-2%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before{left:-10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before{top:-2%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before{top:2%;left:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before{top:-1%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before{left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before{top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before{top:2%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before{left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before{top:5%;left:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before{left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before{top:5%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before{top:5%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before{top:2%;left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before{top:6%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before{top:5%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before{top:-1%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before{top:2%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before{top:-4%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before{top:-2%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before{left:-19%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before{top:-2%;left:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before{top:-5%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before{top:2%;left:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before{left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before{top:-3%;left:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before{left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before{top:4%;left:-25%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before{top:4%;left:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before{top:-3%;left:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before{top:2%;left:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before{top:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before{left:-16%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before{left:-33%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before{top:3%;left:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before{top:4%;left:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before{top:-2%;left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before{top:-3%;left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before{left:-15%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before{top:-4%;left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before{top:-4%;left:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before{left:-14%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before{left:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before{left:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before{top:4%;left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before{left:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before{left:-9%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before{left:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before{left:-7%;top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before{left:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before{left:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before{left:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before{left:8%;top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before{left:8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before{left:-8%}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px}.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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--command .ms-Button-label,.ms-Button.ms-Button--compound .ms-Button-description{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;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.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 .ms-Button-description,.ms-Button.ms-Button--compound:disabled .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--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--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-Callout-subText,.ms-Callout-title{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',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);-ms-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:transparent solid 1px;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}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:transparent solid 1px;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ChoiceField,.ms-ContextualMenu{box-shadow:none;box-sizing:border-box;font-weight:400}.ms-Callout-close{margin:0;border:0;background:0 0;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{margin:0;font-size:21px}.ms-Callout-subText{margin:0;color:#333;font-size:12px}.ms-Callout-link{font-size:14px}.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: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 WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText,.ms-Callout.ms-Callout--peek .ms-Callout-title,.ms-ChoiceField{font-size:14px}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.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-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','Segoe WP',Tahoma,Arial,sans-serif;margin:0;padding:0;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}.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;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}.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}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;padding-right:15px;border:0;position:relative}.ms-CommandBar:focus{outline:0}.ms-CommandBar-mainArea{overflow-x:hidden;display:block}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto}@media only screen and (min-width:480px){.ms-CommandBar-sideCommands{min-width:128px}}.ms-CommandBarItem{display:inline-block;margin-right:8px;color:#0078d7;height:40px;outline:0;vertical-align:top}.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:0}.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:0}.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem-overflow,.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.is-hidden,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-link{line-height:39px;cursor:pointer;height:40px;min-width:22px;text-align:center;position:relative;padding:0 6px}@media only screen and (min-width:640px){.ms-CommandBarItem-link{padding-right:8px;padding-left:6px}}.ms-CommandBarItem-chevronDown{vertical-align:top;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:367ms cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:639px){.ms-CommandBarSearch{overflow:hidden;background-color:transparent;width:40px}.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}@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 .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:0;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}.ms-DatePicker-goToday:hover,.ms-DatePicker-monthOption:hover,.ms-DatePicker-table td:hover,.ms-DatePicker-yearOption:hover,.ms-Dialog-main{outline:transparent solid 1px}@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{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch.is-active,.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch-iconSearchWrapper{display:block}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{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 .ms-CommandBarSearch-input{cursor:text;border-left-width:8px;padding-right:40px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper,.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;margin:0;padding:0;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 30px}.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}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}.ms-ContextualMenu-link.is-disabled{background-color:#fff;color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active{border-color:#fff}.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-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;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Dialog::before,.ms-Dropdown-items:before{content:''}.ms-DatePicker{box-sizing:border-box;margin:0 0 17px;padding:0;box-shadow:none;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,slideDown10;animation-name:fadeIn,slideDown10;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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--focused.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 WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-day,.ms-DatePicker-day--outfocus,.ms-DatePicker-weekday{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.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-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;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}.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:transparent solid 1px}.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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',Tahoma,Arial,sans-serif;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8}.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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.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-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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:17px;color:#333}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-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 WP Semibold','Segoe UI','Segoe WP',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:transparent solid 1px}.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}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:300;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;height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index: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}.ms-Dropdown,.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;box-shadow:none}.ms-Dialog-actions,.ms-Dialog-content,.ms-Dialog-header{width:100%;position:relative}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;border:0;background:0 0;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{box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px}.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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{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 WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText,.ms-Dropdown{font-size:14px}.ms-Dropdown,.ms-Label{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;margin:0 0 10px;padding:0;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.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}.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;top:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{margin:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative}.ms-Dropdown-items{margin:0;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-width:268px;z-index:400;top:0;right:0;bottom:0}.ms-Dropdown-item,.ms-Label{box-sizing:border-box;display:block}.ms-Dropdown-items:before{position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}.ms-Dropdown-item{cursor:pointer;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000;outline:transparent solid 1px}.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}.ms-Label{color:#333;font-size:12px;margin:0;box-shadow:none;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-Link.ms-Link--hero{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;padding:2px 8px 4px}.ms-List,.ms-ListItem{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;margin:0;box-shadow:none;box-sizing:border-box}.ms-List,.ms-ListItem.ms-ListItem--document{padding:0}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;overflow-y:scroll;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}.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{padding:9px 28px 3px;position:relative}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{font-size:14px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-secondaryText{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;line-height:25px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ListItem-tertiaryText{color:#767676;line-height:15px}.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:transparent solid 1px}.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 WP Semibold','Segoe UI','Segoe WP',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:hover:before,.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{display:inline-block;font-family:Office365Icons;line-height:1;position:absolute;top:12px;left:6px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;speak:none;font-weight:400}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:transparent solid 1px}.ms-ListItem.is-selectable:hover:before{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{content:'\e041';font-size:15px;color:#767676}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-NavBar{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:transparent solid 1px}.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-NavBar{color:#333;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:transparent solid 1px}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity 367ms 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 WP Semilight','Segoe UI','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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;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:transparent solid 1px;z-index:5}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link,.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent}.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-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:20px;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 WP Semibold','Segoe UI','Segoe WP',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 0 0 20px}}.ms-OrgChart{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',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:0 0;border:0;text-align:left;margin:0;padding:0;outline:transparent}.ms-Overlay{background-color:rgba(255,255,255,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:200}.ms-Panel,.ms-Panel-main{position:fixed;bottom:0;right:0;top:0}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{left:0;z-index:300}.ms-Panel .ms-Overlay{z-index:0}.ms-Panel-main{background-color:#fff;display:none;z-index:10}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 32px 20px;overflow-y:auto}.ms-Panel-headerText{font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:70px}.ms-PeoplePicker,.ms-PeoplePicker-searchMorePrimary{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}@media (min-width:320px){.ms-Panel{display:none}.ms-Panel.is-open{display:block}.ms-Panel .ms-Overlay{display:none}.ms-Panel.is-open .ms-Panel-main{top:0;right:0;bottom:0;left:0;opacity:1}}@media (min-width:480px){.ms-Panel{display:block;pointer-events:none}.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;right:-40px;pointer-events:auto;width:341px;-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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-main,.ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main{-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;-webkit-animation-fill-mode:both}.ms-Panel.is-open .ms-Panel-main{box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto;-webkit-animation-name:fadeIn,slideLeft40;animation-name:fadeIn,slideLeft40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main{box-shadow:30px 0 30px -30px rgba(0,0,0,.2);-webkit-animation-name:fadeIn,slideRight40;animation-name:fadeIn,slideRight40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main{left:0;right:auto;-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity 367ms cubic-bezier(.1,.9,.2,1)}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:640px){.ms-Panel.ms-Panel--extraLarge .ms-Panel-main,.ms-Panel.ms-Panel--large .ms-Panel-main,.ms-Panel.ms-Panel--medium .ms-Panel-main{left:47px;width:auto}.ms-Panel.ms-Panel--extraLarge.is-open .ms-Panel-main,.ms-Panel.ms-Panel--large.is-open .ms-Panel-main,.ms-Panel.ms-Panel--medium.is-open .ms-Panel-main{width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--medium .ms-Panel-main{left:auto;width:644px}.ms-Panel.ms-Panel--medium.is-open .ms-Panel-main{left:auto;right:0;width:644px}}@media (min-width:1366px){.ms-Panel.ms-Panel--large .ms-Panel-main{left:427px}.ms-Panel.ms-Panel--extraLarge .ms-Panel-main{left:175px}.ms-Panel.ms-Panel--small.ms-Panel--left{display:none}}.ms-PeoplePicker{color:#333;font-size:14px;font-weight:400;box-sizing:border-box;margin:0 0 10px;padding:0;box-shadow:none;background-color:#fff}.ms-PeoplePicker-searchBox{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:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:none;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:0;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px}.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:#f4f4f4;border:0;cursor:pointer;color:#666;display:inline-block;float:left;height:30px;text-align:center;width:30px}.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:0}.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}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:none}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',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 0 -1px;padding:0;box-shadow:none;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:hover .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{color:#333}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;height:50px;width:100%;background:0 0;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-resultAction:hover,.ms-PersonaCard,.ms-SearchBox.is-active .ms-SearchBox-closeButton,.ms-Table-row:hover,.ms-TextField-field,.ms-TextField-field:focus,.ms-TextField-field:hover{outline:transparent solid 1px}.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:30px}.ms-PeoplePicker-resultAction{background:0 0;border:0;cursor:pointer;display:block;transition:background-color 367ms cubic-bezier(.1,.9,.2,1);height:50px;position:absolute;right:0;top:0;width:30px;z-index:300}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px;margin-top:-8px;position:absolute;text-align:center;left:8px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8}.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}.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,.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{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:0 0;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0 0 0 70px;margin:0;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.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:#333;font-size:24px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px}.ms-PeoplePicker-selectedPeople,.ms-Persona{box-sizing:border-box;padding:0;box-shadow:none}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary,.ms-PeoplePicker-searchMoreSecondary{color:#666;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:11px}.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{line-height:20px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:30px}.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;margin-top:-12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-selectedHeader{color:#0078d7;text-transform:uppercase;font-size:12px;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-Persona,.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-PeoplePicker-selectedPeople{margin:0;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:10px;position:relative}.ms-Persona{color:#333;font-size:14px;font-weight:400;margin:0;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;width:52px;height:52px;border-radius:50%;background-color:#a6a6a6}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:7px}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:52px;height:52px}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ms-Persona-primaryText{color:#333;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;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:52px;width:5px;border-radius:0;border:0}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:0 0;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}.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--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--sm .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.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:4px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.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-presence{left:27px}.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:9px}.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-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 WP Semilight','Segoe UI','Segoe WP',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:transparent solid 1px}.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:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{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%,#fff 48%,#fff 52%,#c72d25 52%,#c72d25 100%)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUp10;animation-name:fadeIn,slideUp10;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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}.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-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{content:'';width:10px;bottom:-4px;left:15px;background-color:#fff;box-sizing:border-box}.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{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{color:#212121}.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active{color:#0078d7}.ms-PersonaCard-action.is-active:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:10px;border:1px solid #c8c8c8;position:absolute;border-right:none;border-bottom:none}.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;height:48px;line-height:48px;padding:0 10px;position:relative;box-sizing:border-box;font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow.is-active,.ms-PersonaCard-overflow:active,.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-overflow.is-active:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:10px;border:1px solid #c8c8c8;position:absolute;border-right:none;border-bottom:none}.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 267ms 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-detailChat{margin-left:0!important}.ms-PersonaCard-detailPhone{margin-left:-100%!important}.ms-PersonaCard-detailVideo{margin-left:-200%!important}.ms-PersonaCard-detailMail{margin-left:-300%!important}.ms-PersonaCard-detailOrg{overflow-y:auto;margin-left:-400%!important}.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{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{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:30px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:15px;line-height:27px;margin-right:15px}.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active{color:#0078d7}.ms-Pivot-link.is-selected{color:#0078d7;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7!important}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link,.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-SearchBox,.ms-SearchBox-field{font-size:14px;box-shadow:none;box-sizing:border-box}.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}.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}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}}.ms-SearchBox{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400;margin:0 0 10px;padding:0;position:relative;display:inline-block}.ms-SearchBox-field,.ms-Table-row{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block}.ms-SearchBox-field{margin:0;border:1px solid #71afe5;border-radius:0;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px}.ms-SearchBox-field:focus,.ms-SearchBox-field:hover{border-color:#0078d7;background-color:#c7e0f4}.ms-SearchBox-field:hover+.ms-SearchBox-label{color:#000}.ms-SearchBox-field:hover+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px}.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}.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;width:32px;height:32px}.ms-Spinner-circle{position:absolute;border-radius:999px;background-color:#000;opacity:0}.ms-Table{display:table;width:100%}.ms-Table-row{display:table-row;height:30px;line-height:30px;font-size:12px;color:#333}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table-row:first-child .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;line-height:1;speak:none;content:'\e041';position:absolute;left:4px;top:9px;font-weight:400}.ms-Table-row:hover{background-color:#f4f4f4;cursor:pointer}.ms-Table-row.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after{display:inline-block;font-family:Office365Icons;color:#fff;font-size:12px}.ms-Table-cell{display:table-cell;padding:0 10px}.ms-Table-row:first-child{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-row:first-child .ms-Table-cell,.ms-Table-row:first-child .ms-Table-rowCheck{border-bottom:1px solid #eaeaea}.ms-Table-row:first-child .ms-Table-rowCheck:after{display:inline-block;font-family:Office365Icons;color:#a6a6a6;font-size:12px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative}.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:0 0}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0 0 8px;padding:0;box-shadow:none}.ms-TextField-field,.ms-TextField.ms-TextField--placeholder .ms-Label{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.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!important}.ms-TextField-field{box-sizing:border-box;margin:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}.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-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,.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}.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:none;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{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--multiline .ms-TextField-field,.ms-Toggle{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}.ms-TextField.ms-TextField--multiline .ms-TextField-field{font-size:12px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Toggle{font-size:14px;box-sizing:border-box;margin:0 0 26px;padding:0;box-shadow:none;position:relative;display:block}.ms-Toggle .ms-Label{position:relative;padding-left:62px;top:-2px;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!important}.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}.ms-Toggle-input{display:none;position:relative}.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:checked+.ms-Toggle-field:before,.ms-Toggle-input:not(:checked)+.ms-Toggle-field:before{position:absolute;box-sizing:content-box;content:'';top:-2.5px;width:12px;height:20px;outline:transparent solid 2px}.ms-Toggle-input:not(:checked)+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input:not(:checked)+.ms-Toggle-field:before{display:block;left:-2.5px;background-color:#767676;border-right:2.5px solid #fff}.ms-Toggle-input:not(:checked)+.ms-Toggle-field:hover{background-color:#eaeaea}.ms-Toggle-input:checked+.ms-Toggle-field,.ms-Toggle-input:not(:checked)+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:not(:checked)+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input:not(:checked)+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field:before{display:block;right:-2.5px;background-color:#767676;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:hover{background-color:#005a9e}.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}.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..b57006313 --- /dev/null +++ b/dist/css/fabric.components.rtl.css @@ -0,0 +1,5133 @@ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ + +.ms-Breadcrumb { + height: 40px; +} + +.ms-Breadcrumb .ms-Breadcrumb-currentLarge { + display: none; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent, +.ms-Breadcrumb .ms-Breadcrumb-current { + font-size: 14px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + line-height: 50px; + color: #666666; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent { + color: #333333; + text-decoration: none; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent:hover { + color: #000000; +} + +.ms-Breadcrumb .ms-Breadcrumb-parent:active { + color: #0078d7; +} + +.ms-Breadcrumb .ms-Breadcrumb-chevron { + padding: 0 5px 0 7px; +} + +@media (min-width: 640px) { + .ms-Breadcrumb .ms-Breadcrumb-currentLarge { + display: inline; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #0078d7; + line-height: 42px; + margin-left: 20px; + } +} + +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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.is-disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-right: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', 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; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: 1px; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + 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; + border-width: 2px; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before, +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after { + line-height: 1; + font-size: inherit; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before { + top: -2%; + right: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before { + top: -2%; + right: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before { + top: -4%; + right: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before { + top: -3%; + right: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before { + top: -1%; + right: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before { + top: -1%; + right: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before { + right: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before { + top: -2%; + right: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before { + top: -2%; + right: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before { + top: -2%; + right: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before { + right: -10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before { + top: -2%; + right: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before { + right: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before { + right: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before { + top: 2%; + right: -7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before { + top: -1%; + right: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before { + right: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before { + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before { + top: 2%; + right: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before { + right: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before { + top: 5%; + right: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before { + right: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before { + right: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before { + top: 5%; + right: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before { + top: 5%; + right: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before { + right: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before { + right: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before { + top: 2%; + right: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before { + top: 6%; + right: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before { + top: 5%; + right: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before { + top: -1%; + right: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before { + top: 2%; + right: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before { + top: -4%; + right: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before { + top: -2%; + right: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before { + right: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before { + top: -2%; + right: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before { + right: -19%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before { + top: -2%; + right: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before { + right: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before { + right: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before { + top: -5%; + right: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before { + right: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before { + right: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before { + top: 2%; + right: -18%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before { + right: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before { + right: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before { + right: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before { + right: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before { + right: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before { + right: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before { + top: -3%; + right: -12%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before { + right: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before { + top: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before { + right: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before { + top: 4%; + right: -25%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before { + top: 4%; + right: -20%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before { + top: -4%; + right: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before { + top: -3%; + right: -2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before { + top: 2%; + right: 1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before { + top: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before { + right: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before { + right: -16%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before { + right: -33%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before { + right: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before { + right: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before { + top: 3%; + right: 7%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before { + right: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before { + top: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before { + right: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before { + top: -3%; + right: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before { + top: 4%; + right: -1%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before { + top: -2%; + right: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before { + top: -3%; + right: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before { + top: -3%; + right: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before { + right: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before { + right: -15%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before { + top: -4%; + right: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before { + top: -4%; + right: 10%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before { + right: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before { + right: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before { + right: -14%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before { + right: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before { + right: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before { + top: 4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before { + right: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before { + top: 4%; + right: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before { + right: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before { + right: -6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before { + right: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before { + top: -4%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before { + right: -9%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before { + right: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before { + right: -7%; + top: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before { + right: -5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before { + right: 5%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before { + right: -3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before { + right: 8%; + top: 3%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before { + right: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before { + right: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before { + right: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before { + right: 8%; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before { + right: -8%; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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:disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.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.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.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: 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', 'Segoe WP', 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-right: 14px; +} + +.ms-Callout { + z-index: 100; + margin: 16px auto; + position: relative; + width: 288px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:after, +.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--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.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-left: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 10px solid #ffffff; + right: -10px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + 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--arrowTop:before, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--arrowBottom:after { + right: 0; + left: 0; + margin: 0 auto; + width: 0; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + 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:before, +.ms-Callout.ms-Callout--arrowBottom:after { + border-top: 10px solid transparent; + border-left: 10px solid transparent; + border-bottom: 10px solid #ffffff; + border-right: 10px solid #ffffff; + bottom: -10px; +} + +.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 { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Callout-link { + font-size: 14px; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-Link.ms-Link--hero { + position: relative; + right: -8px; +} + +.ms-Callout-action { + position: relative; + top: 4px; + right: -8px; + margin-right: 0 !important; +} + +.ms-Callout-action:hover .ms-Callout-actionIcon, +.ms-Callout-action:focus .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--arrowRight:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after, +.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 WP Light', 'Segoe UI', 'Segoe WP', 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--arrowBottom:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after { + right: 40px; + left: auto; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before, +.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--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--arrowLeft:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:after { + display: block; + } +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 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; +} + +.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; + 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; +} + +.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; + right: 3px; +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-right: 0; + padding-left: 15px; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; +} + +.ms-CommandBar-sideCommands { + float: left; + text-align: left; + width: auto; +} + +@media only screen and (min-width: 480px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +.ms-CommandBarItem { + display: inline-block; + margin-left: 8px; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; +} + +.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 .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + display: none; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-link { + line-height: 39px; + cursor: pointer; + height: 40px; + min-width: 22px; + text-align: center; + position: relative; + padding: 0 6px; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem-link { + padding-left: 8px; + padding-right: 6px; + } +} + +.ms-CommandBarItem-chevronDown { + vertical-align: top; + 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.367s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 639px) { + .ms-CommandBarSearch { + overflow: hidden; + background-color: transparent; + width: 40px; + } +} + +@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 .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 { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.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-iconSearchWrapper, +.ms-CommandBarSearch-iconArrowWrapper { + top: 0; + padding-right: 8px; + padding-left: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + left: 0px; + z-index: 10; +} + +.ms-CommandBarSearch.is-active { + background-color: #c7e0f4; + color: #000000; +} + +@media only screen and (max-width: 639px) { + .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: 0px 8px; + position: absolute; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} + +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 30px; +} + +.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; +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active { + background-color: #eaeaea; + color: #000000; +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +.ms-ContextualMenu-link.is-disabled { + background-color: #ffffff; + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active { + border-color: #ffffff; +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + right: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + 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-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; + 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, slideDown10; + animation-name: fadeIn, slideDown10; + -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--focused.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 WP Light', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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', 'Segoe WP', 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-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + left: 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: left; + margin-right: 10px; + 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; + right: 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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: normal; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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-pickingMonths .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 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; + } +} + +.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; +} + +.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: 1px 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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:focus .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.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.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +.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; + left: 9px; + top: 9px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 10px 0 32px; + position: relative; +} + +.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-width: 268px; + z-index: 400; + top: 0; + left: 0; + bottom: 0; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + right: 0; + left: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +.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; +} + +.ms-Dropdown-item:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; + outline: 1px solid transparent; +} + +.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 (min-width: 480px) { + .ms-Dropdown-items { + top: auto; + left: auto; + bottom: auto; + right: auto; + overflow-y: scroll; + max-width: 100%; + } + + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, + .ms-Dropdown.is-open .ms-Dropdown-items { + position: absolute; + } +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +.ms-Link.ms-Link--hero { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + padding: 2px 8px 4px; +} + +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: 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 0; + } +} + +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; +} + +.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 { + 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-left: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 15px; + position: relative; + top: -7px; + padding-left: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + 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-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', 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: normal; + 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: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + right: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: right; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-left: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} + +.ms-NavBar { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; + 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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: normal; + 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; + } +} + +@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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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: 20px; + 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 20px 0 0; + } +} + +.ms-OrgChart { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 { + 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: rgba(255, 255, 255, 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-Overlay { + z-index: 0; +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + left: 0; + top: 0; + display: none; + z-index: 10; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + right: 0; + left: 0; + padding: 0 32px 20px 32px; + overflow-y: auto; +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 70px; +} + +@media (min-width: 320px) { + .ms-Panel { + display: none; + } + + .ms-Panel.is-open { + display: block; + } + + .ms-Panel .ms-Overlay { + display: none; + } + + .ms-Panel.is-open .ms-Panel-main { + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 1; + } +} + +@media (min-width: 480px) { + .ms-Panel { + display: block; + pointer-events: none; + } + + .ms-Panel-main { + border-right: 1px solid #eaeaea; + border-left: 1px solid #eaeaea; + left: -40px; + pointer-events: auto; + width: 341px; + -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-main { + box-shadow: 30px 0px 30px -30px rgba(0, 0, 0, 0.2); + right: auto; + -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-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main { + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + -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-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main { + right: 0; + left: auto; + -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-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--medium .ms-Panel-main, + .ms-Panel.ms-Panel--large .ms-Panel-main, + .ms-Panel.ms-Panel--extraLarge .ms-Panel-main { + right: 47px; + width: auto; + } + + .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main, + .ms-Panel.ms-Panel--large.is-open .ms-Panel-main, + .ms-Panel.ms-Panel--extraLarge.is-open .ms-Panel-main { + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--medium .ms-Panel-main { + right: auto; + width: 644px; + } + + .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main { + right: auto; + left: 0; + width: 644px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--large .ms-Panel-main { + right: 427px; + } + + .ms-Panel.ms-Panel--extraLarge .ms-Panel-main { + right: 175px; + } + + .ms-Panel.ms-Panel--small.ms-Panel--left { + display: none; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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: none; + 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; +} + +.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; + height: 30px; + text-align: center; + width: 30px; +} + +.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; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: none; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn { + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: right; + margin: 0 0 10px 0; + padding: 0 9px 0 0; +} + +.ms-PeoplePicker-resultBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact { + height: 30px; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + height: 50px; + position: absolute; + left: 0; + top: 0; + width: 30px; + z-index: 300; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; + margin-top: -8px; + position: absolute; + text-align: center; + right: 8px; +} + +.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; +} + +.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 { + 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: 24px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 30px; +} + +.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; + margin-top: -12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader { + color: #0078d7; + text-transform: uppercase; + font-size: 12px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 10px; + position: relative; +} + +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; + background-color: transparent; + overflow: hidden; + width: 52px; + height: 52px; + border-radius: 50%; + background-color: #a6a6a6; +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + left: 0; + right: 0; + font-size: 47px; + top: 7px; +} + +.ms-Persona-image { + display: table-cell; + margin-left: 10px; + position: absolute; + top: 0; + right: 0; + width: 52px; + height: 52px; +} + +.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-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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; + right: 0; + bottom: auto; + left: auto; + height: 52px; + width: 5px; + border-radius: 0; + border: 0; +} + +.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; +} + +.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-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: 4px; +} + +.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-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-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-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: 9px; +} + +.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; +} + +.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; + right: 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-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 WP Semilight', 'Segoe UI', 'Segoe WP', 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; + right: 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-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUp10; + animation-name: fadeIn, slideUp10; + -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-presence { + border-color: #f4f4f4; + right: 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 { + 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 { + color: #212121; +} + +.ms-PersonaCard-action:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active: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-left: none; + border-bottom: none; + bottom: -4px; + right: 15px; +} + +.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; + font-size: 14px; + color: #333333; + float: left; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-overflow.is-active { + color: #0078d7; +} + +.ms-PersonaCard-overflow.is-active: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-left: none; + border-bottom: none; + bottom: -4px; + right: 15px; +} + +.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-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-right: 0 !important; +} + +.ms-PersonaCard-detailPhone { + margin-right: -100% !important; +} + +.ms-PersonaCard-detailVideo { + margin-right: -200% !important; +} + +.ms-PersonaCard-detailMail { + margin-right: -300% !important; +} + +.ms-PersonaCard-detailOrg { + margin-right: -400% !important; +} + +.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; + 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: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after { + display: none; +} + +.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 { + 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 { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 30px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 27px; + margin-left: 15px; +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:active { + color: #0078d7; +} + +.ms-Pivot-link.is-selected { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7 !important; +} + +.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 { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + } +} + +.ms-SearchBox { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 10px 7px 3px; + width: 180px; +} + +.ms-SearchBox-field:hover { + border-color: #0078d7; + background-color: #c7e0f4; +} + +.ms-SearchBox-field:hover + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field:hover + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 10px 7px 32px; + border-color: #0078d7; + background-color: #c7e0f4; +} + +.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; +} + +.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; + width: 32px; + height: 32px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 999px; + background-color: black; + opacity: 0; +} + +.ms-Table { + display: table; + width: 100%; +} + +.ms-Table-row { + display: table-row; + height: 30px; + line-height: 30px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table-row.is-selected { + background-color: #c7e0f4; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.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; + right: 4px; + top: 9px; +} + +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table-row:first-child { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table-row:first-child .ms-Table-cell, +.ms-Table-row:first-child .ms-Table-rowCheck { + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-row:first-child .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; + right: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; +} + +.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', 'Segoe WP', 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 !important; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 1px solid transparent; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +.ms-TextField-field:hover, +.ms-TextField-field:focus { + outline: 1px solid transparent; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #666666; + padding: 7px 10px 7px 0; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +.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: none; + 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 { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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-Toggle { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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-right: 62px; + top: -2px; + 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 !important; +} + +.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; +} + +.ms-Toggle-input { + display: none; +} + +.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: relative; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input:not(: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; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:before { + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:hover { + background-color: #eaeaea; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input:not(:checked) + .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; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:hover { + background-color: #005a9e; +} + +.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; +} + +.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..9c1a86136 --- /dev/null +++ b/dist/css/fabric.components.rtl.min.css @@ -0,0 +1 @@ +.ms-ListItem:after,.ms-PeoplePicker-searchBox:after{clear:both}.ms-Breadcrumb{height:40px}.ms-Breadcrumb .ms-Breadcrumb-currentLarge{display:none}.ms-Breadcrumb .ms-Breadcrumb-current,.ms-Breadcrumb .ms-Breadcrumb-parent{font-size:14px;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;line-height:50px;color:#666}.ms-Breadcrumb .ms-Breadcrumb-parent{color:#333;text-decoration:none}.ms-Breadcrumb .ms-Breadcrumb-parent:hover{color:#000}.ms-Breadcrumb .ms-Breadcrumb-parent:active{color:#0078d7}.ms-Breadcrumb .ms-Breadcrumb-chevron{padding:0 5px 0 7px}@media (min-width:640px){.ms-Breadcrumb .ms-Breadcrumb-currentLarge{display:inline;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;line-height:42px;margin-left:20px}}.ms-Button{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin: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:focus .ms-Button-label,.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus,.ms-Button:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-Button:hover{border-color:#eaeaea}.ms-Button:focus{border-color:#0078d7}.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 WP Semibold','Segoe UI','Segoe WP',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}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:1px}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{position:relative;display:inline-block;padding:0;text-align:right;-webkit-font-smoothing:antialiased;border-width:2px;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:after,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{line-height:1;font-size:inherit}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon: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-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--star:before{top:-2%;right:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--person:before{top:-2%;right:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--alert:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailOpen:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--people:before{top:-4%;right:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bell:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--scheduling:before{top:-3%;right:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documents:before{top:-1%;right:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--listBullets:before{top:-1%;right:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--panel:before{right:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--popout:before{top:-2%;right:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--home:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--favorites:before{top:-2%;right:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--phone:before{top:-2%;right:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSend:before{right:-10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pencil:before{top:-2%;right:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--flag:before{right:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--miniatures:before{right:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemail:before{top:2%;right:-7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--onlineAdd:before{top:-1%;right:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--gear:before{right:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--check:before{top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--ellipsis:before{top:2%;right:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--directions:before{right:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--microphone:before{top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDown:before{top:5%;right:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeft:before{right:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRight:before{right:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpLeft:before{top:5%;right:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretUpRight:before{top:5%;right:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownRight:before{right:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownLeft:before{right:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--note:before{top:2%;right:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteReply:before{top:6%;right:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteForward:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--key:before{top:5%;right:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--tile:before{top:-1%;right:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--taskRecurring:before{top:2%;right:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--starEmpty:before{top:-4%;right:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentReply:before{top:-2%;right:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentForward:before{right:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--partner:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--reactivate:before{top:-2%;right:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sort:before{right:-19%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personAdd:before{top:-2%;right:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronDown:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronLeft:before{right:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronRight:before{right:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleAdd:before{top:-5%;right:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--newsfeed:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--notebook:before{right:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--link:before{top:2%;right:-18%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsDown:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsLeft:before{right:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--chevronsRight:before{right:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--personRemove:before{right:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptCheck:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptForward:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--receiptReply:before{right:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleRemove:before{top:-3%;right:-12%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--merge:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--split:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eventCancel:before{right:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--today:before{top:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--oofReply:before{right:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailReply:before{top:4%;right:-25%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--voicemailForward:before{top:4%;right:-20%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--eye:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--post:before{top:-4%;right:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fax:before{top:-3%;right:-2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--lightning:before{top:2%;right:1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--filter:before{top:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cart:before{right:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mapMarker:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--socialListening:before{top:2%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--replyAllAlt:before{right:-16%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--group:before{right:-33%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--money:before{right:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--noteEdit:before{right:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailEdit:before{top:3%;right:7%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pinLeft:before{right:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heart:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--heartEmpty:before{top:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--cake:before{top:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--books:before{right:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--video:before{top:-3%;right:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--balloon:before{top:4%;right:-1%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--music:before{top:-2%;right:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--coffee:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--stopwatch:before{top:-3%;right:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--plane:before{right:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dogAlt:before{right:-15%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--metadata:before{top:-4%;right:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--text:before{top:-4%;right:10%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dropdown:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldNumber:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--fieldText:before{right:-14%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--story:before{right:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--bold:before{right:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--underline:before{top:4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--quote:before{right:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--styleRemove:before{top:4%;right:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureAdd:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--pictureRemove:before{right:-6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mobile:before{right:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--hide:before{top:-4%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--header:before{right:-9%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--msn:before{right:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleCheck:before{right:-7%;top:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretDownOutline:before{top:6%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretLeftOutline:before{right:-5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--caretRightOutline:before{right:5%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--sway:before{right:-3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--mailSync:before{right:8%;top:3%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleError:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peoplePause:before,.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--peopleSync:before{right:-8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--documentSearch:before{right:8%}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon.ms-Icon--dynamicsMarketing:before{right:-8%}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px}.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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;position:relative;text-align:right;margin-top:-5px}.ms-Button.ms-Button--command .ms-Button-label,.ms-Button.ms-Button--compound .ms-Button-description{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;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.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 .ms-Button-description,.ms-Button.ms-Button--compound:disabled .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--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--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-Callout-subText,.ms-Callout-title{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',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);-ms-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:transparent solid 1px;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}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:transparent solid 1px;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ChoiceField,.ms-ContextualMenu{box-shadow:none;box-sizing:border-box;font-weight:400}.ms-Callout-close{margin:0;border:0;background:0 0;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{margin:0;font-size:21px}.ms-Callout-subText{margin:0;color:#333;font-size:12px}.ms-Callout-link{font-size:14px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;right:-8px}.ms-Callout-action{position:relative;top:4px;right:-8px;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 WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText,.ms-Callout.ms-Callout--peek .ms-Callout-title,.ms-ChoiceField{font-size:14px}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.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-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','Segoe WP',Tahoma,Arial,sans-serif;margin:0;padding:0;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}.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;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}.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}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-right:0;padding-left:15px;border:0;position:relative}.ms-CommandBar:focus{outline:0}.ms-CommandBar-mainArea{overflow-x:hidden;display:block}.ms-CommandBar-sideCommands{float:left;text-align:left;width:auto}@media only screen and (min-width:480px){.ms-CommandBar-sideCommands{min-width:128px}}.ms-CommandBarItem{display:inline-block;margin-left:8px;color:#0078d7;height:40px;outline:0;vertical-align:top}.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:0}.ms-CommandBarItem:hover{border-right:1px solid #fff;border-left:1px solid #fff}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-right:1px solid #fff;border-left:1px solid #fff;height:38px;outline:0}.ms-CommandBarItem:hover{border-right:1px solid #000;border-left:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem-overflow,.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.is-hidden,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-link{line-height:39px;cursor:pointer;height:40px;min-width:22px;text-align:center;position:relative;padding:0 6px}@media only screen and (min-width:640px){.ms-CommandBarItem-link{padding-left:8px;padding-right:6px}}.ms-CommandBarItem-chevronDown{vertical-align:top;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:367ms cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:639px){.ms-CommandBarSearch{overflow:hidden;background-color:transparent;width:40px}.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}@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 .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:0;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}.ms-DatePicker-goToday:hover,.ms-DatePicker-monthOption:hover,.ms-DatePicker-table td:hover,.ms-DatePicker-yearOption:hover,.ms-Dialog-main{outline:transparent solid 1px}@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{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch.is-active,.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch-iconSearchWrapper{display:block}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{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 .ms-CommandBarSearch-input{cursor:text;border-right-width:8px;padding-left:40px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-right-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper,.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;margin:0;padding:0;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 30px}.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}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}.ms-ContextualMenu-link.is-disabled{background-color:#fff;color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active{border-color:#fff}.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-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;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;right:10px}.ms-Dialog::before,.ms-Dropdown-items:before{content:''}.ms-DatePicker{box-sizing:border-box;margin:0 0 17px;padding:0;box-shadow:none;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,slideDown10;animation-name:fadeIn,slideDown10;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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--focused.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 WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-day,.ms-DatePicker-day--outfocus,.ms-DatePicker-weekday{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.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-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;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}.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:transparent solid 1px}.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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',Tahoma,Arial,sans-serif;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8}.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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;left:9px}.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-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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:17px;color:#333}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-left:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;right:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-right:12px}.ms-DatePicker-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 WP Semibold','Segoe UI','Segoe WP',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:transparent solid 1px}.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}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;right:0;z-index:300;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;height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-right:0}.ms-Dialog .ms-Overlay{z-index: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}.ms-Dropdown,.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;box-shadow:none}.ms-Dialog-actions,.ms-Dialog-content,.ms-Dialog-header{width:100%;position:relative}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;border:0;background:0 0;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{box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px}.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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{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 WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText,.ms-Dropdown{font-size:14px}.ms-Dropdown,.ms-Label{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;margin:0 0 10px;padding:0;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.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}.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;top:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{margin:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 10px 0 32px;position:relative}.ms-Dropdown-items{margin:0;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-width:268px;z-index:400;top:0;left:0;bottom:0}.ms-Dropdown-item,.ms-Label{box-sizing:border-box;display:block}.ms-Dropdown-items:before{position:absolute;z-index:-1;top:0;right:0;left:0;bottom:0;border:1px solid #eaeaea}.ms-Dropdown-item{cursor:pointer;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000;outline:transparent solid 1px}.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}.ms-Label{color:#333;font-size:12px;margin:0;box-shadow:none;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-Link.ms-Link--hero{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;padding:2px 8px 4px}.ms-List,.ms-ListItem{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;margin:0;box-shadow:none;box-sizing:border-box}.ms-List,.ms-ListItem.ms-ListItem--document{padding:0}@media (min-width:480px){.ms-Dropdown-items{top:auto;left:auto;bottom:auto;right:auto;overflow-y:scroll;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}.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{padding:9px 28px 3px;position:relative}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.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 WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;padding-left:80px;position:relative;top:-4px}.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{font-size:14px;position:relative;top:-7px;padding-left:30px}.ms-ListItem-secondaryText{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;line-height:25px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ListItem-tertiaryText{color:#767676;line-height:15px}.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:transparent solid 1px}.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 WP Semibold','Segoe UI','Segoe WP',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:hover:before,.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{display:inline-block;font-family:Office365Icons;line-height:1;position:absolute;top:12px;right:6px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;speak:none;font-weight:400}.ms-ListItem.is-selectable .ms-ListItem-image{margin-right:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:transparent solid 1px}.ms-ListItem.is-selectable:hover:before{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{content:'\e041';font-size:15px;color:#767676}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-NavBar{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:transparent solid 1px}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:right;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-left:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-NavBar{color:#333;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:transparent solid 1px}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity 367ms 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 WP Semilight','Segoe UI','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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;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:transparent solid 1px;z-index:5}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link,.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent}.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-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:20px;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 WP Semibold','Segoe UI','Segoe WP',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 20px 0 0}}.ms-OrgChart{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',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:0 0;border:0;text-align:right;margin:0;padding:0;outline:transparent}.ms-Overlay{background-color:rgba(255,255,255,.4);position:absolute;bottom:0;right:0;left:0;top:0;z-index:200}.ms-Panel,.ms-Panel-main{position:fixed;bottom:0;left:0;top:0}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{right:0;z-index:300}.ms-Panel .ms-Overlay{z-index:0}.ms-Panel-main{background-color:#fff;display:none;z-index:10}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;right:0;left:0;padding:0 32px 20px;overflow-y:auto}.ms-Panel-headerText{font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:70px}.ms-PeoplePicker,.ms-PeoplePicker-searchMorePrimary{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}@media (min-width:320px){.ms-Panel{display:none}.ms-Panel.is-open{display:block}.ms-Panel .ms-Overlay{display:none}.ms-Panel.is-open .ms-Panel-main{top:0;left:0;bottom:0;right:0;opacity:1}}@media (min-width:480px){.ms-Panel{display:block;pointer-events:none}.ms-Panel-main{border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;left:-40px;pointer-events:auto;width:341px;-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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-main,.ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main{-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;-webkit-animation-fill-mode:both}.ms-Panel.is-open .ms-Panel-main{box-shadow:30px 0 30px -30px rgba(0,0,0,.2);right:auto;-webkit-animation-name:fadeIn,slideLeft40;animation-name:fadeIn,slideLeft40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main{box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);-webkit-animation-name:fadeIn,slideRight40;animation-name:fadeIn,slideRight40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main{right:0;left:auto;-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity 367ms cubic-bezier(.1,.9,.2,1)}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:640px){.ms-Panel.ms-Panel--extraLarge .ms-Panel-main,.ms-Panel.ms-Panel--large .ms-Panel-main,.ms-Panel.ms-Panel--medium .ms-Panel-main{right:47px;width:auto}.ms-Panel.ms-Panel--extraLarge.is-open .ms-Panel-main,.ms-Panel.ms-Panel--large.is-open .ms-Panel-main,.ms-Panel.ms-Panel--medium.is-open .ms-Panel-main{width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--medium .ms-Panel-main{right:auto;width:644px}.ms-Panel.ms-Panel--medium.is-open .ms-Panel-main{right:auto;left:0;width:644px}}@media (min-width:1366px){.ms-Panel.ms-Panel--large .ms-Panel-main{right:427px}.ms-Panel.ms-Panel--extraLarge .ms-Panel-main{right:175px}.ms-Panel.ms-Panel--small.ms-Panel--left{display:none}}.ms-PeoplePicker{color:#333;font-size:14px;font-weight:400;box-sizing:border-box;margin:0 0 10px;padding:0;box-shadow:none;background-color:#fff}.ms-PeoplePicker-searchBox{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:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:none;box-sizing:border-box;display:inline-block;float:right;height:38px;outline:0;padding-right:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:right;margin:4px}.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:#f4f4f4;border:0;cursor:pointer;color:#666;display:inline-block;float:right;height:30px;text-align:center;width:30px}.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:0}.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}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:none}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',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 0 -1px;padding:0;box-shadow:none;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:hover .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{color:#333}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;height:50px;width:100%;background:0 0;border:0;text-align:right;margin:0 0 10px;padding:0 9px 0 0}.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:transparent solid 1px}.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-resultAction:hover,.ms-PersonaCard,.ms-SearchBox.is-active .ms-SearchBox-closeButton,.ms-Table-row:hover,.ms-TextField-field,.ms-TextField-field:focus,.ms-TextField-field:hover{outline:transparent solid 1px}.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:30px}.ms-PeoplePicker-resultAction{background:0 0;border:0;cursor:pointer;display:block;transition:background-color 367ms cubic-bezier(.1,.9,.2,1);height:50px;position:absolute;left:0;top:0;width:30px;z-index:300}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px;margin-top:-8px;position:absolute;text-align:center;right:8px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8}.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}.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,.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{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:0 0;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0 70px 0 0;margin:0;text-align:right}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active{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:24px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px}.ms-PeoplePicker-selectedPeople,.ms-Persona{box-sizing:border-box;padding:0;box-shadow:none}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary,.ms-PeoplePicker-searchMoreSecondary{color:#666;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:11px}.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{line-height:20px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:30px}.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;margin-top:-12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-selectedHeader{color:#0078d7;text-transform:uppercase;font-size:12px;font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-Persona,.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-PeoplePicker-selectedPeople{margin:0;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:10px;position:relative}.ms-Persona{color:#333;font-size:14px;font-weight:400;margin:0;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;width:52px;height:52px;border-radius:50%;background-color:#a6a6a6}.ms-Persona-placeholder{color:#fff;position:absolute;left:0;right:0;font-size:47px;top:7px}.ms-Persona-image{display:table-cell;margin-left:10px;position:absolute;top:0;right:0;width:52px;height:52px}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ms-Persona-primaryText{color:#333;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;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:52px;width:5px;border-radius:0;border:0}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:0 0;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{left:auto;top:10px;right:0;border:0}.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--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--sm .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-right:8px}.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:4px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{right:19px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.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-presence{right:27px}.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:9px}.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-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 WP Semilight','Segoe UI','Segoe WP',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-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:transparent solid 1px}.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:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{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%,#fff 48%,#fff 52%,#c72d25 52%,#c72d25 100%)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUp10;animation-name:fadeIn,slideUp10;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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}.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-presence{border-color:#f4f4f4;right:77px;bottom:12px}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{content:'';width:10px;bottom:-4px;right:15px;background-color:#fff;box-sizing:border-box}.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{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{color:#212121}.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active{color:#0078d7}.ms-PersonaCard-action.is-active:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:10px;border:1px solid #c8c8c8;position:absolute;border-left:none;border-bottom:none}.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;height:48px;line-height:48px;padding:0 10px;position:relative;box-sizing:border-box;font-size:14px;color:#333;float:left;margin-top:-1px}.ms-PersonaCard-overflow.is-active,.ms-PersonaCard-overflow:active,.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-overflow.is-active:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:10px;border:1px solid #c8c8c8;position:absolute;border-left:none;border-bottom:none}.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 267ms 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-detailChat{margin-right:0!important}.ms-PersonaCard-detailPhone{margin-right:-100%!important}.ms-PersonaCard-detailVideo{margin-right:-200%!important}.ms-PersonaCard-detailMail{margin-right:-300%!important}.ms-PersonaCard-detailOrg{overflow-y:auto;margin-right:-400%!important}.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{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{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:30px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:15px;line-height:27px;margin-left:15px}.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active{color:#0078d7}.ms-Pivot-link.is-selected{color:#0078d7;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7!important}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link,.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-SearchBox,.ms-SearchBox-field{font-size:14px;box-shadow:none;box-sizing:border-box}.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}.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}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;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 WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}}.ms-SearchBox{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400;margin:0 0 10px;padding:0;position:relative;display:inline-block}.ms-SearchBox-field,.ms-Table-row{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block}.ms-SearchBox-field{margin:0;border:1px solid #71afe5;border-radius:0;color:#000;height:32px;padding:6px 10px 7px 3px;width:180px}.ms-SearchBox-field:focus,.ms-SearchBox-field:hover{border-color:#0078d7;background-color:#c7e0f4}.ms-SearchBox-field:hover+.ms-SearchBox-label{color:#000}.ms-SearchBox-field:hover+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 10px 7px 32px}.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}.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;width:32px;height:32px}.ms-Spinner-circle{position:absolute;border-radius:999px;background-color:#000;opacity:0}.ms-Table{display:table;width:100%}.ms-Table-row{display:table-row;height:30px;line-height:30px;font-size:12px;color:#333}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table-row:first-child .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;line-height:1;speak:none;content:'\e041';position:absolute;right:4px;top:9px;font-weight:400}.ms-Table-row:hover{background-color:#f4f4f4;cursor:pointer}.ms-Table-row.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after{display:inline-block;font-family:Office365Icons;color:#fff;font-size:12px}.ms-Table-cell{display:table-cell;padding:0 10px}.ms-Table-row:first-child{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-row:first-child .ms-Table-cell,.ms-Table-row:first-child .ms-Table-rowCheck{border-bottom:1px solid #eaeaea}.ms-Table-row:first-child .ms-Table-rowCheck:after{display:inline-block;font-family:Office365Icons;color:#a6a6a6;font-size:12px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative}.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:0 0}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0 0 8px;padding:0;box-shadow:none}.ms-TextField-field,.ms-TextField.ms-TextField--placeholder .ms-Label{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.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!important}.ms-TextField-field{box-sizing:border-box;margin:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}.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-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,.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}.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:none;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{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--multiline .ms-TextField-field,.ms-Toggle{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}.ms-TextField.ms-TextField--multiline .ms-TextField-field{font-size:12px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Toggle{font-size:14px;box-sizing:border-box;margin:0 0 26px;padding:0;box-shadow:none;position:relative;display:block}.ms-Toggle .ms-Label{position:relative;padding-right:62px;top:-2px;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!important}.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}.ms-Toggle-input{display:none;position:relative}.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:checked+.ms-Toggle-field:before,.ms-Toggle-input:not(:checked)+.ms-Toggle-field:before{position:absolute;box-sizing:content-box;content:'';top:-2.5px;width:12px;height:20px;outline:transparent solid 2px}.ms-Toggle-input:not(:checked)+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input:not(:checked)+.ms-Toggle-field:before{display:block;right:-2.5px;background-color:#767676;border-left:2.5px solid #fff}.ms-Toggle-input:not(:checked)+.ms-Toggle-field:hover{background-color:#eaeaea}.ms-Toggle-input:checked+.ms-Toggle-field,.ms-Toggle-input:not(:checked)+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:not(:checked)+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input:not(:checked)+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field:before{display:block;left:-2.5px;background-color:#767676;border-right:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:hover{background-color:#005a9e}.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}.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..10bb51d3f --- /dev/null +++ b/dist/css/fabric.css @@ -0,0 +1,5648 @@ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox, +.ms-u-borderBox:before, +.ms-u-borderBox:after { + box-sizing: border-box; +} + +.ms-u-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: #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-error { + background-color: #fde7e9; +} + +.ms-bgColor-alert { + background-color: #f4f4f4; +} + +.ms-bgColor-info { + background-color: #f4f4f4; +} + +.ms-bgColor-success { + background-color: #dff6dd; +} + +.ms-bgColor-orangeLighter, +.ms-bgColor-orangeLighter--hover:hover { + background-color: #ea4300; +} + +.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: #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-error { + border-color: #a80000; +} + +.ms-borderColor-success { + border-color: #107c10; +} + +.ms-borderColor-info { + border-color: #107c10; +} + +.ms-borderColor-alert { + border-color: #d83b01; +} + +.ms-borderColor-orangeLighter, +.ms-borderColor-orangeLighter--hover:hover { + border-color: #ea4300; +} + +.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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 17px; + font-weight: normal; +} + +.ms-font-m-plus { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 15px; + font-weight: normal; +} + +.ms-font-m { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; +} + +.ms-font-s-plus { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 13px; + font-weight: normal; +} + +.ms-font-s { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; +} + +.ms-font-xs { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-semilight, +.ms-fontWeight-semilight--hover:hover { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-regular, +.ms-fontWeight-regular--hover:hover { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-semibold, +.ms-fontWeight-semibold--hover:hover { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', 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-orangeLighter, +.ms-fontColor-orangeLighter-hover:hover, +.ms-fontColor-orangeLighter, +.ms-fontColor-orangeLighter--hover:hover { + color: #ea4300; +} + +.ms-fontColor-orangeLight, +.ms-fontColor-orangeLight--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-error, +.ms-fontColor-error--hover:hover { + color: #a80000; +} + +.ms-fontColor-alert, +.ms-fontColor-alert--hover:hover { + color: #d83b01; +} + +.ms-fontColor-info, +.ms-fontColor-info--hover:hover { + color: #107c10; +} + +.ms-fontColor-success, +.ms-fontColor-success--hover:hover { + color: #107c10; +} +/* + 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: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Arabic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Arabic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Arabic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Cyrillic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Cyrillic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Cyrillic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Cyrillic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light EastEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular EastEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold EastEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight EastEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Greek'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Greek'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Greek'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Greek'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Hebrew'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Hebrew'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Hebrew'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Hebrew'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Vietnamese'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Vietnamese'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Vietnamese'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Vietnamese'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light WestEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular WestEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold WestEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight WestEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + 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: YuGothic, 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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', 'Segoe WP', 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', 'Segoe WP', 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', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 +*/ +@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-slideRightIn40 { + -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; +} + +@-webkit-keyframes slideRight40 { + from { + -webkit-transform: translate3d(-40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRight40 { + 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-slideLeftIn40 { + -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; +} + +@-webkit-keyframes slideLeft40 { + from { + -webkit-transform: translate3d(40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeft40 { + 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, 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; +} + +@-webkit-keyframes slideRight400 { + from { + -webkit-transform: translate3d(-400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRight400 { + 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, slideUp20; + animation-name: fadeIn, slideUp20; + -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 slideUp20 { + from { + -webkit-transform: translate3d(0px, 20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideUp20 { + 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, slideUp10; + animation-name: fadeIn, slideUp10; + -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 slideUp10 { + from { + -webkit-transform: translate3d(0px, 10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideUp10 { + 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, slideDown20; + animation-name: fadeIn, slideDown20; + -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 slideDown20 { + from { + -webkit-transform: translate3d(0px, -20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideDown20 { + 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, slideDown10; + animation-name: fadeIn, slideDown10; + -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 slideDown10 { + from { + -webkit-transform: translate3d(0px, -10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideDown10 { + 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-fadeIn100, +.ms-u-fadeIn200, +.ms-u-fadeIn400, +.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; +} + +.ms-u-fadeIn100 { + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-u-fadeIn200 { + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-u-fadeIn500 { + -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-fadeOut100, +.ms-u-fadeOut200, +.ms-u-fadeOut400, +.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; +} + +.ms-u-fadeOut100 { + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-u-fadeOut200 { + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-u-fadeOut500 { + -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: 0%; +} + +.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: 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: 0%; + } + + .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: 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: 0%; + } + + .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: 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: 0%; + } + + .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: 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: 0%; + } + + .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: 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: 0%; + } + + .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: 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; +} + +.ms-fontColor-officeAccent1, +.ms-fontColor-officeAccent1--hover:hover { + color: #ffffff; +} + +.ms-fontColor-officeAccent2, +.ms-fontColor-officeAccent2--hover:hover { + color: #000000; +} + +.ms-fontColor-officeAccent3, +.ms-fontColor-officeAccent3--hover:hover { + color: #e7e6e5; +} + +.ms-fontColor-officeAccent4, +.ms-fontColor-officeAccent4--hover:hover { + color: #44546a; +} + +.ms-fontColor-officeAccent5, +.ms-fontColor-officeAccent5--hover:hover { + color: #5b9bd5; +} + +.ms-fontColor-officeAccent6, +.ms-fontColor-officeAccent6--hover:hover { + color: #ed7d31; +} + +.ms-fontColor-officeAccent7, +.ms-fontColor-officeAccent7--hover:hover { + color: #a5a5a5; +} + +.ms-fontColor-officeAccent8, +.ms-fontColor-officeAccent8--hover:hover { + color: #ffc001; +} + +.ms-fontColor-officeAccent9, +.ms-fontColor-officeAccent9--hover:hover { + color: #4472c4; +} + +.ms-fontColor-officeAccent10, +.ms-fontColor-officeAccent10--hover:hover { + color: #70ad47; +} + +.ms-bgColor-officeAccent1, +.ms-bgColor-officeAccent1--hover:hover { + background-color: #ffffff; +} + +.ms-bgColor-officeAccent2, +.ms-bgColor-officeAccent2--hover:hover { + background-color: #000000; +} + +.ms-bgColor-officeAccent3, +.ms-bgColor-officeAccent3--hover:hover { + background-color: #e7e6e5; +} + +.ms-bgColor-officeAccent4, +.ms-bgColor-officeAccent4--hover:hover { + background-color: #44546a; +} + +.ms-bgColor-officeAccent5, +.ms-bgColor-officeAccent5--hover:hover { + background-color: #5b9bd5; +} + +.ms-bgColor-officeAccent6, +.ms-bgColor-officeAccent6--hover:hover { + background-color: #ed7d31; +} + +.ms-bgColor-officeAccent7, +.ms-bgColor-officeAccent7--hover:hover { + background-color: #a5a5a5; +} + +.ms-bgColor-officeAccent8, +.ms-bgColor-officeAccent8--hover:hover { + background-color: #ffc001; +} + +.ms-bgColor-officeAccent9, +.ms-bgColor-officeAccent9--hover:hover { + background-color: #4472c4; +} + +.ms-bgColor-officeAccent10, +.ms-bgColor-officeAccent10--hover:hover { + background-color: #70ad47; +} + +.ms-borderColor-officeAccent1, +.ms-borderColor-officeAccent1--hover:hover { + border-color: #ffffff; +} + +.ms-borderColor-officeAccent2, +.ms-borderColor-officeAccent2--hover:hover { + border-color: #000000; +} + +.ms-borderColor-officeAccent3, +.ms-borderColor-officeAccent3--hover:hover { + border-color: #e7e6e5; +} + +.ms-borderColor-officeAccent4, +.ms-borderColor-officeAccent4--hover:hover { + border-color: #44546a; +} + +.ms-borderColor-officeAccent5, +.ms-borderColor-officeAccent5--hover:hover { + border-color: #5b9bd5; +} + +.ms-borderColor-officeAccent6, +.ms-borderColor-officeAccent6--hover:hover { + border-color: #ed7d31; +} + +.ms-borderColor-officeAccent7, +.ms-borderColor-officeAccent7--hover:hover { + border-color: #a5a5a5; +} + +.ms-borderColor-officeAccent8, +.ms-borderColor-officeAccent8--hover:hover { + border-color: #ffc001; +} + +.ms-borderColor-officeAccent9, +.ms-borderColor-officeAccent9--hover:hover { + border-color: #4472c4; +} + +.ms-borderColor-officeAccent10, +.ms-borderColor-officeAccent10--hover:hover { + border-color: #70ad47; +} diff --git a/dist/css/fabric.min.css b/dist/css/fabric.min.css new file mode 100644 index 000000000..999d92ccf --- /dev/null +++ b/dist/css/fabric.min.css @@ -0,0 +1 @@ +.ms-font-su,.ms-font-xl,.ms-font-xxl{font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400;color:#333}.ms-u-slideLeftIn40,.ms-u-slideRightIn40{-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1)}.ms-Grid-row:after,.ms-Grid:after,.ms-u-clearfix:after{clear:both}.ms-Grid,.ms-Grid-col,.ms-Grid-row,.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before,.ms-u-normalize{box-sizing:border-box}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-Icon,.ms-Icon--circle{display:inline-block;-webkit-font-smoothing:antialiased}.ms-u-normalize{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:#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-error{background-color:#fde7e9}.ms-bgColor-alert,.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-orangeLighter,.ms-bgColor-orangeLighter--hover:hover{background-color:#ea4300}.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:#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-error{border-color:#a80000}.ms-borderColor-info,.ms-borderColor-success{border-color:#107c10}.ms-borderColor-alert{border-color:#d83b01}.ms-borderColor-orangeLighter,.ms-borderColor-orangeLighter--hover:hover{border-color:#ea4300}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}.ms-font-su{font-size:42px}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px}.ms-font-l{color:#333;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:17px;font-weight:400}.ms-font-m,.ms-font-m-plus,.ms-font-s,.ms-font-s-plus,.ms-font-xs{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;color:#333;font-weight:400}.ms-font-m-plus{font-size:15px}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px}.ms-font-mi{color:#333;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:10px;font-weight:400}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',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-orangeLighter,.ms-fontColor-orangeLighter--hover:hover,.ms-fontColor-orangeLighter-hover:hover{color:#ea4300}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--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-error,.ms-fontColor-error--hover:hover{color:#a80000}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-info,.ms-fontColor-info--hover:hover,.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}@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:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Arabic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Arabic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Arabic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light Cyrillic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Cyrillic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Cyrillic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Cyrillic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light EastEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular EastEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold EastEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight EastEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light Greek';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Greek';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Greek';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Greek';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light Hebrew';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Hebrew';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Hebrew';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Hebrew';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light Vietnamese';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Vietnamese';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Vietnamese';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Vietnamese';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light WestEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular WestEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold WestEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight WestEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');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:YuGothic,'Meiryo UI',Meiryo,'MS Pgothic',Osaka,'Segoe UI','Segoe WP',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','Segoe WP',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','Segoe WP',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','Segoe WP',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','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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;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;font-size:1rem;width:1em;height:1em;margin:0 .5em 0 0;padding:0;text-align:left}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;left:0;-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,.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-slideRightIn40{-webkit-animation-name:fadeIn,slideRight40;animation-name:fadeIn,slideRight40;-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftIn40,.ms-u-slideRightIn400{-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;-webkit-animation-fill-mode:both}@-webkit-keyframes slideRight40{from{-webkit-transform:translate3d(-40px,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideRight40{from{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideLeftIn40{-webkit-animation-name:fadeIn,slideLeft40;animation-name:fadeIn,slideLeft40;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn400,.ms-u-slideRightIn400{-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1)}@-webkit-keyframes slideLeft40{from{-webkit-transform:translate3d(40px,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideLeft40{from{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideRightIn400{-webkit-animation-name:fadeIn,slideRight400;animation-name:fadeIn,slideRight400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn400,.ms-u-slideUpIn20{-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;-webkit-animation-fill-mode:both}@-webkit-keyframes slideRight400{from{-webkit-transform:translate3d(-400px,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideRight400{from{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideLeftIn400{-webkit-animation-name:fadeIn,slideLeft400;animation-name:fadeIn,slideLeft400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@-webkit-keyframes slideLeft400{from{-webkit-transform:translate3d(400px,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideLeft400{from{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideUpIn20{-webkit-animation-name:fadeIn,slideUp20;animation-name:fadeIn,slideUp20;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@-webkit-keyframes slideUp20{from{-webkit-transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideUp20{from{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideUpIn10{-webkit-animation-name:fadeIn,slideUp10;animation-name:fadeIn,slideUp10;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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-scaleUpIn100,.ms-u-slideDownIn20{-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1)}@-webkit-keyframes slideUp10{from{-webkit-transform:translate3d(0,10px,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideUp10{from{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideDownIn20{-webkit-animation-name:fadeIn,slideDown20;animation-name:fadeIn,slideDown20;-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideDownIn10,.ms-u-slideRightOut40{-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both}@-webkit-keyframes slideDown20{from{-webkit-transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideDown20{from{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideDownIn10{-webkit-animation-name:fadeIn,slideDown10;animation-name:fadeIn,slideDown10;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@-webkit-keyframes slideDown10{from{-webkit-transform:translate3d(0,-10px,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideDown10{from{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideRightOut40{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideLeftOut40,.ms-u-slideRightOut400{-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both}@-webkit-keyframes slideRightOut40{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(40px,0,0)}}@keyframes slideRightOut40{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@-webkit-keyframes slideLeftOut40{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-40px,0,0)}}@keyframes slideLeftOut40{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{-webkit-animation-name:fadeOut,slideRightOut400;animation-name:fadeOut,slideRightOut400;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideLeftOut400,.ms-u-slideUpOut20{-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both}@-webkit-keyframes slideRightOut400{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(400px,0,0)}}@keyframes slideRightOut400{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{-webkit-animation-name:fadeOut,slideLeftOut400;animation-name:fadeOut,slideLeftOut400;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@-webkit-keyframes slideLeftOut400{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-400px,0,0)}}@keyframes slideLeftOut400{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideDownOut20,.ms-u-slideUpOut10{-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms}@-webkit-keyframes slideUpOut20{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,-20px,0)}}@keyframes slideUpOut20{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{-webkit-animation-name:fadeOut,slideUpOut10;animation-name:fadeOut,slideUpOut10;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@-webkit-keyframes slideUpOut10{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,-10px,0)}}@keyframes slideUpOut10{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{-webkit-animation-name:fadeOut,slideDownOut20;animation-name:fadeOut,slideDownOut20;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-scaleUpOut103,.ms-u-slideDownOut10{-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}@-webkit-keyframes slideDownOut20{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,20px,0)}}@keyframes slideDownOut20{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{-webkit-animation-name:fadeOut,slideDownOut10;animation-name:fadeOut,slideDownOut10;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-scaleDownIn100,.ms-u-scaleUpIn100{-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms}@-webkit-keyframes slideDownOut10{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,10px,0)}}@keyframes slideDownOut10{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{-webkit-animation-name:fadeIn,scaleUp100;animation-name:fadeIn,scaleUp100;animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes scaleUp100{from{-webkit-transform:scale3d(.98,.98,1)}to{-webkit-transform:scale3d(1,1,1)}}@keyframes scaleUp100{from{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.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-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-scaleDownOut98,.ms-u-scaleUpOut103{-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms}@-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;animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-rotate90deg,.ms-u-scaleDownOut98{-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}@-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;animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes scaleDown98{from{-webkit-transform:scale3d(1,1,1)}to{-webkit-transform:scale3d(.98,.98,1)}}@keyframes scaleDown98{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}to{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn200,.ms-u-fadeIn400,.ms-u-fadeIn500{-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeIn100{-webkit-animation-duration:167ms;animation-duration:167ms}.ms-u-fadeIn200{-webkit-animation-duration:267ms;animation-duration:267ms}.ms-u-fadeIn500{-webkit-animation-duration:467ms;animation-duration:467ms}@-webkit-keyframes fadeIn{from{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}@keyframes fadeIn{from{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-fadeOut200,.ms-u-fadeOut400,.ms-u-fadeOut500{-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-name:fadeOut;animation-name:fadeOut;-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:167ms;animation-duration:167ms}.ms-u-fadeOut500{-webkit-animation-duration:467ms;animation-duration:467ms}.ms-u-rotate90deg,.ms-u-rotateN90deg{-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s}@-webkit-keyframes fadeOut{from{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@keyframes fadeOut{from{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:rotate90;animation-name:rotate90;animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes rotate90{from{-webkit-transform:rotateZ(0)}to{-webkit-transform:rotateZ(90deg)}}@keyframes rotate90{from{-webkit-transform:rotateZ(0);transform:rotateZ(0)}to{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}}.ms-u-rotateN90deg{-webkit-animation-name:rotateN90;animation-name:rotateN90;-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 rotateN90{from{-webkit-transform:rotateZ(90deg)}to{-webkit-transform:rotateZ(0)}}@keyframes rotateN90{from{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}to{-webkit-transform:rotateZ(0);transform:rotateZ(0)}}.ms-u-expandCollapse400{transition:height 367ms cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height 167ms cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{-webkit-animation-delay:167ms;animation-delay:167ms}.ms-u-delay200{-webkit-animation-delay:267ms;animation-delay:267ms}@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-Grid-row:after,.ms-Grid-row:before,.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.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:0}.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: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:0}.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: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:0}.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: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:0}.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: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:0}.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: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:0}.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:0}}.ms-Grid{padding:0 8px}.ms-Grid-row{margin:0 -8px}.ms-Grid-col{position:relative;min-height:1px;padding-left:8px;padding-right:8px;float:left}.ms-Grid-col .ms-Grid{padding:0}.ms-fontColor-officeAccent1,.ms-fontColor-officeAccent1--hover:hover{color:#fff}.ms-fontColor-officeAccent2,.ms-fontColor-officeAccent2--hover:hover{color:#000}.ms-fontColor-officeAccent3,.ms-fontColor-officeAccent3--hover:hover{color:#e7e6e5}.ms-fontColor-officeAccent4,.ms-fontColor-officeAccent4--hover:hover{color:#44546a}.ms-fontColor-officeAccent5,.ms-fontColor-officeAccent5--hover:hover{color:#5b9bd5}.ms-fontColor-officeAccent6,.ms-fontColor-officeAccent6--hover:hover{color:#ed7d31}.ms-fontColor-officeAccent7,.ms-fontColor-officeAccent7--hover:hover{color:#a5a5a5}.ms-fontColor-officeAccent8,.ms-fontColor-officeAccent8--hover:hover{color:#ffc001}.ms-fontColor-officeAccent9,.ms-fontColor-officeAccent9--hover:hover{color:#4472c4}.ms-fontColor-officeAccent10,.ms-fontColor-officeAccent10--hover:hover{color:#70ad47}.ms-bgColor-officeAccent1,.ms-bgColor-officeAccent1--hover:hover{background-color:#fff}.ms-bgColor-officeAccent2,.ms-bgColor-officeAccent2--hover:hover{background-color:#000}.ms-bgColor-officeAccent3,.ms-bgColor-officeAccent3--hover:hover{background-color:#e7e6e5}.ms-bgColor-officeAccent4,.ms-bgColor-officeAccent4--hover:hover{background-color:#44546a}.ms-bgColor-officeAccent5,.ms-bgColor-officeAccent5--hover:hover{background-color:#5b9bd5}.ms-bgColor-officeAccent6,.ms-bgColor-officeAccent6--hover:hover{background-color:#ed7d31}.ms-bgColor-officeAccent7,.ms-bgColor-officeAccent7--hover:hover{background-color:#a5a5a5}.ms-bgColor-officeAccent8,.ms-bgColor-officeAccent8--hover:hover{background-color:#ffc001}.ms-bgColor-officeAccent9,.ms-bgColor-officeAccent9--hover:hover{background-color:#4472c4}.ms-bgColor-officeAccent10,.ms-bgColor-officeAccent10--hover:hover{background-color:#70ad47}.ms-borderColor-officeAccent1,.ms-borderColor-officeAccent1--hover:hover{border-color:#fff}.ms-borderColor-officeAccent2,.ms-borderColor-officeAccent2--hover:hover{border-color:#000}.ms-borderColor-officeAccent3,.ms-borderColor-officeAccent3--hover:hover{border-color:#e7e6e5}.ms-borderColor-officeAccent4,.ms-borderColor-officeAccent4--hover:hover{border-color:#44546a}.ms-borderColor-officeAccent5,.ms-borderColor-officeAccent5--hover:hover{border-color:#5b9bd5}.ms-borderColor-officeAccent6,.ms-borderColor-officeAccent6--hover:hover{border-color:#ed7d31}.ms-borderColor-officeAccent7,.ms-borderColor-officeAccent7--hover:hover{border-color:#a5a5a5}.ms-borderColor-officeAccent8,.ms-borderColor-officeAccent8--hover:hover{border-color:#ffc001}.ms-borderColor-officeAccent9,.ms-borderColor-officeAccent9--hover:hover{border-color:#4472c4}.ms-borderColor-officeAccent10,.ms-borderColor-officeAccent10--hover:hover{border-color:#70ad47} \ 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..0e8ef314c --- /dev/null +++ b/dist/css/fabric.rtl.css @@ -0,0 +1,6564 @@ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox, +.ms-u-borderBox:before, +.ms-u-borderBox:after { + box-sizing: border-box; +} + +.ms-u-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: #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-error { + background-color: #fde7e9; +} + +.ms-bgColor-alert { + background-color: #f4f4f4; +} + +.ms-bgColor-info { + background-color: #f4f4f4; +} + +.ms-bgColor-success { + background-color: #dff6dd; +} + +.ms-bgColor-orangeLighter, +.ms-bgColor-orangeLighter--hover:hover { + background-color: #ea4300; +} + +.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: #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-error { + border-color: #a80000; +} + +.ms-borderColor-success { + border-color: #107c10; +} + +.ms-borderColor-info { + border-color: #107c10; +} + +.ms-borderColor-alert { + border-color: #d83b01; +} + +.ms-borderColor-orangeLighter, +.ms-borderColor-orangeLighter--hover:hover { + border-color: #ea4300; +} + +.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: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Arabic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Arabic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Arabic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Cyrillic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Cyrillic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Cyrillic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Cyrillic'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light EastEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular EastEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold EastEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight EastEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Greek'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Greek'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Greek'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Greek'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Hebrew'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Hebrew'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Hebrew'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Hebrew'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Vietnamese'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Vietnamese'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Vietnamese'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Vietnamese'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light WestEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular WestEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold WestEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight WestEuropean'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), 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'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +.ms-font-su { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 17px; + font-weight: normal; +} + +.ms-font-m-plus { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 15px; + font-weight: normal; +} + +.ms-font-m { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; +} + +.ms-font-s-plus { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 13px; + font-weight: normal; +} + +.ms-font-s { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; +} + +.ms-font-xs { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-semilight, +.ms-fontWeight-semilight--hover:hover { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-regular, +.ms-fontWeight-regular--hover:hover { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-semibold, +.ms-fontWeight-semibold--hover:hover { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', 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-orangeLighter, +.ms-fontColor-orangeLighter-hover:hover, +.ms-fontColor-orangeLighter, +.ms-fontColor-orangeLighter--hover:hover { + color: #ea4300; +} + +.ms-fontColor-orangeLight, +.ms-fontColor-orangeLight--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-error, +.ms-fontColor-error--hover:hover { + color: #a80000; +} + +.ms-fontColor-alert, +.ms-fontColor-alert--hover:hover { + color: #d83b01; +} + +.ms-fontColor-info, +.ms-fontColor-info--hover:hover { + color: #107c10; +} + +.ms-fontColor-success, +.ms-fontColor-success--hover:hover { + color: #107c10; +} + +*[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: YuGothic, 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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', 'Segoe WP', 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', 'Segoe WP', 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', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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 WP Semibold', 'Segoe UI', 'Segoe WP', 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 +*/ + +@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-slideRightIn40 { + -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; +} + +@-webkit-keyframes slideRight40 { + from { + -webkit-transform: translate3d(-40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRight40 { + 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-slideLeftIn40 { + -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; +} + +@-webkit-keyframes slideLeft40 { + from { + -webkit-transform: translate3d(40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeft40 { + 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, 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; +} + +@-webkit-keyframes slideRight400 { + from { + -webkit-transform: translate3d(-400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRight400 { + 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, slideUp20; + animation-name: fadeIn, slideUp20; + -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 slideUp20 { + from { + -webkit-transform: translate3d(0px, 20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideUp20 { + 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, slideUp10; + animation-name: fadeIn, slideUp10; + -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 slideUp10 { + from { + -webkit-transform: translate3d(0px, 10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideUp10 { + 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, slideDown20; + animation-name: fadeIn, slideDown20; + -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 slideDown20 { + from { + -webkit-transform: translate3d(0px, -20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideDown20 { + 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, slideDown10; + animation-name: fadeIn, slideDown10; + -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 slideDown10 { + from { + -webkit-transform: translate3d(0px, -10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideDown10 { + 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-fadeIn100, +.ms-u-fadeIn200, +.ms-u-fadeIn400, +.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; +} + +.ms-u-fadeIn100 { + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-u-fadeIn200 { + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-u-fadeIn500 { + -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-fadeOut100, +.ms-u-fadeOut200, +.ms-u-fadeOut400, +.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; +} + +.ms-u-fadeOut100 { + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-u-fadeOut200 { + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-u-fadeOut500 { + -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-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-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: 0%; +} + +.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: 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: 0%; + } + + .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: 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: 0%; + } + + .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: 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: 0%; + } + + .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: 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: 0%; + } + + .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: 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: 0%; + } + + .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: 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; +} + +.ms-fontColor-officeAccent1, +.ms-fontColor-officeAccent1--hover:hover { + color: #ffffff; +} + +.ms-fontColor-officeAccent2, +.ms-fontColor-officeAccent2--hover:hover { + color: #000000; +} + +.ms-fontColor-officeAccent3, +.ms-fontColor-officeAccent3--hover:hover { + color: #e7e6e5; +} + +.ms-fontColor-officeAccent4, +.ms-fontColor-officeAccent4--hover:hover { + color: #44546a; +} + +.ms-fontColor-officeAccent5, +.ms-fontColor-officeAccent5--hover:hover { + color: #5b9bd5; +} + +.ms-fontColor-officeAccent6, +.ms-fontColor-officeAccent6--hover:hover { + color: #ed7d31; +} + +.ms-fontColor-officeAccent7, +.ms-fontColor-officeAccent7--hover:hover { + color: #a5a5a5; +} + +.ms-fontColor-officeAccent8, +.ms-fontColor-officeAccent8--hover:hover { + color: #ffc001; +} + +.ms-fontColor-officeAccent9, +.ms-fontColor-officeAccent9--hover:hover { + color: #4472c4; +} + +.ms-fontColor-officeAccent10, +.ms-fontColor-officeAccent10--hover:hover { + color: #70ad47; +} + +.ms-bgColor-officeAccent1, +.ms-bgColor-officeAccent1--hover:hover { + background-color: #ffffff; +} + +.ms-bgColor-officeAccent2, +.ms-bgColor-officeAccent2--hover:hover { + background-color: #000000; +} + +.ms-bgColor-officeAccent3, +.ms-bgColor-officeAccent3--hover:hover { + background-color: #e7e6e5; +} + +.ms-bgColor-officeAccent4, +.ms-bgColor-officeAccent4--hover:hover { + background-color: #44546a; +} + +.ms-bgColor-officeAccent5, +.ms-bgColor-officeAccent5--hover:hover { + background-color: #5b9bd5; +} + +.ms-bgColor-officeAccent6, +.ms-bgColor-officeAccent6--hover:hover { + background-color: #ed7d31; +} + +.ms-bgColor-officeAccent7, +.ms-bgColor-officeAccent7--hover:hover { + background-color: #a5a5a5; +} + +.ms-bgColor-officeAccent8, +.ms-bgColor-officeAccent8--hover:hover { + background-color: #ffc001; +} + +.ms-bgColor-officeAccent9, +.ms-bgColor-officeAccent9--hover:hover { + background-color: #4472c4; +} + +.ms-bgColor-officeAccent10, +.ms-bgColor-officeAccent10--hover:hover { + background-color: #70ad47; +} + +.ms-borderColor-officeAccent1, +.ms-borderColor-officeAccent1--hover:hover { + border-color: #ffffff; +} + +.ms-borderColor-officeAccent2, +.ms-borderColor-officeAccent2--hover:hover { + border-color: #000000; +} + +.ms-borderColor-officeAccent3, +.ms-borderColor-officeAccent3--hover:hover { + border-color: #e7e6e5; +} + +.ms-borderColor-officeAccent4, +.ms-borderColor-officeAccent4--hover:hover { + border-color: #44546a; +} + +.ms-borderColor-officeAccent5, +.ms-borderColor-officeAccent5--hover:hover { + border-color: #5b9bd5; +} + +.ms-borderColor-officeAccent6, +.ms-borderColor-officeAccent6--hover:hover { + border-color: #ed7d31; +} + +.ms-borderColor-officeAccent7, +.ms-borderColor-officeAccent7--hover:hover { + border-color: #a5a5a5; +} + +.ms-borderColor-officeAccent8, +.ms-borderColor-officeAccent8--hover:hover { + border-color: #ffc001; +} + +.ms-borderColor-officeAccent9, +.ms-borderColor-officeAccent9--hover:hover { + border-color: #4472c4; +} + +.ms-borderColor-officeAccent10, +.ms-borderColor-officeAccent10--hover:hover { + border-color: #70ad47; +} diff --git a/dist/css/fabric.rtl.min.css b/dist/css/fabric.rtl.min.css new file mode 100644 index 000000000..931bc683a --- /dev/null +++ b/dist/css/fabric.rtl.min.css @@ -0,0 +1 @@ +.ms-font-su,.ms-font-xl,.ms-font-xxl{font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400;color:#333}.ms-Grid-row:after,.ms-Grid:after,.ms-u-clearfix:after{clear:both}.ms-Grid,.ms-Grid-col,.ms-Grid-row,.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before,.ms-u-normalize{box-sizing:border-box}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-Icon,.ms-Icon--circle{display:inline-block;-webkit-font-smoothing:antialiased}.ms-u-normalize{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:#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-error{background-color:#fde7e9}.ms-bgColor-alert,.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-orangeLighter,.ms-bgColor-orangeLighter--hover:hover{background-color:#ea4300}.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:#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-error{border-color:#a80000}.ms-borderColor-info,.ms-borderColor-success{border-color:#107c10}.ms-borderColor-alert{border-color:#d83b01}.ms-borderColor-orangeLighter,.ms-borderColor-orangeLighter--hover:hover{border-color:#ea4300}.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:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Arabic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Arabic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Arabic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light Cyrillic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Cyrillic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Cyrillic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Cyrillic';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light EastEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular EastEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold EastEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight EastEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light Greek';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Greek';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Greek';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Greek';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light Hebrew';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Hebrew';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Hebrew';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Hebrew';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light Vietnamese';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular Vietnamese';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold Vietnamese';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight Vietnamese';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Light WestEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.svg#SegoeUI-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Regular WestEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.svg#SegoeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semibold WestEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.svg#SegoeUI-Semibold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Segoe UI Semilight WestEuropean';src:url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.eot?#iefix) format('embedded-opentype'),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'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.svg#SegoeUI-Semilight) format('svg');font-weight:400;font-style:normal}.ms-font-su{font-size:42px}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px}.ms-font-l{color:#333;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:17px;font-weight:400}.ms-font-m,.ms-font-m-plus,.ms-font-s,.ms-font-s-plus,.ms-font-xs{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;color:#333;font-weight:400}.ms-font-m-plus{font-size:15px}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px}.ms-font-mi{color:#333;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:10px;font-weight:400}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',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-orangeLighter,.ms-fontColor-orangeLighter--hover:hover,.ms-fontColor-orangeLighter-hover:hover{color:#ea4300}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--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-error,.ms-fontColor-error--hover:hover{color:#a80000}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-info,.ms-fontColor-info--hover:hover,.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}[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:YuGothic,'Meiryo UI',Meiryo,'MS Pgothic',Osaka,'Segoe UI','Segoe WP',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','Segoe WP',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','Segoe WP',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','Segoe WP',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','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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 WP Light','Segoe UI','Segoe WP',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 WP Semilight','Segoe UI','Segoe WP',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','Segoe WP',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 WP Semibold','Segoe UI','Segoe WP',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;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;font-size:1rem;width:1em;height:1em;margin:0 0 0 .5em;padding:0;text-align:right}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;right:0;-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,.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--checkPeople,.ms-Icon--checkbox,.ms-Icon--checkboxCheck,.ms-Icon--chevronLeft,.ms-Icon--chevronRight,.ms-Icon--chevronThickLeft,.ms-Icon--chevronThickRight,.ms-Icon--chevronThinLeft,.ms-Icon--chevronThinRight,.ms-Icon--chevronsLeft,.ms-Icon--chevronsRight,.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--notRecurring,.ms-Icon--note,.ms-Icon--noteForward,.ms-Icon--noteReply,.ms-Icon--notebook,.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);-ms-transform:scaleX(-1);transform:scaleX(-1)}@-webkit-keyframes slideRight40{from{-webkit-transform:translate3d(-40px,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideRight40{from{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideLeft40{from{-webkit-transform:translate3d(40px,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideLeft40{from{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideRight400{from{-webkit-transform:translate3d(-400px,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideRight400{from{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideLeft400{from{-webkit-transform:translate3d(400px,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideLeft400{from{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideUpIn20{-webkit-animation-name:fadeIn,slideUp20;animation-name:fadeIn,slideUp20;-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;-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 slideUp20{from{-webkit-transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideUp20{from{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideUpIn10{-webkit-animation-name:fadeIn,slideUp10;animation-name:fadeIn,slideUp10;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-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-scaleUpIn100,.ms-u-slideDownIn20{-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1)}@-webkit-keyframes slideUp10{from{-webkit-transform:translate3d(0,10px,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideUp10{from{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideDownIn20{-webkit-animation-name:fadeIn,slideDown20;animation-name:fadeIn,slideDown20;-webkit-animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideDownIn10,.ms-u-slideUpOut20{-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both}@-webkit-keyframes slideDown20{from{-webkit-transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideDown20{from{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ms-u-slideDownIn10{-webkit-animation-name:fadeIn,slideDown10;animation-name:fadeIn,slideDown10;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@-webkit-keyframes slideDown10{from{-webkit-transform:translate3d(0,-10px,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes slideDown10{from{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideRightOut40{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(40px,0,0)}}@keyframes slideRightOut40{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}}@-webkit-keyframes slideLeftOut40{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-40px,0,0)}}@keyframes slideLeftOut40{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}}@-webkit-keyframes slideRightOut400{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(400px,0,0)}}@keyframes slideRightOut400{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}}@-webkit-keyframes slideLeftOut400{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-400px,0,0)}}@keyframes slideLeftOut400{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideDownOut20,.ms-u-slideUpOut10{-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;-webkit-animation-duration:167ms}@-webkit-keyframes slideUpOut20{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,-20px,0)}}@keyframes slideUpOut20{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{-webkit-animation-name:fadeOut,slideUpOut10;animation-name:fadeOut,slideUpOut10;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@-webkit-keyframes slideUpOut10{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,-10px,0)}}@keyframes slideUpOut10{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{-webkit-animation-name:fadeOut,slideDownOut20;animation-name:fadeOut,slideDownOut20;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-scaleUpOut103,.ms-u-slideDownOut10{-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}@-webkit-keyframes slideDownOut20{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,20px,0)}}@keyframes slideDownOut20{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{-webkit-animation-name:fadeOut,slideDownOut10;animation-name:fadeOut,slideDownOut10;-webkit-animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes slideDownOut10{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,10px,0)}}@keyframes slideDownOut10{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{-webkit-animation-name:fadeIn,scaleUp100;animation-name:fadeIn,scaleUp100;-webkit-animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-scaleDownIn100,.ms-u-slideRightIn40{-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1)}@-webkit-keyframes scaleUp100{from{-webkit-transform:scale3d(.98,.98,1)}to{-webkit-transform:scale3d(1,1,1)}}@keyframes scaleUp100{from{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.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:367ms;animation-timing-function:cubic-bezier(.1,.9,.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:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-scaleDownOut98,.ms-u-slideRightOut40{-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}@-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:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes scaleDown98{from{-webkit-transform:scale3d(1,1,1)}to{-webkit-transform:scale3d(.98,.98,1)}}@keyframes scaleDown98{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}to{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn200,.ms-u-fadeIn400,.ms-u-fadeIn500{-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeIn100{-webkit-animation-duration:167ms;animation-duration:167ms}.ms-u-fadeIn200{-webkit-animation-duration:267ms;animation-duration:267ms}.ms-u-fadeIn500{-webkit-animation-duration:467ms;animation-duration:467ms}@-webkit-keyframes fadeIn{from{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}@keyframes fadeIn{from{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-fadeOut200,.ms-u-fadeOut400,.ms-u-fadeOut500{-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-name:fadeOut;animation-name:fadeOut;-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:167ms;animation-duration:167ms}.ms-u-fadeOut500{-webkit-animation-duration:467ms;animation-duration:467ms}@-webkit-keyframes fadeOut{from{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@keyframes fadeOut{from{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@-webkit-keyframes rotate90{from{-webkit-transform:rotateZ(0)}to{-webkit-transform:rotateZ(90deg)}}@keyframes rotate90{from{-webkit-transform:rotateZ(0);transform:rotateZ(0)}to{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}}@-webkit-keyframes rotateN90{from{-webkit-transform:rotateZ(90deg)}to{-webkit-transform:rotateZ(0)}}@keyframes rotateN90{from{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}to{-webkit-transform:rotateZ(0);transform:rotateZ(0)}}.ms-u-expandCollapse400{transition:height 367ms cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height 167ms cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{-webkit-animation-delay:167ms;animation-delay:167ms}.ms-u-delay200{-webkit-animation-delay:267ms;animation-delay:267ms}.ms-u-slideRightIn40{-webkit-animation-name:fadeIn,slideLeft40;animation-name:fadeIn,slideLeft40;-webkit-animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftIn40,.ms-u-slideRightIn400{-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms}.ms-u-slideLeftIn40{-webkit-animation-name:fadeIn,slideRight40;animation-name:fadeIn,slideRight40;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn400{-webkit-animation-name:fadeIn,slideLeft400;animation-name:fadeIn,slideLeft400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn400{-webkit-animation-name:fadeIn,slideRight400;animation-name:fadeIn,slideRight400;-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;-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:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftOut40,.ms-u-slideRightOut400{-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms}.ms-u-slideLeftOut40{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideRightOut400{-webkit-animation-name:fadeOut,slideLeftOut400;animation-name:fadeOut,slideLeftOut400;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotate90deg,.ms-u-slideLeftOut400{-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both}.ms-u-slideLeftOut400{-webkit-animation-name:fadeOut,slideRightOut400;animation-name:fadeOut,slideRightOut400;-webkit-animation-duration:167ms;-moz-animation-duration:167ms;-ms-animation-duration:167ms;-o-animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotate90deg,.ms-u-rotateN90deg{-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s}.ms-u-rotate90deg{-webkit-animation-name:rotateN90;animation-name:rotateN90;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotateN90deg{-webkit-animation-name:rotate90;animation-name:rotate90;-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-Grid-row:after,.ms-Grid-row:before,.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.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:0}.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: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:0}.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: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:0}.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: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:0}.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: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:0}.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: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:0}.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:0}}.ms-Grid{padding:0 8px}.ms-Grid-row{margin:0 -8px}.ms-Grid-col{position:relative;min-height:1px;padding-right:8px;padding-left:8px;float:right}.ms-Grid-col .ms-Grid{padding:0}.ms-fontColor-officeAccent1,.ms-fontColor-officeAccent1--hover:hover{color:#fff}.ms-fontColor-officeAccent2,.ms-fontColor-officeAccent2--hover:hover{color:#000}.ms-fontColor-officeAccent3,.ms-fontColor-officeAccent3--hover:hover{color:#e7e6e5}.ms-fontColor-officeAccent4,.ms-fontColor-officeAccent4--hover:hover{color:#44546a}.ms-fontColor-officeAccent5,.ms-fontColor-officeAccent5--hover:hover{color:#5b9bd5}.ms-fontColor-officeAccent6,.ms-fontColor-officeAccent6--hover:hover{color:#ed7d31}.ms-fontColor-officeAccent7,.ms-fontColor-officeAccent7--hover:hover{color:#a5a5a5}.ms-fontColor-officeAccent8,.ms-fontColor-officeAccent8--hover:hover{color:#ffc001}.ms-fontColor-officeAccent9,.ms-fontColor-officeAccent9--hover:hover{color:#4472c4}.ms-fontColor-officeAccent10,.ms-fontColor-officeAccent10--hover:hover{color:#70ad47}.ms-bgColor-officeAccent1,.ms-bgColor-officeAccent1--hover:hover{background-color:#fff}.ms-bgColor-officeAccent2,.ms-bgColor-officeAccent2--hover:hover{background-color:#000}.ms-bgColor-officeAccent3,.ms-bgColor-officeAccent3--hover:hover{background-color:#e7e6e5}.ms-bgColor-officeAccent4,.ms-bgColor-officeAccent4--hover:hover{background-color:#44546a}.ms-bgColor-officeAccent5,.ms-bgColor-officeAccent5--hover:hover{background-color:#5b9bd5}.ms-bgColor-officeAccent6,.ms-bgColor-officeAccent6--hover:hover{background-color:#ed7d31}.ms-bgColor-officeAccent7,.ms-bgColor-officeAccent7--hover:hover{background-color:#a5a5a5}.ms-bgColor-officeAccent8,.ms-bgColor-officeAccent8--hover:hover{background-color:#ffc001}.ms-bgColor-officeAccent9,.ms-bgColor-officeAccent9--hover:hover{background-color:#4472c4}.ms-bgColor-officeAccent10,.ms-bgColor-officeAccent10--hover:hover{background-color:#70ad47}.ms-borderColor-officeAccent1,.ms-borderColor-officeAccent1--hover:hover{border-color:#fff}.ms-borderColor-officeAccent2,.ms-borderColor-officeAccent2--hover:hover{border-color:#000}.ms-borderColor-officeAccent3,.ms-borderColor-officeAccent3--hover:hover{border-color:#e7e6e5}.ms-borderColor-officeAccent4,.ms-borderColor-officeAccent4--hover:hover{border-color:#44546a}.ms-borderColor-officeAccent5,.ms-borderColor-officeAccent5--hover:hover{border-color:#5b9bd5}.ms-borderColor-officeAccent6,.ms-borderColor-officeAccent6--hover:hover{border-color:#ed7d31}.ms-borderColor-officeAccent7,.ms-borderColor-officeAccent7--hover:hover{border-color:#a5a5a5}.ms-borderColor-officeAccent8,.ms-borderColor-officeAccent8--hover:hover{border-color:#ffc001}.ms-borderColor-officeAccent9,.ms-borderColor-officeAccent9--hover:hover{border-color:#4472c4}.ms-borderColor-officeAccent10,.ms-borderColor-officeAccent10--hover:hover{border-color:#70ad47} \ 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..f70ffbdfc --- /dev/null +++ b/dist/js/jquery.fabric.js @@ -0,0 +1,1549 @@ +// 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, icon, link) { + var item = '
          • '; + item += text; + item += '
            • '; + + return item; + } + + var saveCommands = function($commands, $commandWidth, $commandarea) { + var commands = []; + $commands.each(function(index) { + var $Item = $(this); + var $rightOffset = ($Item.offset().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.offset().left; // Added padding of 10 + commands.push({ jquery: $Item, rightOffset: $rightOffset}); + }); + return commands; + } + + var processCommands = function(commands, width) { + 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 > 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(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'); + 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()); + processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu); + + // Set Search Behavior + if($(window).width() < 640) { + + $('.ms-CommandBarSearch').click(function() { + $(this).addClass('is-active'); + }); + + } + + // Add resize event handler on commandBar + $(window).resize(function() { + var overFlowCommands; + overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth()); + processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu); + + if($(window).width() < 640 && mobileSwitch == false) { + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + mobileSwitch = true; + + // Search Behavior + $('.ms-CommandBarSearch').unbind(); + $('.ms-CommandBarSearch').click(function() { + $(this).addClass('is-active'); + }); + + } else if($(window).width() > 639 && mobileSwitch == true) { + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + mobileSwitch = false; + + $('.ms-CommandBarSearch').unbind(); + } + + }); + + // Hook up contextual menu + $OverflowCommand.click(function() { + $OverflowMenu.toggleClass('is-open'); + }); + + $SearchBox.find('.ms-CommandBarSearch-input').click(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. + +(function ($) { + + /** + * @param {object} options DatePicker options + * @param {array} options.optionMonths An array of month abbreviations for the options grid + * @param {string} options.label A label for the DatePicker + * @param {string} options.placeholderText Placeholder text for the DatePicker textfield + */ + $.fn.DatePicker = function (options) { + + var datePicker; + var self = this; + var optionMonths = options && options.optionMonths || ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + var label = options && options.label || "Start Date"; + var placeholderText = options && options.placeholderText || "Select a date"; + + /** check if the PickaDate plugin exists, if not load the plugin */ + if (!$().pickadate) { + var firstScript = document.getElementsByTagName("script")[0]; + var script = document.createElement("script"); + script.onload = returnDatePicker; + script.src = "PickaDate.js"; + firstScript.parentNode.insertBefore(script, firstScript); + } else { + datePicker = returnDatePicker(); + } + + function returnDatePicker() { + /** Iterate through each date picker provided. */ + return self.each(function () { + + var $datePicker = $(this); + + /**create the body of the datepicker */ + appendElements($datePicker, optionMonths); + + /** insert label and placeholder text */ + $datePicker.find('.ms-Label').text(label); + $datePicker.find('.ms-TextField-field').attr("placeholder", placeholderText + "..."); + + /** Set up variables and run the Pickadate plugin. */ + var $dateField = $datePicker.find('.ms-TextField-field').pickadate({ + // 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', + now: 'ms-DatePicker-day--today', + infocus: 'ms-DatePicker-day--infocus', + outfocus: 'ms-DatePicker-day--outfocus' + } + }); + var $picker = $dateField.pickadate('picker'); + + /** Respond to built-in picker events. */ + $picker.on({ + render: function() { + updateCustomView($datePicker); + }, + open: function() { + scrollUp($datePicker); + } + }); + + }); + } + + return datePicker; + }; + + /** + * Create the body of the DatePicker plugin and + * append it to the date picker element + * @param {object} $datePicker JQuery object + * @param {array} optionMonths + */ + function appendElements($datePicker, optionMonths) { + var elements = '
            '; + elements += ''; + elements += ''; + elements += ''; + elements += '
            '; + elements += '
            '; + elements += ''; + elements += ''; + elements += '
            '; + elements += '
            '; + elements += 'Go to today'; + elements += '
            '; + elements += '
            '; + elements += '
            '; + elements += ''; + elements += ''; + elements += '
            '; + elements += '
            '; + elements += '
            '; + elements += '
            '; + elements += '
            '; + elements += '
            '; + elements += '
            '; + elements += ''; + elements += ''; + elements += '
            '; + $datePicker.append(elements); + $datePicker.find('.ms-DatePicker-optionGrid').append(createMonthOptions(optionMonths)); + } + /** + * creates month elements for the month grid + * @param {array} optionMonths + * @returns {string} + */ + function createMonthOptions(optionMonths) { + var i = 0; + var content = ""; + for(i; i < 12; i++) { + content += '' + optionMonths[i] + ''; + } + return content; + } + /** + * 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 $dayPicker = $datePicker.find('.ms-DatePicker-dayPicker'); + 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(event) { + $datePicker.removeClass('is-pickingMonths'); + $datePicker.removeClass('is-pickingYears'); + }); + + /** Switch to the is-pickingMonths state. */ + $monthControls.on('click', '.js-showMonthPicker', function(event) { + $datePicker.toggleClass('is-pickingMonths'); + }); + + /** Switch to the is-pickingYears state. */ + $monthPicker.on('click', '.js-showYearPicker', function(event) { + $datePicker.toggleClass('is-pickingYears'); + }); + + } + + /** Change the highlighted date. */ + function changeHighlightedDate($picker, newYear, newMonth, newDay) { + + /** All variables are optional. If not provided, default to the current value. */ + if (newYear == null) { + newYear = $picker.get('highlight').year; + } + if (newMonth == null) { + newMonth = $picker.get('highlight').month; + } + if (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 $pickerWrapper = $datePicker.find('.ms-DatePicker-wrap'); + 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 (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+""):""},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. + +/** + * 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. + +/** + * Dropdown Plugin + * + * Given .ms-Dropdown containers with generic ',i+="
            ",i+='
            ',i+='',i+='',i+='
            ',i+="
            ",i+='Go to today',i+='
            ',i+='
            ',i+='
            ',i+='',i+='',i+="
            ",i+='
            ',i+="
            ",i+='
            ',i+="
            ",i+='
            ',i+='
            ',i+='',i+='',i+="
            ",e.append(i),e.find(".ms-DatePicker-optionGrid").append(n(t))}function n(e){var t=0,n="";for(t;12>t;t++)n+=''+e[t]+"";return n}function i(t){var n=t.find(".ms-DatePicker-monthComponents"),i=t.find(".ms-DatePicker-goToday"),o=(t.find(".ms-DatePicker-dayPicker"),t.find(".ms-DatePicker-monthPicker")),r=t.find(".ms-DatePicker-yearPicker"),c=t.find(".ms-DatePicker-wrap"),l=t.find(".ms-TextField-field").pickadate("picker");n.appendTo(c),i.appendTo(c),o.appendTo(c),r.appendTo(c),a(t),n.on("click",".js-prevMonth",function(e){e.preventDefault();var t=l.get("highlight").month-1;s(l,null,t,null)}),n.on("click",".js-nextMonth",function(e){e.preventDefault();var t=l.get("highlight").month+1;s(l,null,t,null)}),o.on("click",".js-prevYear",function(e){e.preventDefault();var t=l.get("highlight").year-1;s(l,t,null,null)}),o.on("click",".js-nextYear",function(e){e.preventDefault();var t=l.get("highlight").year+1;s(l,t,null,null)}),r.on("click",".js-prevDecade",function(e){e.preventDefault();var t=l.get("highlight").year-10;s(l,t,null,null)}),r.on("click",".js-nextDecade",function(e){e.preventDefault();var t=l.get("highlight").year+10;s(l,t,null,null)}),i.click(function(e){e.preventDefault();var n=new Date;l.set("select",[n.getFullYear(),n.getMonth(),n.getDate()]),t.removeClass("is-pickingMonths").removeClass("is-pickingYears")}),o.on("click",".js-changeDate",function(n){n.preventDefault();var i=e(this).attr("data-year"),a=e(this).attr("data-month"),o=e(this).attr("data-day");s(l,i,a,o),t.hasClass("is-pickingMonths")&&t.removeClass("is-pickingMonths")}),r.on("click",".js-changeDate",function(n){n.preventDefault();var i=e(this).attr("data-year"),a=e(this).attr("data-month"),o=e(this).attr("data-day");s(l,i,a,o),t.hasClass("is-pickingYears")&&t.removeClass("is-pickingYears")}),o.on("click",".js-showDayPicker",function(e){t.removeClass("is-pickingMonths"),t.removeClass("is-pickingYears")}),n.on("click",".js-showMonthPicker",function(e){t.toggleClass("is-pickingMonths")}),o.on("click",".js-showYearPicker",function(e){t.toggleClass("is-pickingYears")})}function s(e,t,n,i){null==t&&(t=e.get("highlight").year),null==n&&(n=e.get("highlight").month),null==i&&(i=e.get("highlight").date),e.set("highlight",[t,n,i])}function a(e){var t=e.find(".ms-DatePicker-monthPicker"),n=e.find(".ms-DatePicker-yearPicker"),i=(e.find(".ms-DatePicker-wrap"),e.find(".ms-TextField-field").pickadate("picker"));t.find(".ms-DatePicker-currentYear").text(i.get("view").year),t.find(".ms-DatePicker-monthOption").removeClass("is-highlighted"),t.find('.ms-DatePicker-monthOption[data-month="'+i.get("highlight").month+'"]').addClass("is-highlighted"),n.find(".ms-DatePicker-currentDecade").remove(),n.find(".ms-DatePicker-optionGrid").remove();var s=i.get("highlight").year-11,a=s+" - "+(s+11),o='
            '+a+"
            ";for(o+='
            ',year=s;year'+year+"";o+="
            ",n.append(o),n.find(".ms-DatePicker-yearOption").removeClass("is-highlighted"),n.find('.ms-DatePicker-yearOption[data-year="'+i.get("highlight").year+'"]').addClass("is-highlighted")}function o(t){e("html, body").animate({scrollTop:t.offset().top},367)}e.fn.DatePicker=function(n){function s(){return c.each(function(){var n=e(this);t(n,l),n.find(".ms-Label").text(d),n.find(".ms-TextField-field").attr("placeholder",u+"...");var s=n.find(".ms-TextField-field").pickadate({weekdaysShort:["S","M","T","W","T","F","S"],today:"",clear:"",close:"",onStart:function(){i(n)},klass:{input:"ms-DatePicker-input",active:"ms-DatePicker-input--active",picker:"ms-DatePicker-picker",opened:"ms-DatePicker-picker--opened",focused:"ms-DatePicker-picker--focused",holder:"ms-DatePicker-holder",frame:"ms-DatePicker-frame",wrap:"ms-DatePicker-wrap",box:"ms-DatePicker-dayPicker",header:"ms-DatePicker-header",month:"ms-DatePicker-month",year:"ms-DatePicker-year",table:"ms-DatePicker-table",weekdays:"ms-DatePicker-weekday",day:"ms-DatePicker-day",disabled:"ms-DatePicker-day--disabled",selected:"ms-DatePicker-day--selected",now:"ms-DatePicker-day--today",infocus:"ms-DatePicker-day--infocus",outfocus:"ms-DatePicker-day--outfocus"}}),r=s.pickadate("picker");r.on({render:function(){a(n)},open:function(){o(n)}})})}var r,c=this,l=n&&n.optionMonths||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],d=n&&n.label||"Start Date",u=n&&n.placeholderText||"Select a date";if(e().pickadate)r=s();else{var m=document.getElementsByTagName("script")[0],h=document.createElement("script");h.onload=s,h.src="PickaDate.js",m.parentNode.insertBefore(h,m)}return r}}(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 u(){return t._.node("div",t._.node("div",t._.node("div",t._.node("div",C.component.nodes(g.open),y.box),y.wrap),y.frame),y.holder)}function m(){P.data(o,C).addClass(y.input).val(P.data("value")?C.get("select",k.format):a.value).on("focus."+g.id+" click."+g.id,p),k.editable||P.on("keydown."+g.id,function(e){var t=e.keyCode,n=/^(8|46)$/.test(t);return 27==t?(C.close(),!1):void((32==t||n||!g.open&&C.component.key[t])&&(e.preventDefault(),e.stopPropagation(),n?C.clear().close():C.open()))}),s(a,{haspopup:!0,expanded:!1,readonly:!1,owns:a.id+"_root"+(C._hidden?" "+C._hidden.id:"")})}function h(){C.$root.on({focusin:function(e){C.$root.removeClass(y.focused),e.stopPropagation()},"mousedown click":function(t){var n=t.target;n!=C.$root.children()[0]&&(t.stopPropagation(),"mousedown"!=t.type||e(n).is(":input")||"OPTION"==n.nodeName||(t.preventDefault(),a.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var t=e(this),n=t.data(),i=t.hasClass(y.navDisabled)||t.hasClass(y.disabled),s=document.activeElement;s=s&&(s.type||s.href)&&s,(i||s&&!e.contains(C.$root[0],s))&&a.focus(),!i&&n.nav?C.set("highlight",C.component.item.highlight,{nav:n.nav}):!i&&"pick"in n?C.set("select",n.pick).close(!0):n.clear?C.clear().close(!0):n.close&&C.close(!0)}),s(C.$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]),C._hidden=e('")[0],P.on("change."+g.id,function(){C._hidden.value=a.value?C.get("select",k.formatSubmit):""}).after(C._hidden)}function p(e){e.stopPropagation(),"focus"==e.type&&C.$root.addClass(y.focused),C.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||{},y=e.extend({},t.klasses(),k.klass),P=e(a),b=function(){return this.start()},C=b.prototype={constructor:b,$node:P,start:function(){return g&&g.start?C:(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"),C.component=new r(C,k),C.$root=e(t._.node("div",u(),y.picker,'id="'+a.id+'_root"')),h(),k.formatSubmit&&f(),m(),k.container?e(k.container).append(C.$root):P.after(C.$root),C.on({start:C.component.onStart,render:C.component.onRender,stop:C.component.onStop,open:C.component.onOpen,close:C.component.onClose,set:C.component.onSet}).on({start:k.onStart,render:k.onRender,stop:k.onStop,open:k.onOpen,close:k.onClose,set:k.onSet}),v=n(C.$root.children()[0]),a.autofocus&&C.open(),C.trigger("start").trigger("render"))},render:function(e){return e?C.$root.html(u()):C.$root.find("."+y.box).html(C.component.nodes(g.open)),C.trigger("render")},stop:function(){return g.start?(C.close(),C._hidden&&C._hidden.parentNode.removeChild(C._hidden),C.$root.remove(),P.removeClass(y.input).removeData(o),setTimeout(function(){P.off("."+g.id)},0),a.type=g.type,a.readOnly=!1,C.trigger("stop"),g.methods={},g.start=!1,C):C},open:function(n){return g.open?C:(P.addClass(y.active),s(a,"expanded",!0),setTimeout(function(){C.$root.addClass(y.opened),s(C.$root[0],"hidden",!1)},0),n!==!1&&(g.open=!0,v&&l.css("overflow","hidden").css("padding-right","+="+i()),P.trigger("focus"),c.on("click."+g.id+" focusin."+g.id,function(e){var t=e.target;t!=a&&t!=document&&3!=e.which&&C.close(t===C.$root.children()[0])}).on("keydown."+g.id,function(n){var i=n.keyCode,s=C.component.key[i],o=n.target;27==i?C.close(!0):o!=a||!s&&13!=i?e.contains(C.$root[0],o)&&13==i&&(n.preventDefault(),o.click()):(n.preventDefault(),s?t._.trigger(C.component.key.go,C,[t._.trigger(s)]):C.$root.find("."+y.highlighted).hasClass(y.disabled)||C.set("select",C.component.item.highlight).close())})),C.trigger("open"))},close:function(e){return e&&(P.off("focus."+g.id).trigger("focus"),setTimeout(function(){P.on("focus."+g.id,p)},0)),P.removeClass(y.active),s(a,"expanded",!1),setTimeout(function(){C.$root.removeClass(y.opened+" "+y.focused),s(C.$root[0],"hidden",!0)},0),g.open?(g.open=!1,v&&l.css("overflow","").css("padding-right","-="+i()),c.off("."+g.id),C.trigger("close")):C},clear:function(e){return C.set("clear",null,e)},set:function(t,n,i){var s,a,o=e.isPlainObject(t),r=o?t:{};if(i=o&&e.isPlainObject(n)?n:i||{},t){o||(r[t]=n);for(s in r)a=r[s],s in C.component.item&&(void 0===a&&(a=null),C.component.set(s,a,i)),("select"==s||"clear"==s)&&P.val("clear"==s?"":C.get(s,k.format)).trigger("change");C.render()}return i.muted?C:C.trigger("set",r)},get:function(e,n){if(e=e||"value",null!=g[e])return g[e];if("value"==e)return a.value;if(e in C.component.item){if("string"==typeof n){var i=C.component.get(e);return i?t._.trigger(C.component.formats.toString,C.component,[n,i]):""}return C.component.get(e)}},on:function(t,n,i){var s,a,o=e.isPlainObject(t),r=o?t:{};if(t){o||(r[t]=n);for(s in r)a=r[s],i&&(s="_"+s),g.methods[s]=g.methods[s]||[],g.methods[s].push(a)}return C},off:function(){var e,t,n=arguments;for(e=0,namesCount=n.length;namesCount>e;e+=1)t=n[e],t in g.methods&&delete g.methods[t];return C},trigger:function(e,n){var i=function(e){var i=g.methods[e];i&&i.map(function(e){t._.trigger(e,C,[n])})};return i("_"+e),i(e),C}};return new b}function n(e){var t,n="position";return e.currentStyle?t=e.currentStyle[n]:window.getComputedStyle&&(t=getComputedStyle(e)[n]),"fixed"==t}function i(){if(l.height()<=r.height())return 0;var t=e('
            ').appendTo("body"),n=t[0].offsetWidth;t.css("overflow","scroll");var i=e('
            ').appendTo(t),s=i[0].offsetWidth;return t.remove(),n-s}function s(t,n,i){if(e.isPlainObject(n))for(var s in n)a(t,s,n[s]);else a(t,n,i)}function a(e,t,n){e.setAttribute(("role"==t?"":"aria-")+t,n)}function o(t,n){e.isPlainObject(t)||(t={attribute:n}),n="";for(var i in t){var s=("role"==i?"":"aria-")+i,a=t[i];n+=null==a?"":s+'="'+t[i]+'"'}return n}var r=e(window),c=e(document),l=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 n,i="",s=t._.trigger(e.min,e);s<=t._.trigger(e.max,e,[s]);s+=e.i)n=t._.trigger(e.item,e,[s]),i+=t._.node(e.node,n[0],n[1],n[2]);return i},node:function(t,n,i,s){return n?(n=e.isArray(n)?n.join(""):n,i=i?' class="'+i+'"':"",s=s?" "+s:"","<"+t+i+s+">"+n+""):""},lead:function(e){return(10>e?"0":"")+e},trigger:function(e,t,n){return"function"==typeof e?e.apply(t,n||[]):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(n,i){e.fn[n]=function(s,a){var o=this.data(n);return"picker"==s?o:o&&"string"==typeof s?t._.trigger(o[s],o,[a]):this.each(function(){var a=e(this);a.data(n)||new t(this,n,i,s)})},e.fn[n].defaults=i.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 n(e,t){var n=this,i=e.$node[0],s=i.value,a=e.$node.data("value"),o=a||s,r=a?t.formatSubmit:t.format,c=function(){return i.currentStyle?"rtl"==i.currentStyle.direction:"rtl"==getComputedStyle(e.$root[0]).direction};n.settings=t,n.$node=e.$node,n.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"},n.item={},n.item.clear=null,n.item.disable=(t.disable||[]).slice(0),n.item.enable=-function(e){return e[0]===!0?e.shift():-1}(n.item.disable),n.set("min",t.min).set("max",t.max).set("now"),o?n.set("select",o,{format:r}):n.set("select",null).set("highlight",n.item.now),n.key={40:7,38:-7,39:function(){return c()?-1:1},37:function(){return c()?1:-1},go:function(e){var t=n.item.highlight,i=new Date(Date.UTC(t.year,t.month,t.date+e));n.set("highlight",i,{interval:e}),this.render()}},e.on("render",function(){e.$root.find("."+t.klass.selectMonth).on("change",function(){var n=this.value;n&&(e.set("highlight",[e.get("view").year,n,e.get("highlight").date]),e.$root.find("."+t.klass.selectMonth).trigger("focus"))}),e.$root.find("."+t.klass.selectYear).on("change",function(){var n=this.value;n&&(e.set("highlight",[n,e.get("view").month,e.get("highlight").date]),e.$root.find("."+t.klass.selectYear).trigger("focus"))})},1).on("open",function(){var i="";n.disabled(n.get("now"))&&(i=":not(."+t.klass.buttonToday+")"),e.$root.find("button"+i+", select").attr("disabled",!1)},1).on("close",function(){e.$root.find("button, select").attr("disabled",!0)},1)}var i=7,s=6,a=e._;n.prototype.set=function(e,t,n){var i=this,s=i.item;return null===t?("clear"==e&&(e="select"),s[e]=t,i):(s["enable"==e?"disable":"flip"==e?"enable":e]=i.queue[e].split(" ").map(function(s){return t=i[s](e,t,n)}).pop(),"select"==e?i.set("highlight",s.select,n):"highlight"==e?i.set("view",s.highlight,n):e.match(/^(flip|min|max|disable|enable)$/)&&(s.select&&i.disabled(s.select)&&i.set("select",s.select,n),s.highlight&&i.disabled(s.highlight)&&i.set("highlight",s.highlight,n)),i)},n.prototype.get=function(e){return this.item[e]},n.prototype.create=function(e,n,i){var s,o=this;return n=void 0===n?e:n,n==-1/0||1/0==n?s=n:t.isPlainObject(n)&&a.isInteger(n.pick)?n=n.obj:t.isArray(n)?(n=new Date(Date.UTC(n[0],n[1],n[2])),n=a.isDate(n)?n:o.create().obj):n=a.isInteger(n)?o.normalize(new Date(n),i):a.isDate(n)?o.normalize(n,i):o.now(e,n,i),{year:s||n.getUTCFullYear(),month:s||n.getUTCMonth(),date:s||n.getUTCDate(),day:s||n.getUTCDay(),obj:s||n,pick:s||n.getTime()}},n.prototype.createRange=function(e,n){var i=this,s=function(e){return e===!0||t.isArray(e)||a.isDate(e)?i.create(e):e};return a.isInteger(e)||(e=s(e)),a.isInteger(n)||(n=s(n)),a.isInteger(e)&&t.isPlainObject(n)?e=[n.year,n.month,n.date+e]:a.isInteger(n)&&t.isPlainObject(e)&&(n=[e.year,e.month,e.date+n]),{from:s(e),to:s(n)}},n.prototype.withinRange=function(e,t){return e=this.createRange(e.from,e.to),t.pick>=e.from.pick&&t.pick<=e.to.pick},n.prototype.overlapRanges=function(e,t){var n=this;return e=n.createRange(e.from,e.to),t=n.createRange(t.from,t.to),n.withinRange(e,t.from)||n.withinRange(e,t.to)||n.withinRange(t,e.from)||n.withinRange(t,e.to)},n.prototype.now=function(e,t,n){return t=new Date,n&&n.rel&&t.setUTCDate(t.getUTCDate()+n.rel),this.normalize(t,n)},n.prototype.navigate=function(e,n,i){var s,a,o,r,c=t.isArray(n),l=t.isPlainObject(n),d=this.item.view;if(c||l){for(l?(a=n.year,o=n.month,r=n.date):(a=+n[0],o=+n[1],r=+n[2]),i&&i.nav&&d&&d.month!==o&&(a=d.year,o=d.month),s=new Date(Date.UTC(a,o+(i&&i.nav?i.nav:0),1)),a=s.getUTCFullYear(),o=s.getUTCMonth();new Date(Date.UTC(a,o,r)).getUTCMonth()!==o;)r-=1;n=[a,o,r]}return n},n.prototype.normalize=function(e){return e.setUTCHours(0,0,0,0),e},n.prototype.measure=function(e,t){var n=this;return t?"string"==typeof t?t=n.parse(e,t):a.isInteger(t)&&(t=n.now(e,t,{rel:t})):t="min"==e?-1/0:1/0,t},n.prototype.viewset=function(e,t){return this.create([t.year,t.month,1])},n.prototype.validate=function(e,n,i){var s,o,r,c,l=this,d=n,u=i&&i.interval?i.interval:1,m=-1===l.item.enable,h=l.item.min,f=l.item.max,p=m&&l.item.disable.filter(function(e){if(t.isArray(e)){var i=l.create(e).pick;in.pick&&(o=!0)}return a.isInteger(e)}).length;if((!i||!i.nav)&&(!m&&l.disabled(n)||m&&l.disabled(n)&&(p||s||o)||!m&&(n.pick<=h.pick||n.pick>=f.pick)))for(m&&!p&&(!o&&u>0||!s&&0>u)&&(u*=-1);l.disabled(n)&&(Math.abs(u)>1&&(n.monthd.month)&&(n=d,u=u>0?1:-1),n.pick<=h.pick?(r=!0,u=1,n=l.create([h.year,h.month,h.date+(n.pick===h.pick?0:-1)])):n.pick>=f.pick&&(c=!0,u=-1,n=l.create([f.year,f.month,f.date+(n.pick===f.pick?0:1)])),!r||!c);)n=l.create([n.year,n.month,n.date+u]);return n},n.prototype.disabled=function(e){var n=this,i=n.item.disable.filter(function(i){return a.isInteger(i)?e.day===(n.settings.firstDay?i:i-1)%7:t.isArray(i)||a.isDate(i)?e.pick===n.create(i).pick:t.isPlainObject(i)?n.withinRange(i,e):void 0});return i=i.length&&!i.filter(function(e){return t.isArray(e)&&"inverted"==e[3]||t.isPlainObject(e)&&e.inverted}).length,-1===n.item.enable?!i:i||e.pickn.item.max.pick},n.prototype.parse=function(e,t,n){var i=this,s={};return t&&"string"==typeof t?(n&&n.format||(n=n||{},n.format=i.settings.format),i.formats.toArray(n.format).map(function(e){var n=i.formats[e],o=n?a.trigger(n,i,[t,s]):e.replace(/^!/,"").length;n&&(s[e]=t.substr(0,o)),t=t.substr(o)}),[s.yyyy||s.yy,+(s.mm||s.m)-1,s.dd||s.d]):t},n.prototype.formats=function(){function e(e,t,n){var i=e.match(/\w+/)[0];return n.mm||n.m||(n.m=t.indexOf(i)+1),i.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,n){return e?t(e):this.settings.weekdaysShort[n.day]},dddd:function(e,n){return e?t(e):this.settings.weekdaysFull[n.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,n){var i=this.settings.monthsShort;return t?e(t,i,n):i[n.month]},mmmm:function(t,n){var i=this.settings.monthsFull;return t?e(t,i,n):i[n.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 n=this;return n.formats.toArray(e).map(function(e){return a.trigger(n.formats[e],n,[0,t])||e.replace(/^!/,"")}).join("")}}}(),n.prototype.isDateExact=function(e,n){var i=this;return a.isInteger(e)&&a.isInteger(n)||"boolean"==typeof e&&"boolean"==typeof n?e===n:(a.isDate(e)||t.isArray(e))&&(a.isDate(n)||t.isArray(n))?i.create(e).pick===i.create(n).pick:t.isPlainObject(e)&&t.isPlainObject(n)?i.isDateExact(e.from,n.from)&&i.isDateExact(e.to,n.to):!1},n.prototype.isDateOverlap=function(e,n){var i=this,s=i.settings.firstDay?1:0;return a.isInteger(e)&&(a.isDate(n)||t.isArray(n))?(e=e%7+s,e===i.create(n).day+1):a.isInteger(n)&&(a.isDate(e)||t.isArray(e))?(n=n%7+s,n===i.create(e).day+1):t.isPlainObject(e)&&t.isPlainObject(n)?i.overlapRanges(e,n):!1},n.prototype.flipEnable=function(e){var t=this.item;t.enable=e||(-1==t.enable?1:-1)},n.prototype.deactivate=function(e,n){var i=this,s=i.item.disable.slice(0);return"flip"==n?i.flipEnable():n===!1?(i.flipEnable(1),s=[]):n===!0?(i.flipEnable(-1),s=[]):n.map(function(e){for(var n,o=0;oc;c+=1){if(r=s[c],i.isDateExact(r,e)){n=s[c]=null,l=!0;break}if(i.isDateOverlap(r,e)){t.isPlainObject(e)?(e.inverted=!0,n=e):t.isArray(e)?(n=e,n[3]||n.push("inverted")):a.isDate(e)&&(n=[e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate(),"inverted"]);break}}if(n)for(c=0;o>c;c+=1)if(i.isDateExact(s[c],e)){s[c]=null;break}if(l)for(c=0;o>c;c+=1)if(i.isDateOverlap(s[c],e)){s[c]=null;break}n&&s.push(n)}),s.filter(function(e){return null!=e})},n.prototype.nodes=function(e){var t=this,n=t.settings,o=t.item,r=o.now,c=o.select,l=o.highlight,d=o.view,u=o.disable,m=o.min,h=o.max,f=function(e,t){return n.firstDay&&(e.push(e.shift()),t.push(t.shift())),a.node("thead",a.node("tr",a.group({min:0,max:i-1,i:1,node:"th",item:function(i){return[e[i],n.klass.weekdays,'scope=col title="'+t[i]+'"']}})))}((n.showWeekdaysFull?n.weekdaysFull:n.weekdaysShort).slice(0),n.weekdaysFull.slice(0)),p=function(e){return a.node("div"," ",n.klass["nav"+(e?"Next":"Prev")]+(e&&d.year>=h.year&&d.month>=h.month||!e&&d.year<=m.year&&d.month<=m.month?" "+n.klass.navDisabled:""),"data-nav="+(e||-1)+" "+a.ariaAttr({role:"button",components:t.$node[0].id+"_table"})+' title="'+(e?n.labelMonthNext:n.labelMonthPrev)+'"')},v=function(){var i=n.showMonthsShort?n.monthsShort:n.monthsFull;return n.selectMonths?a.node("select",a.group({min:0,max:11,i:1,node:"option",item:function(e){return[i[e],0,"value="+e+(d.month==e?" selected":"")+(d.year==m.year&&eh.month?" disabled":"")]}}),n.klass.selectMonth,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+n.labelMonthSelect+'"'):a.node("div",i[d.month],n.klass.month)},g=function(){var i=d.year,s=n.selectYears===!0?5:~~(n.selectYears/2);if(s){var o=m.year,r=h.year,c=i-s,l=i+s;if(o>c&&(l+=o-c,c=o),l>r){var u=c-o,f=l-r;c-=u>f?f:u,l=r}return a.node("select",a.group({min:c,max:l,i:1,node:"option",item:function(e){return[e,0,"value="+e+(i==e?" selected":"")]}}),n.klass.selectYear,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+n.labelYearSelect+'"')}return a.node("div",i,n.klass.year)};return a.node("div",(n.selectYears?g()+v():v()+g())+p()+p(1),n.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=n.firstDay&&0===t.create([d.year,d.month,1]).day?-7:0;return[a.group({min:i*e-d.day+s+1,max:function(){return this.min+i-1},i:1,node:"td",item:function(e){e=t.create([d.year,d.month,e+(n.firstDay?1:0)]);var i=c&&c.pick==e.pick,s=l&&l.pick==e.pick,o=u&&t.disabled(e)||e.pickh.pick;return[a.node("div",e.date,function(t){return t.push(d.month==e.month?n.klass.infocus:n.klass.outfocus),r.pick==e.pick&&t.push(n.klass.now),i&&t.push(n.klass.selected),s&&t.push(n.klass.highlighted),o&&t.push(n.klass.disabled),t.join(" ")}([n.klass.day]),"data-pick="+e.pick+" "+a.ariaAttr({role:"gridcell",selected:i&&t.$node.val()===a.trigger(t.formats.toString,t,[n.format,e])?!0:null,activedescendant:s?!0:null,disabled:o?!0:null})),"",a.ariaAttr({role:"presentation"})]}})]}})),n.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",n.today,n.klass.buttonToday,"type=button data-pick="+r.pick+(e&&!t.disabled(r)?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",n.clear,n.klass.buttonClear,"type=button data-clear=1"+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",n.close,n.klass.buttonClose,"type=button data-close=true "+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id})),n.klass.footer)},n.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",n)}),function(e){e.fn.ContextualMenu=function(){return this.each(function(){var t=e(this);t.on("click",".ms-ContextualMenu-link:not(.is-disabled)",function(n){n.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"),n.stopPropagation()))})})}}(jQuery),function(e){e.fn.Dropdown=function(){return this.each(function(){function t(t){if(!n.hasClass("is-disabled")){n.find(".is-open").removeClass("is-open"),t.stopPropagation();var i=e(this).parents(".ms-Dropdown").width();e(this).next(".ms-Dropdown-items").css("width",i+"px"),n.toggleClass("is-open"),e(document).bind("click.dropdown",function(t){n.removeClass("is-open"),e(document).unbind("click.dropdown")})}}var n=e(this),i=n.children(".ms-Dropdown-select"),s=i.children("option"),a=(this.id,""),o="",r="";s.each(function(e,t){t.selected&&(a=t.text),o+='
          • "+t.text+"
            • "}),r=''+a+'
              '+o+"
            ",n.append(r),n.on("click",".ms-Dropdown-title",function(e){t(e)}),n.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&&!n.hasClass("is-disabled"))){var o=e(this).find(".ms-Dropdown-item.is-selected").text();e(this).find(".ms-Dropdown-title").html(o),i.find("option").each(function(t,n){n.text===o?e(this).prop("selected",!0):e(this).prop("selected",!1)}),i.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")}),n.on("click",".ms-Dropdown-item",function(){if(!n.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();i.find("option").each(function(n,i){i.text===t?e(this).prop("selected",!0):e(this).prop("selected",!1)}),i.change()}})})}}(jQuery),function(e){e.fn.ListItem=function(){return this.each(function(){var t=e(this);t.on("click",".js-toggleSelection",function(t){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(n){n.stopPropagation(),0===e(this).children(".ms-NavBar-link").length&&n.preventDefault(),e(this).siblings(".ms-NavBar-item").removeClass("is-selected"),0===t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field").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).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(n){n.stopPropagation(),e(this).removeClass("is-open"),t.removeClass("is-open").find(".ms-NavBar-item--hasMenu").removeClass("is-selected")}),e(document).on("click","html",function(e){t.find(".ms-NavBar-item").removeClass("is-selected").find(".ms-ContextualMenu").removeClass("is-open"),0===t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field").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(){return this.each(function(){var t=e(this),n=t.find(".ms-Panel-main");e(".js-togglePanel").on("click",function(){n.css({display:"block"}),t.toggleClass("is-open")}),n.on("animationend webkitAnimationEnd MSAnimationEnd",function(t){"fadeOut"===t.originalEvent.animationName&&e(this).css({display:"none"})})})}}(jQuery),function(e){function t(e){var t=e.find(".ms-PeoplePicker-searchBox"),n=t.position().left,i=t.outerWidth(),s=n+i,a=t.find(".ms-PeoplePicker-persona:last"),o=a.offset().left,r=a.outerWidth(),c=o+r,l=s-c-7;100>l&&(l="100%"),e.find(".ms-PeoplePicker-searchField").outerWidth(l)}e.fn.PeoplePicker=function(){return this.each(function(){function n(t){e("html, body").animate({scrollTop:s.offset().top},367),e(".ms-PeoplePicker").hasClass("is-active")&&e(".ms-PeoplePicker").removeClass("is-active"),d=!0,t.stopPropagation(),o.width(s.width()-2),s.addClass("is-active"),e(document).bind("click.peoplepicker",function(t){s.removeClass("is-active"),e(document).unbind("click.peoplepicker"),d=!1})}var i,s=e(this),a=s.find(".ms-PeoplePicker-searchField"),o=s.find(".ms-PeoplePicker-results"),r=(s.find(".ms-PeoplePicker-searchMore"),s.find(".ms-PeoplePicker-selected")),c=s.find(".ms-PeoplePicker-selectedPeople"),l=s.find(".ms-PeoplePicker-selectedCount"),d=!1;s.on("focus",".ms-PeoplePicker-searchField",function(e){n(e)}),s.on("click",".ms-PeoplePicker-searchField",function(e){n(e)}),e(this).click(function(e){e.stopPropagation()}),o.on("click",".ms-PeoplePicker-result",function(n){var i=e(this).find(".ms-Persona-primaryText").html(),o=e(this).find(".ms-Persona-secondaryText").html(),d='
            '+i+'
            ',u='
          • '+i+'
            '+o+'
            • ';if(s.hasClass("ms-PeoplePicker--facePile")){r.hasClass("is-active")||r.addClass("is-active"),c.prepend(u),s.removeClass("is-active");var m=s.find(".ms-PeoplePicker-selectedPerson").length;l.html(m)}else a.before(d),s.removeClass("is-active"),t(s)}),s.on("click",".ms-PeoplePicker-personaRemove",function(n){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(t){var n=e(this),s=n.find(".ms-PeoplePicker-searchMorePrimary"),a=s.html();n.addClass("is-searching"),s.html("Searching for “Sen”"),i?i.start():i=new fabric.Spinner(n.get(0)),setTimeout(function(){n.removeClass("is-searching"),s.html(a),i.stop()},3e3)}),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")}),c.on("click",".js-selectedRemove",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-selectedPerson").remove();var n=s.find(".ms-PeoplePicker-selectedPerson").length;l.html(n),0===s.find(".ms-PeoplePicker-selectedPerson").length&&r.removeClass("is-active")})})}}(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 n=function(e){var t=document.getElementById("detailList"),n=t.className+"",i=e.charAt(0).toUpperCase()+e.slice(1),s="ms-PersonaCard-detail"+i;n!=s&&(t.classList.remove(n),t.classList.add(s))},i=e(this).attr("id");n(i);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),function(e){e.fn.Pivot=function(){return this.each(function(){var t=e(this);t.on("click",".ms-Pivot-link",function(t){t.preventDefault(),e(this).siblings(".ms-Pivot-link").removeClass("is-selected"),e(this).addClass("is-selected")})})}}(jQuery);var fabric=fabric||{};fabric.ProgressIndicator=function(e){this.container=e,this.cacheDOM()},fabric.ProgressIndicator.prototype=function(){var e,t,n,i,s,a,o=function(e){a.style.width=Math.round(t*e)+"px"},r=function(t){e=t;var n=e/i;this.setProgressPercent(n)},c=function(e){i=e},l=function(e){n.innerHTML=e},d=function(e){s.innerHTML=e},u=function(){n=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:l,setDescription:d,setProgress:r,setTotal:c,cacheDOM:u}}(),function(e){e.fn.SearchBox=function(){return this.each(function(){var t=!1;e(this).find(".ms-SearchBox-field").on("focus",function(){e(this).siblings(".ms-SearchBox-label").hide(),e(this).parent(".ms-SearchBox").addClass("is-active")}),e(this).find(".ms-SearchBox-closeButton").on("mousedown",function(){t=!0}),e(this).find(".ms-SearchBox-field").on("blur",function(){1==t&&(e(this).val(""),e(this).siblings(".ms-SearchBox-label").show()),e(this).parent(".ms-SearchBox").removeClass("is-active"),0===e(this).val().length&&e(this).siblings(".ms-SearchBox-label").show(),t=!1})})}}(jQuery);var fabric=fabric||{};fabric.Spinner=function(e,t){function n(){u=setInterval(function(){for(var e=y.length;e--;)o(y[e])},P)}function i(){clearInterval(u)}function s(){"sixteen"===v?(f=k,h=16):(f=g,h=8),d(),a(),n()}function a(){for(var e,t=h;t--;)for(e=y.length;e--;)o(y[e])}function o(e){var t;e.j
            +
            + + diff --git a/dist/samples/Components/Pivot/Pivot.css b/dist/samples/Components/Pivot/Pivot.css new file mode 100644 index 000000000..fcfd1d404 --- /dev/null +++ b/dist/samples/Components/Pivot/Pivot.css @@ -0,0 +1,131 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Pivot { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 30px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 27px; + margin-right: 15px; +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:active { + color: #0078d7; +} + +.ms-Pivot-link.is-selected { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active { + color: #0078d7 !important; +} + +.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 { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +} + +.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 WP Semibold', 'Segoe UI', 'Segoe WP', 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..9c9ae6514 --- /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{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:30px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:15px;line-height:27px;margin-right:15px}.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active{color:#0078d7}.ms-Pivot-link.is-selected{color:#0078d7;font-family:'Segoe UI Semibold WestEuropean','Segoe UI Semibold','Segoe WP Semibold','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7!important}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link,.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}.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}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;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 WP Semibold','Segoe UI','Segoe WP',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..7d2cb74ba --- /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
              • +
            • + +
              • +
            +
            +
            + + diff --git a/dist/samples/Components/Pivot/jquery.Pivot.js b/dist/samples/Components/Pivot/jquery.Pivot.js new file mode 100644 index 000000000..8a7ab24b8 --- /dev/null +++ b/dist/samples/Components/Pivot/jquery.Pivot.js @@ -0,0 +1,29 @@ +// 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(); + $(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..f589777e7 --- /dev/null +++ b/dist/samples/Components/ProgressIndicator/ProgressIndicator.css @@ -0,0 +1,46 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-ProgressIndicator-itemName { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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', 'Segoe WP', 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; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: #0078d7; +} diff --git a/dist/samples/Components/ProgressIndicator/ProgressIndicator.js b/dist/samples/Components/ProgressIndicator/ProgressIndicator.js new file mode 100644 index 000000000..fe6e8ddb3 --- /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..f78b15ecf --- /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-itemDescription,.ms-ProgressIndicator-itemName{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea}.ms-ProgressIndicator-progressBar{position:absolute;height:2px;background-color:#0078d7} \ 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..5eb20f956 --- /dev/null +++ b/dist/samples/Components/ProgressIndicator/index.html @@ -0,0 +1,116 @@ + + + + + + + + Component ProgressIndicator + + + + + + + + + + + + + + + +

            ProgressIndicator

            +
            + + +
            +
            Example.jpg
            +
            +
            +
            +
            +
            My Progress Description
            +
            + +
            + + diff --git a/dist/samples/Components/SearchBox/Jquery.SearchBox.js b/dist/samples/Components/SearchBox/Jquery.SearchBox.js new file mode 100644 index 000000000..b4037f641 --- /dev/null +++ b/dist/samples/Components/SearchBox/Jquery.SearchBox.js @@ -0,0 +1,58 @@ +// 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; + + /** SearchBox focus - hide label and show cancel button */ + $(this).find('.ms-SearchBox-field').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'); + }); + + + // 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 == true ) { + $(this).val(''); + $(this).siblings('.ms-SearchBox-label').show(); + } + + // Remove is-active class - hides cancel button + $(this).parent('.ms-SearchBox').removeClass('is-active'); + + /** 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..01378cefe --- /dev/null +++ b/dist/samples/Components/SearchBox/SearchBox.css @@ -0,0 +1,124 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.ms-SearchBox { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 10px; + width: 180px; +} + +.ms-SearchBox-field:hover { + border-color: #0078d7; + background-color: #c7e0f4; +} + +.ms-SearchBox-field:hover + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field:hover + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #c7e0f4; +} + +.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; +} + +.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..f00e653ed --- /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,.ms-SearchBox{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}.ms-Label{color:#333;font-size:12px;margin:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-SearchBox,.ms-SearchBox-field{box-sizing:border-box;box-shadow:none;font-size:14px}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-SearchBox{color:#333;margin:0 0 10px;padding:0;position:relative;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:transparent solid 1px}.ms-SearchBox-field{margin:0;border:1px solid #71afe5;border-radius:0;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px}.ms-SearchBox-field:focus,.ms-SearchBox-field:hover{border-color:#0078d7;background-color:#c7e0f4}.ms-SearchBox-field:hover+.ms-SearchBox-label{color:#000}.ms-SearchBox-field:hover+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px}.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}.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..4952d624f --- /dev/null +++ b/dist/samples/Components/SearchBox/index.html @@ -0,0 +1,113 @@ + + + + + + + + Component SearchBox + + + + + + + + + + + + + + + +

            SearchBox

            +
            + + +
            + + + +
            + +
            + + diff --git a/dist/samples/Components/Spinner/Spinner.css b/dist/samples/Components/Spinner/Spinner.css new file mode 100644 index 000000000..964fa9f90 --- /dev/null +++ b/dist/samples/Components/Spinner/Spinner.css @@ -0,0 +1,17 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Spinner { + position: relative; + width: 32px; + height: 32px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 999px; + background-color: black; + opacity: 0; +} diff --git a/dist/samples/Components/Spinner/Spinner.js b/dist/samples/Components/Spinner/Spinner.js new file mode 100644 index 000000000..7c92e3b8f --- /dev/null +++ b/dist/samples/Components/Spinner/Spinner.js @@ -0,0 +1,148 @@ +// 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. + * @param {string} type - The type of spinner. Set this property to "sixteen" for sixteen dot version. The default is eight. + */ + +fabric.Spinner = function(target, spinnerType) { + + var _target = target; + var _spinnerType = spinnerType || "eight"; + var eightSize = 0.18; + var sixteenSize = 0.1; + var circleObjects = []; + var animationSpeed = 100; + var interval; + var spinner; + var numCircles; + var offsetSize; + + /** + * @function start - starts or restarts the animation sequence + * @memberOf fabric.Spinner + */ + function start() { + 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() { + if(_spinnerType === "sixteen") { + offsetSize = sixteenSize; + numCircles = 16; + } else { + offsetSize = eightSize; + numCircles = 8; + } + _createCirclesAndArrange(); + _initializeOpacities(); + start(); + } + + function _initializeOpacities() { + var i = numCircles, j; + while(i--) { + j = circleObjects.length; + while(j--) { + _fade(circleObjects[j]); + } + } + } + + function _fade(circleObject) { + var opacity; + if(circleObject.j < numCircles) { + if(Math.floor(circleObject.j / (numCircles / 2))) { + opacity = _getOpacity(circleObject.element) - 2 / numCircles; + } else{ + opacity = _getOpacity(circleObject.element) + 2 / numCircles; + } + } else { + circleObject.j = 0; + opacity = 2/ numCircles; + } + _setOpacity(circleObject.element, opacity); + circleObject.j++; + } + + 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'); + var parentWidth = parseInt(window.getComputedStyle(spinner).getPropertyValue("width"), 10); + circle.className = "ms-Spinner-circle"; + circle.style.width = circle.style.height = parentWidth * offsetSize + "px"; + return circle; + } + + function _createCirclesAndArrange() { + //for backwards compatibility + if (_target.className !== "ms-Spinner") { + spinner = document.createElement("div"); + spinner.className = "ms-Spinner"; + _target.appendChild(spinner); + } else { + spinner = _target; + } + + var width = spinner.clientWidth; + var height = spinner.clientHeight; + var angle = 0; + var offset = width * offsetSize; + var step = (2 * Math.PI) / numCircles; + var i = numCircles; + var circleObject; + var radius = (width- offset) * 0.5; + while(i--) { + var circle = _createCircle(); + var x = Math.round(width * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5; + var y = Math.round(height * 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); + } + } + + _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..c68b750d4 --- /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;width:32px;height:32px}.ms-Spinner-circle{position:absolute;border-radius:999px;background-color:#000;opacity:0} \ 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..92036f4d9 --- /dev/null +++ b/dist/samples/Components/Spinner/index.html @@ -0,0 +1,109 @@ + + + + + + + + Component Spinner + + + + + + + + + + + + + + + +

            Spinner

            +
            + + +
            + +
            + + diff --git a/dist/samples/Components/Table/Table.css b/dist/samples/Components/Table/Table.css new file mode 100644 index 000000000..75f1d5359 --- /dev/null +++ b/dist/samples/Components/Table/Table.css @@ -0,0 +1,113 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Table { + display: table; + width: 100%; +} + +.ms-Table-row { + display: table-row; + height: 30px; + line-height: 30px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table-row.is-selected { + background-color: #c7e0f4; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.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-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table-row:first-child { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table-row:first-child .ms-Table-cell, +.ms-Table-row:first-child .ms-Table-rowCheck { + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-row:first-child .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; +} + +.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..8ee52b240 --- /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%}.ms-Table-row{display:table-row;height:30px;line-height:30px;font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table-row:first-child .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';position:absolute;left:4px;top:9px}.ms-Table-row:hover{background-color:#f4f4f4;cursor:pointer;outline:transparent solid 1px}.ms-Table-row.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after{display:inline-block;font-family:Office365Icons;color:#fff;font-size:12px}.ms-Table-cell{display:table-cell;padding:0 10px}.ms-Table-row:first-child{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-row:first-child .ms-Table-cell,.ms-Table-row:first-child .ms-Table-rowCheck{border-bottom:1px solid #eaeaea}.ms-Table-row:first-child .ms-Table-rowCheck:after{display:inline-block;font-family:Office365Icons;color:#a6a6a6;font-size:12px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative}.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:0 0}.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..729e8e771 --- /dev/null +++ b/dist/samples/Components/Table/index.html @@ -0,0 +1,152 @@ + + + + + + + + Component Table + + + + + + + + + + + + + + + +

            Table

            +
            + + +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            + + File name + Location + Modified + Type +
            +
            + +
            + + diff --git a/dist/samples/Components/TextField/Jquery.TextField.js b/dist/samples/Components/TextField/Jquery.TextField.js new file mode 100644 index 000000000..bcf584613 --- /dev/null +++ b/dist/samples/Components/TextField/Jquery.TextField.js @@ -0,0 +1,51 @@ +// 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(); + }); + + /** 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..fb2eefad1 --- /dev/null +++ b/dist/samples/Components/TextField/TextField.css @@ -0,0 +1,198 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + 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; +} + +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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 !important; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 1px solid transparent; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +.ms-TextField-field:hover, +.ms-TextField-field:focus { + outline: 1px solid transparent; +} + +.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 WP Semilight', 'Segoe UI', 'Segoe WP', 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; +} + +.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; +} + +.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: none; + 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 { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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..58c722dc5 --- /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,.ms-TextField{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-weight:400}.ms-Label,.ms-TextField,.ms-TextField-field{box-sizing:border-box;box-shadow:none}.ms-TextField-field,.ms-TextField-field:focus,.ms-TextField-field:hover{outline:transparent solid 1px}.ms-Label{color:#333;font-size:12px;margin:0;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-TextField{color:#333;font-size:14px;margin:0 0 8px;padding:0}.ms-TextField-field,.ms-TextField.ms-TextField--placeholder .ms-Label{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}.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!important}.ms-TextField-field{margin:0;border:1px solid #c8c8c8;border-radius:0;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}.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-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,.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}.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:none;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{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',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..76445944a --- /dev/null +++ b/dist/samples/Components/TextField/index.html @@ -0,0 +1,138 @@ + + + + + + + + Component TextField + + + + + + + + + + + + + + + +

            TextField

            +
            + + +
            + + + This should be your first and last name. +
            + + + +
            + + +
            + + + +
            + + +
            +
            + + +
            + + + +
            + + +
            + +
            + + diff --git a/dist/samples/Components/Toggle/Toggle.css b/dist/samples/Components/Toggle/Toggle.css new file mode 100644 index 000000000..c300d616c --- /dev/null +++ b/dist/samples/Components/Toggle/Toggle.css @@ -0,0 +1,164 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Fabric 1.1.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Toggle { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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-left: 62px; + top: -2px; + 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 !important; +} + +.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; +} + +.ms-Toggle-input { + display: none; +} + +.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: relative; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input:not(: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; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:before { + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:hover { + background-color: #eaeaea; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:not(:checked) + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input:not(:checked) + .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; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:hover { + background-color: #005a9e; +} + +.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; +} + +.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..b3cd3df1f --- /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-Toggle,.ms-Toggle-field{position:relative;box-sizing:border-box}.ms-Toggle{color:#333;font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;margin:0 0 26px;padding:0;box-shadow:none;display:block}.ms-Toggle .ms-Label{position:relative;padding-left:62px;top:-2px;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!important}.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}.ms-Toggle-input{display:none;position:relative}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{display:inline-block;width:57px;height:20px;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input:checked+.ms-Toggle-field:before,.ms-Toggle-input:not(:checked)+.ms-Toggle-field:before{position:absolute;box-sizing:content-box;content:'';top:-2.5px;width:12px;height:20px;outline:transparent solid 2px}.ms-Toggle-input:not(:checked)+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input:not(:checked)+.ms-Toggle-field:before{display:block;left:-2.5px;background-color:#767676;border-right:2.5px solid #fff}.ms-Toggle-input:not(:checked)+.ms-Toggle-field:hover{background-color:#eaeaea}.ms-Toggle-input:checked+.ms-Toggle-field,.ms-Toggle-input:not(:checked)+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:not(:checked)+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input:not(:checked)+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field:before{display:block;right:-2.5px;background-color:#767676;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:hover{background-color:#005a9e}.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}.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..255628c1c --- /dev/null +++ b/dist/samples/Components/Toggle/index.html @@ -0,0 +1,127 @@ + + + + + + + + Component Toggle + + + + + + + + + + + + + + + +

            Toggle

            +
            + + +
            + Let apps use my location + + +
            + + + +
            + Let apps use my location + + +
            + +
            + + diff --git a/dist/samples/Form/css/Form.css b/dist/samples/Form/css/Form.css new file mode 100644 index 000000000..56c643e38 --- /dev/null +++ b/dist/samples/Form/css/Form.css @@ -0,0 +1,123 @@ +.ms-Overlay--none { + visibility: hidden; +} + +html, +body { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + font-size: inherit; + padding: 0; + margin: 0; +} + +a { + color: #0078d7; + cursor: pointer; + font-size: inherit; + text-decoration: none; +} + +a:hover, +a:focus { + color: #004578; +} + +a:active { + color: #0078d7; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + font-weight: normal; +} + +h1 { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', 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 WP Light', 'Segoe UI', 'Segoe WP', 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 WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 17px; + font-weight: normal; + color: inherit; +} + +h4 { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + color: inherit; +} + +h5 { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + color: inherit; +} + +h6 { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', 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..cf290159b --- /dev/null +++ b/dist/samples/Form/css/Form.min.css @@ -0,0 +1 @@ +a,body,html{font-size:inherit}a,a:active{color:#0078d7}body,h1,h2,h3,h4,h5,h6,html{margin:0;padding:0}h1,h2{font-family:'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}body,h4,h5,h6,html{font-family:'Segoe UI Regular WestEuropean','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:400;color:inherit}.ms-Overlay--none{visibility:hidden}body,html{color:#333;font-weight:400}a{cursor:pointer;text-decoration:none}a:focus,a:hover{color:#004578}h1{font-size:28px;letter-spacing:-1px}h2{font-size:21px}h3{font-family:'Segoe UI Semilight WestEuropean','Segoe UI Semilight','Segoe WP Semilight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;font-size:17px}h4{font-size:14px}h5{font-size:12px}h6{font-size:11px}.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..a95eec69e --- /dev/null +++ b/dist/samples/Form/index.html @@ -0,0 +1,191 @@ + + + + + + + + Example Form + + + + + + + + + + + + + +
            +
            +
            +
            +

            Nod Publishers

            +

            Check your text.

            +
            +
            +
            + +
            +
            +
            +

            Create an account to start using Nod.

            +
            + +
            +
            + + + Can't be changed after sign-up. Why not? +
            + +
            + + +
            + +
            + + +
            + + +
            +
            + +
            +
            + + +
            +
            + + +
            +
            + +
            + + + We recommend not using your business address. Why not? +
            + +
            + + + We will use this to create your user ID. +
            + +
            + + +
            + +
            + + +
            +
            + + +
            + +
            + + +
            + +
            + + +
            + +
            + + +
            + + +
            +
            + + + +
            +
            + + +
            +
            + Go to today +
            +
            +
            + + +
            +
            +
            +
            + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
            +
            +
            +
            + + +
            +
            +
            + +
            + + + You use this to sign in. +
            + +
            + + + At least 8 characters. A mix of letters and numbers is best. +
            + +
            + + +
            + +
            + +
            +
            +
            +
            +
            + + + + + \ No newline at end of file diff --git a/dist/samples/Form/less/Form.less b/dist/samples/Form/less/Form.less new file mode 100644 index 000000000..82f7bf521 --- /dev/null +++ b/dist/samples/Form/less/Form.less @@ -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 (reference) '../../../less/Fabric.less'; +@import (reference) '../../../less/Fabric.Components.less'; + +html, +body { + .ms-font-m; + font-size: inherit; + padding: 0; + margin: 0; +} + +a { + .ms-Link; + font-size: inherit; + text-decoration: none; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + font-weight: normal; +} + +h1 { + .ms-font-xxl; + color: inherit; + letter-spacing: -1px; +} + +h2 { + .ms-font-xl; + color: inherit; +} + +h3 { + .ms-font-l; + color: inherit; +} + +h4 { + .ms-font-m; + color: inherit; +} + +h5 { + .ms-font-s; + color: inherit; +} + +h6 { + .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..c3505c889 --- /dev/null +++ b/dist/samples/Icons/index.html @@ -0,0 +1,425 @@ + + + + + + Fabric Icons + + + + + + + + +
            +
            +

            Icons

            +

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

            + + +
            + +
            +
              +
            • ms-Icon--space
              • +
            • ms-Icon--circleEmpty
              • +
            • ms-Icon--circleFill
              • +
            • ms-Icon--placeholder
              • +
            • ms-Icon--star
              • +
            • ms-Icon--plus
              • +
            • ms-Icon--minus
              • +
            • ms-Icon--question
              • +
            • ms-Icon--exclamation
              • +
            • ms-Icon--person
              • +
            • ms-Icon--mail
              • +
            • ms-Icon--infoCircle
              • +
            • ms-Icon--alert
              • +
            • ms-Icon--xCircle
              • +
            • ms-Icon--mailOpen
              • +
            • ms-Icon--people
              • +
            • ms-Icon--bell
              • +
            • ms-Icon--calendar
              • +
            • ms-Icon--scheduling
              • +
            • ms-Icon--event
              • +
            • ms-Icon--folder
              • +
            • ms-Icon--documents
              • +
            • ms-Icon--chat
              • +
            • ms-Icon--sites
              • +
            • ms-Icon--listBullets
              • +
            • ms-Icon--calendarWeek
              • +
            • ms-Icon--calendarWorkWeek
              • +
            • ms-Icon--calendarDay
              • +
            • ms-Icon--folderMove
              • +
            • ms-Icon--panel
              • +
            • ms-Icon--popout
              • +
            • ms-Icon--menu
              • +
            • ms-Icon--home
              • +
            • ms-Icon--favorites
              • +
            • ms-Icon--phone
              • +
            • ms-Icon--mailSend
              • +
            • ms-Icon--save
              • +
            • ms-Icon--trash
              • +
            • ms-Icon--pencil
              • +
            • ms-Icon--flag
              • +
            • ms-Icon--reply
              • +
            • ms-Icon--miniatures
              • +
            • ms-Icon--voicemail
              • +
            • ms-Icon--play
              • +
            • ms-Icon--pause
              • +
            • ms-Icon--onlineAdd
              • +
            • ms-Icon--onlineJoin
              • +
            • ms-Icon--replyAll
              • +
            • ms-Icon--attachment
              • +
            • ms-Icon--drm
              • +
            • ms-Icon--pinDown
              • +
            • ms-Icon--refresh
              • +
            • ms-Icon--gear
              • +
            • ms-Icon--smiley
              • +
            • ms-Icon--info
              • +
            • ms-Icon--lock
              • +
            • ms-Icon--search
              • +
            • ms-Icon--questionReverse
              • +
            • ms-Icon--notRecurring
              • +
            • ms-Icon--tasks
              • +
            • ms-Icon--check
              • +
            • ms-Icon--x
              • +
            • ms-Icon--thumbDown
              • +
            • ms-Icon--thumbUp
              • +
            • ms-Icon--ellipsis
              • +
            • ms-Icon--dot
              • +
            • ms-Icon--arrowUp
              • +
            • ms-Icon--arrowDown
              • +
            • ms-Icon--arrowLeft
              • +
            • ms-Icon--arrowRight
              • +
            • ms-Icon--download
              • +
            • ms-Icon--directions
              • +
            • ms-Icon--microphone
              • +
            • ms-Icon--caretUp
              • +
            • ms-Icon--caretDown
              • +
            • 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--key
              • +
            • ms-Icon--tile
              • +
            • ms-Icon--taskRecurring
              • +
            • ms-Icon--starEmpty
              • +
            • ms-Icon--upload
              • +
            • ms-Icon--wrench
              • +
            • ms-Icon--share
              • +
            • ms-Icon--documentReply
              • +
            • ms-Icon--documentForward
              • +
            • ms-Icon--partner
              • +
            • ms-Icon--reactivate
              • +
            • ms-Icon--sort
              • +
            • ms-Icon--personAdd
              • +
            • ms-Icon--chevronUp
              • +
            • ms-Icon--chevronDown
              • +
            • ms-Icon--chevronLeft
              • +
            • ms-Icon--chevronRight
              • +
            • ms-Icon--peopleAdd
              • +
            • ms-Icon--newsfeed
              • +
            • ms-Icon--notebook
              • +
            • ms-Icon--link
              • +
            • ms-Icon--chevronsUp
              • +
            • ms-Icon--chevronsDown
              • +
            • ms-Icon--chevronsLeft
              • +
            • ms-Icon--chevronsRight
              • +
            • ms-Icon--clutter
              • +
            • ms-Icon--subscribe
              • +
            • ms-Icon--unsubscribe
              • +
            • ms-Icon--personRemove
              • +
            • ms-Icon--receiptForward
              • +
            • ms-Icon--receiptReply
              • +
            • ms-Icon--receiptCheck
              • +
            • ms-Icon--peopleRemove
              • +
            • ms-Icon--merge
              • +
            • ms-Icon--split
              • +
            • ms-Icon--eventCancel
              • +
            • ms-Icon--eventShare
              • +
            • ms-Icon--today
              • +
            • ms-Icon--oofReply
              • +
            • ms-Icon--voicemailReply
              • +
            • ms-Icon--voicemailForward
              • +
            • ms-Icon--ribbon
              • +
            • ms-Icon--contact
              • +
            • ms-Icon--eye
              • +
            • ms-Icon--glasses
              • +
            • ms-Icon--print
              • +
            • ms-Icon--room
              • +
            • ms-Icon--post
              • +
            • ms-Icon--toggle
              • +
            • ms-Icon--touch
              • +
            • ms-Icon--clock
              • +
            • ms-Icon--fax
              • +
            • ms-Icon--lightning
              • +
            • ms-Icon--dialpad
              • +
            • ms-Icon--phoneTransfer
              • +
            • ms-Icon--phoneAdd
              • +
            • ms-Icon--late
              • +
            • ms-Icon--chatAdd
              • +
            • ms-Icon--conflict
              • +
            • ms-Icon--navigate
              • +
            • ms-Icon--camera
              • +
            • ms-Icon--filter
              • +
            • ms-Icon--fullscreen
              • +
            • ms-Icon--new
              • +
            • ms-Icon--mailEmpty
              • +
            • ms-Icon--editBox
              • +
            • ms-Icon--waffle
              • +
            • ms-Icon--work
              • +
            • ms-Icon--eventRecurring
              • +
            • ms-Icon--cart
              • +
            • ms-Icon--socialListening
              • +
            • ms-Icon--mapMarker
              • +
            • ms-Icon--org
              • +
            • ms-Icon--replyAlt
              • +
            • ms-Icon--replyAllAlt
              • +
            • ms-Icon--eventInfo
              • +
            • ms-Icon--group
              • +
            • ms-Icon--money
              • +
            • ms-Icon--graph
              • +
            • ms-Icon--noteEdit
              • +
            • ms-Icon--dashboard
              • +
            • ms-Icon--mailEdit
              • +
            • ms-Icon--pinLeft
              • +
            • ms-Icon--heart
              • +
            • ms-Icon--heartEmpty
              • +
            • ms-Icon--picture
              • +
            • ms-Icon--cake
              • +
            • ms-Icon--books
              • +
            • ms-Icon--chart
              • +
            • ms-Icon--video
              • +
            • ms-Icon--soccer
              • +
            • ms-Icon--meal
              • +
            • ms-Icon--balloon
              • +
            • ms-Icon--cat
              • +
            • ms-Icon--dog
              • +
            • ms-Icon--bag
              • +
            • ms-Icon--music
              • +
            • ms-Icon--stopwatch
              • +
            • ms-Icon--coffee
              • +
            • ms-Icon--briefcase
              • +
            • ms-Icon--pill
              • +
            • ms-Icon--trophy
              • +
            • ms-Icon--firstAid
              • +
            • ms-Icon--plane
              • +
            • ms-Icon--page
              • +
            • ms-Icon--car
              • +
            • ms-Icon--dogAlt
              • +
            • ms-Icon--document
              • +
            • ms-Icon--metadata
              • +
            • ms-Icon--pointItem
              • +
            • ms-Icon--text
              • +
            • ms-Icon--fieldText
              • +
            • ms-Icon--fieldNumber
              • +
            • ms-Icon--dropdown
              • +
            • ms-Icon--radioButton
              • +
            • ms-Icon--checkbox
              • +
            • ms-Icon--story
              • +
            • ms-Icon--bold
              • +
            • ms-Icon--italic
              • +
            • ms-Icon--underline
              • +
            • ms-Icon--quote
              • +
            • ms-Icon--styleRemove
              • +
            • ms-Icon--pictureAdd
              • +
            • ms-Icon--pictureRemove
              • +
            • ms-Icon--desktop
              • +
            • ms-Icon--tablet
              • +
            • ms-Icon--mobile
              • +
            • ms-Icon--table
              • +
            • ms-Icon--hide
              • +
            • ms-Icon--shield
              • +
            • ms-Icon--header
              • +
            • ms-Icon--paint
              • +
            • ms-Icon--support
              • +
            • ms-Icon--settings
              • +
            • ms-Icon--creditCard
              • +
            • ms-Icon--reload
              • +
            • ms-Icon--peopleSecurity
              • +
            • ms-Icon--fieldTextBox
              • +
            • ms-Icon--multiChoice
              • +
            • ms-Icon--fieldMail
              • +
            • ms-Icon--contactForm
              • +
            • ms-Icon--circleHalfFilled
              • +
            • ms-Icon--documentPDF
              • +
            • ms-Icon--bookmark
              • +
            • ms-Icon--circleUnfilled
              • +
            • ms-Icon--circleFilled
              • +
            • ms-Icon--textBox
              • +
            • ms-Icon--drop
              • +
            • ms-Icon--sun
              • +
            • ms-Icon--lifesaver
              • +
            • ms-Icon--lifesaverLock
              • +
            • ms-Icon--mailUnread
              • +
            • ms-Icon--mailRead
              • +
            • ms-Icon--inboxCheck
              • +
            • ms-Icon--folderSearch
              • +
            • ms-Icon--collapse
              • +
            • ms-Icon--expand
              • +
            • ms-Icon--ascending
              • +
            • ms-Icon--descending
              • +
            • ms-Icon--filterClear
              • +
            • ms-Icon--checkboxEmpty
              • +
            • ms-Icon--checkboxMixed
              • +
            • ms-Icon--boards
              • +
            • ms-Icon--checkboxCheck
              • +
            • ms-Icon--frowny
              • +
            • ms-Icon--lightBulb
              • +
            • ms-Icon--globe
              • +
            • ms-Icon--deviceWipe
              • +
            • ms-Icon--listCheck
              • +
            • ms-Icon--listGroup
              • +
            • ms-Icon--timeline
              • +
            • ms-Icon--fontIncrease
              • +
            • ms-Icon--fontDecrease
              • +
            • ms-Icon--fontColor
              • +
            • ms-Icon--mailCheck
              • +
            • ms-Icon--mailDown
              • +
            • ms-Icon--listCheckbox
              • +
            • ms-Icon--sunAdd
              • +
            • ms-Icon--sunQuestion
              • +
            • ms-Icon--chevronThinUp
              • +
            • ms-Icon--chevronThinDown
              • +
            • ms-Icon--chevronThinLeft
              • +
            • ms-Icon--chevronThinRight
              • +
            • ms-Icon--chevronThickUp
              • +
            • ms-Icon--chevronThickDown
              • +
            • ms-Icon--chevronThickLeft
              • +
            • ms-Icon--chevronThickRight
              • +
            • ms-Icon--linkRemove
              • +
            • ms-Icon--alertOutline
              • +
            • ms-Icon--documentLandscape
              • +
            • ms-Icon--documentAdd
              • +
            • ms-Icon--toggleMiddle
              • +
            • ms-Icon--embed
              • +
            • ms-Icon--listNumbered
              • +
            • ms-Icon--peopleCheck
              • +
            • ms-Icon--caretUpOutline
              • +
            • ms-Icon--caretDownOutline
              • +
            • ms-Icon--caretLeftOutline
              • +
            • ms-Icon--caretRightOutline
              • +
            • ms-Icon--mailSync
              • +
            • ms-Icon--mailError
              • +
            • ms-Icon--mailPause
              • +
            • ms-Icon--peopleSync
              • +
            • ms-Icon--peopleError
              • +
            • ms-Icon--peoplePause
              • +
            • ms-Icon--circleBall
              • +
            • ms-Icon--circleBalloons
              • +
            • ms-Icon--circleCar
              • +
            • ms-Icon--circleCat
              • +
            • ms-Icon--circleCoffee
              • +
            • ms-Icon--circleDog
              • +
            • ms-Icon--circleLightning
              • +
            • ms-Icon--circlePill
              • +
            • ms-Icon--circlePlane
              • +
            • ms-Icon--circlePoodle
              • +
            • ms-Icon--checkPeople
              • +
            • ms-Icon--documentSearch
              • +
            • ms-Icon--sortLines
              • +
            • ms-Icon--calendarPublic
              • +
            • ms-Icon--contactPublic
              • +
            • ms-Icon--classNotebook
              • +
            • ms-Icon--triangleUp
              • +
            • ms-Icon--triangleRight
              • +
            • ms-Icon--triangleDown
              • +
            • ms-Icon--triangleLeft
              • +
            • ms-Icon--triangleEmptyUp
              • +
            • ms-Icon--triangleEmptyRight
              • +
            • ms-Icon--triangleEmptyDown
              • +
            • ms-Icon--triangleEmptyLeft
              • +
            • ms-Icon--filePDF
              • +
            • ms-Icon--fileImage
              • +
            • ms-Icon--fileDocument
              • +
            • ms-Icon--listGroup2
              • +
            • ms-Icon--copy
              • +
            • ms-Icon--creditCardOutline
              • +
            • ms-Icon--mailPublic
              • +
            • ms-Icon--folderPublic
              • +
            • ms-Icon--teamwork
              • +
            • ms-Icon--move
              • +
            • ms-Icon--classroom
              • +
            • ms-Icon--menu2
              • +
            • ms-Icon--plus2
              • +
            • ms-Icon--tag
              • +
            • ms-Icon--arrowUp2
              • +
            • ms-Icon--arrowDown2
              • +
            • ms-Icon--circlePlus
              • +
            • ms-Icon--circleInfo
              • +
            • ms-Icon--section
              • +
            • ms-Icon--sections
              • +
            • ms-Icon--at
              • +
            • ms-Icon--arrowUpRight
              • +
            • ms-Icon--arrowDownRight
              • +
            • ms-Icon--arrowDownLeft
              • +
            • ms-Icon--arrowUpLeft
              • +
            • ms-Icon--bundle
              • +
            • ms-Icon--pictureEdit
              • +
            • ms-Icon--protectionCenter
              • +
            • ms-Icon--alert2
              • +
            +
            +
            + + + 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 Videos

            +
            +
            +
            +
            + + Azure Media Services Overview + +
            +
            + + Dynamically procrastinate B2C users after installed base benefits + 10:28 + +
            +
            +
            +
            + + Azure Media Services Overview + +
            +
            + + Dramatically maintain clicks-and-mortar solutions + 3:49 + +
            +
            +
            +
            + + Azure Media Services Overview + +
            +
            + + Seamlessly visualize quality intellectual capital + 1:56 + +
            +
            +
            +
            +
            +
            + + +
            +
            +
            +
              +
            • Popular
              • +
            • All Videos
              • +
            • My Videos
              • + +
            +
            + +
            +
            +
            +
            +
            + + Video Title + 3:49 + +
            +
            + Dramatically maintain clicks-and-mortar solutions + 946 views +
            +
            +
            + +
            +
            +
            + + Video Title + 8:35 + +
            +
            + Dynamically innovate resource-leveling customer service + 92 views +
            +
            +
            + +
            +
            +
            + + Video Title + 10:28 + +
            +
            + Efficiently procrastinate B2C users after installed base benefits + 499 views +
            +
            +
            + +
            +
            +
            + + Video Title + 6:32 + +
            +
            + Completely synergize resource sucking relationships + 378 views +
            +
            +
            + +
            +
            +
            + + Video Title + 10:45 + +
            +
            + Seamlessly visualize quality intellectual capital + 345 views +
            +
            +
            + +
            +
            +
            + + Video Title + 2:59 + +
            +
            + Synergizing across organizations + 66 views +
            +
            +
            +
            +
            +
            +
            +
            +
            +
            + + + + + \ No newline at end of file diff --git a/dist/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 + + + + + + + + + + + + +
            +
            + +
            + +
            +
            + +
            + +
            +
            +
            +
            + Technical Presentations + Employee Interviews + Executive Briefings + Research Insights + Acquisitions and Mergers Overview + Web Tech Talks + Brown Bag Series + Sales Reports + Growth Initiatives + Holding Projetions + Customer Trends +
            +
            +
            +
            + + + + + \ No newline at end of file diff --git a/dist/samples/VideoPortal/css/VideoPortal.css b/dist/samples/VideoPortal/css/VideoPortal.css new file mode 100644 index 000000000..528d54fd3 --- /dev/null +++ b/dist/samples/VideoPortal/css/VideoPortal.css @@ -0,0 +1,469 @@ +.ms-Overlay--none { + visibility: hidden; +} + +.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', 'Segoe WP', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + padding: 0; + margin: 0; +} + +a { + color: #0078d7; + cursor: pointer; + font-size: inherit; + text-decoration: none; +} + +a:hover, +a:focus { + color: #004578; +} + +a:active { + color: #0078d7; +} + +.VideoPortal-content { + position: relative; +} + +.VideoPortal-navBar { + display: block; + top: 0; + width: 100%; + z-index: 101; + height: 40px; +} + +.VideoPortal-page { + overflow: visible; + position: relative; + padding-bottom: 50px; +} + +.ms-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..305250861 --- /dev/null +++ b/dist/samples/VideoPortal/css/VideoPortal.min.css @@ -0,0 +1 @@ +a,a:active{color:#0078d7}.ms-NavBar-link,a{text-decoration:none}.VideoPortal-content,.VideoPortal-page,.u-contentCenter{position:relative}.SpotLight-thumbImg,.VideoList-thumbImg{min-width:100%;max-width:100%}.ms-Overlay--none{visibility:hidden}.u-contentCenter{margin:0 auto;max-width:100%;transition:167ms 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','Segoe WP',Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;padding:0;margin:0}a{cursor:pointer;font-size:inherit}a:focus,a:hover{color:#004578}.VideoPortal-navBar{display:block;top:0;width:100%;z-index:101;height:40px}.VideoPortal-page{overflow:visible;padding-bottom:50px}.ms-NavBar.is-open .ms-NavBar-items{z-index:1}.ms-NavBar-link{color:#333}@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{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}.PlayerPage-header,.PlayerPage-info{margin-bottom:20px}.SpotLight-thumb{padding:10px}.SpotLight-text{position:absolute;right:10px;bottom:13px;left:10px;overflow:hidden;color:#fff;background:rgba(0,0,0,.4);padding:5px}.PlayerPage-channelText,.PlayerPage-titleSeparator{bottom:2px;position:relative}.SpotLight-videoLength,.SpotLight-videoTitle{color:#fff;display:block}.ChannelGroup-channel:hover,.PlayerPage-channelLink:hover{color:#000}@media (min-width:640px){.SpotLightList{overflow:hidden}.SpotLight-container{padding:10px 0}}.HomePage-content{padding:20px 10px 10px}.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%;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%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:167ms 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-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}.PlayerPage-channelLink{font-size:17px;padding-left:10px;border-width:4px;border-left-style:solid}.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){.SpotLight-title{text-indent:8px}.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:20px 10px 10px}.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}@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 + + + + + + + + + + + + + +
            +
            + +
            + +
            +
            + +
            + +
            +
            +
            + +
            +
            + +
            +
            +
            +
            + + Azure Media Services Overview + +
            +
            + + Dynamically procrastinate B2C users after installed base benefits + 10:28 + +
            +
            +
            +
            + + Azure Media Services Overview + +
            +
            + + Dramatically maintain clicks-and-mortar solutions + 3:49 + +
            +
            +
            +
            + + Azure Media Services Overview + +
            +
            + + Seamlessly visualize quality intellectual capital + 1:56 + +
            +
            +
            +
            +
            +
            + + +
            +
            + +
            + +
            +

            + + PopularSee all videos + +

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

            + + CommunitySee all videos + +

            + +
            +
            +
            +
            +
            + + Video Title + 3:49 + +
            +
            + Dramatically maintain clicks-and-mortar solutions + 946 views +
            +
            +
            + +
            +
            +
            + + Video Title + 8:35 + +
            +
            + Dynamically innovate resource-leveling customer service + 92 views +
            +
            +
            + +
            +
            +
            + + Video Title + 10:28 + +
            +
            + Efficiently procrastinate B2C users after installed base benefits + 499 views +
            +
            +
            + +
            +
            +
            + + Video Title + 6:32 + +
            +
            + Completely synergize resource sucking relationships + 378 views +
            +
            +
            +
            +
            +
            +
            +
            +
            +
            +
            +
            + + + + + \ No newline at end of file diff --git a/dist/samples/VideoPortal/less/Base.less b/dist/samples/VideoPortal/less/Base.less new file mode 100644 index 000000000..64801e5ee --- /dev/null +++ b/dist/samples/VideoPortal/less/Base.less @@ -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 { + .ms-font-m; + padding: 0; + margin: 0; +} + +a { + .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/less/ChannelPage.less b/dist/samples/VideoPortal/less/ChannelPage.less new file mode 100644 index 000000000..e1125111d --- /dev/null +++ b/dist/samples/VideoPortal/less/ChannelPage.less @@ -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/less/ChannelsPage.less b/dist/samples/VideoPortal/less/ChannelsPage.less new file mode 100644 index 000000000..05d8dd014 --- /dev/null +++ b/dist/samples/VideoPortal/less/ChannelsPage.less @@ -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/less/HomePage.less b/dist/samples/VideoPortal/less/HomePage.less new file mode 100644 index 000000000..a936a063d --- /dev/null +++ b/dist/samples/VideoPortal/less/HomePage.less @@ -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/less/NavBar.less b/dist/samples/VideoPortal/less/NavBar.less new file mode 100644 index 000000000..2fdcab719 --- /dev/null +++ b/dist/samples/VideoPortal/less/NavBar.less @@ -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/less/PlayerPage.less b/dist/samples/VideoPortal/less/PlayerPage.less new file mode 100644 index 000000000..9338edf41 --- /dev/null +++ b/dist/samples/VideoPortal/less/PlayerPage.less @@ -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/less/SpotLight.less b/dist/samples/VideoPortal/less/SpotLight.less new file mode 100644 index 000000000..dbfb40a31 --- /dev/null +++ b/dist/samples/VideoPortal/less/SpotLight.less @@ -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/less/Utilities.less b/dist/samples/VideoPortal/less/Utilities.less new file mode 100644 index 000000000..236d6f2f1 --- /dev/null +++ b/dist/samples/VideoPortal/less/Utilities.less @@ -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/less/VideoListItem.less b/dist/samples/VideoPortal/less/VideoListItem.less new file mode 100644 index 000000000..8e58cb46a --- /dev/null +++ b/dist/samples/VideoPortal/less/VideoListItem.less @@ -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/less/VideoPortal.less b/dist/samples/VideoPortal/less/VideoPortal.less new file mode 100644 index 000000000..a4f377f34 --- /dev/null +++ b/dist/samples/VideoPortal/less/VideoPortal.less @@ -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 (reference) '../../../less/Fabric.less'; +@import (reference) '../../../less/Fabric.Components.less'; + +// Import all LESS +@import 'Utilities.less'; +@import 'Base.less'; +@import 'NavBar.less'; +@import 'VideoListItem.less'; +@import 'SpotLight.less'; +@import 'HomePage.less'; +@import 'PlayerPage.less'; +@import 'ChannelPage.less'; +@import 'ChannelsPage.less'; 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 + + + + + + + + + + + + +
            +
            + +
            + +
            +
            + +
            + +
            +
            +
            + +
            +
            +
            +
            +
            + +
            + Video Title +
            +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            +

            + Dynamically procrastinate B2C users after installed base benefits +

            +
            + +
            + + + Community Videos + + +
            +
            + +
            +
            + Uploaded on + July 27, 2014 + | + 345 views +
            + +

            + Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. +

            +
            +
            + +
            +

            You might also like

            + + +
            +
            +
            +
            +
            + + Video Title + 3:49 + +
            +
            + Dramatically maintain clicks-and-mortar solutions + 946 views +
            +
            +
            + +
            +
            +
            + + Video Title + 3:49 + +
            +
            + Completely synergize resource sucking relationships + 946 views +
            +
            +
            + +
            +
            +
            + + Video Title + 3:49 + +
            +
            + Efficiently procrastinate B2C users after installed base benefits + 946 views +
            +
            +
            + +
            +
            +
            + + Video Title + 3:49 + +
            +
            + Seamlessly visualize quality intellectual capital + 946 views +
            +
            +
            +
            +
            +
            +
            +
            +
            +
            +
            +
            + + + + + \ No newline at end of file diff --git a/dist/samples/index.html b/dist/samples/index.html new file mode 100644 index 000000000..b2dbf6d26 --- /dev/null +++ b/dist/samples/index.html @@ -0,0 +1,45 @@ + + + + + + Fabric Samples Index + + + + + + + +

            Components

            + +
            BreadcrumbDatePickerCommandBarNavBarPanelProgressIndicatorSpinnerSearchBoxTableDropdownLinkListOrgChartTogglePersonaCardLabelOverlayDialogContextualMenuPivotPeoplePickerTextFieldButtonCalloutChoiceFieldListItemPersona
            + +

            Samples

            + +
            FormIconsVideoPortal
            + + + \ No newline at end of file