Skip to content

Instantly share code, notes, and snippets.

@dolphinotaku

dolphinotaku/custom json

Created September 2, 2020 16:18
Show Gist options
  • Save dolphinotaku/fd455cd4ddde34b1943779ff7ba75812 to your computer and use it in GitHub Desktop.
Save dolphinotaku/fd455cd4ddde34b1943779ff7ba75812 to your computer and use it in GitHub Desktop.
Download ZIP
Microsoft SharePoint - an example for how to customize SharePoint List Column
Raw
custom json
// change the text color
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"attributes": {
"class": "=if([$Status] == 'Completed', 'ms-fontColor-greenLight ms-fontWeight-semibold', '')"
}
}
// version 2
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"position": "relative"
},
"children": [
{
"elmType": "span",
"txtContent": "@currentField",
"style": {
"position": "absolute",
"left": "8px"
},
"attributes": {
"class": "=if([$Status] == 'Completed', 'ms-fontColor-green ms-fontWeight-semibold', 'ms-fontColor-neutralSecondary')",
"iconName": "=if(@currentField == 'Completed','CheckMark', if(@currentField == 'Processing', 'Forward', if(@currentField == 'Cancelled', 'Error', if(@currentField == 'Pending','Warning','')"
}
},
{
"elmType": "div",
"attributes": {
"class": "=if([$Status] == 'Processing', if($Expiry_x0020_Date] == null, '', if([$Expiry_x0020_Date] <= @now, 'sp-field-severity--severeWarning', if(1 - Number([$Expiry_x0020_Date] - @now) / Number([$Expiry_x0020_Date] - [$Effective_x0020_Date]) >= 0.7, 'sp-field-severity--warning', 'sp-field-severity--good'))), 'ms-bgColor-info')"
},
"style": {
"min-height": "inherit",
"width": "=if([$Expiry_x0020_Date] == 0, '100%', if([$Expiry_x0020_Date] <= @now, '100%', (1 - Number([$Expiry_x0020_Date] - @now) / Number([$Expiry_x0020_Date] - [$Effective_x0020_Date])) * 100 + '%'))"
}
}
]
}
// add icon, format column example
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"position": "relative"
},
"children": [
{
"elmType": "span",
"txtContent": "@currentField",
"style": {
"position": "absolute",
"left": "8px"
},
"attributes": {
"class": "=if([$Status] == 'Completed', 'ms-fontColor-green ms-fontWeight-semibold', 'ms-fontColor-neutralSecondary')",
"iconName": "=if(@currentField == 'Completed','CheckMark', if(@currentField == 'Processing', 'Forward', if(@currentField == 'Cancelled', 'Error', if(@currentField == 'Pending','Warning','')"
}
}
]
}
Raw
sharepointListCss.css
html body .ms-bgColor-themeDark,
html body .ms-bgColor-themeDark--hover:hover {
background-color: #983c0c
}
html body .ms-bgColor-themeDarkAlt,
html body .ms-bgColor-themeDarkAlt--hover:hover {
background-color: #983c0c
}
html body .ms-bgColor-themeDarker,
html body .ms-bgColor-themeDarker--hover:hover {
background-color: #652808
}
html body .ms-bgColor-themePrimary,
html body .ms-bgColor-themePrimary--hover:hover {
background-color: #ca5010
}
html body .ms-bgColor-themeSecondary,
html body .ms-bgColor-themeSecondary--hover:hover {
background-color: #f2905d
}
html body .ms-bgColor-themeTertiary,
html body .ms-bgColor-themeTertiary--hover:hover {
background-color: #f6b593
}
html body .ms-bgColor-themeLight,
html body .ms-bgColor-themeLight--hover:hover {
background-color: #f6b593
}
html body .ms-bgColor-themeLighter,
html body .ms-bgColor-themeLighter--hover:hover {
background-color: #fbdac9
}
html body .ms-bgColor-themeLighterAlt,
html body .ms-bgColor-themeLighterAlt--hover:hover {
background-color: #fbdac9
}
html body .ms-bgColor-black,
html body .ms-bgColor-black--hover:hover {
background-color: #000000
}
html body .ms-bgColor-neutralDark,
html body .ms-bgColor-neutralDark--hover:hover {
background-color: #212121
}
html body .ms-bgColor-neutralPrimary,
html body .ms-bgColor-neutralPrimary--hover:hover {
background-color: #333333
}
html body .ms-bgColor-neutralPrimaryAlt,
html body .ms-bgColor-neutralPrimaryAlt--hover:hover {
background-color: #3c3c3c
}
html body .ms-bgColor-neutralSecondary,
html body .ms-bgColor-neutralSecondary--hover:hover {
background-color: #666666
}
html body .ms-bgColor-neutralSecondaryAlt,
html body .ms-bgColor-neutralSecondaryAlt--hover:hover {
background-color: #767676
}
html body .ms-bgColor-neutralTertiary,
html body .ms-bgColor-neutralTertiary--hover:hover {
background-color: #a6a6a6
}
html body .ms-bgColor-neutralTertiaryAlt,
html body .ms-bgColor-neutralTertiaryAlt--hover:hover {
background-color: #c8c8c8
}
html body .ms-bgColor-neutralQuaternary,
html body .ms-bgColor-neutralQuaternary--hover:hover {
background-color: #d0d0d0
}
html body .ms-bgColor-neutralQuaternaryAlt,
html body .ms-bgColor-neutralQuaternaryAlt--hover:hover {
background-color: #dadada
}
html body .ms-bgColor-neutralLight,
html body .ms-bgColor-neutralLight--hover:hover {
background-color: #eaeaea
}
html body .ms-bgColor-neutralLighter,
html body .ms-bgColor-neutralLighter--hover:hover {
background-color: #f4f4f4
}
html body .ms-bgColor-neutralLighterAlt,
html body .ms-bgColor-neutralLighterAlt--hover:hover {
background-color: #f8f8f8
}
html body .ms-bgColor-white,
html body .ms-bgColor-white--hover:hover {
background-color: #ffffff
}
html body .ms-bgColor-yellow,
html body .ms-bgColor-yellow--hover:hover {
background-color: #ffb900
}
html body .ms-bgColor-yellowLight,
html body .ms-bgColor-yellowLight--hover:hover {
background-color: #fff100
}
html body .ms-bgColor-orange,
html body .ms-bgColor-orange--hover:hover {
background-color: #d83b01
}
html body .ms-bgColor-orangeLight,
html body .ms-bgColor-orangeLight--hover:hover {
background-color: #ea4300
}
html body .ms-bgColor-orangeLighter,
html body .ms-bgColor-orangeLighter--hover:hover {
background-color: #ff8c00
}
html body .ms-bgColor-redDark,
html body .ms-bgColor-redDark--hover:hover {
background-color: #a80000
}
html body .ms-bgColor-red,
html body .ms-bgColor-red--hover:hover {
background-color: #e81123
}
html body .ms-bgColor-magentaDark,
html body .ms-bgColor-magentaDark--hover:hover {
background-color: #5c005c
}
html body .ms-bgColor-magenta,
html body .ms-bgColor-magenta--hover:hover {
background-color: #b4009e
}
html body .ms-bgColor-magentaLight,
html body .ms-bgColor-magentaLight--hover:hover {
background-color: #e3008c
}
html body .ms-bgColor-purpleDark,
html body .ms-bgColor-purpleDark--hover:hover {
background-color: #32145a
}
html body .ms-bgColor-purple,
html body .ms-bgColor-purple--hover:hover {
background-color: #5c2d91
}
html body .ms-bgColor-purpleLight,
html body .ms-bgColor-purpleLight--hover:hover {
background-color: #b4a0ff
}
html body .ms-bgColor-blueDark,
html body .ms-bgColor-blueDark--hover:hover {
background-color: #002050
}
html body .ms-bgColor-blueMid,
html body .ms-bgColor-blueMid--hover:hover {
background-color: #00188f
}
html body .ms-bgColor-blue,
html body .ms-bgColor-blue--hover:hover {
background-color: #0078d4
}
html body .ms-bgColor-blueLight,
html body .ms-bgColor-blueLight--hover:hover {
background-color: #00bcf2
}
html body .ms-bgColor-tealDark,
html body .ms-bgColor-tealDark--hover:hover {
background-color: #004b50
}
html body .ms-bgColor-teal,
html body .ms-bgColor-teal--hover:hover {
background-color: #008272
}
html body .ms-bgColor-tealLight,
html body .ms-bgColor-tealLight--hover:hover {
background-color: #00b294
}
html body .ms-bgColor-greenDark,
html body .ms-bgColor-greenDark--hover:hover {
background-color: #004b1c
}
html body .ms-bgColor-green,
html body .ms-bgColor-green--hover:hover {
background-color: #107c10
}
html body .ms-bgColor-greenLight,
html body .ms-bgColor-greenLight--hover:hover {
background-color: #bad80a
}
html body .ms-bgColor-info,
html body .ms-bgColor-info--hover:hover {
background-color: #f4f4f4
}
html body .ms-bgColor-success,
html body .ms-bgColor-success--hover:hover {
background-color: #dff6dd
}
html body .ms-bgColor-severeWarning,
html body .ms-bgColor-severeWarning--hover:hover {
background-color: #fed9cc
}
html body .ms-bgColor-warning,
html body .ms-bgColor-warning--hover:hover {
background-color: #fff4ce
}
html body .ms-bgColor-error,
html body .ms-bgColor-error--hover:hover {
background-color: #fde7e9
}
html body .ms-borderColor-themeDark,
html body .ms-borderColor-themeDark--hover:hover {
border-color: #983c0c
}
html body .ms-borderColor-themeDarkAlt,
html body .ms-borderColor-themeDarkAlt--hover:hover {
border-color: #983c0c
}
html body .ms-borderColor-themeDarker,
html body .ms-borderColor-themeDarker--hover:hover {
border-color: #652808
}
html body .ms-borderColor-themePrimary,
html body .ms-borderColor-themePrimary--hover:hover {
border-color: #ca5010
}
html body .ms-borderColor-themeSecondary,
html body .ms-borderColor-themeSecondary--hover:hover {
border-color: #f2905d
}
html body .ms-borderColor-themeTertiary,
html body .ms-borderColor-themeTertiary--hover:hover {
border-color: #f6b593
}
html body .ms-borderColor-themeLight,
html body .ms-borderColor-themeLight--hover:hover {
border-color: #f6b593
}
html body .ms-borderColor-themeLighter,
html body .ms-borderColor-themeLighter--hover:hover {
border-color: #fbdac9
}
html body .ms-borderColor-themeLighterAlt,
html body .ms-borderColor-themeLighterAlt--hover:hover {
border-color: #fbdac9
}
html body .ms-borderColor-black,
html body .ms-borderColor-black--hover:hover {
border-color: #000000
}
html body .ms-borderColor-neutralDark,
html body .ms-borderColor-neutralDark--hover:hover {
border-color: #212121
}
html body .ms-borderColor-neutralPrimary,
html body .ms-borderColor-neutralPrimary--hover:hover {
border-color: #333333
}
html body .ms-borderColor-neutralPrimaryAlt,
html body .ms-borderColor-neutralPrimaryAlt--hover:hover {
border-color: #3c3c3c
}
html body .ms-borderColor-neutralSecondary,
html body .ms-borderColor-neutralSecondary--hover:hover {
border-color: #666666
}
html body .ms-borderColor-neutralSecondaryAlt,
html body .ms-borderColor-neutralSecondaryAlt--hover:hover {
border-color: #767676
}
html body .ms-borderColor-neutralTertiary,
html body .ms-borderColor-neutralTertiary--hover:hover {
border-color: #a6a6a6
}
html body .ms-borderColor-neutralTertiaryAlt,
html body .ms-borderColor-neutralTertiaryAlt--hover:hover {
border-color: #c8c8c8
}
html body .ms-borderColor-neutralQuaternary,
html body .ms-borderColor-neutralQuaternary--hover:hover {
border-color: #d0d0d0
}
html body .ms-borderColor-neutralQuaternaryAlt,
html body .ms-borderColor-neutralQuaternaryAlt--hover:hover {
border-color: #dadada
}
html body .ms-borderColor-neutralLight,
html body .ms-borderColor-neutralLight--hover:hover {
border-color: #eaeaea
}
html body .ms-borderColor-neutralLighter,
html body .ms-borderColor-neutralLighter--hover:hover {
border-color: #f4f4f4
}
html body .ms-borderColor-neutralLighterAlt,
html body .ms-borderColor-neutralLighterAlt--hover:hover {
border-color: #f8f8f8
}
html body .ms-borderColor-white,
html body .ms-borderColor-white--hover:hover {
border-color: #ffffff
}
html body .ms-borderColor-yellow,
html body .ms-borderColor-yellow--hover:hover {
border-color: #ffb900
}
html body .ms-borderColor-yellowLight,
html body .ms-borderColor-yellowLight--hover:hover {
border-color: #fff100
}
html body .ms-borderColor-orange,
html body .ms-borderColor-orange--hover:hover {
border-color: #d83b01
}
html body .ms-borderColor-orangeLight,
html body .ms-borderColor-orangeLight--hover:hover {
border-color: #ea4300
}
html body .ms-borderColor-orangeLighter,
html body .ms-borderColor-orangeLighter--hover:hover {
border-color: #ff8c00
}
html body .ms-borderColor-redDark,
html body .ms-borderColor-redDark--hover:hover {
border-color: #a80000
}
html body .ms-borderColor-red,
html body .ms-borderColor-red--hover:hover {
border-color: #e81123
}
html body .ms-borderColor-magentaDark,
html body .ms-borderColor-magentaDark--hover:hover {
border-color: #5c005c
}
html body .ms-borderColor-magenta,
html body .ms-borderColor-magenta--hover:hover {
border-color: #b4009e
}
html body .ms-borderColor-magentaLight,
html body .ms-borderColor-magentaLight--hover:hover {
border-color: #e3008c
}
html body .ms-borderColor-purpleDark,
html body .ms-borderColor-purpleDark--hover:hover {
border-color: #32145a
}
html body .ms-borderColor-purple,
html body .ms-borderColor-purple--hover:hover {
border-color: #5c2d91
}
html body .ms-borderColor-purpleLight,
html body .ms-borderColor-purpleLight--hover:hover {
border-color: #b4a0ff
}
html body .ms-borderColor-blueDark,
html body .ms-borderColor-blueDark--hover:hover {
border-color: #002050
}
html body .ms-borderColor-blueMid,
html body .ms-borderColor-blueMid--hover:hover {
border-color: #00188f
}
html body .ms-borderColor-blue,
html body .ms-borderColor-blue--hover:hover {
border-color: #0078d4
}
html body .ms-borderColor-blueLight,
html body .ms-borderColor-blueLight--hover:hover {
border-color: #00bcf2
}
html body .ms-borderColor-tealDark,
html body .ms-borderColor-tealDark--hover:hover {
border-color: #004b50
}
html body .ms-borderColor-teal,
html body .ms-borderColor-teal--hover:hover {
border-color: #008272
}
html body .ms-borderColor-tealLight,
html body .ms-borderColor-tealLight--hover:hover {
border-color: #00b294
}
html body .ms-borderColor-greenDark,
html body .ms-borderColor-greenDark--hover:hover {
border-color: #004b1c
}
html body .ms-borderColor-green,
html body .ms-borderColor-green--hover:hover {
border-color: #107c10
}
html body .ms-borderColor-greenLight,
html body .ms-borderColor-greenLight--hover:hover {
border-color: #bad80a
}
.ms-font-su {
font-size: 42px;
font-weight: 100
}
.ms-font-xxl {
font-size: 28px;
font-weight: 100
}
.ms-font-xl-plus {
font-size: 24px;
font-weight: 100
}
.ms-font-xl {
font-size: 21px;
font-weight: 100
}
.ms-font-l {
font-size: 17px;
font-weight: 300
}
.ms-font-m-plus {
font-size: 15px;
font-weight: 400
}
.ms-font-m {
font-size: 14px;
font-weight: 400
}
.ms-font-s-plus {
font-size: 13px;
font-weight: 400
}
.ms-font-s {
font-size: 12px;
font-weight: 400
}
.ms-font-xs {
font-size: 11px;
font-weight: 400
}
.ms-font-mi {
font-size: 10px;
font-weight: 600
}
.ms-fontWeight-light {
font-weight: 100
}
.ms-fontWeight-semilight {
font-weight: 300
}
.ms-fontWeight-regular {
font-weight: 400
}
.ms-fontWeight-semibold {
font-weight: 600
}
.ms-fontWeight-bold {
font-weight: 700
}
.ms-fontSize-su {
font-size: 42px
}
.ms-fontSize-xxl {
font-size: 28px
}
.ms-fontSize-xlPlus {
font-size: 24px
}
.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: #652808
}
.ms-fontColor-themeDark,
.ms-fontColor-themeDark--hover:hover {
color: #983c0c
}
.ms-fontColor-themeDarkAlt,
.ms-fontColor-themeDarkAlt--hover:hover {
color: #983c0c
}
.ms-fontColor-themePrimary,
.ms-fontColor-themePrimary--hover:hover {
color: #ca5010
}
.ms-fontColor-themeSecondary,
.ms-fontColor-themeSecondary--hover:hover {
color: #f2905d
}
.ms-fontColor-themeTertiary,
.ms-fontColor-themeTertiary--hover:hover {
color: #f6b593
}
.ms-fontColor-themeLight,
.ms-fontColor-themeLight--hover:hover {
color: #f6b593
}
.ms-fontColor-themeLighter,
.ms-fontColor-themeLighter--hover:hover {
color: #fbdac9
}
.ms-fontColor-themeLighterAlt,
.ms-fontColor-themeLighterAlt--hover:hover {
color: #fbdac9
}
.ms-fontColor-black,
.ms-fontColor-black--hover:hover {
color: #000000
}
.ms-fontColor-neutralDark,
.ms-fontColor-neutralDark--hover:hover {
color: #212121
}
.ms-fontColor-neutralPrimary,
.ms-fontColor-neutralPrimary--hover:hover {
color: #333333
}
.ms-fontColor-neutralPrimaryAlt,
.ms-fontColor-neutralPrimaryAlt--hover:hover {
color: #3c3c3c
}
.ms-fontColor-neutralSecondary,
.ms-fontColor-neutralSecondary--hover:hover {
color: #666666
}
.ms-fontColor-neutralSecondaryAlt,
.ms-fontColor-neutralSecondaryAlt--hover:hover {
color: #767676
}
.ms-fontColor-neutralTertiary,
.ms-fontColor-neutralTertiary--hover:hover {
color: #a6a6a6
}
.ms-fontColor-neutralTertiaryAlt,
.ms-fontColor-neutralTertiaryAlt--hover:hover {
color: #c8c8c8
}
.ms-fontColor-neutralQuaternary,
.ms-fontColor-neutralQuaternary--hover:hover {
color: #d0d0d0
}
.ms-fontColor-neutralQuaternaryAlt,
.ms-fontColor-neutralQuaternaryAlt--hover:hover {
color: #dadada
}
.ms-fontColor-neutralLight,
.ms-fontColor-neutralLight--hover:hover {
color: #eaeaea
}
.ms-fontColor-neutralLighter,
.ms-fontColor-neutralLighter--hover:hover {
color: #f4f4f4
}
.ms-fontColor-neutralLighterAlt,
.ms-fontColor-neutralLighterAlt--hover:hover {
color: #f8f8f8
}
.ms-fontColor-white,
.ms-fontColor-white--hover:hover {
color: #ffffff
}
.ms-fontColor-yellow,
.ms-fontColor-yellow--hover:hover {
color: #ffb900
}
.ms-fontColor-yellowLight,
.ms-fontColor-yellowLight--hover:hover {
color: #fff100
}
.ms-fontColor-orange,
.ms-fontColor-orange--hover:hover {
color: #d83b01
}
.ms-fontColor-orangeLight,
.ms-fontColor-orangeLight--hover:hover {
color: #ea4300
}
.ms-fontColor-orangeLighter,
.ms-fontColor-orangeLighter--hover:hover {
color: #ff8c00
}
.ms-fontColor-redDark,
.ms-fontColor-redDark--hover:hover {
color: #a80000
}
.ms-fontColor-red,
.ms-fontColor-red--hover:hover {
color: #e81123
}
.ms-fontColor-magentaDark,
.ms-fontColor-magentaDark--hover:hover {
color: #5c005c
}
.ms-fontColor-magenta,
.ms-fontColor-magenta--hover:hover {
color: #b4009e
}
.ms-fontColor-magentaLight,
.ms-fontColor-magentaLight--hover:hover {
color: #e3008c
}
.ms-fontColor-purpleDark,
.ms-fontColor-purpleDark--hover:hover {
color: #32145a
}
.ms-fontColor-purple,
.ms-fontColor-purple--hover:hover {
color: #5c2d91
}
.ms-fontColor-purpleLight,
.ms-fontColor-purpleLight--hover:hover {
color: #b4a0ff
}
.ms-fontColor-blueDark,
.ms-fontColor-blueDark--hover:hover {
color: #002050
}
.ms-fontColor-blueMid,
.ms-fontColor-blueMid--hover:hover {
color: #00188f
}
.ms-fontColor-blue,
.ms-fontColor-blue--hover:hover {
color: #0078d4
}
.ms-fontColor-blueLight,
.ms-fontColor-blueLight--hover:hover {
color: #00bcf2
}
.ms-fontColor-tealDark,
.ms-fontColor-tealDark--hover:hover {
color: #004b50
}
.ms-fontColor-teal,
.ms-fontColor-teal--hover:hover {
color: #008272
}
.ms-fontColor-tealLight,
.ms-fontColor-tealLight--hover:hover {
color: #00b294
}
.ms-fontColor-greenDark,
.ms-fontColor-greenDark--hover:hover {
color: #004b1c
}
.ms-fontColor-green,
.ms-fontColor-green--hover:hover {
color: #107c10
}
.ms-fontColor-greenLight,
.ms-fontColor-greenLight--hover:hover {
color: #bad80a
}
.ms-fontColor-info,
.ms-fontColor-info--hover:hover {
color: #767676
}
.ms-fontColor-success,
.ms-fontColor-success--hover:hover {
color: #107c10
}
.ms-fontColor-alert,
.ms-fontColor-alert--hover:hover {
color: #d83b01
}
.ms-fontColor-warning,
.ms-fontColor-warning--hover:hover {
color: #767676
}
.ms-fontColor-severeWarning,
.ms-fontColor-severeWarning--hover:hover {
color: #d83b01
}
.ms-fontColor-error,
.ms-fontColor-error--hover:hover {
color: #a80000
}
.ms-fontSize-68 {
font-size: 68px
}
.ms-fontSize-42 {
font-size: 42px
}
.ms-fontSize-32 {
font-size: 32px
}
.ms-fontSize-28 {
font-size: 28px
}
.ms-fontSize-24 {
font-size: 24px
}
.ms-fontSize-20 {
font-size: 20px
}
.ms-fontSize-18 {
font-size: 18px
}
.ms-fontSize-16 {
font-size: 16px
}
.ms-fontSize-14 {
font-size: 14px
}
.ms-fontSize-12 {
font-size: 12px
}
.ms-fontSize-10 {
font-size: 10px
}
.ms-fontWeight-regular {
font-weight: 400
}
.ms-fontWeight-semibold {
font-weight: 600
}
.ms-fontWeight-bold {
font-weight: 700
}
.ms-font-su {
font-size: 42px;
font-weight: 100
}
.ms-font-xxl {
font-size: 28px;
font-weight: 100
}
.ms-font-xl-plus {
font-size: 24px;
font-weight: 100
}
.ms-font-xl {
font-size: 21px;
font-weight: 100
}
.ms-font-l {
font-size: 17px;
font-weight: 300
}
.ms-font-m-plus {
font-size: 15px;
font-weight: 400
}
.ms-font-m {
font-size: 14px;
font-weight: 400
}
.ms-font-s-plus {
font-size: 13px;
font-weight: 400
}
.ms-font-s {
font-size: 12px;
font-weight: 400
}
.ms-font-xs {
font-size: 11px;
font-weight: 400
}
.ms-font-mi {
font-size: 10px;
font-weight: 600
}
.ms-fontWeight-light {
font-weight: 100
}
.ms-fontWeight-semilight {
font-weight: 300
}
.ms-fontSize-su {
font-size: 42px
}
.ms-fontSize-xxl {
font-size: 28px
}
.ms-fontSize-xlPlus {
font-size: 24px
}
.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
}
html body .ms-fontColor-themeDarker,
html body .ms-fontColor-themeDarker--hover:hover {
color: #652808
}
html body .ms-fontColor-themeDark,
html body .ms-fontColor-themeDark--hover:hover {
color: #983c0c
}
html body .ms-fontColor-themeDarkAlt,
html body .ms-fontColor-themeDarkAlt--hover:hover {
color: #983c0c
}
html body .ms-fontColor-themePrimary,
html body .ms-fontColor-themePrimary--hover:hover {
color: #ca5010
}
html body .ms-fontColor-themeSecondary,
html body .ms-fontColor-themeSecondary--hover:hover {
color: #f2905d
}
html body .ms-fontColor-themeTertiary,
html body .ms-fontColor-themeTertiary--hover:hover {
color: #f6b593
}
html body .ms-fontColor-themeLight,
html body .ms-fontColor-themeLight--hover:hover {
color: #f6b593
}
html body .ms-fontColor-themeLighter,
html body .ms-fontColor-themeLighter--hover:hover {
color: #fbdac9
}
html body .ms-fontColor-themeLighterAlt,
html body .ms-fontColor-themeLighterAlt--hover:hover {
color: #fbdac9
}
html body .ms-fontColor-black,
html body .ms-fontColor-black--hover:hover {
color: #000000
}
html body .ms-fontColor-neutralDark,
html body .ms-fontColor-neutralDark--hover:hover {
color: #212121
}
html body .ms-fontColor-neutralPrimary,
html body .ms-fontColor-neutralPrimary--hover:hover {
color: #333333
}
html body .ms-fontColor-neutralSecondary,
html body .ms-fontColor-neutralSecondary--hover:hover {
color: #666666
}
html body .ms-fontColor-neutralSecondaryAlt,
html body .ms-fontColor-neutralSecondaryAlt--hover:hover {
color: #767676
}
html body .ms-fontColor-neutralTertiary,
html body .ms-fontColor-neutralTertiary--hover:hover {
color: #a6a6a6
}
html body .ms-fontColor-neutralTertiaryAlt,
html body .ms-fontColor-neutralTertiaryAlt--hover:hover {
color: #c8c8c8
}
html body .ms-fontColor-neutralLight,
html body .ms-fontColor-neutralLight--hover:hover {
color: #eaeaea
}
html body .ms-fontColor-neutralLighter,
html body .ms-fontColor-neutralLighter--hover:hover {
color: #f4f4f4
}
html body .ms-fontColor-neutralLighterAlt,
html body .ms-fontColor-neutralLighterAlt--hover:hover {
color: #f8f8f8
}
html body .ms-fontColor-white,
html body .ms-fontColor-white--hover:hover {
color: #ffffff
}
html body .ms-fontColor-yellow,
html body .ms-fontColor-yellow--hover:hover {
color: #ffb900
}
html body .ms-fontColor-yellowLight,
html body .ms-fontColor-yellowLight--hover:hover {
color: #fff100
}
html body .ms-fontColor-orange,
html body .ms-fontColor-orange--hover:hover {
color: #d83b01
}
html body .ms-fontColor-orangeLight,
html body .ms-fontColor-orangeLight--hover:hover {
color: #ea4300
}
html body .ms-fontColor-orangeLighter,
html body .ms-fontColor-orangeLighter--hover:hover {
color: #ff8c00
}
html body .ms-fontColor-redDark,
html body .ms-fontColor-redDark--hover:hover {
color: #a80000
}
html body .ms-fontColor-red,
html body .ms-fontColor-red--hover:hover {
color: #e81123
}
html body .ms-fontColor-magentaDark,
html body .ms-fontColor-magentaDark--hover:hover {
color: #5c005c
}
html body .ms-fontColor-magenta,
html body .ms-fontColor-magenta--hover:hover {
color: #b4009e
}
html body .ms-fontColor-magentaLight,
html body .ms-fontColor-magentaLight--hover:hover {
color: #e3008c
}
html body .ms-fontColor-purpleDark,
html body .ms-fontColor-purpleDark--hover:hover {
color: #32145a
}
html body .ms-fontColor-purple,
html body .ms-fontColor-purple--hover:hover {
color: #5c2d91
}
html body .ms-fontColor-purpleLight,
html body .ms-fontColor-purpleLight--hover:hover {
color: #b4a0ff
}
html body .ms-fontColor-blueDark,
html body .ms-fontColor-blueDark--hover:hover {
color: #002050
}
html body .ms-fontColor-blueMid,
html body .ms-fontColor-blueMid--hover:hover {
color: #00188f
}
html body .ms-fontColor-blue,
html body .ms-fontColor-blue--hover:hover {
color: #0078d4
}
html body .ms-fontColor-blueLight,
html body .ms-fontColor-blueLight--hover:hover {
color: #00bcf2
}
html body .ms-fontColor-tealDark,
html body .ms-fontColor-tealDark--hover:hover {
color: #004b50
}
html body .ms-fontColor-teal,
html body .ms-fontColor-teal--hover:hover {
color: #008272
}
html body .ms-fontColor-tealLight,
html body .ms-fontColor-tealLight--hover:hover {
color: #00b294
}
html body .ms-fontColor-greenDark,
html body .ms-fontColor-greenDark--hover:hover {
color: #004b1c
}
html body .ms-fontColor-green,
html body .ms-fontColor-green--hover:hover {
color: #107c10
}
html body .ms-fontColor-greenLight,
html body .ms-fontColor-greenLight--hover:hover {
color: #bad80a
}
html body .ms-fontColor-info,
html body .ms-fontColor-info--hover:hover {
color: #767676
}
html body .ms-fontColor-success,
html body .ms-fontColor-success--hover:hover {
color: #107c10
}
html body .ms-fontColor-alert,
html body .ms-fontColor-alert--hover:hover {
color: #d83b01
}
html body .ms-fontColor-error,
html body .ms-fontColor-error--hover:hover {
color: #a80000
}
@keyframes ms-slideRightIn10 {
from {
transform: translate3d(-10px, 0, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideRightIn20 {
from {
transform: translate3d(-20px, 0, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideRightIn40 {
from {
transform: translate3d(-40px, 0, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideRightIn400 {
from {
transform: translate3d(-400px, 0, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideRightOut40 {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(40px, 0, 0)
}
}
@keyframes ms-slideRightOut400 {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(400px, 0, 0)
}
}
@keyframes ms-slideLeftIn10 {
from {
transform: translate3d(10px, 0, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideLeftIn20 {
from {
transform: translate3d(20px, 0, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideLeftIn40 {
from {
transform: translate3d(40px, 0, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideLeftIn400 {
from {
transform: translate3d(400px, 0, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideLeftOut40 {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(-40px, 0, 0)
}
}
@keyframes ms-slideLeftOut400 {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(-400px, 0, 0)
}
}
@keyframes ms-slideUpIn10 {
from {
transform: translate3d(0, 10px, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideUpIn20 {
from {
transform: translate3d(0, 20px, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideDownIn10 {
from {
transform: translate3d(0, -10px, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideDownIn20 {
from {
transform: translate3d(0, -20px, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@keyframes ms-slideUpOut10 {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(0, -10px, 0)
}
}
@keyframes ms-slideUpOut20 {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(0, -20px, 0)
}
}
@keyframes ms-slideDownOut10 {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(0, 10px, 0)
}
}
@keyframes ms-slideDownOut20 {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(0, 20px, 0)
}
}
@keyframes ms-scaleUp100 {
from {
transform: scale3d(.98, .98, 1)
}
to {
transform: scale3d(1, 1, 1)
}
}
@keyframes ms-scaleUp103 {
from {
transform: scale3d(1, 1, 1)
}
to {
transform: scale3d(1.03, 1.03, 1)
}
}
@keyframes ms-scaleDown98 {
from {
transform: scale3d(1, 1, 1)
}
to {
transform: scale3d(.98, .98, 1)
}
}
@keyframes ms-scaleDown100 {
from {
transform: scale3d(1.03, 1.03, 1)
}
to {
transform: scale3d(1, 1, 1)
}
}
@keyframes ms-fadeIn {
from {
opacity: 0;
animation-timing-function: cubic-bezier(.1, .25, .75, .9)
}
to {
opacity: 1
}
}
@keyframes ms-fadeOut {
from {
opacity: 1;
animation-timing-function: cubic-bezier(.1, .25, .75, .9)
}
to {
opacity: 0
}
}
@keyframes ms-rotate90 {
from {
transform: rotateZ(0)
}
to {
transform: rotateZ(90deg)
}
}
@keyframes ms-rotateN90 {
from {
transform: rotateZ(90deg)
}
to {
transform: rotateZ(0)
}
}
[dir=ltr] .ms-slideRightIn10 {
animation-name: ms-fadeIn, ms-slideRightIn10;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideRightIn10 {
animation: none
}
}
[dir=rtl] .ms-slideRightIn10 {
animation-name: ms-fadeIn, ms-slideLeftIn10;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideRightIn10 {
animation: none
}
}
[dir=ltr] .ms-slideRightIn20 {
animation-name: ms-fadeIn, ms-slideRightIn20;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideRightIn20 {
animation: none
}
}
[dir=rtl] .ms-slideRightIn20 {
animation-name: ms-fadeIn, ms-slideLeftIn20;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideRightIn20 {
animation: none
}
}
[dir=ltr] .ms-slideRightIn40 {
animation-name: ms-fadeIn, ms-slideRightIn40;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideRightIn40 {
animation: none
}
}
[dir=rtl] .ms-slideRightIn40 {
animation-name: ms-fadeIn, ms-slideLeftIn40;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideRightIn40 {
animation: none
}
}
[dir=ltr] .ms-slideRightIn400 {
animation-name: ms-fadeIn, ms-slideRightIn400;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideRightIn400 {
animation: none
}
}
[dir=rtl] .ms-slideRightIn400 {
animation-name: ms-fadeIn, ms-slideLeftIn400;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideRightIn400 {
animation: none
}
}
[dir=ltr] .ms-slideRightOut40 {
animation-name: ms-fadeOut, ms-slideRightOut40;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideRightOut40 {
animation: none
}
}
[dir=rtl] .ms-slideRightOut40 {
animation-name: ms-fadeOut, ms-slideLeftOut40;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideRightOut40 {
animation: none
}
}
[dir=ltr] .ms-slideRightOut400 {
animation-name: ms-fadeOut, ms-slideRightOut400;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideRightOut400 {
animation: none
}
}
[dir=rtl] .ms-slideRightOut400 {
animation-name: ms-fadeOut, ms-slideLeftOut400;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideRightOut400 {
animation: none
}
}
[dir=ltr] .ms-slideLeftIn10 {
animation-name: ms-fadeIn, ms-slideLeftIn10;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideLeftIn10 {
animation: none
}
}
[dir=rtl] .ms-slideLeftIn10 {
animation-name: ms-fadeIn, ms-slideRightIn10;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideLeftIn10 {
animation: none
}
}
[dir=ltr] .ms-slideLeftIn20 {
animation-name: ms-fadeIn, ms-slideLeftIn20;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideLeftIn20 {
animation: none
}
}
[dir=rtl] .ms-slideLeftIn20 {
animation-name: ms-fadeIn, ms-slideRightIn20;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideLeftIn20 {
animation: none
}
}
[dir=ltr] .ms-slideLeftIn40 {
animation-name: ms-fadeIn, ms-slideLeftIn40;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideLeftIn40 {
animation: none
}
}
[dir=rtl] .ms-slideLeftIn40 {
animation-name: ms-fadeIn, ms-slideRightIn40;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideLeftIn40 {
animation: none
}
}
[dir=ltr] .ms-slideLeftIn400 {
animation-name: ms-fadeIn, ms-slideLeftIn400;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideLeftIn400 {
animation: none
}
}
[dir=rtl] .ms-slideLeftIn400 {
animation-name: ms-fadeIn, ms-slideRightIn400;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideLeftIn400 {
animation: none
}
}
[dir=ltr] .ms-slideLeftOut40 {
animation-name: ms-fadeOut, ms-slideLeftOut40;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideLeftOut40 {
animation: none
}
}
[dir=rtl] .ms-slideLeftOut40 {
animation-name: ms-fadeOut, ms-slideRightOut40;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideLeftOut40 {
animation: none
}
}
[dir=ltr] .ms-slideLeftOut400 {
animation-name: ms-fadeOut, ms-slideLeftOut400;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-slideLeftOut400 {
animation: none
}
}
[dir=rtl] .ms-slideLeftOut400 {
animation-name: ms-fadeOut, ms-slideRightOut400;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-slideLeftOut400 {
animation: none
}
}
.ms-slideUpIn10 {
animation-name: ms-fadeIn, ms-slideUpIn10;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-slideUpIn10 {
animation: none
}
}
.ms-slideUpIn20 {
animation-name: ms-fadeIn, ms-slideUpIn20;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-slideUpIn20 {
animation: none
}
}
.ms-slideDownIn10 {
animation-name: ms-fadeIn, ms-slideDownIn10;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-slideDownIn10 {
animation: none
}
}
.ms-slideDownIn20 {
animation-name: ms-fadeIn, ms-slideDownIn20;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-slideDownIn20 {
animation: none
}
}
.ms-slideUpOut10 {
animation-name: ms-fadeOut, ms-slideUpOut10;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-slideUpOut10 {
animation: none
}
}
.ms-slideUpOut20 {
animation-name: ms-fadeOut, ms-slideUpOut20;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-slideUpOut20 {
animation: none
}
}
.ms-slideDownOut10 {
animation-name: ms-fadeOut, ms-slideDownOut10;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-slideDownOut10 {
animation: none
}
}
.ms-slideDownOut20 {
animation-name: ms-fadeOut, ms-slideDownOut20;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-slideDownOut20 {
animation: none
}
}
.ms-scaleUpIn100 {
animation-name: ms-fadeIn, ms-scaleUp100;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-scaleUpIn100 {
animation: none
}
}
.ms-scaleUpOut103 {
animation-name: ms-fadeOut, ms-scaleUp103;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-scaleUpOut103 {
animation: none
}
}
.ms-scaleDownOut98 {
animation-name: ms-fadeOut, ms-scaleDown98;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-scaleDownOut98 {
animation: none
}
}
.ms-scaleDownIn100 {
animation-name: ms-fadeIn, ms-scaleDown100;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-scaleDownIn100 {
animation: none
}
}
.ms-fadeIn100 {
animation-name: ms-fadeIn;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-fadeIn100 {
animation: none
}
}
.ms-fadeIn200 {
animation-name: ms-fadeIn;
animation-duration: 267ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-fadeIn200 {
animation: none
}
}
.ms-fadeIn400 {
animation-name: ms-fadeIn;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-fadeIn400 {
animation: none
}
}
.ms-fadeIn500 {
animation-name: ms-fadeIn;
animation-duration: 467ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-fadeIn500 {
animation: none
}
}
.ms-fadeOut100 {
animation-name: ms-fadeOut;
animation-duration: .1s;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-fadeOut100 {
animation: none
}
}
.ms-fadeOut200 {
animation-name: ms-fadeOut;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-fadeOut200 {
animation: none
}
}
.ms-fadeOut400 {
animation-name: ms-fadeOut;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-fadeOut400 {
animation: none
}
}
.ms-fadeOut500 {
animation-name: ms-fadeOut;
animation-duration: 467ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.ms-fadeOut500 {
animation: none
}
}
.ms-expandCollapse100 {
transition: height .1s cubic-bezier(.1, .25, .75, .9)
}
@media (prefers-reduced-motion:reduce) {
.ms-expandCollapse100 {
transition: none
}
}
.ms-expandCollapse200 {
transition: height 167ms cubic-bezier(.1, .25, .75, .9)
}
@media (prefers-reduced-motion:reduce) {
.ms-expandCollapse200 {
transition: none
}
}
.ms-expandCollapse400 {
transition: height 367ms cubic-bezier(.1, .25, .75, .9)
}
@media (prefers-reduced-motion:reduce) {
.ms-expandCollapse400 {
transition: none
}
}
.ms-delay100 {
animation-delay: 167ms
}
.ms-delay200 {
animation-delay: 267ms
}
[dir=ltr] .ms-rotate90deg {
animation-name: ms-rotate90;
animation-duration: .1s;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-rotate90deg {
animation: none
}
}
[dir=rtl] .ms-rotate90deg {
animation-name: ms-rotateN90;
animation-duration: .1s;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-rotate90deg {
animation: none
}
}
[dir=ltr] .ms-rotateN90deg {
animation-name: ms-rotateN90;
animation-duration: .1s;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .ms-rotateN90deg {
animation: none
}
}
[dir=rtl] .ms-rotateN90deg {
animation-name: ms-rotate90;
animation-duration: .1s;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .ms-rotateN90deg {
animation: none
}
}
.ms-Link {
color: #ca5010;
text-decoration: none;
cursor: pointer;
outline: 0
}
.ms-Link:focus,
.ms-Link:hover {
color: #652808
}
.ms-Link:active {
color: #ca5010
}
.ms-ContextualMenu {
font-size: 14px;
font-weight: 400;
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
display: none
}
.ms-ContextualMenu.is-open {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .4);
background-color: #ffffff;
display: block;
list-style-type: none;
position: absolute;
z-index: 105
}
.od-ContextualMenu-item {
box-sizing: border-box;
position: relative
}
.od-ContextualMenu-item.od-ContextualMenu-item--divider {
cursor: default;
display: block;
height: 1px;
margin: 4px 0;
background-color: #eaeaea;
position: relative
}
.od-ContextualMenu-item.od-ContextualMenu-item--header {
color: #ca5010;
font-size: 12px;
text-transform: uppercase;
height: 40px;
line-height: 40px;
padding: 0 18px
}
.od-ContextualMenu-link {
text-decoration: none;
color: #333333;
border: 1px solid transparent;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
padding: 0 18px;
position: relative
}
@media screen and (-ms-high-contrast:active) {
.od-ContextualMenu-link {
border-color: #000000
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-ContextualMenu-link {
border-color: #ffffff
}
}
.od-ContextualMenu-link:first-child,
.od-ContextualMenu-link:last-child {
height: 39px
}
.od-ContextualMenu-link:active,
.od-ContextualMenu-link:focus,
.od-ContextualMenu-link:hover {
background-color: #eaeaea;
color: #000000
}
@media screen and (-ms-high-contrast:active) {
.od-ContextualMenu-link:hover {
background-color: #1AEBFF;
border-color: #1AEBFF;
color: #000000
}
.od-ContextualMenu-link:hover:focus {
border-color: #000000
}
.od-ContextualMenu-link:hover+.od-ContextualMenu-caretRight,
.od-ContextualMenu-link:hover+.od-ContextualMenu-subMenuIcon {
color: #000000
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-ContextualMenu-link:hover {
background-color: #37006E;
border-color: #37006E;
color: #ffffff
}
.od-ContextualMenu-link:hover+.od-ContextualMenu-caretRight,
.od-ContextualMenu-link:hover+.od-ContextualMenu-subMenuIcon {
color: #ffffff
}
}
.od-ContextualMenu-link:active {
border: 1px solid #ca5010
}
.od-ContextualMenu-link:focus {
border-color: #ca5010;
outline: 0
}
@media screen and (-ms-high-contrast:active) {
.od-ContextualMenu-link:focus {
border-color: #ffffff
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-ContextualMenu-link:focus {
border-color: #000000
}
}
.od-ContextualMenu-link.is-selected {
background-color: #f6b593;
color: #000000;
font-weight: 600
}
.od-ContextualMenu-link.is-selected:hover {
background-color: #f6b593
}
@media screen and (-ms-high-contrast:active) {
.od-ContextualMenu-link.is-selected {
background-color: #1AEBFF;
border-color: #1AEBFF;
color: #000000
}
.od-ContextualMenu-link.is-selected:focus {
border-color: #000000
}
.od-ContextualMenu-link.is-selected+.od-ContextualMenu-caretRight,
.od-ContextualMenu-link.is-selected+.od-ContextualMenu-subMenuIcon {
color: #000000
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-ContextualMenu-link.is-selected {
background-color: #37006E;
border-color: #37006E;
color: #ffffff
}
.od-ContextualMenu-link.is-selected+.od-ContextualMenu-caretRight,
.od-ContextualMenu-link.is-selected+.od-ContextualMenu-subMenuIcon {
color: #ffffff
}
}
.od-ContextualMenu-link.is-disabled {
color: #a6a6a6;
cursor: default;
pointer-events: none
}
.od-ContextualMenu-link.is-disabled:active,
.od-ContextualMenu-link.is-disabled:focus {
border-color: #ffffff
}
@media screen and (-ms-high-contrast:active) {
.od-ContextualMenu-link.is-disabled:active,
.od-ContextualMenu-link.is-disabled:focus {
border-color: #000000
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-ContextualMenu-link.is-disabled:active,
.od-ContextualMenu-link.is-disabled:focus {
border-color: #ffffff
}
}
@media screen and (-ms-high-contrast:active) {
.od-ContextualMenu-link.is-disabled {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-ContextualMenu-link.is-disabled {
color: #600000
}
}
.od-ContextualMenu-link.od-ContextualMenu-link--hasMenu~.od-ContextualMenu {
position: absolute;
top: -1px;
left: 178px
}
.od-ContextualMenu-caretRight,
.od-ContextualMenu-subMenuIcon {
color: #666666;
font-size: 16px;
height: 39px;
line-height: 40px;
position: absolute;
top: 0;
right: 7px;
z-index: 1;
pointer-events: none
}
.od-ContextualMenu.od-ContextualMenu--multiselect .od-ContextualMenu-item.od-ContextualMenu-item--header {
padding: 0 30px
}
.od-ContextualMenu.od-ContextualMenu--multiselect .od-ContextualMenu-link {
padding: 0 30px
}
.od-ContextualMenu.od-ContextualMenu--multiselect .od-ContextualMenu-link.is-selected {
background-color: #ffffff
}
.od-ContextualMenu.od-ContextualMenu--multiselect .od-ContextualMenu-link.is-selected:after {
display: inline-block;
font-family: FabricMDL2Icons;
font-style: normal;
font-weight: 400;
speak: none;
color: #333333;
content: '\e041';
font-size: 12px;
height: 39px;
line-height: 40px;
position: absolute;
left: 10px
}
.ms-Label {
font-size: 12px;
font-weight: 400;
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
padding: 5px 0
}
.ms-Label.is-required:after {
content: ' *';
color: #a80000
}
.ms-Label.is-disabled {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.ms-Label.is-disabled {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-Label.is-disabled {
color: #600000
}
}
.is-disabled .ms-Label {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.is-disabled .ms-Label {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.is-disabled .ms-Label {
color: #600000
}
}
.od-Button {
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
font-family: inherit;
color: #333333;
font-size: 14px;
font-weight: 400;
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
cursor: pointer;
display: inline-block;
height: 32px;
min-width: 80px;
padding: 4px 20px 6px
}
.od-Button.is-hidden {
display: none
}
.od-Button:hover {
background-color: #eaeaea;
border-color: #eaeaea
}
.od-Button:hover .od-Button-label {
color: #000000
}
@media screen and (-ms-high-contrast:active) {
.od-Button:hover {
color: #1AEBFF;
border-color: #1AEBFF
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-Button:hover {
color: #37006E;
border-color: #37006E
}
}
.od-Button:focus {
background-color: #eaeaea;
border-color: #ca5010;
outline: 1px solid transparent
}
.od-Button:focus .od-Button-label {
color: #000000
}
.od-Button:active {
background-color: #ca5010;
border-color: #ca5010
}
.od-Button:active .od-Button-label {
color: #ffffff
}
.od-Button.is-disabled,
.od-Button:disabled {
background-color: #f4f4f4;
border-color: #f4f4f4;
cursor: default
}
.od-Button.is-disabled .od-Button-label,
.od-Button:disabled .od-Button-label {
color: #a6a6a6
}
.od-Button.is-disabled:focus,
.od-Button.is-disabled:hover,
.od-Button:disabled:focus,
.od-Button:disabled:hover {
outline: 0
}
.od-Button-label {
color: #333333;
font-weight: 600;
font-size: 14px
}
.od-Button-description,
.od-Button-icon {
display: none
}
.od-Button.od-Button--primary {
background-color: #ca5010;
border-color: #ca5010
}
.od-Button.od-Button--primary .od-Button-label {
color: #ffffff
}
.od-Button.od-Button--primary:hover {
background-color: #983c0c;
border-color: #983c0c
}
.od-Button.od-Button--primary:focus {
background-color: #983c0c;
border-color: #652808
}
.od-Button.od-Button--primary:active {
background-color: #ca5010;
border-color: #ca5010
}
.od-Button.od-Button--primary.is-disabled,
.od-Button.od-Button--primary:disabled {
background-color: #f4f4f4;
border-color: #f4f4f4
}
.od-Button.od-Button--primary.is-disabled .od-Button-label,
.od-Button.od-Button--primary:disabled .od-Button-label {
color: #a6a6a6
}
.od-Button.od-Button--hero {
-ms-flex-align: center;
align-items: center;
background-color: transparent;
border: 0;
display: -ms-flexbox;
display: flex;
padding: 0
}
.od-Button.od-Button--hero .od-Button-icon {
color: #ca5010;
display: inline-block;
font-size: 12px;
margin-right: 4px;
position: relative;
top: 1px;
text-align: center
}
.od-Button.od-Button--hero .od-Button-icon .ms-Icon {
border-radius: 18px;
border: 1px solid #ca5010;
font-size: 12px;
height: 18px;
line-height: 18px;
width: 18px
}
.od-Button.od-Button--hero .od-Button-label {
color: #ca5010;
font-size: 21px;
font-weight: 100;
position: relative;
text-decoration: none
}
.od-Button.od-Button--hero:focus .od-Button-icon,
.od-Button.od-Button--hero:hover .od-Button-icon {
color: #983c0c
}
.od-Button.od-Button--hero:focus .od-Button-icon .ms-Icon,
.od-Button.od-Button--hero:hover .od-Button-icon .ms-Icon {
border: 1px solid #983c0c
}
.od-Button.od-Button--hero:focus .od-Button-label,
.od-Button.od-Button--hero:hover .od-Button-label {
color: #652808
}
.od-Button.od-Button--hero:active .od-Button-icon {
color: #ca5010
}
.od-Button.od-Button--hero:active .od-Button-icon .ms-Icon {
border: 1px solid #ca5010
}
.od-Button.od-Button--hero:active .od-Button-label {
color: #ca5010
}
.od-Button.od-Button--hero.is-disabled .od-Button-icon,
.od-Button.od-Button--hero:disabled .od-Button-icon {
color: #c8c8c8
}
.od-Button.od-Button--hero.is-disabled .od-Button-icon .ms-Icon,
.od-Button.od-Button--hero:disabled .od-Button-icon .ms-Icon {
border: 1px solid #c8c8c8
}
.od-Button.od-Button--hero.is-disabled .od-Button-label,
.od-Button.od-Button--hero:disabled .od-Button-label {
color: #a6a6a6
}
.od-Button.od-Button--compound {
display: block;
height: auto;
max-width: 280px;
min-height: 72px;
padding: 20px
}
.od-Button.od-Button--compound .od-Button-label {
display: block;
font-weight: 600;
position: relative;
text-align: left;
margin-top: -5px
}
.od-Button.od-Button--compound .od-Button-description {
color: #666666;
display: block;
font-weight: 400;
font-size: 12px;
position: relative;
text-align: left;
top: 3px
}
.od-Button.od-Button--compound:hover .od-Button-description {
color: #212121
}
.od-Button.od-Button--compound:focus {
border-color: #ca5010;
background-color: #f4f4f4
}
.od-Button.od-Button--compound:focus .od-Button-label {
color: #333333
}
.od-Button.od-Button--compound:focus .od-Button-description {
color: #666666
}
.od-Button.od-Button--compound:active {
background-color: #ca5010
}
.od-Button.od-Button--compound:active .od-Button-description,
.od-Button.od-Button--compound:active .od-Button-label {
color: #ffffff
}
.od-Button.od-Button--compound.is-disabled .od-Button-description,
.od-Button.od-Button--compound.is-disabled .od-Button-label,
.od-Button.od-Button--compound:disabled .od-Button-description,
.od-Button.od-Button--compound:disabled .od-Button-label {
color: #a6a6a6
}
.od-Button.od-Button--compound.is-disabled:active,
.od-Button.od-Button--compound.is-disabled:focus,
.od-Button.od-Button--compound:disabled:active,
.od-Button.od-Button--compound:disabled:focus {
border-color: #f4f4f4;
background-color: #f4f4f4
}
.od-Button.od-Button--compound.is-disabled:active .od-Button-description,
.od-Button.od-Button--compound.is-disabled:active .od-Button-label,
.od-Button.od-Button--compound.is-disabled:focus .od-Button-description,
.od-Button.od-Button--compound.is-disabled:focus .od-Button-label,
.od-Button.od-Button--compound:disabled:active .od-Button-description,
.od-Button.od-Button--compound:disabled:active .od-Button-label,
.od-Button.od-Button--compound:disabled:focus .od-Button-description,
.od-Button.od-Button--compound:disabled:focus .od-Button-label {
color: #a6a6a6
}
.ms-Label {
font-size: 12px;
font-weight: 400;
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
padding: 5px 0
}
.ms-Label.is-required:after {
content: ' *';
color: #a80000
}
.ms-Label.is-disabled {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.ms-Label.is-disabled {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-Label.is-disabled {
color: #600000
}
}
.is-disabled .ms-Label {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.is-disabled .ms-Label {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.is-disabled .ms-Label {
color: #600000
}
}
.od-Toggle {
font-size: 14px;
font-weight: 400;
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
position: relative;
display: block;
margin-bottom: 26px
}
.od-Toggle .ms-Label {
position: relative;
top: -1px;
padding: 0 0 0 50px
}
html[dir=rtl] .od-Toggle .ms-Label {
padding: 0 50px 0 0
}
.od-Toggle .od-Toggle-field:before {
position: absolute;
top: 3px;
width: 10px;
height: 10px;
border-radius: 10px;
content: '';
left: 4px;
background-color: #666666;
outline: 1px solid transparent;
transition-property: background, left;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(.4, 0, .23, 1)
}
@media screen and (-ms-high-contrast:active) {
.od-Toggle .od-Toggle-field:before {
border: 2.5px solid #ffffff;
height: 15px;
outline: 0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-Toggle .od-Toggle-field:before {
border-color: #000000
}
}
[dir=ltr] .od-Toggle .od-Toggle-field:before {
right: auto
}
[dir=rtl] .od-Toggle .od-Toggle-field:before {
left: auto
}
.od-Toggle .od-Toggle-field .ms-Label--off {
display: block
}
.od-Toggle .od-Toggle-field .ms-Label--on {
display: none
}
.od-Toggle .od-Toggle-field.is-selected {
background-color: #ca5010;
border-color: #ca5010
}
.od-Toggle .od-Toggle-field.is-selected:before {
position: absolute;
top: 3px;
width: 10px;
height: 10px;
border-radius: 10px;
content: '';
right: 4px;
background-color: #666666;
outline: 1px solid transparent;
transition-property: background, left;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(.4, 0, .23, 1)
}
@media screen and (-ms-high-contrast:active) {
.od-Toggle .od-Toggle-field.is-selected:before {
border: 2.5px solid #ffffff;
height: 15px;
outline: 0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-Toggle .od-Toggle-field.is-selected:before {
border-color: #000000
}
}
.od-Toggle .od-Toggle-field.is-selected:before {
background-color: #ffffff
}
[dir=ltr] .od-Toggle .od-Toggle-field.is-selected:before {
left: 28px
}
[dir=rtl] .od-Toggle .od-Toggle-field.is-selected:before {
right: 28px
}
.od-Toggle .od-Toggle-field.is-selected .ms-Label--off {
display: none
}
.od-Toggle .od-Toggle-field.is-selected .ms-Label--on {
display: block
}
@media screen and (-ms-high-contrast:active) {
.od-Toggle .od-Toggle-field.is-selected {
background-color: #ffffff
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-Toggle .od-Toggle-field.is-selected {
background-color: #000000
}
}
.od-Toggle:focus+.od-Toggle-field,
.od-Toggle:hover+.od-Toggle-field {
border-color: #666666
}
.od-Toggle:focus+.od-Toggle-field:before,
.od-Toggle:hover+.od-Toggle-field:before {
background-color: #333333
}
.od-Toggle:focus:checked+.od-Toggle-field,
.od-Toggle:hover:checked+.od-Toggle-field {
background-color: #983c0c;
border-color: #983c0c
}
.od-Toggle:focus:checked+.od-Toggle-field:before,
.od-Toggle:hover:checked+.od-Toggle-field:before {
background-color: #ffffff
}
.od-Toggle:active:checked+.od-Toggle-field {
background-color: #983c0c;
border-color: #983c0c
}
.od-Toggle .od-Toggle-field:focus,
.od-Toggle .od-Toggle-field:hover {
border-color: #333333
}
.od-Toggle .od-Toggle-field.is-selected:focus,
.od-Toggle .od-Toggle-field.is-selected:hover {
background-color: #983c0c;
border-color: #983c0c
}
.od-Toggle .od-Toggle-field .ms-Label {
color: #000000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.od-Toggle .od-Toggle-field:hover .ms-Label {
color: #000000
}
.od-Toggle .od-Toggle-field:active .ms-Label {
color: #333333
}
.od-Toggle.is-disabled .ms-Label {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.od-Toggle.is-disabled .ms-Label {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-Toggle.is-disabled .ms-Label {
color: #600000
}
}
.od-Toggle.is-disabled .od-Toggle-field {
background-color: #ffffff;
border-color: #c8c8c8;
pointer-events: none;
cursor: default
}
.od-Toggle.is-disabled .od-Toggle-field:before {
background-color: #c8c8c8
}
@media screen and (-ms-high-contrast:active) {
.od-Toggle.is-disabled .od-Toggle-field,
.od-Toggle.is-disabled .od-Toggle-field:before {
border-color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-Toggle.is-disabled .od-Toggle-field,
.od-Toggle.is-disabled .od-Toggle-field:before {
border-color: #600000
}
}
.od-Toggle-description {
position: relative;
font-size: 14px;
vertical-align: top;
display: block;
margin-bottom: 8px
}
.od-Toggle-field {
position: relative;
display: inline-block;
width: 45px;
height: 20px;
box-sizing: border-box;
border: 2px solid #a6a6a6;
border-radius: 20px;
cursor: pointer;
transition-property: background, left, border-color;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(.4, 0, .23, 1);
outline: 0
}
.od-Toggle-field:focus,
.od-Toggle-field:hover {
border-color: #666666
}
.od-Toggle-input {
display: none
}
.od-Toggle.od-Toggle--textLeft {
width: 225px;
margin-bottom: 40px
}
.od-Toggle.od-Toggle--textLeft .od-Toggle-description {
display: inline-block;
max-width: 150px;
top: -3px;
margin-bottom: 0
}
.od-Toggle.od-Toggle--textLeft .od-Toggle-field {
float: right
}
.ms-Label {
font-size: 12px;
font-weight: 400;
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
padding: 5px 0
}
.ms-Label.is-required:after {
content: ' *';
color: #a80000
}
.ms-Label.is-disabled {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.ms-Label.is-disabled {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-Label.is-disabled {
color: #600000
}
}
.is-disabled .ms-Label {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.is-disabled .ms-Label {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.is-disabled .ms-Label {
color: #600000
}
}
.od-TextField {
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
color: #333333;
font-size: 14px;
font-weight: 400;
margin-bottom: 8px
}
.od-TextField .ms-Label {
font-size: 14px
}
.od-TextField.is-disabled .od-TextField-field {
background-color: #f4f4f4;
border-color: #f4f4f4;
pointer-events: none;
cursor: default
}
.od-TextField.is-disabled::-webkit-input-placeholder {
color: #a6a6a6
}
.od-TextField.is-disabled:-ms-input-placeholder {
color: #a6a6a6
}
.od-TextField.is-disabled::placeholder {
color: #a6a6a6
}
.od-TextField.is-required .ms-Label:after {
content: ' *';
color: #a80000
}
.od-TextField.is-required::-webkit-input-placeholder:after {
content: ' *';
color: #a80000
}
.od-TextField.is-required:-ms-input-placeholder:after {
content: ' *';
color: #a80000
}
.od-TextField.is-required::placeholder:after {
content: ' *';
color: #a80000
}
.od-TextField.is-active {
border-color: #ca5010
}
.od-TextField-field {
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
border: 1px solid #c8c8c8;
border-radius: 0;
font-weight: 300;
font-size: 14px;
color: #333333;
height: 32px;
padding: 6px 12px 7px;
width: 100%;
min-width: 180px;
outline: 0
}
.od-TextField-field:hover {
border-color: #767676
}
.od-TextField-field:focus {
border-color: #ca5010
}
@media screen and (-ms-high-contrast:active) {
.od-TextField-field:focus,
.od-TextField-field:hover {
border-color: #1AEBFF
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-TextField-field:focus,
.od-TextField-field:hover {
border-color: #37006E
}
}
.od-TextField-field::-webkit-input-placeholder {
color: #666666
}
.od-TextField-field:-ms-input-placeholder {
color: #666666
}
.od-TextField-field::placeholder {
color: #666666
}
.od-TextField-field-hasDropdown {
width: 68%
}
[dir=ltr] .od-TextField-field-hasDropdown {
margin-left: 7px
}
[dir=rtl] .od-TextField-field-hasDropdown {
margin-right: 7px
}
.od-TextField-description {
color: #767676;
font-size: 11px
}
.od-TextField.od-TextField--placeholder {
position: relative
}
.od-TextField.od-TextField--placeholder .ms-Label {
position: absolute;
font-weight: 300;
font-size: 14px;
color: #666666;
padding: 6px 12px 7px;
pointer-events: none
}
.od-TextField.od-TextField--placeholder.is-disabled {
color: #a6a6a6
}
.od-TextField.od-TextField--placeholder.is-disabled .ms-Label {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.od-TextField.od-TextField--placeholder.is-disabled .ms-Label {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-TextField.od-TextField--placeholder.is-disabled .ms-Label {
color: #600000
}
}
.od-TextField.od-TextField--underlined {
border-bottom: 1px solid #c8c8c8;
display: table;
width: 100%;
min-width: 180px
}
.od-TextField.od-TextField--underlined:hover {
border-color: #767676
}
@media screen and (-ms-high-contrast:active) {
.od-TextField.od-TextField--underlined:hover {
border-color: #1AEBFF
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-TextField.od-TextField--underlined:hover {
border-color: #37006E
}
}
.od-TextField.od-TextField--underlined:active,
.od-TextField.od-TextField--underlined:focus {
border-color: #ca5010
}
.od-TextField.od-TextField--underlined .ms-Label {
font-size: 14px;
display: table-cell;
vertical-align: top;
padding-top: 10px;
height: 32px;
width: 1%;
white-space: nowrap
}
[dir=ltr] .od-TextField.od-TextField--underlined .ms-Label {
margin-right: 8px
}
[dir=rtl] .od-TextField.od-TextField--underlined .ms-Label {
margin-left: 8px
}
[dir=ltr] .od-TextField.od-TextField--underlined .ms-Label {
padding-left: 12px
}
[dir=rtl] .od-TextField.od-TextField--underlined .ms-Label {
padding-right: 12px
}
.od-TextField.od-TextField--underlined .od-TextField-field {
border: 0;
float: left;
display: table-cell;
padding-top: 8px;
padding-bottom: 3px
}
html[dir=ltr] .od-TextField.od-TextField--underlined .od-TextField-field {
text-align: left
}
html[dir=rtl] .od-TextField.od-TextField--underlined .od-TextField-field {
text-align: right
}
.od-TextField.od-TextField--underlined .od-TextField-field:active,
.od-TextField.od-TextField--underlined .od-TextField-field:focus,
.od-TextField.od-TextField--underlined .od-TextField-field:hover {
outline: 0
}
.od-TextField.od-TextField--underlined.is-disabled {
border-bottom-color: #eaeaea
}
.od-TextField.od-TextField--underlined.is-disabled .ms-Label {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.od-TextField.od-TextField--underlined.is-disabled .ms-Label {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-TextField.od-TextField--underlined.is-disabled .ms-Label {
color: #600000
}
}
.od-TextField.od-TextField--underlined.is-disabled .od-TextField-field {
background-color: transparent;
color: #a6a6a6
}
.od-TextField.od-TextField--underlined.is-active {
border-color: #ca5010
}
@media screen and (-ms-high-contrast:active) {
.od-TextField.od-TextField--underlined.is-active {
border-color: #1AEBFF
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-TextField.od-TextField--underlined.is-active {
border-color: #37006E
}
}
.od-TextField.od-TextField--multiline .od-TextField-field {
color: #666666;
font-size: 14px;
font-weight: 400;
line-height: 17px;
min-height: 60px;
min-width: 260px;
padding-top: 6px;
overflow: auto
}
.od-TextField.od-TextField--textFieldUnderlined {
border: 0;
border-bottom: 1px solid #ca5010;
display: table;
width: 100%;
min-width: 180px
}
.od-TextField.od-TextField--textFieldUnderlined:hover {
border-color: #767676
}
.od-TextField.od-TextField--textFieldUnderlined:active,
.od-TextField.od-TextField--textFieldUnderlined:focus {
border-color: #ca5010
}
.od-TextField.od-TextField--textFieldUnderlined .od-TextField-field {
border: 0;
display: table-cell;
padding-top: 8px;
padding-bottom: 2px
}
html[dir=ltr] .od-TextField.od-TextField--textFieldUnderlined .od-TextField-field {
text-align: left
}
html[dir=rtl] .od-TextField.od-TextField--textFieldUnderlined .od-TextField-field {
text-align: right
}
.od-TextField.od-TextField--textFieldUnderlined .od-TextField-field:active,
.od-TextField.od-TextField--textFieldUnderlined .od-TextField-field:focus {
outline: 0
}
.od-TextField.od-TextField--textFieldUnderlined.is-disabled {
border-bottom-color: #eaeaea
}
.od-TextField.od-TextField--textFieldUnderlined.is-disabled .ms-Label {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.od-TextField.od-TextField--textFieldUnderlined.is-disabled .ms-Label {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-TextField.od-TextField--textFieldUnderlined.is-disabled .ms-Label {
color: #600000
}
}
.od-TextField.od-TextField--textFieldUnderlined.is-disabled .od-TextField-field {
background-color: transparent;
color: #a6a6a6
}
.ms-CheckBox {
font-size: 14px;
font-weight: 400;
box-sizing: border-box;
color: #333333;
min-height: 36px;
position: relative
}
.ms-CheckBox .ms-Label {
font-size: 14px;
padding: 0 0 0 26px;
cursor: pointer;
display: inline-block
}
html[dir=rtl] .ms-CheckBox .ms-Label {
padding: 0 26px 0 0
}
.ms-CheckBox-input {
position: absolute;
opacity: 0
}
.ms-CheckBox-field::before {
content: '';
display: inline-block;
border: 2px solid #a6a6a6;
width: 20px;
height: 20px;
cursor: pointer;
font-weight: 400;
position: absolute;
box-sizing: border-box;
transition-property: background, border, border-color;
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4, 0, .23, 1)
}
.ms-CheckBox-field::after {
content: '\E73E';
font-family: FabricMDL2Icons;
display: none;
position: absolute;
font-weight: 900;
background-color: transparent;
font-size: 13px;
top: 0;
color: #ffffff;
line-height: 20px;
width: 20px;
text-align: center
}
@media screen and (-ms-high-contrast:active) {
.ms-CheckBox-field::after {
color: #000000
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-CheckBox-field::after {
color: #ffffff
}
}
.ms-CheckBox-field {
display: inline-block;
cursor: pointer;
margin-top: 8px;
position: relative;
outline: 0;
vertical-align: top
}
.ms-CheckBox-field:focus::before,
.ms-CheckBox-field:hover::before {
border-color: #767676
}
.ms-CheckBox-field:focus .ms-Label,
.ms-CheckBox-field:hover .ms-Label {
color: #000000
}
.ms-CheckBox-field.is-disabled {
cursor: default
}
.ms-CheckBox-field.is-disabled::before {
background-color: #c8c8c8;
border-color: #c8c8c8;
color: #c8c8c8
}
@media screen and (-ms-high-contrast:active) {
.ms-CheckBox-field.is-disabled::before {
border-color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-CheckBox-field.is-disabled::before {
border-color: #600000
}
}
.ms-CheckBox-field.is-disabled .ms-Label {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.ms-CheckBox-field.is-disabled .ms-Label {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-CheckBox-field.is-disabled .ms-Label {
color: #600000
}
}
.ms-CheckBox-field.in-focus::before {
border-color: #767676
}
.ms-CheckBox-field.in-focus.is-disabled::before {
border-color: #c8c8c8
}
.ms-CheckBox-field.in-focus.is-checked::before {
border-color: #983c0c
}
.ms-CheckBox-field.is-checked::before {
border: 10px solid #ca5010;
background-color: #ca5010
}
@media screen and (-ms-high-contrast:active) {
.ms-CheckBox-field.is-checked::before {
border-color: #1AEBFF
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-CheckBox-field.is-checked::before {
border-color: #37006E
}
}
.ms-CheckBox-field.is-checked::after {
display: block
}
.ms-CheckBox-field.is-checked:focus::before,
.ms-CheckBox-field.is-checked:hover::before {
border-color: #983c0c
}
.ms-CheckBox-field.is-checked.is-disabled::before {
background-color: #c8c8c8;
border: 10px solid #c8c8c8;
color: #c8c8c8
}
@media screen and (-ms-high-contrast:active) {
.ms-CheckBox-field.is-checked.is-disabled::before {
border-color: #1AEBFF
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-CheckBox-field.is-checked.is-disabled::before {
border-color: #37006E
}
}
.ms-CheckBox-field.is-checked.is-disabled::after {
display: block
}
.ms-CheckBox-field.is-checked.is-disabled:focus::before,
.ms-CheckBox-field.is-checked.is-disabled:hover::before {
background-color: #c8c8c8;
border: 10px solid #c8c8c8;
color: #c8c8c8
}
.ms-RadioButton {
font-size: 14px;
font-weight: 400;
box-sizing: border-box;
color: #333333;
min-height: 36px;
position: relative
}
.ms-RadioButton .ms-Label {
font-size: 14px;
padding: 0 0 0 26px;
cursor: pointer;
display: inline-block
}
html[dir=rtl] .ms-RadioButton .ms-Label {
padding: 0 26px 0 0
}
.ms-RadioButton-input {
position: absolute;
opacity: 0
}
.ms-RadioButton-field::before {
content: '';
display: inline-block;
border: 2px solid #a6a6a6;
width: 20px;
height: 20px;
cursor: pointer;
font-weight: 400;
position: absolute;
box-sizing: border-box;
transition-property: border-color;
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4, 0, .23, 1);
border-radius: 50%
}
.ms-RadioButton-field::after {
content: '';
width: 0;
height: 0;
border-radius: 50%;
position: absolute;
top: 8px;
bottom: 0;
transition-property: top, left, width, height;
transition-duration: 150ms;
transition-timing-function: cubic-bezier(.4, 0, .23, 1);
box-sizing: border-box
}
[dir=ltr] .ms-RadioButton-field::after {
left: 8px
}
[dir=rtl] .ms-RadioButton-field::after {
right: 8px
}
[dir=ltr] .ms-RadioButton-field::after {
right: 0
}
[dir=rtl] .ms-RadioButton-field::after {
left: 0
}
@media screen and (-ms-high-contrast:active) {
.ms-RadioButton-field::after {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-RadioButton-field::after {
color: #600000
}
}
.ms-RadioButton-field {
display: inline-block;
cursor: pointer;
margin-top: 8px;
position: relative;
outline: 0;
vertical-align: top
}
.ms-RadioButton-field:focus::before,
.ms-RadioButton-field:hover::before {
border-color: #767676
}
.ms-RadioButton-field:focus .ms-Label,
.ms-RadioButton-field:hover .ms-Label {
color: #000000
}
.ms-RadioButton-field.is-disabled {
cursor: default
}
.ms-RadioButton-field.is-disabled::before {
background-color: #c8c8c8;
border-color: #c8c8c8;
color: #c8c8c8
}
@media screen and (-ms-high-contrast:active) {
.ms-RadioButton-field.is-disabled::before {
border-color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-RadioButton-field.is-disabled::before {
border-color: #600000
}
}
.ms-RadioButton-field.is-disabled .ms-Label {
color: #a6a6a6
}
@media screen and (-ms-high-contrast:active) {
.ms-RadioButton-field.is-disabled .ms-Label {
color: #0f0
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-RadioButton-field.is-disabled .ms-Label {
color: #600000
}
}
.ms-RadioButton-field.is-disabled:focus::before,
.ms-RadioButton-field.is-disabled:hover::before {
border-color: #c8c8c8
}
.ms-RadioButton-field.in-focus::before {
border-color: #767676
}
.ms-RadioButton-field.is-checked::before,
.ms-RadioButton-input:checked+.ms-RadioButton-field::before {
border: 2px solid #ca5010;
background-color: transparent
}
@media screen and (-ms-high-contrast:active) {
.ms-RadioButton-field.is-checked::before,
.ms-RadioButton-input:checked+.ms-RadioButton-field::before {
border-color: #1AEBFF
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-RadioButton-field.is-checked::before,
.ms-RadioButton-input:checked+.ms-RadioButton-field::before {
border-color: #37006E
}
}
.ms-RadioButton-field.is-checked::after,
.ms-RadioButton-input:checked+.ms-RadioButton-field::after {
background-color: #ca5010;
top: 5px;
width: 10px;
height: 10px
}
[dir=ltr] .ms-RadioButton-field.is-checked::after,
[dir=ltr] .ms-RadioButton-input:checked+.ms-RadioButton-field::after {
left: 5px
}
[dir=rtl] .ms-RadioButton-field.is-checked::after,
[dir=rtl] .ms-RadioButton-input:checked+.ms-RadioButton-field::after {
right: 5px
}
@media screen and (-ms-high-contrast:active) {
.ms-RadioButton-field.is-checked::after,
.ms-RadioButton-input:checked+.ms-RadioButton-field::after {
background-color: #1AEBFF
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.ms-RadioButton-field.is-checked::after,
.ms-RadioButton-input:checked+.ms-RadioButton-field::after {
background-color: #37006E
}
}
.ms-RadioButton-field.is-checked:focus::before,
.ms-RadioButton-field.is-checked:hover::before,
.ms-RadioButton-input:checked+.ms-RadioButton-field:focus::before,
.ms-RadioButton-input:checked+.ms-RadioButton-field:hover::before {
border-color: #ca5010
}
.ms-RadioButton-field.is-checked.in-focus::before,
.ms-RadioButton-input:checked+.ms-RadioButton-field.in-focus::before {
border-color: #ca5010
}
.ms-accessible {
position: absolute;
top: -9001px;
left: -9001px;
height: 1px;
width: 1px
}
body,
html {
height: 100%
}
body {
overflow: hidden;
color: #333333;
background-color: #ffffff;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
body:before {
content: '';
position: absolute;
background-image: none;
background-size: cover;
background-repeat: no-repeat;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1
}
body:after {
content: '';
position: absolute;
background-color: transparent;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1
}
div#c_watsonui {
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text
}
input:not([type]),
input[type=email],
input[type=file],
input[type=password],
input[type=text],
select,
textarea {
background-color: #ffffff;
border-color: #c8c8c8;
color: #333333
}
input:not([type]):hover,
input[type=email]:hover,
input[type=file]:hover,
input[type=password]:hover,
input[type=text]:hover,
select:hover,
textarea:hover {
border-color: #767676
}
input:not([type]):focus,
input[type=email]:focus,
input[type=file]:focus,
input[type=password]:focus,
input[type=text]:focus,
select:focus,
textarea:focus {
border-color: #ca5010
}
input,
textarea {
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text
}
@media (max-width:319px) {
body {
overflow-x: auto
}
}
body,
input,
textarea {
font-family: "Segoe UI Regular WestEuropean", "Segoe UI", Tahoma, Arial, sans-serif;
font-weight: 400;
margin: 0;
padding: 0
}
#spoAppComponent,
.SPOApp {
height: 100%
}
a {
color: #ca5010;
text-decoration: none
}
a:focus,
a:hover {
color: #652808
}
a:focus {
outline: 1px solid transparent
}
.od-focus--enabled a:focus {
box-shadow: 0 0 0 1px #767676 inset
}
button:focus {
outline: 1px solid transparent
}
.od-focus--enabled button:focus {
box-shadow: 0 0 0 1px #767676 inset
}
img {
border: none;
padding: 0;
margin: 0
}
@media (max-width:640px) {
.c-BreadcrumbBar,
.c-SortMenu,
.leftNavArea {
opacity: 0
}
.leftNavArea {
left: -180px
}
.contentArea {
left: 0
}
}
.debug {
border: 2px solid #333;
border-radius: 2px;
background: #f9f9f9;
height: 100px;
overflow-y: scroll
}
@media print {
body {
overflow: visible!important
}
}
.EmptyFolder {
text-align: center
}
.EmptyFolder-image {
padding-top: 52px;
height: 208px;
width: auto;
margin: 0 auto
}
.EmptyFolder-image .EmptyFolder-imageTag {
height: 208px;
width: auto
}
.md .EmptyFolder-image,
.sm .EmptyFolder-image {
padding-top: 20px;
height: 168px;
width: 168px
}
.EmptyFolder-title {
padding: 16px 16px 0 16px;
font-size: 21px;
font-weight: 100;
max-width: 400px;
color: #666666;
margin: 0 auto
}
html[dir=rtl] .EmptyFolder-title {
padding: 16px 16px 0 16px
}
.md .EmptyFolder-title,
.sm .EmptyFolder-title {
font-size: 17px;
font-weight: 300
}
.EmptyFolder-subText {
padding: 6px 16px 0 16px;
font-size: 14px;
font-weight: 400;
max-width: 400px;
color: #666666;
margin: 0 auto
}
html[dir=rtl] .EmptyFolder-subText {
padding: 6px 16px 0 16px
}
.EmptyFolder-icon {
display: inline;
font-size: 13px;
padding-left: 2px;
padding-right: 1px
}
.EmptyFolder-mobile {
display: none
}
.od--isMobile .EmptyFolder-mobile {
display: block
}
.od--isMobile .EmptyFolder-pc {
display: none
}
.EmptyFolder-subTextPart2Link {
cursor: pointer
}
.od-AppView {
max-width: 380px;
margin: auto;
padding-top: 60px;
text-align: center;
color: #212121
}
.od-AppView-icon {
font-size: 40px;
color: #742774
}
.od-AppView-title {
margin-top: 10px
}
.od-AppView-appSyncDetail {
margin-top: 8px
}
.od-AppView>.od-ClientFormFields-loadingSpinner {
padding: 0
}
.od-AppView-additionalActions,
.od-AppView-appViewError {
padding-top: 24px
}
.od-AppView-section {
padding-top: 20px
}
.od-AppView-progressSpinnerContainer {
height: 6px
}
.od-AppView-launchButton {
outline: 0
}
.od-AppView a,
.od-AppView a:visited {
cursor: pointer;
text-decoration: underline;
color: #000000
}
.od-AppView a:hover,
.od-AppView a:visited:hover {
color: #000000
}
.od-AppView-errorIcon,
.od-AppView-errorMessageArea {
display: inline-block;
vertical-align: top
}
.od-AppView-errorIcon {
color: #a80000;
font-size: 21px
}
[dir=ltr] .od-AppView-errorIcon {
padding-right: 5px
}
[dir=rtl] .od-AppView-errorIcon {
padding-left: 5px
}
.od-AppView-errorMessageArea {
padding-top: 5px
}
.od-AppView-remediationLink {
margin-top: 10px
}
.od-AppView-loadingOverlay.ms-ModalOverlay {
position: fixed;
top: 50px;
z-index: 600
}
.od-AppView-loadingText {
position: fixed;
cursor: pointer;
top: 40%;
width: 100%;
z-index: 600;
text-align: center
}
[dir=ltr] .od-AppView-loadingText {
left: 0
}
[dir=rtl] .od-AppView-loadingText {
right: 0
}
.od-AppView-loadingText>span {
font-size: 30px
}
.od-Error {
text-align: center
}
.od-Error-image {
padding-top: 52px;
height: 208px;
width: auto;
margin: 0 auto
}
.od-Error-image .od-Error-imageTag {
height: 208px;
width: auto
}
.md .od-Error-image,
.sm .od-Error-image {
padding-top: 20px;
height: 168px;
width: 168px
}
.od-Error-title {
padding: 16px 16px 0 16px;
font-size: 21px;
font-weight: 100;
max-width: 400px;
color: #666666;
margin: 0 auto
}
html[dir=rtl] .od-Error-title {
padding: 16px 16px 0 16px
}
.md .od-Error-title,
.sm .od-Error-title {
font-size: 17px;
font-weight: 300
}
.od-Error-subText {
padding: 6px 16px 0 16px;
font-size: 14px;
font-weight: 400;
max-width: 400px;
color: #666666;
margin: 0 auto
}
html[dir=rtl] .od-Error-subText {
padding: 6px 16px 0 16px
}
.od-Error-subtext--accessremoved {
max-width: 410px
}
.od-Error-code {
padding-top: 8px;
color: #a6a6a6;
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
font-size: 12px;
font-weight: 400
}
.od-Error-button {
padding-top: 16px;
font-size: 14px;
font-weight: 400
}
.SpotlightHost-placeHolder {
display: block;
white-space: nowrap;
margin-top: 20px;
min-width: 312px;
min-height: 192px
}
.od-DragAndDropHint-box {
font-size: 14px;
font-weight: 400;
color: #666666;
text-align: center;
box-sizing: border-box
}
.od-DragAndDropHint-file {
height: 80%;
top: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
width: 100%
}
html[dir=ltr] .od-DragAndDropHint-file {
left: 50%
}
html[dir=rtl] .od-DragAndDropHint-file {
right: 50%
}
.od-DragAndDropHint-fileContainer {
width: 100%;
height: 74%;
position: relative
}
.od-DragAndDropHint-robot {
height: 173px;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
margin-top: 12px
}
.od-DragAndDropHint-box--robot {
border: 2px dashed #eaeaea
}
.od-DragAndDropHint-robot--grid {
display: inline-block;
margin: 0;
background-position: -25px;
background-size: auto 100%;
width: 45%;
vertical-align: top
}
.od-DragAndDropHint--grid {
height: 100%;
width: 100%;
position: relative
}
.od-DragAndDropHint-box--grid {
height: 100%;
width: 54%;
display: inline-block;
vertical-align: top
}
.od-DragAndDropHint-text--grid {
padding: 4px 5px;
font-size: 15px;
overflow: hidden;
width: 100%;
display: inline-block;
box-sizing: border-box;
text-overflow: ellipsis;
height: 40%
}
.od-DragAndDropHint.is-animating {
opacity: 0
}
.od-DragAndDropHint-robotAnimation.od-DragAndDropHint-robot--grid {
background-size: auto 106%
}
.od-ListFooter {
text-align: center;
margin-top: 33px;
margin-bottom: 24px
}
.od-ListFooter-dragAndDropHint {
margin-bottom: 18px
}
.od-ListFooter-recycleBin {
font-size: 14px;
font-weight: 400
}
.od-ListFooter-recycleBinText {
color: #666666
}
.od-ListFooter-recycleBinLink {
color: #ca5010
}
.lg .od-ItemContent-metadata,
.md .od-ItemContent-metadata,
.sm .od-ItemContent-metadata {
font-size: 14px
}
.xlg .od-ItemContent-metadata,
.xxlg .od-ItemContent-metadata,
.xxxlg .od-ItemContent-metadata,
.xxxxlg .od-ItemContent-metadata {
font-size: 16px
}
.od-ItemContent-metadata-button {
cursor: pointer;
border-width: 0;
background-color: #ffffff;
padding-left: 0;
padding-right: 0
}
.od-ItemContent-metadata-button i {
color: #333333
}
.isFluent .od-ItemContent-metadata-button i {
color: #323130
}
.od-OneUpOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0
}
.od-OverlayHost-overlay .od-OneUpOverlay {
transition: opacity 367ms linear, visibility 0s linear 367ms, transform 367ms linear;
opacity: 0;
visibility: hidden;
-ms-transform: none;
transform: none
}
.od-OverlayHost-overlay.od-OverlayHost-overlay--initial .od-OneUpOverlay,
.od-OverlayHost-overlay.od-OverlayHost-overlay--opened .od-OneUpOverlay {
transition-delay: 0s, 0s, 0s;
opacity: 1;
visibility: inherit
}
.od-OverlayHost-overlay.od-OverlayHost-overlay--closed .od-OneUpOverlay {
-ms-transform: scale(.8, .8);
transform: scale(.8, .8);
opacity: 0;
visibility: hidden
}
.StandaloneList {
position: absolute;
width: 100%;
height: 100%
}
.StandaloneList:not(.has-smart-banner) .StandaloneList-smartBanner {
display: none
}
.StandaloneList-loadingSpinner {
position: absolute;
top: 0;
left: 0;
right: 0
}
.StandaloneList-content {
overflow-x: hidden
}
.StandaloneList-content.od-StandaloneList-content--isScrollable {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: absolute
}
.ms-ContextualMenu.ms-FocusZone.is-open {
position: relative;
border: none;
box-shadow: 0 0 3px 1px #d3d3d3;
max-width: 320px;
width: auto
}
.StandaloneList-viewCommandBar {
-ms-flex-item-align: end;
align-self: flex-end;
margin-top: -3px
}
[dir=ltr] .StandaloneList-viewCommandBar {
margin-left: auto
}
[dir=rtl] .StandaloneList-viewCommandBar {
margin-right: auto
}
.xlg .StandaloneList-viewCommandBar,
.xxlg .StandaloneList-viewCommandBar,
.xxxlg .StandaloneList-viewCommandBar,
.xxxxlg .StandaloneList-viewCommandBar {
margin-top: -13px
}
.md .StandaloneList-viewCommandBar,
.sm .StandaloneList-viewCommandBar {
margin-top: -8px
}
.StandaloneList-viewCommandBar .ms-CommandBar {
background-color: inherit;
padding: 0
}
.StandaloneList-viewCommandBar .CommandBar-sideArea {
min-width: 0
}
.CustomList-content {
overflow-x: auto
}
.StandaloneList-innerContent {
position: relative;
min-height: 100%;
padding-bottom: 60px;
box-sizing: border-box
}
.StandaloneList-header {
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 10px;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap
}
.sm .StandaloneList-header .CommandBar-sideArea {
min-width: 0
}
.xlg .StandaloneList-header,
.xxlg .StandaloneList-header,
.xxxlg .StandaloneList-header,
.xxxxlg .StandaloneList-header {
padding-top: 23px;
padding-bottom: 0
}
.isFluent.xlg .StandaloneList-header {
padding-top: 46px
}
.isFluent.xxlg .StandaloneList-header {
padding-top: 46px
}
.isFluent.xxxlg .StandaloneList-header {
padding-top: 46px
}
.isFluent.xxxxlg .StandaloneList-header {
padding-top: 46px
}
.lg .StandaloneList-footer,
.md .StandaloneList-footer,
.sm .StandaloneList-footer {
padding: 10px 20px
}
.StandaloneList-footer {
padding: 0 30px;
white-space: nowrap;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0
}
.StandaloneList-title {
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: default;
font-size: 21px;
font-weight: 100
}
[dir=ltr] .StandaloneList-title {
margin-right: 15px
}
[dir=rtl] .StandaloneList-title {
margin-left: 15px
}
.isFluent .StandaloneList-title {
font-size: 20px;
font-weight: 600;
color: #323130
}
.lg .StandaloneList-title,
.md .StandaloneList-title,
.sm .StandaloneList-title {
font-weight: 300
}
.xlg .StandaloneList-title,
.xxlg .StandaloneList-title,
.xxxlg .StandaloneList-title,
.xxxxlg .StandaloneList-title {
font-size: 28px;
font-weight: 100
}
.isFluent.xlg .StandaloneList-title {
font-size: 20px;
font-weight: 600
}
.isFluent.xxlg .StandaloneList-title {
font-size: 20px;
font-weight: 600
}
.isFluent.xxxlg .StandaloneList-title {
font-size: 20px;
font-weight: 600
}
.isFluent.xxxxlg .StandaloneList-title {
font-size: 20px;
font-weight: 600
}
.StandaloneList-breadcrumb {
font-size: 17px;
font-weight: 300
}
.md .StandaloneList-breadcrumb,
.sm .StandaloneList-breadcrumb {
font-size: 14px;
font-weight: 400
}
.xlg .StandaloneList-breadcrumb,
.xxlg .StandaloneList-breadcrumb,
.xxxlg .StandaloneList-breadcrumb,
.xxxxlg .StandaloneList-breadcrumb {
font-size: 21px;
font-weight: 100;
margin-bottom: 1px
}
.StandaloneList.dropping .StandaloneList-innerContent:before {
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 3px #c8c8c8
}
[dir=ltr] .StandaloneList-header,
[dir=ltr] .StandaloneList-listView,
[dir=ltr] .StandaloneList-subcomponent {
padding-left: 32px
}
[dir=rtl] .StandaloneList-header,
[dir=rtl] .StandaloneList-listView,
[dir=rtl] .StandaloneList-subcomponent {
padding-right: 32px
}
[dir=ltr] .StandaloneList-header,
[dir=ltr] .StandaloneList-listView,
[dir=ltr] .StandaloneList-subcomponent {
padding-right: 32px
}
[dir=rtl] .StandaloneList-header,
[dir=rtl] .StandaloneList-listView,
[dir=rtl] .StandaloneList-subcomponent {
padding-left: 32px
}
[dir=ltr] .xlg .StandaloneList-header,
[dir=ltr] .xlg .StandaloneList-listView,
[dir=ltr] .xlg .StandaloneList-subcomponent,
[dir=ltr] .xxlg .StandaloneList-header,
[dir=ltr] .xxlg .StandaloneList-listView,
[dir=ltr] .xxlg .StandaloneList-subcomponent,
[dir=ltr] .xxxlg .StandaloneList-header,
[dir=ltr] .xxxlg .StandaloneList-listView,
[dir=ltr] .xxxlg .StandaloneList-subcomponent,
[dir=ltr] .xxxxlg .StandaloneList-header,
[dir=ltr] .xxxxlg .StandaloneList-listView,
[dir=ltr] .xxxxlg .StandaloneList-subcomponent {
padding-left: 32px
}
[dir=rtl] .xlg .StandaloneList-header,
[dir=rtl] .xlg .StandaloneList-listView,
[dir=rtl] .xlg .StandaloneList-subcomponent,
[dir=rtl] .xxlg .StandaloneList-header,
[dir=rtl] .xxlg .StandaloneList-listView,
[dir=rtl] .xxlg .StandaloneList-subcomponent,
[dir=rtl] .xxxlg .StandaloneList-header,
[dir=rtl] .xxxlg .StandaloneList-listView,
[dir=rtl] .xxxlg .StandaloneList-subcomponent,
[dir=rtl] .xxxxlg .StandaloneList-header,
[dir=rtl] .xxxxlg .StandaloneList-listView,
[dir=rtl] .xxxxlg .StandaloneList-subcomponent {
padding-right: 32px
}
[dir=ltr] .xlg .StandaloneList-header,
[dir=ltr] .xlg .StandaloneList-listView,
[dir=ltr] .xlg .StandaloneList-subcomponent,
[dir=ltr] .xxlg .StandaloneList-header,
[dir=ltr] .xxlg .StandaloneList-listView,
[dir=ltr] .xxlg .StandaloneList-subcomponent,
[dir=ltr] .xxxlg .StandaloneList-header,
[dir=ltr] .xxxlg .StandaloneList-listView,
[dir=ltr] .xxxlg .StandaloneList-subcomponent,
[dir=ltr] .xxxxlg .StandaloneList-header,
[dir=ltr] .xxxxlg .StandaloneList-listView,
[dir=ltr] .xxxxlg .StandaloneList-subcomponent {
padding-right: 32px
}
[dir=rtl] .xlg .StandaloneList-header,
[dir=rtl] .xlg .StandaloneList-listView,
[dir=rtl] .xlg .StandaloneList-subcomponent,
[dir=rtl] .xxlg .StandaloneList-header,
[dir=rtl] .xxlg .StandaloneList-listView,
[dir=rtl] .xxlg .StandaloneList-subcomponent,
[dir=rtl] .xxxlg .StandaloneList-header,
[dir=rtl] .xxxlg .StandaloneList-listView,
[dir=rtl] .xxxlg .StandaloneList-subcomponent,
[dir=rtl] .xxxxlg .StandaloneList-header,
[dir=rtl] .xxxxlg .StandaloneList-listView,
[dir=rtl] .xxxxlg .StandaloneList-subcomponent {
padding-left: 32px
}
[dir=ltr] .md .StandaloneList-header,
[dir=ltr] .md .StandaloneList-listView,
[dir=ltr] .md .StandaloneList-subcomponent,
[dir=ltr] .sm .StandaloneList-header,
[dir=ltr] .sm .StandaloneList-listView,
[dir=ltr] .sm .StandaloneList-subcomponent {
padding-left: 16px
}
[dir=rtl] .md .StandaloneList-header,
[dir=rtl] .md .StandaloneList-listView,
[dir=rtl] .md .StandaloneList-subcomponent,
[dir=rtl] .sm .StandaloneList-header,
[dir=rtl] .sm .StandaloneList-listView,
[dir=rtl] .sm .StandaloneList-subcomponent {
padding-right: 16px
}
[dir=ltr] .md .StandaloneList-header,
[dir=ltr] .md .StandaloneList-listView,
[dir=ltr] .md .StandaloneList-subcomponent,
[dir=ltr] .sm .StandaloneList-header,
[dir=ltr] .sm .StandaloneList-listView,
[dir=ltr] .sm .StandaloneList-subcomponent {
padding-right: 16px
}
[dir=rtl] .md .StandaloneList-header,
[dir=rtl] .md .StandaloneList-listView,
[dir=rtl] .md .StandaloneList-subcomponent,
[dir=rtl] .sm .StandaloneList-header,
[dir=rtl] .sm .StandaloneList-listView,
[dir=rtl] .sm .StandaloneList-subcomponent {
padding-left: 16px
}
.StandaloneList-listView {
padding-top: 12px
}
.xlg .StandaloneList-listView,
.xxlg .StandaloneList-listView,
.xxxlg .StandaloneList-listView,
.xxxxlg .StandaloneList-listView {
padding-top: 20px
}
.od-StandaloneList-seeMore {
font-size: 12px;
font-weight: 400
}
[dir=ltr] .od-StandaloneList-seeMore {
margin-left: 77px
}
[dir=rtl] .od-StandaloneList-seeMore {
margin-right: 77px
}
.StandaloneList-sharedIndicator {
margin-top: 7px
}
.md .StandaloneList-sharedIndicator,
.sm .StandaloneList-sharedIndicator {
margin-top: 5px
}
.xlg .StandaloneList-sharedIndicator,
.xxlg .StandaloneList-sharedIndicator,
.xxxlg .StandaloneList-sharedIndicator,
.xxxxlg .StandaloneList-sharedIndicator {
margin-top: 14px
}
.isFluent.xlg .StandaloneList-sharedIndicator {
margin-top: 5px;
position: relative;
top: 2px
}
.isFluent.xxlg .StandaloneList-sharedIndicator {
margin-top: 5px;
position: relative;
top: 2px
}
.isFluent.xxxlg .StandaloneList-sharedIndicator {
margin-top: 5px;
position: relative;
top: 2px
}
.isFluent.xxxxlg .StandaloneList-sharedIndicator {
margin-top: 5px;
position: relative;
top: 2px
}
.StandaloneList-teamChannelBanner {
display: block;
margin: auto;
padding: 20px 32px 0 32px
}
@media print {
.printEnabled .StandaloneList-content {
overflow: visible!important
}
[dir=ltr] .printEnabled .StandaloneList-content {
left: 0!important
}
[dir=rtl] .printEnabled .StandaloneList-content {
right: 0!important
}
[dir=ltr] .printEnabled .StandaloneList-content {
right: auto!important
}
[dir=rtl] .printEnabled .StandaloneList-content {
left: auto!important
}
.printEnabled .StandaloneList-innerContent {
margin-top: 0
}
}
.xlg .BreadcrumbBar,
.xxlg .BreadcrumbBar,
.xxxlg .BreadcrumbBar,
.xxxxlg .BreadcrumbBar {
margin-top: 7px
}
.isFluent.xlg .BreadcrumbBar {
margin-top: 1px;
position: relative;
top: 2px
}
.isFluent.xxlg .BreadcrumbBar {
margin-top: 1px;
position: relative;
top: 2px
}
.isFluent.xxxlg .BreadcrumbBar {
margin-top: 1px;
position: relative;
top: 2px
}
.isFluent.xxxxlg .BreadcrumbBar {
margin-top: 1px;
position: relative;
top: 2px
}
.BreadcrumbBar-list {
display: block;
margin: 0;
padding: 0;
display: block;
white-space: nowrap;
overflow: hidden;
font-size: 0
}
[dir=ltr] .BreadcrumbBar-list {
margin-left: -8px
}
[dir=rtl] .BreadcrumbBar-list {
margin-right: -8px
}
.BreadcrumbBar-list li {
list-style-type: none;
vertical-align: top;
margin: 0;
padding: 0;
display: inline-block
}
.isFluent .BreadcrumbBar-list li:last-child .BreadcrumbBar-item {
font-weight: 600;
color: #323130
}
.lg .BreadcrumbBar-list,
.md .BreadcrumbBar-list,
.sm .BreadcrumbBar-list {
margin-top: 0
}
.BreadcrumbBar-overflow {
font-size: 16px;
display: inline-block;
color: #ca5010;
padding: 8px 4px;
cursor: pointer
}
.isFluent .BreadcrumbBar-overflow {
color: #605e5c
}
.lg .BreadcrumbBar-overflow {
padding: 9px 4px
}
.xlg .BreadcrumbBar-overflow,
.xxlg .BreadcrumbBar-overflow,
.xxxlg .BreadcrumbBar-overflow,
.xxxxlg .BreadcrumbBar-overflow {
font-size: 18px;
padding: 8px 8px
}
.isFluent.xlg .BreadcrumbBar-overflow {
padding: 5px 8px
}
.isFluent.xxlg .BreadcrumbBar-overflow {
padding: 5px 8px
}
.isFluent.xxxlg .BreadcrumbBar-overflow {
padding: 5px 8px
}
.isFluent.xxxxlg .BreadcrumbBar-overflow {
padding: 5px 8px
}
.BreadcrumbBar-overflow:hover {
color: #ca5010
}
.BreadcrumbBar-navItem:hover,
.BreadcrumbBar-overflow:hover {
background: #f4f4f4
}
.od-focus--enabled .BreadcrumbBar-navItem:focus,
.od-focus--enabled .BreadcrumbBar-overflow:focus {
box-shadow: 0 0 0 2px #c8c8c8 inset
}
.BreadcrumbBar-navItem:active {
background: #c8c8c8
}
a.BreadcrumbBar-item {
color: #333333
}
.isFluent a.BreadcrumbBar-item {
color: #605e5c
}
.BreadcrumbBar-navItem {
max-width: 160px
}
.md .BreadcrumbBar-navItem,
.sm .BreadcrumbBar-navItem {
max-width: 116px
}
.BreadcrumbBar-item {
font-size: 14px;
font-weight: 400;
display: inline-block;
text-decoration: none;
padding: 0 8px;
height: 28px;
line-height: 32px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}
.lg .BreadcrumbBar-item {
font-size: 17px;
font-weight: 300
}
.xlg .BreadcrumbBar-item,
.xxlg .BreadcrumbBar-item,
.xxxlg .BreadcrumbBar-item,
.xxxxlg .BreadcrumbBar-item {
font-size: 21px;
font-weight: 100;
padding-bottom: 1px;
line-height: 28px
}
.isFluent.sm .BreadcrumbBar-item {
font-size: 18px;
font-weight: 400;
line-height: 24px;
height: 24px
}
.isFluent.md .BreadcrumbBar-item {
font-size: 18px;
font-weight: 400;
line-height: 24px;
height: 24px
}
.isFluent.lg .BreadcrumbBar-item {
font-size: 18px;
font-weight: 400;
line-height: 24px;
height: 24px
}
.isFluent.xlg .BreadcrumbBar-item {
font-size: 18px;
font-weight: 400;
line-height: 24px;
height: 24px
}
.isFluent.xxlg .BreadcrumbBar-item {
font-size: 18px;
font-weight: 400;
line-height: 24px;
height: 24px
}
.isFluent.xxxlg .BreadcrumbBar-item {
font-size: 18px;
font-weight: 400;
line-height: 24px;
height: 24px
}
.isFluent.xxxxlg .BreadcrumbBar-item {
font-size: 18px;
font-weight: 400;
line-height: 24px;
height: 24px
}
.sm .BreadcrumbBar-item {
max-width: 100px
}
.BreadcrumbBar-item.dropping {
background: #c8c8c8
}
.BreadcrumbBar-item-chevron {
font-size: 10px;
display: inline-block;
font-family: FabricMDL2Icons;
font-style: normal;
font-weight: 400;
speak: none;
color: #666666;
vertical-align: top;
padding: 0 2px;
margin-top: 11px
}
.isFluent .BreadcrumbBar-item-chevron {
color: #605e5c
}
.lg .BreadcrumbBar-item-chevron {
margin-top: 13px
}
.isFluent.lg .BreadcrumbBar-item-chevron {
margin-top: 10px
}
.xlg .BreadcrumbBar-item-chevron,
.xxlg .BreadcrumbBar-item-chevron,
.xxxlg .BreadcrumbBar-item-chevron,
.xxxxlg .BreadcrumbBar-item-chevron {
font-size: 12px;
margin-top: 11px;
padding: 0 4px
}
.isFluent.xlg .BreadcrumbBar-item-chevron {
margin-top: 7px;
font-size: 12px
}
.isFluent.xxlg .BreadcrumbBar-item-chevron {
margin-top: 7px;
font-size: 12px
}
.isFluent.xxxlg .BreadcrumbBar-item-chevron {
margin-top: 7px;
font-size: 12px
}
.isFluent.xxxxlg .BreadcrumbBar-item-chevron {
margin-top: 7px;
font-size: 12px
}
.BreadcrumbBar-item-chevron:after {
font-family: FabricMDL2Icons;
content: '\e76c'
}
html[dir=rtl] .BreadcrumbBar-item-chevron:after {
font-family: FabricMDL2Icons;
content: '\e76b'
}
.od-ListItemFormRoot .BreadcrumbBar {
margin-bottom: 12px
}
.xlg .od-ListItemFormRoot .BreadcrumbBar,
.xxlg .od-ListItemFormRoot .BreadcrumbBar,
.xxxlg .od-ListItemFormRoot .BreadcrumbBar,
.xxxxlg .od-ListItemFormRoot .BreadcrumbBar {
margin-top: 0
}
.od-ListItemFormRoot .BreadcrumbBar-item {
height: 32px
}
.lg .od-ListItemFormRoot .BreadcrumbBar-item {
font-size: 21px;
font-weight: 100
}
.xlg .od-ListItemFormRoot .BreadcrumbBar-item,
.xxlg .od-ListItemFormRoot .BreadcrumbBar-item,
.xxxlg .od-ListItemFormRoot .BreadcrumbBar-item,
.xxxxlg .od-ListItemFormRoot .BreadcrumbBar-item {
font-size: 28px;
font-weight: 100;
line-height: 1
}
.Footer {
display: block;
border-top: 1px solid #eaeaea;
margin: 0;
padding: 0;
padding-top: 8px
}
.Footer li {
list-style-type: none;
margin: 0;
padding: 5px 10px;
display: inline
}
.Footer-item {
font-size: 12px;
font-weight: 400;
color: #666666;
text-decoration: none;
white-space: nowrap;
display: inline-block;
height: 32px
}
a.Footer-item:focus,
a.Footer-item:hover {
color: #a6a6a6
}
.Footer-msconf {
font-weight: 700;
color: #e81123
}
.od-FieldRenderer-missingRequired {
margin: -10px -7px;
height: 100%;
background: rgba(255, 185, 0, .2);
padding: 10px 7px;
cursor: pointer;
white-space: normal;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row
}
.od-FieldRenderer-missingRequiredIcon {
padding-top: 1px;
font-size: 14px;
vertical-align: top
}
html[dir=ltr] .od-FieldRenderer-missingRequiredIcon {
padding-right: 4px
}
html[dir=rtl] .od-FieldRenderer-missingRequiredIcon {
padding-left: 4px
}
.od-FieldRenderer-missingRequiredText {
vertical-align: top
}
.od-FieldRenderer-text {
position: relative;
white-space: normal
}
.od-FieldRenderer-text.is-truncated {
height: 126px;
overflow: hidden;
position: relative;
height: 98px;
display: inline-block;
overflow: hidden
}
.od-FieldRenderer-text.is-truncated:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 4em
}
.ms-DetailsRow .od-FieldRenderer-text.is-truncated:after {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #ffffff 100%)
}
.ms-DetailsRow.is-selected .od-FieldRenderer-text.is-truncated:after {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #eaeaea 100%)
}
.ms-DetailsRow:hover .od-FieldRenderer-text.is-truncated:after {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #f4f4f4 100%)
}
.ms-DetailsRow.is-selected:focus .od-FieldRenderer-text.is-truncated:after,
.ms-DetailsRow.is-selected:hover .od-FieldRenderer-text.is-truncated:after {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #dadada 100%)
}
.ms-Icon--xs {
font-size: 10px
}
.ms-Icon--s {
font-size: 12px
}
.ms-Icon--m {
font-size: 16px
}
.ms-Icon--l {
font-size: 20px
}
.od-focus--enabled .od-DetailsList a:focus {
box-shadow: none
}
.od-DetailsList .ms-DetailsRow.is-dropping {
background: #fbdac9;
outline: 1px solid transparent
}
.od-DetailsList .ms-DetailsRow.is-dropping .ms-DetailsRow-cell .FileTypeIcon-icon {
-ms-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5)
}
.od-DetailsList-groupHeader {
margin-top: 15px;
margin-bottom: 15px;
font-size: 17px
}
html[dir=ltr] .od-DetailsList-groupHeader {
margin-left: 96px
}
html[dir=rtl] .od-DetailsList-groupHeader {
margin-right: 96px
}
.od-DetailsListHeader-AddNewField {
font-size: 9px;
color: #983c0c
}
html[dir=ltr] .od-DetailsListHeader-AddNewField {
margin-right: 6px
}
html[dir=rtl] .od-DetailsListHeader-AddNewField {
margin-left: 6px
}
html[dir=ltr] .od-DetailsListHeader-AddNewField {
padding-left: 0
}
html[dir=rtl] .od-DetailsListHeader-AddNewField {
padding-right: 0
}
.ms-DetailsRow-cell.od-DetailsRow-cell--FileIcon {
line-height: 0;
overflow: visible
}
.ms-DetailsRow-cell.od-DetailsRow-cell--Title {
cursor: pointer
}
.ms-DetailsRow-cell [data-is-focusable=true] {
outline: transparent;
vertical-align: top
}
.ms-DetailsRow-cell .od-FieldRender-nofill {
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.od-FieldRenderer-text {
white-space: normal;
overflow: hidden;
max-height: 7em
}
.od-FieldRenderer--disabled {
opacity: .4
}
.od-DetailsHeader-cell--FileIcon span {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.ms-DetailsRow-cell .od-FieldRender-lookup {
display: block;
max-width: 100%
}
.od-DetailsRow-cell--VerticallyCenter {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center
}
.ms-Fabric.is-focusVisible .ms-DetailsRow-cell [data-is-focusable=true]:focus:after {
position: absolute;
content: '';
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid #666666
}
html[dir] .ms-DetailsHeader-cell.od-DetailsHeader-addColumn {
width: 40px;
padding: 0;
text-align: center
}
html[dir] .ms-DetailsHeader-cell.od-DetailsHeader-addColumn .ms-Icon {
line-height: 36px
}
html[dir] .ms-DetailsHeader-cell.od-DetailsHeader-cell:hover {
background: #f4f4f4
}
html[dir] .ms-DetailsHeader-cell.od-DetailsHeader-cell:active {
background: #eaeaea
}
html[dir] .ms-DetailsHeader-cell.od-DetailsHeader-cell:focus {
border: 1px #666666
}
[dir=ltr] .ms-DetailsHeader-cell .ms-DetailsHeader-filterChevron.ms-Icon {
padding-left: 8px
}
[dir=rtl] .ms-DetailsHeader-cell .ms-DetailsHeader-filterChevron.ms-Icon {
padding-right: 8px
}
.ms-DetailsHeader-cell .ms-Icon.ms-Icon--GroupedList {
position: relative;
top: 1px
}
.ms-DetailsHeader-cell .od-DetailsListHeader-FileTypeIcon.ms-Icon {
color: #a6a6a6
}
.od-DetailsList-screenReaderOnly {
position: absolute;
text-indent: -9999px;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
border: 0
}
.od-DetailsListHeader-FileTypeIcon {
font-size: 16px;
padding: 0
}
.od-DetailsHeader-cell--FileIcon .ms-Icon {
width: 18px;
text-align: center
}
.od-DetailsRow-needsAttention {
position: relative
}
.od-DetailsRow-needsAttention:after {
content: '';
position: absolute;
top: 0;
bottom: 0
}
html[dir=ltr] .od-DetailsRow-needsAttention:after {
left: -3px
}
html[dir=rtl] .od-DetailsRow-needsAttention:after {
right: -3px
}
html[dir=ltr] .od-DetailsRow-needsAttention:after {
border-left: 3px solid #ffb900
}
html[dir=rtl] .od-DetailsRow-needsAttention:after {
border-right: 3px solid #ffb900
}
.ms-DetailsRow-cell .ms-Icon--People {
position: relative;
top: 2px
}
.od-DetailsList .FileTypeIcon {
margin: 0 -2px
}
.od-DetailsList .ms-DetailsRow-cell .od-FieldRender-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.od-DetailsList .ms-DetailsList--Compact .od-DetailsRow-cell--FileIcon .FileTypeIcon {
margin: 0;
padding: 2px 0 0 0
}
.od-DetailsList .ms-DetailsList--Compact .ms-DetailsRow-check {
width: 32px;
height: 32px
}
.od-DetailsList .ms-DetailsList--Compact .od-FieldRenderer-shareHeroCommand i,
.od-DetailsList .ms-DetailsList--Compact BUTTON.od-FieldRenderer-dot i {
top: 10px
}
.od-DetailsRow-cell--MruName .od-FieldRenderer-NameRenderer-SignalField,
.od-DetailsRow-cell--Name .od-FieldRenderer-NameRenderer-SignalField {
vertical-align: top;
top: -1px;
min-width: 0
}
.od-DetailsRow-cell--MruName .od-FieldRenderer-NameRenderer-SignalField>span[class*=signalFieldValue],
.od-DetailsRow-cell--Name .od-FieldRenderer-NameRenderer-SignalField>span[class*=signalFieldValue] {
-ms-flex: 1 1 auto!important;
flex: 1 1 auto!important
}
.od-DetailsRow-cell--MruName .od-FieldRenderer-NameRenderer-SignalField>span[class*=newSignal],
.od-DetailsRow-cell--Name .od-FieldRenderer-NameRenderer-SignalField>span[class*=newSignal] {
position: absolute
}
.od-FieldRenderer-Renderer-withCommandAndMetata {
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%
}
.od-FieldRenderer-Renderer-withCommandAndMetata button.od-FieldRender-display--link {
width: 100%
}
.od-FieldRenderer-heroCommandContainer {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-top: -11px;
margin-bottom: -11px
}
.od-FieldRenderer-heroCommandContainer .od-FieldRenderer-pin {
position: relative
}
.ms-DetailsList--Compact .od-FieldRenderer-heroCommandContainer {
margin: -8px 0 -8px auto
}
html[dir=rtl] .ms-DetailsList--Compact .od-FieldRenderer-heroCommandContainer {
margin: -8px auto -8px 0
}
.od-FieldRenderer-Renderer-withMetadata {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden
}
.od-FieldRenderer-Renderer-withCommands {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.od-DetailsList .ms-GroupHeader-expand {
font-size: 12px;
margin-top: -8px
}
button.ms-DetailsRow-check {
padding: 0
}
@keyframes ItemScope-NewRow {
0% {
max-height: 0;
opacity: 0
}
20% {
opacity: 1
}
100% {
max-height: 210px;
opacity: 1
}
}
@keyframes ItemScope-NewRow-compact {
0% {
max-height: 0;
opacity: 0
}
20% {
opacity: 1
}
100% {
max-height: 160px;
opacity: 1
}
}
@keyframes ItemScope-FreshRow {
0% {
left: -10px;
opacity: 0
}
50% {
opacity: 1
}
100% {
left: 0;
opacity: 1
}
}
@keyframes ItemScope-OldRow {
0% {
left: 0;
opacity: 1
}
100% {
left: 10px;
opacity: 0
}
}
@keyframes ItemScope-FreshRow-rtl {
0% {
left: 10px;
opacity: 0
}
50% {
opacity: 1
}
100% {
left: 0;
opacity: 1
}
}
@keyframes ItemScope-OldRow-rtl {
0% {
left: 0;
opacity: 1
}
100% {
left: -10px;
opacity: 0
}
}
.ms-DetailsRow {
animation-name: none;
animation-duration: 1.335s;
animation-timing-function: ease-out;
animation-iteration-count: 1
}
.ms-DetailsRow.od-DetailsRow--fresh {
animation-name: ItemScope-NewRow
}
.ms-DetailsList--Compact .ms-DetailsRow.od-DetailsRow--fresh {
animation-name: ItemScope-NewRow-compact
}
.od-DetailsRow-accessible {
display: block;
overflow: hidden;
position: absolute;
top: -9000px;
left: -9000px;
height: 1px;
width: 1px
}
.ms-DetailsList .ms-List-page .ms-List-cell {
min-height: 0
}
.ms-DetailsList--Compact .ms-List-cell .od-DetailsRow--fresh,
.ms-List-cell .od-DetailsRow--fresh {
min-height: 0;
overflow-y: hidden
}
.od-DetailsColumn-Refreshed {
position: relative
}
.od-DetailsColumn-Refreshed .od-DetailsColumn-Current,
.od-DetailsColumn-Refreshed .od-DetailsColumn-Previous {
position: absolute;
width: 100%;
animation-fill-mode: both;
animation-duration: 267ms;
animation-iteration-count: 1
}
.od-DetailsColumn-Refreshed .od-DetailsColumn-Current {
animation-timing-function: cubic-out;
animation-delay: 267ms
}
html[dir=ltr] .od-DetailsColumn-Refreshed .od-DetailsColumn-Current {
animation-name: ItemScope-FreshRow
}
html[dir=rtl] .od-DetailsColumn-Refreshed .od-DetailsColumn-Current {
animation-name: ItemScope-FreshRow-rtl
}
.od-DetailsColumn-Refreshed .od-DetailsColumn-Previous {
animation-timing-function: cubic-in
}
html[dir=ltr] .od-DetailsColumn-Refreshed .od-DetailsColumn-Previous {
animation-name: ItemScope-OldRow
}
html[dir=rtl] .od-DetailsColumn-Refreshed .od-DetailsColumn-Previous {
animation-name: ItemScope-OldRow-rtl
}
.ShareFrame {
border: none;
min-width: 300px
}
.frameVisible {
visibility: visible
}
.frameLoading {
position: absolute;
top: -9999px
}
.shareSpinner {
position: absolute;
top: 40%
}
[dir=ltr] .shareSpinner {
left: 40%
}
[dir=rtl] .shareSpinner {
right: 40%
}
.od-share-DialogContainer.ms-Dialog-main {
visibility: visible;
width: auto;
height: auto;
max-width: 650px
}
.od-share-DialogContainer.ms-Dialog-main>.ms-Dialog-header {
padding-top: 10px;
padding-bottom: 0
}
[dir=ltr] .od-share-DialogContainer.ms-Dialog-main>.ms-Dialog-header {
padding-right: 24px
}
[dir=rtl] .od-share-DialogContainer.ms-Dialog-main>.ms-Dialog-header {
padding-left: 24px
}
.od-share-DialogContainer.ms-Dialog-main>.ms-Dialog-header>.ms-Dialog-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.od-share-DialogContent {
padding-top: 0;
padding-bottom: 10px;
min-height: 50px
}
[dir=ltr] .od-share-DialogContent {
padding-right: 10px
}
[dir=rtl] .od-share-DialogContent {
padding-left: 10px
}
[dir=ltr] .od-share-DialogContent {
padding-left: 5px
}
[dir=rtl] .od-share-DialogContent {
padding-right: 5px
}
.ms-siteLogoAcronym {
line-height: 64px;
width: 64px;
height: 64px;
font-size: 28px;
font-weight: 100;
background-color: #ca5010;
text-align: center;
transition: all .5s ease;
color: #ffffff
}
.ms-siteLogoContainerOuter {
border: 1px solid #eaeaea;
transition: all .5s ease;
-ms-flex-negative: 0;
flex-shrink: 0
}
.ms-siteLogo-defaultLogo {
overflow: hidden;
width: 1em;
height: 1em;
color: #ffffff;
text-decoration: none;
vertical-align: middle;
font-size: 64px;
transition: all .5s ease;
display: inline-block
}
.ms-siteLogo-defaultLogo.ms-Icon--group {
line-height: 1.3em;
background-color: #a6a6a6
}
.ms-siteLogo-defaultLogo:hover,
.ms-siteLogo-defaultLogo:visited {
color: #ffffff
}
.ms-siteLogo-actual {
transition: all .5s ease;
width: 64px;
height: 64px;
white-space: nowrap;
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.ms-siteLogo-actual>div {
height: 100%;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.ms-siteLogo-actual img {
display: block;
max-height: 64px;
max-width: 64px
}
.od-focus--enabled .ms-siteLogo-defaultLogo:focus {
outline: #767676 1px solid
}
.ms-siteHeader {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
overflow: hidden
}
@media (max-width:479px) {
.ms-siteHeader {
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start
}
}
.sm .ms-siteHeader {
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start
}
.ms-siteHeader.compact {
height: 42px;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start;
overflow: visible
}
@media (max-width:1023px) {
.ms-siteHeader.compact {
height: auto
}
}
.ms-siteHeader.compact .renderHorizontally .ms-siteHeader-groupInfo {
margin: 0 16px
}
@media (max-width:639px) {
.ms-siteHeader.compact .ms-siteHeaderGroupInfoUsageGuidelineLink {
margin: 0
}
}
.ms-siteHeader.compact .ms-siteHeader-groupInfo {
font-size: 12px
}
@media (max-width:639px) {
.ms-siteHeader.compact .ms-siteHeader-groupInfo {
font-size: 11px
}
}
.ms-siteHeader-groupInfo {
margin-top: 4px
}
@media (max-width:479px) {
.ms-siteHeader-groupInfo {
font-size: 11px;
font-weight: 400
}
}
.ms-siteHeader-titleLink {
color: #ca5010;
text-decoration: none
}
.ms-siteHeader-siteLogo {
-ms-flex-negative: 0;
flex-shrink: 0
}
[dir=ltr] .ms-siteHeader-siteLogo {
margin-right: 16px
}
[dir=rtl] .ms-siteHeader-siteLogo {
margin-left: 16px
}
@media (max-width:479px) {
.ms-siteHeader-siteLogo {
display: none
}
}
.ms-siteHeader-siteInfo {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: center;
justify-content: center;
min-width: 20px;
-ms-flex-item-align: stretch;
align-self: stretch;
-ms-flex-positive: 1;
flex-grow: 1
}
[dir=ltr] .ms-siteHeader-siteInfo {
margin-right: 24px
}
[dir=rtl] .ms-siteHeader-siteInfo {
margin-left: 24px
}
.ms-siteHeader-siteInfo.renderHorizontally {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: baseline;
-ms-grid-row-align: baseline;
align-items: baseline;
-ms-flex-pack: start;
justify-content: flex-start
}
@media (max-width:1023px) {
.ms-siteHeader-siteInfo {
-ms-flex-pack: center;
justify-content: center
}
}
.ms-siteHeader-siteName {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 28px;
font-weight: 100
}
@media (max-width:1023px) {
.ms-siteHeader-siteName {
font-size: 21px;
font-weight: 100
}
}
@media (max-width:479px) {
.ms-siteHeader-siteName {
font-size: 17px;
font-weight: 300
}
}
@media (max-width:479px) {
.ms-siteHeaderGroupInfoUsageGuidelineLink {
font-size: 11px;
font-weight: 400
}
}
.host_a3f87333 {
display: inline
}
.ms-membersInfo-infoArea {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center
}
[dir=ltr] .ms-membersInfo-membersNumber {
padding-left: 5px
}
[dir=rtl] .ms-membersInfo-membersNumber {
padding-right: 5px
}
[dir=ltr] .ms-membersInfo-joinedText {
padding-right: 5px
}
[dir=rtl] .ms-membersInfo-joinedText {
padding-left: 5px
}
.ms-membersInfo-membersNumber--buttonEmulate {
padding: 0 8px
}
.ms-membersInfo-joinButton--joinLeaveError .ms-membersInfo-joinButton--joinLeaveErrorText {
font-size: 12px;
font-weight: 400;
color: #a80000;
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0
}
.ms-membersInfo-joinButton--joinLeaveError .ms-membersInfo-joinButton--dismiss {
cursor: pointer
}
[dir=ltr] .ms-membersInfo-joinButton--joinLeaveError .ms-membersInfo-joinButton--dismiss {
padding-left: 8px
}
[dir=rtl] .ms-membersInfo-joinButton--joinLeaveError .ms-membersInfo-joinButton--dismiss {
padding-right: 8px
}
[dir=ltr] .ms-membersInfo-joinButton--joinLeaveError .ms-membersInfo-joinButton--dismiss {
padding-right: 0
}
[dir=rtl] .ms-membersInfo-joinButton--joinLeaveError .ms-membersInfo-joinButton--dismiss {
padding-left: 0
}
.ms-membersInfo-joinButton-spinner .ms-Spinner-circle {
float: left
}
.ms-membersInfo-joinButton-spinner .ms-Spinner-label {
color: #666666;
margin-left: 28px
}
[dir=ltr] .ms-membersInfo-joinButton-spinner .ms-Spinner-label {
text-align: left
}
[dir=rtl] .ms-membersInfo-joinButton-spinner .ms-Spinner-label {
text-align: right
}
.ms-membersInfo-joinButton-spinner .ms-membersInfo-joinButton--splitter {
height: 40px;
line-height: 40px
}
.ms-compositeHeader {
position: relative;
box-sizing: border-box
}
@media (max-width:1023px) {
.ms-compositeHeader {
padding: 20px 24px
}
}
@media (max-width:639px) {
.ms-compositeHeader .ms-siteHeaderFacepile,
.ms-compositeHeader .ms-siteHeaderMembersInfo {
display: none
}
}
@media (max-width:479px) {
.ms-compositeHeader {
padding: 12px 16px
}
.ms-compositeHeader .ms-CompositeHeader-collapsible i {
transform: rotate(360deg)
}
html[dir=rtl] .ms-compositeHeader .ms-CompositeHeader-collapsible i {
transform: rotate(-360deg)
}
.ms-compositeHeader .ms-CompositeHeader-collapsible .ms-Button-label {
opacity: 0;
max-width: 0
}
}
.ms-compositeHeader .follow-animation-card i {
animation-name: pulseIcon;
animation-iteration-count: infinite;
animation-duration: .75s;
animation-fill-mode: both;
animation-delay: 267ms
}
@keyframes pulseIcon {
0% {
color: #c4c4c3
}
50% {
color: #eee
}
100% {
color: #c4c4c3
}
}
.ms-compositeHeader-addnCommands {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
max-width: 100%;
white-space: nowrap;
text-align: right
}
.ms-compositeHeader-addnCommands .ms-Button {
height: auto;
overflow: hidden;
padding: 0
}
html[dir=ltr] .ms-compositeHeader-addnCommands .ms-Button {
margin-left: 10px
}
html[dir=rtl] .ms-compositeHeader-addnCommands .ms-Button {
margin-right: 10px
}
.ms-compositeHeader-addnCommands .ms-Button.ms-Button--command span {
font-size: 13px;
font-weight: 400
}
.ms-compositeHeader-addnCommands i {
transition: transform .5s ease
}
.ms-compositeHeader-addnCommands .ms-Button-textContainer {
overflow: hidden
}
.ms-compositeHeader-addnCommands .ms-Button-label {
transition: opacity .35s ease-in-out;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: normal
}
[dir=ltr] .ms-compositeHeader-goToOutlook {
margin-left: 14px
}
[dir=rtl] .ms-compositeHeader-goToOutlook {
margin-right: 14px
}
.ms-compositeHeader-goToOutlook button {
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
font-size: 13px;
font-weight: 400;
color: #333333;
background: 0 0;
border: none;
cursor: pointer
}
.ms-compositeHeader-goToOutlook .ms-compositeHeader-goToOutlookIcon {
font-size: 10px
}
[dir=ltr] .ms-compositeHeader-goToOutlook .ms-compositeHeader-goToOutlookText {
margin-right: 4px
}
[dir=rtl] .ms-compositeHeader-goToOutlook .ms-compositeHeader-goToOutlookText {
margin-left: 4px
}
.ms-compositeHeader-topWrapper {
height: 24px
}
@media (max-width:1023px) {
.ms-compositeHeader-topWrapper {
display: none
}
}
.ms-compositeHeader-horizontalNav {
line-height: 24px
}
.ms-compositeHeader-mainLayout {
display: -ms-flexbox;
display: flex;
height: 66px
}
.ms-compositeHeader-mainLayout>:first-child {
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 250px;
flex-basis: 250px
}
.ms-compositeHeader-rightControls {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: end;
align-items: flex-end;
height: 100%;
overflow: hidden
}
@media (max-width:639px) {
.ms-compositeHeader-rightControls {
-ms-flex-pack: center;
justify-content: center
}
}
.ms-compositeHeader-peopleInfo {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-preferred-size: 32px;
flex-basis: 32px;
-ms-flex-negative: 0;
flex-shrink: 0
}
@media (max-width:639px) {
.ms-compositeHeader-peopleInfo {
display: none
}
}
.md .ms-compositeHeader-peopleInfo,
.sm .ms-compositeHeader-peopleInfo {
display: none
}
@media (max-width:639px) {
.ms-compositeHeader-full {
height: 87px
}
}
@media (max-width:479px) {
.ms-compositeHeader-full {
height: 65px
}
}
.ms-compositeHeader-full .ms-HorizontalNavItem-link {
font-size: 14px
}
.ms-compositeHeader-siteAndActionsContainer {
display: -ms-flexbox;
display: flex
}
@media (max-width:639px) {
.ms-compositeHeader-siteAndActionsContainer {
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center
}
}
.ms-compositeHeader-headerAndNavContainer {
max-width: 100%;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 100px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
@media (min-width:1024px) {
.ms-compositeHeader-headerAndNavContainer {
min-height: 66px
}
}
.ms-compositeHeader-headerAndNavContainer .ms-HorizontalNav {
margin: 0 28px 0 83px
}
[dir=rtl] .ms-compositeHeader-headerAndNavContainer .ms-HorizontalNav {
margin: 0 83px 0 28px
}
.ms-compositeHeader-actionsContainer {
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 100%;
-ms-flex: 0 1 340px;
flex: 0 1 340px
}
@media (max-width:639px) {
.ms-compositeHeader-actionsContainer {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center
}
}
.ms-compositeHeader-searchBoxContainer {
max-width: 100%
}
.ms-compositeHeader-searchBoxContainer>div {
margin: 0
}
.ms-compositeHeader-mobileActionButton {
cursor: pointer
}
[dir=ltr] .ms-compositeHeader-mobileActionButton {
margin-left: 16px
}
[dir=rtl] .ms-compositeHeader-mobileActionButton {
margin-right: 16px
}
.od-OverlayHost {
position: absolute;
z-index: 600;
top: 0;
left: 0;
bottom: 0;
right: 0;
visibility: hidden;
overflow: hidden
}
.od-OverlayHost-content {
visibility: visible
}
.od-OverlayHost-overlay--positioned {
position: absolute
}
.od-Overlay {
height: 0;
width: 0;
overflow: hidden
}
.ms-Icon--xs {
font-size: 10px
}
.ms-Icon--s {
font-size: 12px
}
.ms-Icon--m {
font-size: 16px
}
.ms-Icon--l {
font-size: 20px
}
.od-DialogOverlay {
display: none
}
.od-Dialog {
background-color: transparent;
position: absolute;
top: 50px;
bottom: 0;
width: 100%;
display: block;
font-size: 0;
line-height: 100vh;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
[dir=ltr] .od-Dialog {
left: 0
}
[dir=rtl] .od-Dialog {
right: 0
}
.od-Dialog::before {
vertical-align: middle;
display: inline-block;
content: "";
height: 100%;
width: 0
}
.sm .od-Dialog {
-ms-flex-align: start;
align-items: flex-start;
box-sizing: border-box;
padding: 0
}
.od-Dialog-main {
vertical-align: middle;
display: inline-block;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .4);
background-color: #ffffff;
box-sizing: border-box;
line-height: normal;
width: 100%;
min-height: 100px;
outline: 0;
visibility: hidden
}
.sm .od-Dialog-main {
height: 100%
}
html[dir=ltr] .od-Dialog-main {
text-align: left
}
html[dir=rtl] .od-Dialog-main {
text-align: right
}
@media screen and (-ms-high-contrast:active) {
.od-Dialog-main {
box-shadow: 0 0 0 3px #ffffff inset
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-Dialog-main {
box-shadow: 0 0 0 3px #000000 inset
}
}
.od-Dialog-main:focus {
outline: 0
}
.od-Dialog-main--dialog {
margin: auto;
position: relative
}
.od-Dialog-main--callout {
position: absolute
}
.od-Dialog-main--visible {
visibility: visible
}
.od-Dialog-main--sm {
width: 320px
}
.od-Dialog-main--sm.od-Dialog-main-style--blocker {
width: 340px
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel {
top: 0;
width: auto;
position: absolute;
bottom: 0;
left: 0;
right: 0
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Button--primary,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Button--primary {
border: none
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Button--primary:disabled,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Button--primary:disabled {
color: #c8c8c8
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Button--primary:disabled:before,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Button--primary:disabled:before {
color: #c8c8c8
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Button--primary .od-Button-label,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Button--primary .od-Button-label {
display: inline-block;
vertical-align: top;
margin-top: 6px;
font-size: 14px;
color: #333333
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel.od-Dialog--close .od-Dialog-button.od-Dialog-button--close,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel.od-Dialog--close .od-Dialog-button.od-Dialog-button--close {
top: 8px
}
.od-Dialog-main--md {
max-width: 480px
}
.od-Dialog-main--lg {
max-width: 640px
}
.od-Dialog-main--xlg {
max-width: 1024px
}
.od-Dialog-main--xxlg {
max-width: 1366px
}
.od-Dialog-main--xxxlg {
max-width: 1920px
}
.od-Dialog-button.od-Dialog-button--close {
display: none
}
.sm .od-Dialog-button.od-Dialog-button--close {
top: 8px
}
.od-Dialog.od-Dialog--close .od-Dialog-button.od-Dialog-button--close {
display: block;
position: absolute;
margin: 0;
padding: 0;
border: 0;
background: 0 0;
cursor: pointer;
top: 12px;
padding: 4px
}
[dir=ltr] .od-Dialog.od-Dialog--close .od-Dialog-button.od-Dialog-button--close {
right: 12px
}
[dir=rtl] .od-Dialog.od-Dialog--close .od-Dialog-button.od-Dialog-button--close {
left: 12px
}
.od-Dialog.od-Dialog--close .od-Dialog-button.od-Dialog-button--close .ms-Icon.ms-Icon--Cancel {
color: #666666;
font-size: 16px
}
.sm .od-Dialog.od-Dialog--close .od-Dialog-button.od-Dialog-button--close {
top: 8px;
line-height: 20px
}
.sm .od-Dialog.od-Dialog--close .od-Dialog-button.od-Dialog-button--close .ms-Icon.ms-Icon--Cancel {
font-size: 20px
}
.od-Dialog-subText {
margin: 0 0 20px 0;
font-weight: 300;
color: #333333
}
.od-Dialog-subText.od-Dialog-subText--s {
font-size: 12px
}
.od-Dialog-subText.od-Dialog-subText--m {
font-size: 14px
}
.od-Dialog-subText.od-Dialog-subText--l {
font-size: 17px
}
.od-Dialog-content {
position: relative;
width: 100%
}
.sm .od-Dialog-content {
height: 100%
}
.od-Dialog-content .od-Button.od-Button--compound:not(:last-child) {
margin-bottom: 20px
}
.ms-ModalOverlay {
display: block;
position: absolute;
cursor: pointer;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .4)
}
@media screen and (-ms-high-contrast:active) {
.ms-ModalOverlay {
display: none
}
}
.od-Dialog--multiline {
width: 95%
}
[dir=ltr] .od-Dialog-button--close {
right: 14px
}
[dir=rtl] .od-Dialog-button--close {
left: 14px
}
[dir=ltr] .od-Dialog-button--close {
left: auto
}
[dir=rtl] .od-Dialog-button--close {
right: auto
}
.od-Dialog-content {
font-size: 12px
}
.od-OverlayHost-overlay .ms-ModalOverlay {
animation-name: ms-fadeIn;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.od-OverlayHost-overlay .ms-ModalOverlay {
animation: none
}
}
.od-OverlayHost-overlay .od-Dialog-main {
animation-name: ms-fadeIn, ms-slideDownIn10;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.od-OverlayHost-overlay .od-Dialog-main {
animation: none
}
}
.od-OverlayHost-overlay.od-OverlayHost-overlay--closed .ms-ModalOverlay {
animation-name: ms-fadeOut;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.od-OverlayHost-overlay.od-OverlayHost-overlay--closed .ms-ModalOverlay {
animation: none
}
}
.od-OverlayHost-overlay.od-OverlayHost-overlay--closed .od-Dialog-main {
animation-name: ms-fadeOut, ms-slideUpOut10;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
.od-OverlayHost-overlay.od-OverlayHost-overlay--closed .od-Dialog-main {
animation: none
}
}
.od-OverlayHost-overlay.od-OverlayHost-overlay--closed .od-Dialog {
visibility: hidden;
transition: visibility 0s linear 267ms
}
.od-LoadingSpinner {
white-space: nowrap
}
.od-LoadingSpinner-loadingText {
vertical-align: top
}
.od-LoadingSpinner-loadingGif {
vertical-align: bottom
}
.od-IconGlyph.ms-Icon {
display: none;
font-size: 16px;
text-align: center;
white-space: nowrap;
position: relative
}
.od-IconGlyph.ms-Icon.od-IconGlyph--visible {
display: inline-block
}
.od-IconGlyph.ms-Icon.ms-Icon--Add {
font-size: 15px
}
.od-IconGlyph-badge.ms-Icon {
display: none;
position: absolute;
top: -.2em;
font-size: .7em;
width: 1em;
height: 1em;
text-align: center;
white-space: nowrap
}
[dir=ltr] .od-IconGlyph-badge.ms-Icon {
right: -.2em
}
[dir=rtl] .od-IconGlyph-badge.ms-Icon {
left: -.2em
}
.od-IconGlyph-badge.ms-Icon.ms-Icon--StatusErrorFull {
color: #a80000;
background-color: #ffffff;
border-radius: 50%;
margin-top: 0;
font-size: 12px
}
.od-IconGlyph-badge.ms-Icon.ms-Icon--StatusErrorFull:before {
position: relative;
top: -2px
}
.od-IconGlyph.ms-Icon.od-IconGlyph--badged .od-IconGlyph-badge.ms-Icon {
display: inline-block
}
.ms-Icon--xs {
font-size: 10px
}
.ms-Icon--s {
font-size: 12px
}
.ms-Icon--m {
font-size: 16px
}
.ms-Icon--l {
font-size: 20px
}
.ms-Link {
color: #ca5010;
text-decoration: none;
cursor: pointer;
outline: 0
}
.ms-Link:focus,
.ms-Link:hover {
color: #652808
}
.ms-Link:active {
color: #ca5010
}
.od-Dialog-actionsLoading {
display: inline-block;
padding-bottom: 7px;
vertical-align: bottom
}
[dir=ltr] .od-Dialog-actionsLoading {
padding-right: 5px
}
[dir=rtl] .od-Dialog-actionsLoading {
padding-left: 5px
}
.od-Dialog-main--callout .od-Dialog-inner {
padding: 0
}
.od-Dialog-main--callout .od-Dialog-header {
padding: 0
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-actions,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-actions {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 0;
background-color: #f4f4f4;
padding: 0 10px 0 0;
height: 44px
}
html[dir=rtl] .sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-actions,
html[dir=rtl] .sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-actions {
padding: 0 0 0 10px
}
html[dir=ltr] .sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-actions .od-Dialog-actionsRight,
html[dir=ltr] .sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-actions .od-Dialog-actionsRight {
float: left
}
html[dir=rtl] .sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-actions .od-Dialog-actionsRight,
html[dir=rtl] .sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-actions .od-Dialog-actionsRight {
float: right
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-actions .ms-Icon--Save,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-actions .ms-Icon--Save {
font-size: 20px
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-action,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-action {
background: 0 0;
height: 44px
}
[dir=ltr] .sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-action,
[dir=ltr] .sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-action {
padding-right: 16px
}
[dir=rtl] .sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-action,
[dir=rtl] .sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-action {
padding-left: 16px
}
[dir=ltr] .sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-action,
[dir=ltr] .sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-action {
padding-left: 16px
}
[dir=rtl] .sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-action,
[dir=rtl] .sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-action {
padding-right: 16px
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-action .od-Button-icon,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-action .od-Button-icon {
display: inline-block;
margin-top: 5px;
margin-right: 6px;
color: #ca5010
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-action .od-Button-label,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-action .od-Button-label {
font-weight: 400;
font-size: 14px
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-action:hover,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-action:hover {
background-color: #fbdac9;
color: #ca5010
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-header,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-header {
padding: 48px 16px 0 16px
}
html[dir=rtl] .sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-header,
html[dir=rtl] .sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-header {
padding: 48px 16px 0 16px
}
.sm .od-Dialog-main--md.od-Dialog-main--allowPanel .od-Dialog-inner,
.sm .od-Dialog-main--sm.od-Dialog-main--allowPanel .od-Dialog-inner {
padding: 16px
}
.od-Dialog.od-Dialog--close .od-Dialog-button.od-Dialog-button--back {
padding: 5px 10px 5px 0;
background: 0 0;
border: 0;
cursor: pointer
}
html[dir=rtl] .od-Dialog.od-Dialog--close .od-Dialog-button.od-Dialog-button--back {
padding: 5px 0 5px 10px
}
.od-Dialog.od-Dialog--close .od-Dialog-button.od-Dialog-button--back .ms-Icon.ms-Icon--Back {
color: #666666;
font-size: 16px
}
.ms-Dialog-button--close {
position: absolute;
right: 8px;
top: 12px;
background: 0 0;
border: none;
cursor: pointer
}
.ms-Dialog-button--close .ms-Icon {
font-size: 16px
}
.od-Dialog-header {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 24px 32px 0;
word-wrap: break-word
}
.od-Dialog-header .od-Dialog-title {
margin: 0;
font-weight: 100;
font-size: 21px;
color: #333333;
display: inline
}
.od-Dialog-header.od-Dialog-header--large {
padding: 30px 20px;
margin-bottom: 10px;
background-color: #ca5010
}
.od-Dialog-header.od-Dialog-header--large .od-Dialog-title {
font-weight: 100;
font-size: 28px;
color: #ffffff
}
.od-Dialog-inner {
height: 100%;
padding: 16px 32px 20px
}
.od-Dialog-actions {
position: relative;
width: 100%;
height: 32px;
margin-top: 24px
}
.od-Dialog-actions::after,
.od-Dialog-actions::before {
display: table;
content: '';
line-height: 0
}
.od-Dialog-actions::after {
clear: both
}
.od-Dialog-action .od-Button-icon {
display: none
}
.od-Dialog-action.od-Dialog-action--link {
border: 0;
cursor: pointer;
box-sizing: border-box;
box-shadow: none;
margin: 0;
padding: 0;
color: #ca5010;
text-decoration: none;
cursor: pointer;
outline: 0;
padding: 0 0 0 4px;
background: 0 0
}
.od-Dialog-action.od-Dialog-action--link:focus,
.od-Dialog-action.od-Dialog-action--link:hover {
color: #652808
}
.od-Dialog-action.od-Dialog-action--link:active {
color: #ca5010
}
html[dir=rtl] .od-Dialog-action.od-Dialog-action--link {
padding: 0 4px 0 0
}
.od-Dialog-action.od-Dialog-action--link .od-Button-label {
font-weight: 400;
color: #ca5010
}
.od-Dialog-action.od-Dialog-action--link:hover .od-Button-label {
color: #652808
}
.sm .od-Dialog-action .od-Button-label {
font-size: 12px
}
html[dir=ltr] .od-Dialog-actionsRight {
float: right
}
html[dir=rtl] .od-Dialog-actionsRight {
float: left
}
[dir=ltr] .od-Dialog-actionsRight .od-Dialog-action:not(:last-child) {
margin-right: 5px
}
[dir=rtl] .od-Dialog-actionsRight .od-Dialog-action:not(:last-child) {
margin-left: 5px
}
html[dir=ltr] .od-Dialog.od-Dialog--lgHeader .od-Dialog-actionsRight {
float: right
}
html[dir=rtl] .od-Dialog.od-Dialog--lgHeader .od-Dialog-actionsRight {
float: left
}
[dir=ltr] .od-Dialog.od-Dialog--lgHeader .od-Dialog-actionsRight .od-Dialog-action:not(:last-child) {
margin-right: 15px
}
[dir=rtl] .od-Dialog.od-Dialog--lgHeader .od-Dialog-actionsRight .od-Dialog-action:not(:last-child) {
margin-left: 15px
}
.od-DialogHost {
display: none
}
.ms-Icon--xs {
font-size: 10px
}
.ms-Icon--s {
font-size: 12px
}
.ms-Icon--m {
font-size: 16px
}
.ms-Icon--l {
font-size: 20px
}
.od-PanelHost {
display: none
}
.od-Panel {
outline: 1px solid transparent;
position: absolute;
top: 50px;
bottom: 0;
width: 100%;
max-width: 100%;
background: #ffffff;
box-sizing: border-box;
transition: width .3s ease-out;
box-shadow: -30px 0 30px -30px rgba(0, 0, 0, .4)
}
[dir=ltr] .od-Panel {
right: 0
}
[dir=rtl] .od-Panel {
left: 0
}
html[dir=rtl] .od-Panel {
box-shadow: 30px 0 30px -30px rgba(0, 0, 0, .4)
}
.od-BasePage--noSuiteNav .od-Panel {
top: 0
}
.od-Panel.od-Panel--sm {
width: 100%
}
.lg .od-Panel.od-Panel--sm,
.md .od-Panel.od-Panel--sm,
.xlg .od-Panel.od-Panel--sm,
.xxlg .od-Panel.od-Panel--sm,
.xxxlg .od-Panel.od-Panel--sm,
.xxxxlg .od-Panel.od-Panel--sm {
width: 340px
}
.lg .od-Panel.od-Panel--lg,
.lg .od-Panel.od-Panel--xlg,
.xlg .od-Panel.od-Panel--lg,
.xlg .od-Panel.od-Panel--xlg,
.xxlg .od-Panel.od-Panel--lg,
.xxlg .od-Panel.od-Panel--xlg,
.xxxlg .od-Panel.od-Panel--lg,
.xxxlg .od-Panel.od-Panel--xlg,
.xxxxlg .od-Panel.od-Panel--lg,
.xxxxlg .od-Panel.od-Panel--xlg {
width: auto
}
[dir=ltr] .lg .od-Panel.od-Panel--lg,
[dir=ltr] .lg .od-Panel.od-Panel--xlg,
[dir=ltr] .xlg .od-Panel.od-Panel--lg,
[dir=ltr] .xlg .od-Panel.od-Panel--xlg,
[dir=ltr] .xxlg .od-Panel.od-Panel--lg,
[dir=ltr] .xxlg .od-Panel.od-Panel--xlg,
[dir=ltr] .xxxlg .od-Panel.od-Panel--lg,
[dir=ltr] .xxxlg .od-Panel.od-Panel--xlg,
[dir=ltr] .xxxxlg .od-Panel.od-Panel--lg,
[dir=ltr] .xxxxlg .od-Panel.od-Panel--xlg {
left: 48px
}
[dir=rtl] .lg .od-Panel.od-Panel--lg,
[dir=rtl] .lg .od-Panel.od-Panel--xlg,
[dir=rtl] .xlg .od-Panel.od-Panel--lg,
[dir=rtl] .xlg .od-Panel.od-Panel--xlg,
[dir=rtl] .xxlg .od-Panel.od-Panel--lg,
[dir=rtl] .xxlg .od-Panel.od-Panel--xlg,
[dir=rtl] .xxxlg .od-Panel.od-Panel--lg,
[dir=rtl] .xxxlg .od-Panel.od-Panel--xlg,
[dir=rtl] .xxxxlg .od-Panel.od-Panel--lg,
[dir=rtl] .xxxxlg .od-Panel.od-Panel--xlg {
right: 48px
}
.lg .od-Panel.od-Panel--md,
.xlg .od-Panel.od-Panel--md,
.xxlg .od-Panel.od-Panel--md,
.xxxlg .od-Panel.od-Panel--md,
.xxxxlg .od-Panel.od-Panel--md {
width: 643px
}
[dir=ltr] .lg .od-Panel.od-Panel--md,
[dir=ltr] .xlg .od-Panel.od-Panel--md,
[dir=ltr] .xxlg .od-Panel.od-Panel--md,
[dir=ltr] .xxxlg .od-Panel.od-Panel--md,
[dir=ltr] .xxxxlg .od-Panel.od-Panel--md {
left: auto
}
[dir=rtl] .lg .od-Panel.od-Panel--md,
[dir=rtl] .xlg .od-Panel.od-Panel--md,
[dir=rtl] .xxlg .od-Panel.od-Panel--md,
[dir=rtl] .xxxlg .od-Panel.od-Panel--md,
[dir=rtl] .xxxxlg .od-Panel.od-Panel--md {
right: auto
}
[dir=ltr] .xxlg .od-Panel.od-Panel--lg,
[dir=ltr] .xxxlg .od-Panel.od-Panel--lg,
[dir=ltr] .xxxxlg .od-Panel.od-Panel--lg {
left: 428px
}
[dir=rtl] .xxlg .od-Panel.od-Panel--lg,
[dir=rtl] .xxxlg .od-Panel.od-Panel--lg,
[dir=rtl] .xxxxlg .od-Panel.od-Panel--lg {
right: 428px
}
[dir=ltr] .xxxlg .od-Panel.od-Panel--lg,
[dir=ltr] .xxxxlg .od-Panel.od-Panel--lg {
left: 980px
}
[dir=rtl] .xxxlg .od-Panel.od-Panel--lg,
[dir=rtl] .xxxxlg .od-Panel.od-Panel--lg {
right: 980px
}
[dir=ltr] .xxxxlg .od-Panel.od-Panel--lg {
left: 1620px
}
[dir=rtl] .xxxxlg .od-Panel.od-Panel--lg {
right: 1620px
}
[dir=ltr] .xxlg .od-Panel.od-Panel--xlg,
[dir=ltr] .xxxlg .od-Panel.od-Panel--xlg,
[dir=ltr] .xxxxlg .od-Panel.od-Panel--xlg {
left: 176px
}
[dir=rtl] .xxlg .od-Panel.od-Panel--xlg,
[dir=rtl] .xxxlg .od-Panel.od-Panel--xlg,
[dir=rtl] .xxxxlg .od-Panel.od-Panel--xlg {
right: 176px
}
.lg .od-Panel.od-Panel--fullScreen,
.md .od-Panel.od-Panel--fullScreen,
.xlg .od-Panel.od-Panel--fullScreen,
.xxlg .od-Panel.od-Panel--fullScreen,
.xxxlg .od-Panel.od-Panel--fullScreen,
.xxxxlg .od-Panel.od-Panel--fullScreen {
width: 100%
}
.sm .od-Panel.od-Panel--lightDismiss {
width: 272px
}
.od-Panel--hasPadding {
padding: 40px 16px 20px
}
.lg .od-Panel--hasPadding,
.xlg .od-Panel--hasPadding,
.xxlg .od-Panel--hasPadding,
.xxxlg .od-Panel--hasPadding,
.xxxxlg .od-Panel--hasPadding {
padding: 40px 32px 20px
}
.xlg .od-Panel--hasPadding,
.xxlg .od-Panel--hasPadding,
.xxxlg .od-Panel--hasPadding,
.xxxxlg .od-Panel--hasPadding {
padding-top: 70px
}
.xxlg .od-Panel--hasPadding,
.xxxlg .od-Panel--hasPadding,
.xxxxlg .od-Panel--hasPadding {
padding: 70px 40px 20px
}
.od-Panel--autoScroll {
overflow: auto
}
.od-Panel--hiddenScroll {
overflow: hidden
}
.od-Panel--alwaysScroll {
overflow-y: scroll
}
.od-Panel-title {
margin-bottom: 8px
}
.lg .od-Panel-title,
.md .od-Panel-title,
.sm .od-Panel-title {
line-height: 48px
}
.od-Panel--hidden {
visibility: hidden
}
.od-Panel-content--titleFill {
width: 100%;
height: calc(100% - 48px - 8px)
}
.od-Panel-content--noTitleFill {
width: 100%;
height: 100%
}
.od-Panel-button--close {
position: absolute;
outline: 0;
margin: 0;
border: 0;
background: 0 0;
cursor: pointer;
top: 0;
padding-top: 12px
}
[dir=ltr] .od-Panel-button--close {
right: 0
}
[dir=rtl] .od-Panel-button--close {
left: 0
}
[dir=ltr] .od-Panel-button--close {
padding-right: 16px
}
[dir=rtl] .od-Panel-button--close {
padding-left: 16px
}
.od-Panel-button--close .ms-Icon--Cancel {
margin-top: 1px;
color: #666666;
font-size: 16px
}
.md .od-Panel-button--close .ms-Icon--Cancel,
.sm .od-Panel-button--close .ms-Icon--Cancel {
font-size: 20px
}
.od-Panel--hasCommandBar .od-Panel-button--close {
z-index: 600;
padding: 11px 16px
}
[dir=ltr] .od-Panel--stickyCloseButton .od-Panel-button--close {
right: 20px
}
[dir=rtl] .od-Panel--stickyCloseButton .od-Panel-button--close {
left: 20px
}
[dir=ltr] .md .od-Panel-button--close,
[dir=ltr] .sm .od-Panel-button--close {
right: 4px
}
[dir=rtl] .md .od-Panel-button--close,
[dir=rtl] .sm .od-Panel-button--close {
left: 4px
}
.od-Panel--stickyCloseButton .od-Panel-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto
}
[dir=ltr] .od-Panel--stickyCloseButton .od-Panel-content {
padding-right: 40px
}
[dir=rtl] .od-Panel--stickyCloseButton .od-Panel-content {
padding-left: 40px
}
.od-OverlayHost-overlay .od-Panel {
opacity: 0
}
.od-OverlayHost-overlay.od-OverlayHost-overlay--opened .od-Panel {
opacity: 1
}
[dir=ltr] .od-OverlayHost-overlay.od-OverlayHost-overlay--opened .od-Panel {
animation-name: ms-fadeIn, ms-slideLeftIn40;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .od-OverlayHost-overlay.od-OverlayHost-overlay--opened .od-Panel {
animation: none
}
}
[dir=rtl] .od-OverlayHost-overlay.od-OverlayHost-overlay--opened .od-Panel {
animation-name: ms-fadeIn, ms-slideRightIn40;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .od-OverlayHost-overlay.od-OverlayHost-overlay--opened .od-Panel {
animation: none
}
}
[dir=ltr] .od-OverlayHost-overlay.od-OverlayHost-overlay--closed .od-Panel {
animation-name: ms-fadeOut, ms-slideRightOut40;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .od-OverlayHost-overlay.od-OverlayHost-overlay--closed .od-Panel {
animation: none
}
}
[dir=rtl] .od-OverlayHost-overlay.od-OverlayHost-overlay--closed .od-Panel {
animation-name: ms-fadeOut, ms-slideLeftOut40;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .od-OverlayHost-overlay.od-OverlayHost-overlay--closed .od-Panel {
animation: none
}
}
.od-PanelOverlay.ms-ModalOverlay {
top: 50px
}
.od-BasePage--noSuiteNav .od-PanelOverlay.ms-ModalOverlay {
top: 0
}
[dir=ltr] .od--hasFlexPane .od-Panel {
right: 320px
}
[dir=rtl] .od--hasFlexPane .od-Panel {
left: 320px
}
.Beak-container {
position: absolute;
width: 100%;
height: 100%
}
.Beak-container .Beak-arrow.Beak--themePrimary {
background: #ca5010
}
.Beak-container .Beak-arrow.Beak--white {
background: #ffffff
}
.Beak-container .Beak-arrow.Beak--neutralLighterAlt {
background: #f8f8f8
}
.Beak-container .Beak-arrow.Beak--themeTertiary {
background: #f6b593
}
.Beak-arrow {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .4);
width: 16px;
position: relative;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
height: 16px;
transition: left 1s ease-in-out, right 1s ease-in-out
}
.Beak-arrow--centered {
-ms-transform: translateX(-50%) rotate(45deg)!important;
transform: translateX(-50%) rotate(45deg)!important
}
html[dir=ltr] .Beak-arrow--centered {
left: 50%
}
html[dir=rtl] .Beak-arrow--centered {
right: 50%
}
html[dir=rtl] .Beak-arrow--centered {
-ms-transform: translateX(50%) rotate(45deg)!important;
transform: translateX(50%) rotate(45deg)!important
}
.od-LeftNavExpander-commandBar {
position: relative
}
.od-LeftNavExpander-commandBar:after {
content: "";
display: block;
width: 0;
position: absolute;
top: 0;
bottom: 0;
margin-top: 6px;
margin-bottom: 6px
}
[dir=ltr] .od-LeftNavExpander-commandBar:after {
right: 8px
}
[dir=rtl] .od-LeftNavExpander-commandBar:after {
left: 8px
}
[dir=ltr] .od-LeftNavExpander-commandBar .CommandBarItem:last-child {
margin-right: 0
}
[dir=rtl] .od-LeftNavExpander-commandBar .CommandBarItem:last-child {
margin-left: 0
}
.od-LeftNavExpander-commandBar .CommandBar-sideArea {
display: none
}
.od-LeftNavExpander-commandBar .ms-CommandBar {
padding: 0
}
.od-TopBar {
position: relative
}
@media screen and (-ms-high-contrast:active) {
.od-TopBar {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff
}
}
@media screen and (-ms-high-contrast:black-on-white) {
.od-TopBar {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000
}
}
.od-TopBar-item {
height: 40px;
background-color: #f4f4f4
}
html[dir=ltr] .od-TopBar-item {
float: left
}
html[dir=rtl] .od-TopBar-item {
float: right
}
.md .od-TopBar-item,
.sm .od-TopBar-item {
height: 44px
}
.od-theme--darkTransparent .od-TopBar-item {
background-color: rgba(0, 0, 0, .7)
}
.isFluent .od-TopBar-item {
height: 43px;
background-color: #ffffff;
border-bottom: 1px solid #f3f2f1
}
.od-TopBar-search {
width: 208px
}
[dir=ltr] .od-TopBar-search {
margin-right: 24px
}
[dir=rtl] .od-TopBar-search {
margin-left: 24px
}
.isFluent .od-TopBar-search {
width: 228px
}
.lg .od-TopBar-search,
.md .od-TopBar-search,
.sm .od-TopBar-search {
width: auto
}
[dir=ltr] .lg .od-TopBar-search,
[dir=ltr] .md .od-TopBar-search,
[dir=ltr] .sm .od-TopBar-search {
margin-right: 0
}
[dir=rtl] .lg .od-TopBar-search,
[dir=rtl] .md .od-TopBar-search,
[dir=rtl] .sm .od-TopBar-search {
margin-left: 0
}
[dir=ltr] .md .od-TopBar-search,
[dir=ltr] .sm .od-TopBar-search {
margin-right: 4px
}
[dir=rtl] .md .od-TopBar-search,
[dir=rtl] .sm .od-TopBar-search {
margin-left: 4px
}
.od-TopBar-search .od-SearchBox {
transition: width 367ms cubic-bezier(.1, .9, .2, 1), background-color 0s cubic-bezier(.1, .9, .2, 1) 0s
}
.od-TopBar-search .od-SearchBox .od-SearchBox--active {
transition-delay: 0s, 0s
}
.od-TopBar-search.od-TopBar-search--isCollapsed .od-SearchBox {
transition-delay: 0s, 367ms
}
.od-TopBar-search.od-TopBar-search--isCollapsed .od-SearchBox:not(.od-SearchBox--active) {
overflow: hidden;
border-width: 0;
width: 49px;
border-color: transparent
}
.od-TopBar-search.od-TopBar-search--isCollapsed .od-SearchBox:not(.od-SearchBox--active) .od-SearchBox-search:after {
visibility: hidden
}
.od-TopBar-search.od-TopBar-search--isCollapsed .od-SearchBox.od-SearchBox--active {
transition-delay: 0s, 0s
}
.lg .od-TopBar-search.od-TopBar-search--isCollapsed .od-SearchBox.od-SearchBox--active {
width: 165px
}
.md .od-TopBar-search.od-TopBar-search--isCollapsed,
.sm .od-TopBar-search.od-TopBar-search--isCollapsed {
width: 50px
}
.md .od-TopBar-search.od-TopBar-search--isCollapsed .od-Search,
.sm .od-TopBar-search.od-TopBar-search--isCollapsed .od-Search {
position: absolute;
z-index: 1;
visibility: hidden
}
.md .od-TopBar-search.od-TopBar-search--isCollapsed .od-SearchBox,
.sm .od-TopBar-search.od-TopBar-search--isCollapsed .od-SearchBox {
visibility: visible
}
.md .od-TopBar-search.od-TopBar-search--isCollapsed .od-Search--active,
.sm .od-TopBar-search.od-TopBar-search--isCollapsed .od-Search--active {
left: 0;
right: 0
}
.lg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox,
.xlg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox,
.xxlg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox,
.xxxlg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox,
.xxxxlg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox {
transition: background-color 0s cubic-bezier(.1, .9, .2, 1) 0s
}
.lg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox:not(.od-SearchBox--active),
.xlg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox:not(.od-SearchBox--active),
.xxlg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox:not(.od-SearchBox--active),
.xxxlg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox:not(.od-SearchBox--active),
.xxxxlg .od-TopBar-search.od-TopBar-search--isLeftNavDisabled .od-SearchBox:not(.od-SearchBox--active) {
width: auto
}
.sm .od-TopBar-search {
width: 50px
}
.od-TopBar-search:hover {
background-color: #eaeaea
}
.xlg .od-TopBar-header,
.xxlg .od-TopBar-header,
.xxxlg .od-TopBar-header,
.xxxxlg .od-TopBar-header {
width: 100%
}
html[dir=ltr] .xlg .od-TopBar-header,
html[dir=ltr] .xxlg .od-TopBar-header,
html[dir=ltr] .xxxlg .od-TopBar-header,
html[dir=ltr] .xxxxlg .od-TopBar-header {
float: right
}
html[dir=rtl] .xlg .od-TopBar-header,
html[dir=rtl] .xxlg .od-TopBar-header,
html[dir=rtl] .xxxlg .od-TopBar-header,
html[dir=rtl] .xxxxlg .od-TopBar-header {
float: left
}
.od-TopBar-header .ms-siteHeaderLogoActual img {
z-index: 1
}
.od-TopBar-commandBar {
border-top: 1px solid #eaeaea
}
.isFluent .od-TopBar-commandBar {
border-top: 0
}
html[dir=ltr] .od-TopBar-commandBar {
float: none
}
html[dir=rtl] .od-TopBar-commandBar {
float: none
}
html[dir=ltr] .od-TopBar-commandBar {
clear: right
}
html[dir=rtl] .od-TopBar-commandBar {
clear: left
}
[dir=ltr] .lg .od-TopBar-commandBar,
[dir=ltr] .md .od-TopBar-commandBar,
[dir=ltr] .sm .od-TopBar-commandBar {
padding-right: 4px
}
[dir=rtl] .lg .od-TopBar-commandBar,
[dir=rtl] .md .od-TopBar-commandBar,
[dir=rtl] .sm .od-TopBar-commandBar {
padding-left: 4px
}
[dir=ltr] .xlg .od-TopBar-commandBar,
[dir=ltr] .xxlg .od-TopBar-commandBar,
[dir=ltr] .xxxlg .od-TopBar-commandBar,
[dir=ltr] .xxxxlg .od-TopBar-commandBar {
padding-left: 32px
}
[dir=rtl] .xlg .od-TopBar-commandBar,
[dir=rtl] .xxlg .od-TopBar-commandBar,
[dir=rtl] .xxxlg .od-TopBar-commandBar,
[dir=rtl] .xxxxlg .od-TopBar-commandBar {
padding-right: 32px
}
[dir=ltr] .xlg .od-TopBar-commandBar,
[dir=ltr] .xxlg .od-TopBar-commandBar,
[dir=ltr] .xxxlg .od-TopBar-commandBar,
[dir=ltr] .xxxxlg .od-TopBar-commandBar {
padding-right: 16px
}
[dir=rtl] .xlg .od-TopBar-commandBar,
[dir=rtl] .xxlg .od-TopBar-commandBar,
[dir=rtl] .xxxlg .od-TopBar-commandBar,
[dir=rtl] .xxxxlg .od-TopBar-commandBar {
padding-left: 16px
}
.od--hasSelection .od-TopBar-item {
background-color: #eaeaea;
transition: background-color 467ms cubic-bezier(.1, .9, .2, 1)
}
.od-theme--darkTransparent .od--hasSelection .od-TopBar-item {
background-color: rgba(0, 0, 0, .7)
}
.isFluent .od--hasSelection .od-TopBar-item {
background-color: #f3f2f1;
border-bottom: 1px solid #edebe9
}
.od--hasSelection .od-TopBar-search:hover {
background-color: #d0d0d0
}
html[dir=ltr] .od-TopBar-leftNavExpander+.od-TopBar-search .od-SearchBox {
border-right-width: 0
}
html[dir=rtl] .od-TopBar-leftNavExpander+.od-TopBar-search .od-SearchBox {
border-left-width: 0
}
.LeftPane {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.LeftPane-notifications {
margin-top: auto
}
.isFluent .LeftPane-notifications {
padding-top: 8px;
border-top: 1px solid #edebe9
}
.LeftPane-bottom-padding {
height: 12px
}
.od-TopBar-commandBar {
padding: 0!important
}
.isFluent .od-TopBar-commandBar .ms-CommandBar {
background: #ffffff
}
html[dir=ltr] .isFluent .od-TopBar-commandBar .ms-CommandBar {
padding-left: 23px
}
html[dir=rtl] .isFluent .od-TopBar-commandBar .ms-CommandBar {
padding-right: 23px
}
html[dir=ltr] .isFluent .od-TopBar-commandBar .ms-CommandBar {
padding-right: 9px
}
html[dir=rtl] .isFluent .od-TopBar-commandBar .ms-CommandBar {
padding-left: 9px
}
.isFluent .od-TopBar-commandBar .ms-CommandBar .ms-Button--commandBar {
background-color: #ffffff;
color: #323130
}
.isFluent .od-TopBar-commandBar .ms-CommandBar .ms-Button--commandBar:hover {
background-color: #f3f2f1
}
.isFluent .od-TopBar-commandBar .ms-CommandBar .ms-Button--commandBar:active {
background-color: #edebe9
}
.isFluent .od-TopBar-commandBar .ms-CommandBar .ms-Button--commandBar.is-expanded {
background-color: #edebe9
}
.isFluent .od-TopBar-commandBar .ms-CommandBar .ms-Button--commandBar.is-expanded:hover {
background-color: #e1dfdd
}
.od-TopBar.od--hasSelection .ms-CommandBar {
background-color: #eaeaea;
transition: background-color 467ms cubic-bezier(.1, .9, .2, 1)
}
.isFluent .od-TopBar.od--hasSelection .ms-CommandBar {
background-color: #f3f2f1
}
.od-TopBar.od--hasSelection .ms-CommandBar .ms-Button--commandBar {
color: #212121;
background-color: #eaeaea;
transition: background-color 467ms cubic-bezier(.1, .9, .2, 1)
}
.isFluent .od-TopBar.od--hasSelection .ms-CommandBar .ms-Button--commandBar {
color: #323130;
background-color: #f3f2f1
}
.od-TopBar.od--hasSelection .ms-CommandBar .ms-Button--commandBar:hover {
background-color: #d0d0d0
}
.isFluent .od-TopBar.od--hasSelection .ms-CommandBar .ms-Button--commandBar:hover {
background-color: #edebe9
}
.od-TopBar.od--hasSelection .ms-CommandBar .ms-Button--commandBar.is-toggled {
background-color: #dadada
}
.od-TopBar.od--hasSelection .ms-CommandBar .ms-Button--commandBar.is-toggled:hover {
background-color: #c8c8c8
}
.isFluent .od-TopBar.od--hasSelection .ms-CommandBar .ms-Button--commandBar:active {
background-color: #e1dfdd
}
.isFluent .od-TopBar.od--hasSelection .ms-CommandBar .ms-Button--commandBar.is-expanded:hover {
background-color: #d2d0ce
}
.isFluent.od-focus--enabled .od-TopBar.od--hasSelection .ms-Button--commandBar:after {
outline-color: #605e5c
}
.isFluent.commandBarCallout.ms-Callout {
border-radius: 0 0 2px 2px;
box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .132), 0 .6px 1.8px 0 rgba(0, 0, 0, .108)
}
.ProgressSpinnerFlat {
position: relative;
box-sizing: border-box;
padding: 2px 0;
overflow: hidden;
height: 6px;
color: #ca5010;
font-size: 15px
}
.ProgressSpinnerFlat>div {
position: relative;
line-height: 0;
cursor: default;
animation: progress 3.4s infinite cubic-bezier(0, .75, 1, .25)
}
[dir=ltr] .ProgressSpinnerFlat>div {
left: -50px
}
[dir=rtl] .ProgressSpinnerFlat>div {
right: -50px
}
[dir=rtl] .ProgressSpinnerFlat>div {
animation: progressRtl 3.4s infinite cubic-bezier(0, .75, 1, .25)
}
.ProgressSpinnerFlat>div:nth-child(1) {
animation-delay: .1s
}
[dir=ltr] .ProgressSpinnerFlat>div:nth-child(1) {
margin-left: 40px
}
[dir=rtl] .ProgressSpinnerFlat>div:nth-child(1) {
margin-right: 40px
}
.ProgressSpinnerFlat>div:nth-child(2) {
animation-delay: .2s
}
[dir=ltr] .ProgressSpinnerFlat>div:nth-child(2) {
margin-left: 30px
}
[dir=rtl] .ProgressSpinnerFlat>div:nth-child(2) {
margin-right: 30px
}
.ProgressSpinnerFlat>div:nth-child(3) {
animation-delay: .3s
}
[dir=ltr] .ProgressSpinnerFlat>div:nth-child(3) {
margin-left: 20px
}
[dir=rtl] .ProgressSpinnerFlat>div:nth-child(3) {
margin-right: 20px
}
.ProgressSpinnerFlat>div:nth-child(4) {
animation-delay: .4s
}
[dir=ltr] .ProgressSpinnerFlat>div:nth-child(4) {
margin-left: 10px
}
[dir=rtl] .ProgressSpinnerFlat>div:nth-child(4) {
margin-right: 10px
}
.ProgressSpinnerFlat>div:nth-child(5) {
animation-delay: .5s
}
[dir=ltr] .ProgressSpinnerFlat>div:nth-child(5) {
margin-left: 0
}
[dir=rtl] .ProgressSpinnerFlat>div:nth-child(5) {
margin-right: 0
}
@keyframes progress {
from {
left: -50px
}
25% {
left: -50px
}
to {
left: 100%
}
}
@keyframes progressRtl {
from {
right: -50px
}
25% {
right: -50px
}
to {
right: 100%
}
}
.sp-App-root {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
input,
textarea {
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text
}
.od-TopBar-search--isCollapsed.od-TopBar-search {
width: auto;
border-top: 1px solid #eaeaea
}
.xlg .od-TopBar-search--isCollapsed .od-SearchBox.od-SearchBox--active,
.xxlg .od-TopBar-search--isCollapsed .od-SearchBox.od-SearchBox--active,
.xxxlg .od-TopBar-search--isCollapsed .od-SearchBox.od-SearchBox--active,
.xxxxlg .od-TopBar-search--isCollapsed .od-SearchBox.od-SearchBox--active {
width: 165px
}
.xlg .od-TopBar-search--isCollapsed .od-SearchBox:not(.od-SearchBox--active),
.xxlg .od-TopBar-search--isCollapsed .od-SearchBox:not(.od-SearchBox--active),
.xxxlg .od-TopBar-search--isCollapsed .od-SearchBox:not(.od-SearchBox--active),
.xxxxlg .od-TopBar-search--isCollapsed .od-SearchBox:not(.od-SearchBox--active) {
background-color: transparent
}
.sp-App-root {
height: 100%;
overflow: hidden;
min-width: 319px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.sp-App-root .od-SuiteNav {
position: static;
-ms-flex-negative: 0;
flex-shrink: 0
}
.sp-App-body {
-ms-flex-positive: 1;
flex-grow: 1;
display: -ms-flexbox;
display: flex
}
.sp-App-bodyMain {
position: relative;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.sp-App-root.has-O365-flex-pane .sp-App-body:after {
content: '';
width: 320px;
-ms-flex-negative: 0;
flex-shrink: 0
}
[dir=ltr] .xlg .od-Files-topBar .od-TopBar-search,
[dir=ltr] .xxlg .od-Files-topBar .od-TopBar-search,
[dir=ltr] .xxxlg .od-Files-topBar .od-TopBar-search,
[dir=ltr] .xxxxlg .od-Files-topBar .od-TopBar-search {
margin-left: -208px
}
[dir=rtl] .xlg .od-Files-topBar .od-TopBar-search,
[dir=rtl] .xxlg .od-Files-topBar .od-TopBar-search,
[dir=rtl] .xxxlg .od-Files-topBar .od-TopBar-search,
[dir=rtl] .xxxxlg .od-Files-topBar .od-TopBar-search {
margin-right: -208px
}
[dir=ltr] .isFluent.xlg .od-Files-topBar .od-TopBar-search {
margin-left: -228px
}
[dir=rtl] .isFluent.xlg .od-Files-topBar .od-TopBar-search {
margin-right: -228px
}
[dir=ltr] .isFluent.xxlg .od-Files-topBar .od-TopBar-search {
margin-left: -228px
}
[dir=rtl] .isFluent.xxlg .od-Files-topBar .od-TopBar-search {
margin-right: -228px
}
[dir=ltr] .isFluent.xxxlg .od-Files-topBar .od-TopBar-search {
margin-left: -228px
}
[dir=rtl] .isFluent.xxxlg .od-Files-topBar .od-TopBar-search {
margin-right: -228px
}
[dir=ltr] .isFluent.xxxxlg .od-Files-topBar .od-TopBar-search {
margin-left: -228px
}
[dir=rtl] .isFluent.xxxxlg .od-Files-topBar .od-TopBar-search {
margin-right: -228px
}
[dir=ltr] .xlg .od-Files-topBar .od-TopBar-search.od-TopBar-search--isLeftNavDisabled,
[dir=ltr] .xxlg .od-Files-topBar .od-TopBar-search.od-TopBar-search--isLeftNavDisabled,
[dir=ltr] .xxxlg .od-Files-topBar .od-TopBar-search.od-TopBar-search--isLeftNavDisabled,
[dir=ltr] .xxxxlg .od-Files-topBar .od-TopBar-search.od-TopBar-search--isLeftNavDisabled {
margin-left: 0
}
[dir=rtl] .xlg .od-Files-topBar .od-TopBar-search.od-TopBar-search--isLeftNavDisabled,
[dir=rtl] .xxlg .od-Files-topBar .od-TopBar-search.od-TopBar-search--isLeftNavDisabled,
[dir=rtl] .xxxlg .od-Files-topBar .od-TopBar-search.od-TopBar-search--isLeftNavDisabled,
[dir=rtl] .xxxxlg .od-Files-topBar .od-TopBar-search.od-TopBar-search--isLeftNavDisabled {
margin-right: 0
}
[dir=ltr] .xlg .od-Files-topBar .od-TopBar--hasHeader .od-TopBar-search,
[dir=ltr] .xxlg .od-Files-topBar .od-TopBar--hasHeader .od-TopBar-search,
[dir=ltr] .xxxlg .od-Files-topBar .od-TopBar--hasHeader .od-TopBar-search,
[dir=ltr] .xxxxlg .od-Files-topBar .od-TopBar--hasHeader .od-TopBar-search {
margin-right: 0
}
[dir=rtl] .xlg .od-Files-topBar .od-TopBar--hasHeader .od-TopBar-search,
[dir=rtl] .xxlg .od-Files-topBar .od-TopBar--hasHeader .od-TopBar-search,
[dir=rtl] .xxxlg .od-Files-topBar .od-TopBar--hasHeader .od-TopBar-search,
[dir=rtl] .xxxxlg .od-Files-topBar .od-TopBar--hasHeader .od-TopBar-search {
margin-left: 0
}
.Files-main {
position: relative;
-ms-flex-positive: 1;
flex-grow: 1
}
[dir=ltr] .sp-App--hasLeftNav .Files-mainColumn {
left: 208px
}
[dir=rtl] .sp-App--hasLeftNav .Files-mainColumn {
right: 208px
}
[dir=ltr] .isFluent .sp-App--hasLeftNav .Files-mainColumn {
left: 228px
}
[dir=rtl] .isFluent .sp-App--hasLeftNav .Files-mainColumn {
right: 228px
}
.Files-leftNav {
position: absolute;
bottom: 0;
top: 40px;
box-sizing: border-box;
background-color: #ffffff;
width: 208px
}
html[dir=ltr] .Files-leftNav {
border-right: 1px solid #eaeaea
}
html[dir=rtl] .Files-leftNav {
border-left: 1px solid #eaeaea
}
[dir=ltr] .Files-leftNav {
left: -302px
}
[dir=rtl] .Files-leftNav {
right: -302px
}
.isFluent .Files-leftNav {
width: 228px
}
.lg .Files-leftNav,
.md .Files-leftNav,
.sm .Files-leftNav {
z-index: 298;
box-shadow: 30px 0 30px -30px rgba(0, 0, 0, .4);
width: 272px
}
[dir=ltr] .lg .Files-leftNav,
[dir=ltr] .md .Files-leftNav,
[dir=ltr] .sm .Files-leftNav {
left: -302px
}
[dir=rtl] .lg .Files-leftNav,
[dir=rtl] .md .Files-leftNav,
[dir=rtl] .sm .Files-leftNav {
right: -302px
}
.lg .Files-leftNav .LeftNav,
.md .Files-leftNav .LeftNav,
.sm .Files-leftNav .LeftNav {
width: 272px
}
.Files-leftNav.Files-has-suiteNavHamburger {
top: 0
}
.sp-App-has-header .Files-leftNav.Files-has-fallbackHamburger {
top: 151px
}
.md .sp-App-has-header .Files-leftNav.Files-has-fallbackHamburger,
.sm .sp-App-has-header .Files-leftNav.Files-has-fallbackHamburger {
top: 130px
}
.Files-leftNav.Files-leftNav-showForEditOnly {
top: 0
}
[dir=ltr] .sp-App--hasLeftNav .Files-leftNav {
left: 0
}
[dir=rtl] .sp-App--hasLeftNav .Files-leftNav {
right: 0
}
[dir=ltr] .sp-App--hasLeftNav .Files-leftNav {
animation-name: ms-fadeIn, ms-slideRightIn40;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .sp-App--hasLeftNav .Files-leftNav {
animation: none
}
}
[dir=rtl] .sp-App--hasLeftNav .Files-leftNav {
animation-name: ms-fadeIn, ms-slideLeftIn40;
animation-duration: 367ms;
animation-timing-function: cubic-bezier(.1, .9, .2, 1);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .sp-App--hasLeftNav .Files-leftNav {
animation: none
}
}
[dir=ltr] .sp-App-leftNavClosing .Files-leftNav {
left: 0
}
[dir=rtl] .sp-App-leftNavClosing .Files-leftNav {
right: 0
}
[dir=ltr] .sp-App-leftNavClosing .Files-leftNav {
animation-name: ms-fadeOut, ms-slideLeftOut40;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=ltr] .sp-App-leftNavClosing .Files-leftNav {
animation: none
}
}
[dir=rtl] .sp-App-leftNavClosing .Files-leftNav {
animation-name: ms-fadeOut, ms-slideRightOut40;
animation-duration: 167ms;
animation-timing-function: cubic-bezier(.1, .25, .75, .9);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce) {
[dir=rtl] .sp-App-leftNavClosing .Files-leftNav {
animation: none
}
}
.Files-mainColumn {
position: absolute;
top: 0;
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
[dir=ltr] .Files-mainColumn {
left: 0
}
[dir=rtl] .Files-mainColumn {
right: 0
}
[dir=ltr] .Files-mainColumn {
right: 0
}
[dir=rtl] .Files-mainColumn {
left: 0
}
[dir=ltr] .lg .Files-mainColumn,
[dir=ltr] .md .Files-mainColumn,
[dir=ltr] .sm .Files-mainColumn {
left: 0
}
[dir=rtl] .lg .Files-mainColumn,
[dir=rtl] .md .Files-mainColumn,
[dir=rtl] .sm .Files-mainColumn {
right: 0
}
.Files-rightPaneInteractionContainer {
-ms-flex-positive: 1;
flex-grow: 1;
position: relative
}
.Files-rightPanePushedContainer {
position: absolute;
top: 0;
bottom: 0
}
[dir=ltr] .Files-rightPanePushedContainer {
left: 0
}
[dir=rtl] .Files-rightPanePushedContainer {
right: 0
}
.Files-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0
}
.Files-content .ms-ScrollablePane--contentContainer>div {
height: 100%
}
.Files-content .ms-ScrollablePane--contentContainer>div>div {
height: inherit
}
.Files-rightPane {
position: absolute;
z-index: 285;
background: #ffffff;
top: 0;
bottom: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
transition: 367ms cubic-bezier(.1, .9, .2, 1)
}
[dir=ltr] .Files-rightPane {
right: 0
}
[dir=rtl] .Files-rightPane {
left: 0
}
html[dir=ltr] .Files-rightPane {
transition-property: right
}
html[dir=rtl] .Files-rightPane {
transition-property: left
}
.od-userSelect--enabled .Files-rightPane {
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text
}
[dir=ltr] .md .sp-App-rightPane-expanded .Files-content,
[dir=ltr] .sm .sp-App-rightPane-expanded .Files-content {
right: 0
}
[dir=rtl] .md .sp-App-rightPane-expanded .Files-content,
[dir=rtl] .sm .sp-App-rightPane-expanded .Files-content {
left: 0
}
.od-Resize {
position: absolute;
height: 100%;
width: 1px;
background: #eaeaea;
cursor: ew-resize
}
.od-Resize .od-Resize-hitTarget {
z-index: 286;
position: relative;
width: 8px;
cursor: ew-resize;
height: 100%
}
.Files-rightPaneContent {
position: absolute;
top: 0;
right: 0;
left: 1px;
bottom: 0
}
.Files-leftNavOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .4);
cursor: pointer;
z-index: 297
}
.od-TeachingBubble-anchor {
position: absolute;
top: 0
}
.sp-App-hubNav {
height: 40px
}
.od-Share {
width: 320px
}
.sp-App-navBelowHeader .Files-main {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
position: static
}
.sp-App-navBelowHeader .Files-mainColumn {
position: static;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-preferred-size: 0;
flex-basis: 0;
min-height: 0
}
.xlg .sp-App-navBelowHeader.sp-App--hasLeftNav .Files-leftNav,
.xxlg .sp-App-navBelowHeader.sp-App--hasLeftNav .Files-leftNav,
.xxxlg .sp-App-navBelowHeader.sp-App--hasLeftNav .Files-leftNav,
.xxxxlg .sp-App-navBelowHeader.sp-App--hasLeftNav .Files-leftNav {
position: static;
-ms-flex-negative: 0;
flex-shrink: 0
}
[dir=ltr] .xlg .sp-App-navBelowHeader .od-Files-topBar .od-TopBar-search,
[dir=ltr] .xxlg .sp-App-navBelowHeader .od-Files-topBar .od-TopBar-search,
[dir=ltr] .xxxlg .sp-App-navBelowHeader .od-Files-topBar .od-TopBar-search,
[dir=ltr] .xxxxlg .sp-App-navBelowHeader .od-Files-topBar .od-TopBar-search {
margin-left: 0
}
[dir=rtl] .xlg .sp-App-navBelowHeader .od-Files-topBar .od-TopBar-search,
[dir=rtl] .xxlg .sp-App-navBelowHeader .od-Files-topBar .od-TopBar-search,
[dir=rtl] .xxxlg .sp-App-navBelowHeader .od-Files-topBar .od-TopBar-search,
[dir=rtl] .xxxxlg .sp-App-navBelowHeader .od-Files-topBar .od-TopBar-search {
margin-right: 0
}
.sp-App-navBelowHeader .od-TopBar-search {
border-top: 1px solid #eaeaea
}
.sp-App-navBelowHeader .od-SearchBox-search:after {
margin: 0
}
@media print {
.Files-leftNav,
.od-Files-topBar,
.od-SuiteNav {
display: none!important
}
.Files,
.Files-content {
overflow: visible!important;
width: auto!important;
height: auto!important
}
.Files-belowSuiteNav {
top: 0!important
}
[dir=ltr] .Files-mainColumn {
left: 0!important
}
[dir=rtl] .Files-mainColumn {
right: 0!important
}
}
.od-SuiteNav {
background: #333333;
height: 50px;
position: absolute;
width: 100%
}
.od-userSelect--enabled div#o365cs-flexpane-overlay {
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text
}
.pluginNoSize {
width: 0;
height: 0;
padding: 0;
position: absolute
}
.uv-welcome-panel,
.uv-widget-panel {
margin: 0 auto;
width: 100%
}
.md .uv-welcome-panel,
.md .uv-widget-panel,
.sm .uv-welcome-panel,
.sm .uv-widget-panel {
width: 90%
}
.uv-welcome-panel .uv-welcome-title {
margin: 40px 0
}
.uv-widget-policy {
text-align: center;
margin-top: 15px
}
.uv-welcome-Button {
margin: 20px auto
}
.uv-welcome-Button .od-Button {
width: 100%;
height: auto;
min-height: 40px;
white-space: nowrap
}
html[dir=ltr] .uv-welcome-Button .od-Button {
text-align: left
}
html[dir=rtl] .uv-welcome-Button .od-Button {
text-align: right
}
.uv-welcome-Button .od-Button-icon {
display: inline-block;
vertical-align: middle
}
.uv-welcome-Button .ms-Icon {
font-size: 19px;
vertical-align: middle
}
[dir=ltr] .uv-welcome-Button .ms-Icon {
margin-right: 12px
}
[dir=rtl] .uv-welcome-Button .ms-Icon {
margin-left: 12px
}
.uv-welcome-Button .od-Button-label {
font-size: 17px;
font-weight: 300;
display: inline-block;
width: 85%;
white-space: normal;
vertical-align: middle
}
.uv-widget-policy a {
text-decoration: none
}
.uv-fallback-title {
margin-top: 40px;
margin-bottom: 30px
}
.uv-fallback-panel {
margin: 30px auto;
width: 90%
}
.uv-fallback-ul {
margin-top: 5px
}
[dir=ltr] .uv-fallback-ul {
padding-left: 40px
}
[dir=rtl] .uv-fallback-ul {
padding-right: 40px
}
.uv-fallback-options {
margin-top: 17px
}
.od-UserFeedback-button {
z-index: 1;
position: fixed;
bottom: 20px;
min-width: 80px;
padding: 5px 15px;
background: #ca5010;
text-align: center;
display: block;
cursor: pointer;
font-weight: 300;
color: #ffffff
}
[dir=ltr] .od-UserFeedback-button {
right: 20px
}
[dir=rtl] .od-UserFeedback-button {
left: 20px
}
.md .od-UserFeedback-button,
.sm .od-UserFeedback-button {
display: none
}
.od-UserFeedback-button:hover,
a.od-UserFeedback-button:focus {
color: #ffffff;
background: #983c0c
}
a.od-UserFeedback-button:focus {
outline: 1px solid #ffffff;
outline-offset: -2px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment