@microsoft/sp-component-base 1.22.0-beta.2 → 1.22.0-beta.4

package/lib/chunks/legacy-third-party-fabric-core/fabric-core-shim.global.scss.css

@@ -0,0 +1,2063 @@
+/*
+    This shim file supplies the CSS classes that were renamed/removed in Fabric Core 6.0.0:
+    https://github.com/OfficeDev/office-ui-fabric-core/releases/tag/6.0.0
+    It provides backwards compatibility to webparts using older (pre-6.0.0)
+    releases of Fabric Core, which might otherwise be broken by the removal of some classes.
+ */
+.ms-SPLegacyFabricBlock .ms-u-borderBox,
+.ms-SPLegacyFabricBlock .ms-u-borderBox::before,
+.ms-SPLegacyFabricBlock .ms-u-borderBox::after {
+  box-sizing: border-box;
+}
+.ms-SPLegacyFabricBlock .ms-u-borderBase {
+  border: 1px solid;
+}
+.ms-SPLegacyFabricBlock .ms-u-clearfix {
+  *zoom: 1;
+}
+.ms-SPLegacyFabricBlock .ms-u-clearfix::before,
+.ms-SPLegacyFabricBlock .ms-u-clearfix::after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.ms-SPLegacyFabricBlock .ms-u-clearfix::after {
+  clear: both;
+}
+.ms-SPLegacyFabricBlock .ms-u-normalize {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+}
+.ms-SPLegacyFabricBlock .ms-u-textAlignLeft {
+  text-align: left;
+}
+.ms-SPLegacyFabricBlock .ms-u-textAlignCenter {
+  text-align: center;
+}
+.ms-SPLegacyFabricBlock .ms-u-textAlignRight {
+  text-align: right;
+}
+.ms-SPLegacyFabricBlock .ms-u-screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.ms-SPLegacyFabricBlock .ms-u-textTruncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+.ms-SPLegacyFabricBlock .ms-u-noWrap {
+  white-space: nowrap;
+}
+.ms-SPLegacyFabricBlock .ms-u-slideRightIn10 {
+  animation-name: fadeIn, slideRightIn10;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideRightIn10 {
+  from {
+    transform: translate3d(-10px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideRightIn20 {
+  animation-name: fadeIn, slideRightIn20;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideRightIn20 {
+  from {
+    transform: translate3d(-20px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideRightIn40 {
+  animation-name: fadeIn, slideRightIn40;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideRightIn40 {
+  from {
+    transform: translate3d(-40px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideLeftIn10 {
+  animation-name: fadeIn, slideLeftIn10;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideLeftIn10 {
+  from {
+    transform: translate3d(10px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideLeftIn20 {
+  animation-name: fadeIn, slideLeftIn20;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideLeftIn20 {
+  from {
+    transform: translate3d(20px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideLeftIn40 {
+  animation-name: fadeIn, slideLeftIn40;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideLeftIn40 {
+  from {
+    transform: translate3d(40px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideRightIn400 {
+  animation-name: fadeIn, slideRightIn400;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideRightIn400 {
+  from {
+    transform: translate3d(-400px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideLeftIn400 {
+  animation-name: fadeIn, slideLeft400;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideLeft400 {
+  from {
+    transform: translate3d(400px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideUpIn20 {
+  animation-name: fadeIn, slideUpIn20;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideUpIn20 {
+  from {
+    transform: translate3d(0px, 20px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideUpIn10 {
+  animation-name: fadeIn, slideUpIn10;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideUpIn10 {
+  from {
+    transform: translate3d(0px, 10px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideDownIn20 {
+  animation-name: fadeIn, slideDownIn20;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes slideDownIn20 {
+  from {
+    transform: translate3d(0px, -20px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideDownIn10 {
+  animation-name: fadeIn, slideDownIn10;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideDownIn10 {
+  from {
+    transform: translate3d(0px, -10px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideRightOut40 {
+  animation-name: fadeOut, slideRightOut40;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideRightOut40 {
+  from {
+    transform: translate3d(0px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(40px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideLeftOut40 {
+  animation-name: fadeOut, slideLeftOut40;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideLeftOut40 {
+  from {
+    transform: translate3d(0, 0px, 0px);
+  }
+  to {
+    transform: translate3d(-40px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideRightOut400 {
+  animation-name: fadeOut, slideRightOut400;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideRightOut400 {
+  from {
+    transform: translate3d(0, 0px, 0px);
+  }
+  to {
+    transform: translate3d(400px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideLeftOut400 {
+  animation-name: fadeOut, slideLeftOut400;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideLeftOut400 {
+  from {
+    transform: translate3d(0, 0px, 0px);
+  }
+  to {
+    transform: translate3d(-400px, 0px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideUpOut20 {
+  animation-name: fadeOut, slideUpOut20;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideUpOut20 {
+  from {
+    transform: translate3d(0px, 0, 0px);
+  }
+  to {
+    transform: translate3d(0px, -20px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideUpOut10 {
+  animation-name: fadeOut, slideUpOut10;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideUpOut10 {
+  from {
+    transform: translate3d(0px, 0, 0px);
+  }
+  to {
+    transform: translate3d(0px, -10px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideDownOut20 {
+  animation-name: fadeOut, slideDownOut20;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideDownOut20 {
+  from {
+    transform: translate3d(0px, 0, 0px);
+  }
+  to {
+    transform: translate3d(0px, 20px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-slideDownOut10 {
+  animation-name: fadeOut, slideDownOut10;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes slideDownOut10 {
+  from {
+    transform: translate3d(0px, 0, 0px);
+  }
+  to {
+    transform: translate3d(0px, 10px, 0px);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-scaleUpIn100 {
+  animation-name: fadeIn, scaleUp100;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes scaleUp100 {
+  from {
+    transform: scale3d(0.98, 0.98, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-scaleDownIn100 {
+  animation-name: fadeIn, scaleDown100;
+  -webkit-animation-duration: 0.367s;
+  -moz-animation-duration: 0.367s;
+  -ms-animation-duration: 0.367s;
+  -o-animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+  animation-fill-mode: both;
+}
+@keyframes scaleDown100 {
+  from {
+    transform: scale3d(1.03, 1.03, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-scaleUpOut103 {
+  animation-name: fadeOut, scaleUp103;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes scaleUp103 {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(1.03, 1.03, 1);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-scaleDownOut98 {
+  animation-name: fadeOut, scaleDown98;
+  -webkit-animation-duration: 0.167s;
+  -moz-animation-duration: 0.167s;
+  -ms-animation-duration: 0.167s;
+  -o-animation-duration: 0.167s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes scaleDown98 {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0.98, 0.98, 1);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-fadeIn400 {
+  -webkit-animation-duration: 0.367s;
+  -webkit-animation-name: fadeIn;
+  -webkit-animation-fill-mode: both;
+  animation-duration: 0.367s;
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+}
+.ms-SPLegacyFabricBlock .ms-u-fadeIn100 {
+  -webkit-animation-duration: 0.367s;
+  -webkit-animation-name: fadeIn;
+  -webkit-animation-fill-mode: both;
+  animation-duration: 0.367s;
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+  animation-duration: 0.167s;
+}
+.ms-SPLegacyFabricBlock .ms-u-fadeIn200 {
+  -webkit-animation-duration: 0.367s;
+  -webkit-animation-name: fadeIn;
+  -webkit-animation-fill-mode: both;
+  animation-duration: 0.367s;
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+  animation-duration: 0.267s;
+}
+.ms-SPLegacyFabricBlock .ms-u-fadeIn500 {
+  -webkit-animation-duration: 0.367s;
+  -webkit-animation-name: fadeIn;
+  -webkit-animation-fill-mode: both;
+  animation-duration: 0.367s;
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+  animation-duration: 0.467s;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  }
+  to {
+    opacity: 1;
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-fadeOut400 {
+  -webkit-animation-duration: 0.367s;
+  -webkit-animation-name: fadeOut;
+  -webkit-animation-fill-mode: both;
+  animation-duration: 0.367s;
+  animation-name: fadeOut;
+  animation-fill-mode: both;
+}
+.ms-SPLegacyFabricBlock .ms-u-fadeOut100 {
+  -webkit-animation-duration: 0.367s;
+  -webkit-animation-name: fadeOut;
+  -webkit-animation-fill-mode: both;
+  animation-duration: 0.367s;
+  animation-name: fadeOut;
+  animation-fill-mode: both;
+  animation-duration: 0.1s;
+}
+.ms-SPLegacyFabricBlock .ms-u-fadeOut200 {
+  -webkit-animation-duration: 0.367s;
+  -webkit-animation-name: fadeOut;
+  -webkit-animation-fill-mode: both;
+  animation-duration: 0.367s;
+  animation-name: fadeOut;
+  animation-fill-mode: both;
+  animation-duration: 0.167s;
+}
+.ms-SPLegacyFabricBlock .ms-u-fadeOut500 {
+  -webkit-animation-duration: 0.367s;
+  -webkit-animation-name: fadeOut;
+  -webkit-animation-fill-mode: both;
+  animation-duration: 0.367s;
+  animation-name: fadeOut;
+  animation-fill-mode: both;
+  animation-duration: 0.467s;
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  }
+  to {
+    opacity: 0;
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-rotate90deg {
+  animation-name: rotate90;
+  -webkit-animation-duration: 0.1s;
+  -moz-animation-duration: 0.1s;
+  -ms-animation-duration: 0.1s;
+  -o-animation-duration: 0.1s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes rotate90 {
+  from {
+    transform: rotateZ(0deg);
+  }
+  to {
+    transform: rotateZ(90deg);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-rotateN90deg {
+  animation-name: rotateN90;
+  -webkit-animation-duration: 0.1s;
+  -moz-animation-duration: 0.1s;
+  -ms-animation-duration: 0.1s;
+  -o-animation-duration: 0.1s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+@keyframes rotateN90 {
+  from {
+    transform: rotateZ(90deg);
+  }
+  to {
+    transform: rotateZ(0deg);
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-expandCollapse400 {
+  transition: height 0.367s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+.ms-SPLegacyFabricBlock .ms-u-expandCollapse200 {
+  transition: height 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+.ms-SPLegacyFabricBlock .ms-u-expandCollapse100 {
+  transition: height 0.1s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+.ms-SPLegacyFabricBlock .ms-u-delay100 {
+  animation-delay: 0.167s;
+}
+.ms-SPLegacyFabricBlock .ms-u-delay200 {
+  animation-delay: 0.267s;
+}
+@media (max-width: 479px) {
+  .ms-SPLegacyFabricBlock .ms-u-hiddenSm,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenMdDown,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenLgDown,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXlDown,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXxlDown {
+    display: none !important;
+  }
+}
+@media (min-width: 480px) and (max-width: 639px) {
+  .ms-SPLegacyFabricBlock .ms-u-hiddenMd,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenMdUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenMdDown,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenLgDown,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXlDown,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXxlDown {
+    display: none !important;
+  }
+}
+@media (min-width: 640px) and (max-width: 1023px) {
+  .ms-SPLegacyFabricBlock .ms-u-hiddenMdUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenLg,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenLgUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenLgDown,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXlDown,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXxlDown {
+    display: none !important;
+  }
+}
+@media (min-width: 1024px) and (max-width: 1365px) {
+  .ms-SPLegacyFabricBlock .ms-u-hiddenMdUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenLgUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXl,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXlUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXlDown,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXxlDown {
+    display: none !important;
+  }
+}
+@media (min-width: 1366px) and (max-width: 1919px) {
+  .ms-SPLegacyFabricBlock .ms-u-hiddenMdUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenLgUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXlUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXxl,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXxlUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXxlDown {
+    display: none !important;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-hiddenMdUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenLgUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXlUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXxlUp,
+  .ms-SPLegacyFabricBlock .ms-u-hiddenXxxl {
+    display: none !important;
+  }
+}
+.ms-SPLegacyFabricBlock .ms-u-sm12 {
+  width: 100%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm11 {
+  width: 91.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm10 {
+  width: 83.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm9 {
+  width: 75%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm8 {
+  width: 66.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm7 {
+  width: 58.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm6 {
+  width: 50%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm5 {
+  width: 41.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm4 {
+  width: 33.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm3 {
+  width: 25%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm2 {
+  width: 16.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-sm1 {
+  width: 8.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull12 {
+  right: 100%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull11 {
+  right: 91.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull10 {
+  right: 83.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull9 {
+  right: 75%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull8 {
+  right: 66.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull7 {
+  right: 58.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull6 {
+  right: 50%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull5 {
+  right: 41.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull4 {
+  right: 33.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull3 {
+  right: 25%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull2 {
+  right: 16.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull1 {
+  right: 8.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPull0 {
+  right: auto;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush12 {
+  left: 100%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush11 {
+  left: 91.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush10 {
+  left: 83.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush9 {
+  left: 75%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush8 {
+  left: 66.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush7 {
+  left: 58.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush6 {
+  left: 50%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush5 {
+  left: 41.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush4 {
+  left: 33.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush3 {
+  left: 25%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush2 {
+  left: 16.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush1 {
+  left: 8.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smPush0 {
+  left: auto;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset11 {
+  margin-left: 91.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset10 {
+  margin-left: 83.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset9 {
+  margin-left: 75%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset8 {
+  margin-left: 66.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset7 {
+  margin-left: 58.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset6 {
+  margin-left: 50%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset5 {
+  margin-left: 41.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset4 {
+  margin-left: 33.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset3 {
+  margin-left: 25%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset2 {
+  margin-left: 16.6666666667%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset1 {
+  margin-left: 8.3333333333%;
+}
+.ms-SPLegacyFabricBlock .ms-u-smOffset0 {
+  margin-left: 0;
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md12 {
+    width: 100%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md11 {
+    width: 91.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md10 {
+    width: 83.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md9 {
+    width: 75%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md8 {
+    width: 66.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md7 {
+    width: 58.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md6 {
+    width: 50%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md5 {
+    width: 41.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md4 {
+    width: 33.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md3 {
+    width: 25%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md2 {
+    width: 16.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-md1 {
+    width: 8.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull12 {
+    right: 100%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull11 {
+    right: 91.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull10 {
+    right: 83.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull9 {
+    right: 75%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull8 {
+    right: 66.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull7 {
+    right: 58.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull6 {
+    right: 50%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull5 {
+    right: 41.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull4 {
+    right: 33.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull3 {
+    right: 25%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull2 {
+    right: 16.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull1 {
+    right: 8.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPull0 {
+    right: auto;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush12 {
+    left: 100%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush11 {
+    left: 91.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush10 {
+    left: 83.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush9 {
+    left: 75%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush8 {
+    left: 66.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush7 {
+    left: 58.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush6 {
+    left: 50%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush5 {
+    left: 41.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush4 {
+    left: 33.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush3 {
+    left: 25%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush2 {
+    left: 16.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush1 {
+    left: 8.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdPush0 {
+    left: auto;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset10 {
+    margin-left: 83.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset9 {
+    margin-left: 75%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset8 {
+    margin-left: 66.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset7 {
+    margin-left: 58.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset6 {
+    margin-left: 50%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset5 {
+    margin-left: 41.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset4 {
+    margin-left: 33.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset3 {
+    margin-left: 25%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset2 {
+    margin-left: 16.6666666667%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset1 {
+    margin-left: 8.3333333333%;
+  }
+}
+@media (min-width: 480px) {
+  .ms-SPLegacyFabricBlock .ms-u-mdOffset0 {
+    margin-left: 0;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg12 {
+    width: 100%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg11 {
+    width: 91.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg10 {
+    width: 83.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg9 {
+    width: 75%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg8 {
+    width: 66.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg7 {
+    width: 58.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg6 {
+    width: 50%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg5 {
+    width: 41.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg4 {
+    width: 33.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg3 {
+    width: 25%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg2 {
+    width: 16.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lg1 {
+    width: 8.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull12 {
+    right: 100%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull11 {
+    right: 91.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull10 {
+    right: 83.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull9 {
+    right: 75%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull8 {
+    right: 66.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull7 {
+    right: 58.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull6 {
+    right: 50%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull5 {
+    right: 41.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull4 {
+    right: 33.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull3 {
+    right: 25%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull2 {
+    right: 16.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull1 {
+    right: 8.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPull0 {
+    right: auto;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush12 {
+    left: 100%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush11 {
+    left: 91.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush10 {
+    left: 83.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush9 {
+    left: 75%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush8 {
+    left: 66.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush7 {
+    left: 58.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush6 {
+    left: 50%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush5 {
+    left: 41.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush4 {
+    left: 33.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush3 {
+    left: 25%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush2 {
+    left: 16.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush1 {
+    left: 8.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgPush0 {
+    left: auto;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset10 {
+    margin-left: 83.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset9 {
+    margin-left: 75%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset8 {
+    margin-left: 66.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset7 {
+    margin-left: 58.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset6 {
+    margin-left: 50%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset5 {
+    margin-left: 41.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset4 {
+    margin-left: 33.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset3 {
+    margin-left: 25%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset2 {
+    margin-left: 16.6666666667%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset1 {
+    margin-left: 8.3333333333%;
+  }
+}
+@media (min-width: 640px) {
+  .ms-SPLegacyFabricBlock .ms-u-lgOffset0 {
+    margin-left: 0;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl12 {
+    width: 100%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl11 {
+    width: 91.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl10 {
+    width: 83.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl9 {
+    width: 75%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl8 {
+    width: 66.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl7 {
+    width: 58.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl6 {
+    width: 50%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl5 {
+    width: 41.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl4 {
+    width: 33.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl3 {
+    width: 25%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl2 {
+    width: 16.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xl1 {
+    width: 8.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull12 {
+    right: 100%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull11 {
+    right: 91.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull10 {
+    right: 83.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull9 {
+    right: 75%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull8 {
+    right: 66.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull7 {
+    right: 58.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull6 {
+    right: 50%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull5 {
+    right: 41.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull4 {
+    right: 33.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull3 {
+    right: 25%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull2 {
+    right: 16.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull1 {
+    right: 8.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPull0 {
+    right: auto;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush12 {
+    left: 100%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush11 {
+    left: 91.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush10 {
+    left: 83.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush9 {
+    left: 75%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush8 {
+    left: 66.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush7 {
+    left: 58.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush6 {
+    left: 50%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush5 {
+    left: 41.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush4 {
+    left: 33.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush3 {
+    left: 25%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush2 {
+    left: 16.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush1 {
+    left: 8.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlPush0 {
+    left: auto;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset10 {
+    margin-left: 83.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset9 {
+    margin-left: 75%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset8 {
+    margin-left: 66.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset7 {
+    margin-left: 58.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset6 {
+    margin-left: 50%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset5 {
+    margin-left: 41.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset4 {
+    margin-left: 33.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset3 {
+    margin-left: 25%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset2 {
+    margin-left: 16.6666666667%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset1 {
+    margin-left: 8.3333333333%;
+  }
+}
+@media (min-width: 1024px) {
+  .ms-SPLegacyFabricBlock .ms-u-xlOffset0 {
+    margin-left: 0;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl12 {
+    width: 100%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl11 {
+    width: 91.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl10 {
+    width: 83.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl9 {
+    width: 75%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl8 {
+    width: 66.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl7 {
+    width: 58.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl6 {
+    width: 50%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl5 {
+    width: 41.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl4 {
+    width: 33.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl3 {
+    width: 25%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl2 {
+    width: 16.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxl1 {
+    width: 8.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull12 {
+    right: 100%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull11 {
+    right: 91.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull10 {
+    right: 83.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull9 {
+    right: 75%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull8 {
+    right: 66.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull7 {
+    right: 58.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull6 {
+    right: 50%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull5 {
+    right: 41.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull4 {
+    right: 33.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull3 {
+    right: 25%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull2 {
+    right: 16.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull1 {
+    right: 8.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPull0 {
+    right: auto;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush12 {
+    left: 100%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush11 {
+    left: 91.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush10 {
+    left: 83.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush9 {
+    left: 75%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush8 {
+    left: 66.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush7 {
+    left: 58.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush6 {
+    left: 50%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush5 {
+    left: 41.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush4 {
+    left: 33.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush3 {
+    left: 25%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush2 {
+    left: 16.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush1 {
+    left: 8.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlPush0 {
+    left: auto;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset10 {
+    margin-left: 83.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset9 {
+    margin-left: 75%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset8 {
+    margin-left: 66.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset7 {
+    margin-left: 58.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset6 {
+    margin-left: 50%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset5 {
+    margin-left: 41.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset4 {
+    margin-left: 33.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset3 {
+    margin-left: 25%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset2 {
+    margin-left: 16.6666666667%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset1 {
+    margin-left: 8.3333333333%;
+  }
+}
+@media (min-width: 1366px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxlOffset0 {
+    margin-left: 0;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl12 {
+    width: 100%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl11 {
+    width: 91.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl10 {
+    width: 83.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl9 {
+    width: 75%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl8 {
+    width: 66.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl7 {
+    width: 58.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl6 {
+    width: 50%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl5 {
+    width: 41.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl4 {
+    width: 33.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl3 {
+    width: 25%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl2 {
+    width: 16.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxl1 {
+    width: 8.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull12 {
+    right: 100%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull11 {
+    right: 91.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull10 {
+    right: 83.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull9 {
+    right: 75%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull8 {
+    right: 66.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull7 {
+    right: 58.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull6 {
+    right: 50%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull5 {
+    right: 41.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull4 {
+    right: 33.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull3 {
+    right: 25%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull2 {
+    right: 16.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull1 {
+    right: 8.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPull0 {
+    right: auto;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush12 {
+    left: 100%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush11 {
+    left: 91.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush10 {
+    left: 83.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush9 {
+    left: 75%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush8 {
+    left: 66.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush7 {
+    left: 58.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush6 {
+    left: 50%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush5 {
+    left: 41.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush4 {
+    left: 33.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush3 {
+    left: 25%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush2 {
+    left: 16.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush1 {
+    left: 8.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlPush0 {
+    left: auto;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset10 {
+    margin-left: 83.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset9 {
+    margin-left: 75%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset8 {
+    margin-left: 66.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset7 {
+    margin-left: 58.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset6 {
+    margin-left: 50%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset5 {
+    margin-left: 41.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset4 {
+    margin-left: 33.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset3 {
+    margin-left: 25%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset2 {
+    margin-left: 16.6666666667%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset1 {
+    margin-left: 8.3333333333%;
+  }
+}
+@media (min-width: 1920px) {
+  .ms-SPLegacyFabricBlock .ms-u-xxxlOffset0 {
+    margin-left: 0;
+  }
+}