@charset "UTF-8";
/* You can add global styles to this file, and also import other style files */
@-webkit-keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@-webkit-keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@-webkit-keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@-webkit-keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app article, sf-app.sf-app aside, sf-app.sf-app details, sf-app.sf-app figcaption, sf-app.sf-app figure, sf-app.sf-app footer, sf-app.sf-app header, sf-app.sf-app hgroup, sf-app.sf-app main, sf-app.sf-app nav, sf-app.sf-app section, sf-app.sf-app summary,
sf-app.sf-app button, sf-app.sf-app input, sf-app.sf-app optgroup, sf-app.sf-app select, sf-app.sf-app textarea,
sf-app.sf-app h1, sf-app.sf-app h2, sf-app.sf-app h3, sf-app.sf-app h4, sf-app.sf-app h5, sf-app.sf-app h6,
sf-app.sf-app p, sf-app.sf-app blockquote, sf-app.sf-app pre,
sf-app.sf-app dl, sf-app.sf-app dd, sf-app.sf-app ol, sf-app.sf-app ul, sf-app.sf-app li,
sf-app.sf-app form, sf-app.sf-app fieldset, sf-app.sf-app legend, sf-app.sf-app label,
sf-app.sf-app table, sf-app.sf-app th, sf-app.sf-app td, sf-app.sf-app caption,
sf-app.sf-app hr {
  align-content: stretch;
  align-items: stretch;
  align-self: auto;
  -webkit-animation: none;
          animation: none;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  background: transparent none;
  border: 0;
  bottom: auto;
  -webkit-box-decoration-break: slice;
          box-decoration-break: slice;
  box-shadow: none;
  box-sizing: border-box;
  -moz-column-break-after: auto;
       break-after: auto;
  -moz-column-break-before: auto;
       break-before: auto;
  -moz-column-break-inside: auto;
       break-inside: auto;
  caption-side: top;
  caret-color: auto;
  clear: none;
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
  color: inherit;
  -moz-columns: auto;
       columns: auto;
  content: normal;
  counter-increment: none;
  counter-reset: none;
  empty-cells: show;
  font-family: inherit;
  filter: none;
  flex-basis: auto;
  flex-direction: row;
  flex: 0 1 auto;
  float: none;
  font-feature-settings: normal;
  -webkit-font-kerning: auto;
          font-kerning: auto;
  font-language-override: normal;
  font-size-adjust: none;
  font-stretch: normal;
  font-synthesis: weight style;
  grid: none;
  height: auto;
  -webkit-hyphens: manual;
          hyphens: manual;
  image-orientation: 0deg;
  image-rendering: auto;
  image-resolution: 1dppx;
  ime-mode: auto;
  inline-size: auto;
  isolation: auto;
  justify-content: flex-start;
  left: auto;
  letter-spacing: normal;
  line-break: auto;
  margin: 0;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  -o-object-fit: fill;
     object-fit: fill;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  opacity: 1;
  order: 0;
  orphans: 2;
  outline: medium invert initial;
  outline-offset: 0;
  overflow: visible;
  overflow-wrap: normal;
  overflow-x: visible;
  overflow-y: visible;
  padding: 0;
  page-break-after: auto;
  page-break-before: auto;
  page-break-inside: auto;
  perspective: none;
  perspective-origin: 50% 50%;
  position: static;
  quotes: initial;
  resize: none;
  right: auto;
  ruby-align: space-around;
  ruby-merge: separate;
  ruby-position: over;
  scroll-behavior: auto;
  scroll-snap-coordinate: none;
  scroll-snap-destination: 0 0;
  scroll-snap-points-x: none;
  scroll-snap-points-y: none;
  scroll-snap-type: none;
  shape-image-threshold: 0;
  shape-margin: 0;
  shape-outside: none;
  -moz-tab-size: 8;
    -o-tab-size: 8;
       tab-size: 8;
  table-layout: auto;
  text-align: inherit;
  -moz-text-align-last: auto;
       text-align-last: auto;
  text-combine-upright: none;
  text-decoration: none;
  -webkit-text-emphasis: none;
          text-emphasis: none;
  text-indent: 0;
  text-justify: auto;
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
  text-overflow: clip;
  text-rendering: auto;
  text-shadow: none;
  text-transform: inherit;
  text-underline-position: auto;
  top: auto;
  touch-action: auto;
  transform: none;
  transform-box: border-box;
  transform-origin: 50% 50% 0;
  transform-style: flat;
  transition: all 0s ease 0s;
  vertical-align: inherit;
  white-space: inherit;
  widows: 2;
  width: auto;
  will-change: auto;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  z-index: auto;
}
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: "FontAwesome";
  src: url("/assets/fonts/font-awesome/fontawesome-webfont.eot?v=4.7.0");
  src: url("/assets/fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("/assets/fonts/font-awesome/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("/assets/fonts/font-awesome/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("/assets/fonts/font-awesome/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("/assets/fonts/font-awesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.sf-fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.sf-fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.sf-fa-2x {
  font-size: 2em;
}
.sf-fa-3x {
  font-size: 3em;
}
.sf-fa-4x {
  font-size: 4em;
}
.sf-fa-5x {
  font-size: 5em;
}
.sf-fa-fw {
  width: 1.2857142857em;
  text-align: center;
}
.sf-fa-ul {
  padding-left: 0;
  margin-left: 2.1428571429em;
  list-style-type: none;
}
.sf-fa-ul > li {
  position: relative;
}
.sf-fa-li {
  position: absolute;
  left: -2.1428571429em;
  width: 2.1428571429em;
  top: 0.1428571429em;
  text-align: center;
}
.sf-fa-li.sf-fa-lg {
  left: -1.8571428571em;
}
.sf-fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}
.sf-fa-pull-left {
  float: left;
}
.sf-fa-pull-right {
  float: right;
}
.sf-fa.sf-fa-pull-left {
  margin-right: 0.3em;
}
.sf-fa.sf-fa-pull-right {
  margin-left: 0.3em;
}
/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.sf-fa.pull-left {
  margin-right: 0.3em;
}
.sf-fa.pull-right {
  margin-left: 0.3em;
}
.sf-fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.sf-fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.sf-fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg);
}
.sf-fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  transform: rotate(180deg);
}
.sf-fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  transform: rotate(270deg);
}
.sf-fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1);
}
.sf-fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1);
}
:root .sf-fa-rotate-90,
:root .sf-fa-rotate-180,
:root .sf-fa-rotate-270,
:root .sf-fa-flip-horizontal,
:root .sf-fa-flip-vertical {
  filter: none;
}
.sf-fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.sf-fa-stack-1x, .sf-fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.sf-fa-stack-1x {
  line-height: inherit;
}
.sf-fa-stack-2x {
  font-size: 2em;
}
.sf-fa-inverse {
  color: #fff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.sf-fa-glass:before {
  content: "";
}
.sf-fa-music:before {
  content: "";
}
.sf-fa-search:before {
  content: "";
}
.sf-fa-envelope-o:before {
  content: "";
}
.sf-fa-heart:before {
  content: "";
}
.sf-fa-star:before {
  content: "";
}
.sf-fa-star-o:before {
  content: "";
}
.sf-fa-user:before {
  content: "";
}
.sf-fa-film:before {
  content: "";
}
.sf-fa-th-large:before {
  content: "";
}
.sf-fa-th:before {
  content: "";
}
.sf-fa-th-list:before {
  content: "";
}
.sf-fa-check:before {
  content: "";
}
.sf-fa-remove:before,
.sf-fa-close:before,
.sf-fa-times:before {
  content: "";
}
.sf-fa-search-plus:before {
  content: "";
}
.sf-fa-search-minus:before {
  content: "";
}
.sf-fa-power-off:before {
  content: "";
}
.sf-fa-signal:before {
  content: "";
}
.sf-fa-gear:before,
.sf-fa-cog:before {
  content: "";
}
.sf-fa-trash-o:before {
  content: "";
}
.sf-fa-home:before {
  content: "";
}
.sf-fa-file-o:before {
  content: "";
}
.sf-fa-clock-o:before {
  content: "";
}
.sf-fa-road:before {
  content: "";
}
.sf-fa-download:before {
  content: "";
}
.sf-fa-arrow-circle-o-down:before {
  content: "";
}
.sf-fa-arrow-circle-o-up:before {
  content: "";
}
.sf-fa-inbox:before {
  content: "";
}
.sf-fa-play-circle-o:before {
  content: "";
}
.sf-fa-rotate-right:before,
.sf-fa-repeat:before {
  content: "";
}
.sf-fa-refresh:before {
  content: "";
}
.sf-fa-list-alt:before {
  content: "";
}
.sf-fa-lock:before {
  content: "";
}
.sf-fa-flag:before {
  content: "";
}
.sf-fa-headphones:before {
  content: "";
}
.sf-fa-volume-off:before {
  content: "";
}
.sf-fa-volume-down:before {
  content: "";
}
.sf-fa-volume-up:before {
  content: "";
}
.sf-fa-qrcode:before {
  content: "";
}
.sf-fa-barcode:before {
  content: "";
}
.sf-fa-tag:before {
  content: "";
}
.sf-fa-tags:before {
  content: "";
}
.sf-fa-book:before {
  content: "";
}
.sf-fa-bookmark:before {
  content: "";
}
.sf-fa-print:before {
  content: "";
}
.sf-fa-camera:before {
  content: "";
}
.sf-fa-font:before {
  content: "";
}
.sf-fa-bold:before {
  content: "";
}
.sf-fa-italic:before {
  content: "";
}
.sf-fa-text-height:before {
  content: "";
}
.sf-fa-text-width:before {
  content: "";
}
.sf-fa-align-left:before {
  content: "";
}
.sf-fa-align-center:before {
  content: "";
}
.sf-fa-align-right:before {
  content: "";
}
.sf-fa-align-justify:before {
  content: "";
}
.sf-fa-list:before {
  content: "";
}
.sf-fa-dedent:before,
.sf-fa-outdent:before {
  content: "";
}
.sf-fa-indent:before {
  content: "";
}
.sf-fa-video-camera:before {
  content: "";
}
.sf-fa-photo:before,
.sf-fa-image:before,
.sf-fa-picture-o:before {
  content: "";
}
.sf-fa-pencil:before {
  content: "";
}
.sf-fa-map-marker:before {
  content: "";
}
.sf-fa-adjust:before {
  content: "";
}
.sf-fa-tint:before {
  content: "";
}
.sf-fa-edit:before,
.sf-fa-pencil-square-o:before {
  content: "";
}
.sf-fa-share-square-o:before {
  content: "";
}
.sf-fa-check-square-o:before {
  content: "";
}
.sf-fa-arrows:before {
  content: "";
}
.sf-fa-step-backward:before {
  content: "";
}
.sf-fa-fast-backward:before {
  content: "";
}
.sf-fa-backward:before {
  content: "";
}
.sf-fa-play:before {
  content: "";
}
.sf-fa-pause:before {
  content: "";
}
.sf-fa-stop:before {
  content: "";
}
.sf-fa-forward:before {
  content: "";
}
.sf-fa-fast-forward:before {
  content: "";
}
.sf-fa-step-forward:before {
  content: "";
}
.sf-fa-eject:before {
  content: "";
}
.sf-fa-chevron-left:before {
  content: "";
}
.sf-fa-chevron-right:before {
  content: "";
}
.sf-fa-plus-circle:before {
  content: "";
}
.sf-fa-minus-circle:before {
  content: "";
}
.sf-fa-times-circle:before {
  content: "";
}
.sf-fa-check-circle:before {
  content: "";
}
.sf-fa-question-circle:before {
  content: "";
}
.sf-fa-info-circle:before {
  content: "";
}
.sf-fa-crosshairs:before {
  content: "";
}
.sf-fa-times-circle-o:before {
  content: "";
}
.sf-fa-check-circle-o:before {
  content: "";
}
.sf-fa-ban:before {
  content: "";
}
.sf-fa-arrow-left:before {
  content: "";
}
.sf-fa-arrow-right:before {
  content: "";
}
.sf-fa-arrow-up:before {
  content: "";
}
.sf-fa-arrow-down:before {
  content: "";
}
.sf-fa-mail-forward:before,
.sf-fa-share:before {
  content: "";
}
.sf-fa-expand:before {
  content: "";
}
.sf-fa-compress:before {
  content: "";
}
.sf-fa-plus:before {
  content: "";
}
.sf-fa-minus:before {
  content: "";
}
.sf-fa-asterisk:before {
  content: "";
}
.sf-fa-exclamation-circle:before {
  content: "";
}
.sf-fa-gift:before {
  content: "";
}
.sf-fa-leaf:before {
  content: "";
}
.sf-fa-fire:before {
  content: "";
}
.sf-fa-eye:before {
  content: "";
}
.sf-fa-eye-slash:before {
  content: "";
}
.sf-fa-warning:before,
.sf-fa-exclamation-triangle:before {
  content: "";
}
.sf-fa-plane:before {
  content: "";
}
.sf-fa-calendar:before {
  content: "";
}
.sf-fa-random:before {
  content: "";
}
.sf-fa-comment:before {
  content: "";
}
.sf-fa-magnet:before {
  content: "";
}
.sf-fa-chevron-up:before {
  content: "";
}
.sf-fa-chevron-down:before {
  content: "";
}
.sf-fa-retweet:before {
  content: "";
}
.sf-fa-shopping-cart:before {
  content: "";
}
.sf-fa-folder:before {
  content: "";
}
.sf-fa-folder-open:before {
  content: "";
}
.sf-fa-arrows-v:before {
  content: "";
}
.sf-fa-arrows-h:before {
  content: "";
}
.sf-fa-bar-chart-o:before,
.sf-fa-bar-chart:before {
  content: "";
}
.sf-fa-twitter-square:before {
  content: "";
}
.sf-fa-facebook-square:before {
  content: "";
}
.sf-fa-camera-retro:before {
  content: "";
}
.sf-fa-key:before {
  content: "";
}
.sf-fa-gears:before,
.sf-fa-cogs:before {
  content: "";
}
.sf-fa-comments:before {
  content: "";
}
.sf-fa-thumbs-o-up:before {
  content: "";
}
.sf-fa-thumbs-o-down:before {
  content: "";
}
.sf-fa-star-half:before {
  content: "";
}
.sf-fa-heart-o:before {
  content: "";
}
.sf-fa-sign-out:before {
  content: "";
}
.sf-fa-linkedin-square:before {
  content: "";
}
.sf-fa-thumb-tack:before {
  content: "";
}
.sf-fa-external-link:before {
  content: "";
}
.sf-fa-sign-in:before {
  content: "";
}
.sf-fa-trophy:before {
  content: "";
}
.sf-fa-github-square:before {
  content: "";
}
.sf-fa-upload:before {
  content: "";
}
.sf-fa-lemon-o:before {
  content: "";
}
.sf-fa-phone:before {
  content: "";
}
.sf-fa-square-o:before {
  content: "";
}
.sf-fa-bookmark-o:before {
  content: "";
}
.sf-fa-phone-square:before {
  content: "";
}
.sf-fa-twitter:before {
  content: "";
}
.sf-fa-facebook-f:before,
.sf-fa-facebook:before {
  content: "";
}
.sf-fa-github:before {
  content: "";
}
.sf-fa-unlock:before {
  content: "";
}
.sf-fa-credit-card:before {
  content: "";
}
.sf-fa-feed:before,
.sf-fa-rss:before {
  content: "";
}
.sf-fa-hdd-o:before {
  content: "";
}
.sf-fa-bullhorn:before {
  content: "";
}
.sf-fa-bell:before {
  content: "";
}
.sf-fa-certificate:before {
  content: "";
}
.sf-fa-hand-o-right:before {
  content: "";
}
.sf-fa-hand-o-left:before {
  content: "";
}
.sf-fa-hand-o-up:before {
  content: "";
}
.sf-fa-hand-o-down:before {
  content: "";
}
.sf-fa-arrow-circle-left:before {
  content: "";
}
.sf-fa-arrow-circle-right:before {
  content: "";
}
.sf-fa-arrow-circle-up:before {
  content: "";
}
.sf-fa-arrow-circle-down:before {
  content: "";
}
.sf-fa-globe:before {
  content: "";
}
.sf-fa-wrench:before {
  content: "";
}
.sf-fa-tasks:before {
  content: "";
}
.sf-fa-filter:before {
  content: "";
}
.sf-fa-briefcase:before {
  content: "";
}
.sf-fa-arrows-alt:before {
  content: "";
}
.sf-fa-group:before,
.sf-fa-users:before {
  content: "";
}
.sf-fa-chain:before,
.sf-fa-link:before {
  content: "";
}
.sf-fa-cloud:before {
  content: "";
}
.sf-fa-flask:before {
  content: "";
}
.sf-fa-cut:before,
.sf-fa-scissors:before {
  content: "";
}
.sf-fa-copy:before,
.sf-fa-files-o:before {
  content: "";
}
.sf-fa-paperclip:before {
  content: "";
}
.sf-fa-save:before,
.sf-fa-floppy-o:before {
  content: "";
}
.sf-fa-square:before {
  content: "";
}
.sf-fa-navicon:before,
.sf-fa-reorder:before,
.sf-fa-bars:before {
  content: "";
}
.sf-fa-list-ul:before {
  content: "";
}
.sf-fa-list-ol:before {
  content: "";
}
.sf-fa-strikethrough:before {
  content: "";
}
.sf-fa-underline:before {
  content: "";
}
.sf-fa-table:before {
  content: "";
}
.sf-fa-magic:before {
  content: "";
}
.sf-fa-truck:before {
  content: "";
}
.sf-fa-pinterest:before {
  content: "";
}
.sf-fa-pinterest-square:before {
  content: "";
}
.sf-fa-google-plus-square:before {
  content: "";
}
.sf-fa-google-plus:before {
  content: "";
}
.sf-fa-money:before {
  content: "";
}
.sf-fa-caret-down:before {
  content: "";
}
.sf-fa-caret-up:before {
  content: "";
}
.sf-fa-caret-left:before {
  content: "";
}
.sf-fa-caret-right:before {
  content: "";
}
.sf-fa-columns:before {
  content: "";
}
.sf-fa-unsorted:before,
.sf-fa-sort:before {
  content: "";
}
.sf-fa-sort-down:before,
.sf-fa-sort-desc:before {
  content: "";
}
.sf-fa-sort-up:before,
.sf-fa-sort-asc:before {
  content: "";
}
.sf-fa-envelope:before {
  content: "";
}
.sf-fa-linkedin:before {
  content: "";
}
.sf-fa-rotate-left:before,
.sf-fa-undo:before {
  content: "";
}
.sf-fa-legal:before,
.sf-fa-gavel:before {
  content: "";
}
.sf-fa-dashboard:before,
.sf-fa-tachometer:before {
  content: "";
}
.sf-fa-comment-o:before {
  content: "";
}
.sf-fa-comments-o:before {
  content: "";
}
.sf-fa-flash:before,
.sf-fa-bolt:before {
  content: "";
}
.sf-fa-sitemap:before {
  content: "";
}
.sf-fa-umbrella:before {
  content: "";
}
.sf-fa-paste:before,
.sf-fa-clipboard:before {
  content: "";
}
.sf-fa-lightbulb-o:before {
  content: "";
}
.sf-fa-exchange:before {
  content: "";
}
.sf-fa-cloud-download:before {
  content: "";
}
.sf-fa-cloud-upload:before {
  content: "";
}
.sf-fa-user-md:before {
  content: "";
}
.sf-fa-stethoscope:before {
  content: "";
}
.sf-fa-suitcase:before {
  content: "";
}
.sf-fa-bell-o:before {
  content: "";
}
.sf-fa-coffee:before {
  content: "";
}
.sf-fa-cutlery:before {
  content: "";
}
.sf-fa-file-text-o:before {
  content: "";
}
.sf-fa-building-o:before {
  content: "";
}
.sf-fa-hospital-o:before {
  content: "";
}
.sf-fa-ambulance:before {
  content: "";
}
.sf-fa-medkit:before {
  content: "";
}
.sf-fa-fighter-jet:before {
  content: "";
}
.sf-fa-beer:before {
  content: "";
}
.sf-fa-h-square:before {
  content: "";
}
.sf-fa-plus-square:before {
  content: "";
}
.sf-fa-angle-double-left:before {
  content: "";
}
.sf-fa-angle-double-right:before {
  content: "";
}
.sf-fa-angle-double-up:before {
  content: "";
}
.sf-fa-angle-double-down:before {
  content: "";
}
.sf-fa-angle-left:before {
  content: "";
}
.sf-fa-angle-right:before {
  content: "";
}
.sf-fa-angle-up:before {
  content: "";
}
.sf-fa-angle-down:before {
  content: "";
}
.sf-fa-desktop:before {
  content: "";
}
.sf-fa-laptop:before {
  content: "";
}
.sf-fa-tablet:before {
  content: "";
}
.sf-fa-mobile-phone:before,
.sf-fa-mobile:before {
  content: "";
}
.sf-fa-circle-o:before {
  content: "";
}
.sf-fa-quote-left:before {
  content: "";
}
.sf-fa-quote-right:before {
  content: "";
}
.sf-fa-spinner:before {
  content: "";
}
.sf-fa-circle:before {
  content: "";
}
.sf-fa-mail-reply:before,
.sf-fa-reply:before {
  content: "";
}
.sf-fa-github-alt:before {
  content: "";
}
.sf-fa-folder-o:before {
  content: "";
}
.sf-fa-folder-open-o:before {
  content: "";
}
.sf-fa-smile-o:before {
  content: "";
}
.sf-fa-frown-o:before {
  content: "";
}
.sf-fa-meh-o:before {
  content: "";
}
.sf-fa-gamepad:before {
  content: "";
}
.sf-fa-keyboard-o:before {
  content: "";
}
.sf-fa-flag-o:before {
  content: "";
}
.sf-fa-flag-checkered:before {
  content: "";
}
.sf-fa-terminal:before {
  content: "";
}
.sf-fa-code:before {
  content: "";
}
.sf-fa-mail-reply-all:before,
.sf-fa-reply-all:before {
  content: "";
}
.sf-fa-star-half-empty:before,
.sf-fa-star-half-full:before,
.sf-fa-star-half-o:before {
  content: "";
}
.sf-fa-location-arrow:before {
  content: "";
}
.sf-fa-crop:before {
  content: "";
}
.sf-fa-code-fork:before {
  content: "";
}
.sf-fa-unlink:before,
.sf-fa-chain-broken:before {
  content: "";
}
.sf-fa-question:before {
  content: "";
}
.sf-fa-info:before {
  content: "";
}
.sf-fa-exclamation:before {
  content: "";
}
.sf-fa-superscript:before {
  content: "";
}
.sf-fa-subscript:before {
  content: "";
}
.sf-fa-eraser:before {
  content: "";
}
.sf-fa-puzzle-piece:before {
  content: "";
}
.sf-fa-microphone:before {
  content: "";
}
.sf-fa-microphone-slash:before {
  content: "";
}
.sf-fa-shield:before {
  content: "";
}
.sf-fa-calendar-o:before {
  content: "";
}
.sf-fa-fire-extinguisher:before {
  content: "";
}
.sf-fa-rocket:before {
  content: "";
}
.sf-fa-maxcdn:before {
  content: "";
}
.sf-fa-chevron-circle-left:before {
  content: "";
}
.sf-fa-chevron-circle-right:before {
  content: "";
}
.sf-fa-chevron-circle-up:before {
  content: "";
}
.sf-fa-chevron-circle-down:before {
  content: "";
}
.sf-fa-html5:before {
  content: "";
}
.sf-fa-css3:before {
  content: "";
}
.sf-fa-anchor:before {
  content: "";
}
.sf-fa-unlock-alt:before {
  content: "";
}
.sf-fa-bullseye:before {
  content: "";
}
.sf-fa-ellipsis-h:before {
  content: "";
}
.sf-fa-ellipsis-v:before {
  content: "";
}
.sf-fa-rss-square:before {
  content: "";
}
.sf-fa-play-circle:before {
  content: "";
}
.sf-fa-ticket:before {
  content: "";
}
.sf-fa-minus-square:before {
  content: "";
}
.sf-fa-minus-square-o:before {
  content: "";
}
.sf-fa-level-up:before {
  content: "";
}
.sf-fa-level-down:before {
  content: "";
}
.sf-fa-check-square:before {
  content: "";
}
.sf-fa-pencil-square:before {
  content: "";
}
.sf-fa-external-link-square:before {
  content: "";
}
.sf-fa-share-square:before {
  content: "";
}
.sf-fa-compass:before {
  content: "";
}
.sf-fa-toggle-down:before,
.sf-fa-caret-square-o-down:before {
  content: "";
}
.sf-fa-toggle-up:before,
.sf-fa-caret-square-o-up:before {
  content: "";
}
.sf-fa-toggle-right:before,
.sf-fa-caret-square-o-right:before {
  content: "";
}
.sf-fa-euro:before,
.sf-fa-eur:before {
  content: "";
}
.sf-fa-gbp:before {
  content: "";
}
.sf-fa-dollar:before,
.sf-fa-usd:before {
  content: "";
}
.sf-fa-rupee:before,
.sf-fa-inr:before {
  content: "";
}
.sf-fa-cny:before,
.sf-fa-rmb:before,
.sf-fa-yen:before,
.sf-fa-jpy:before {
  content: "";
}
.sf-fa-ruble:before,
.sf-fa-rouble:before,
.sf-fa-rub:before {
  content: "";
}
.sf-fa-won:before,
.sf-fa-krw:before {
  content: "";
}
.sf-fa-bitcoin:before,
.sf-fa-btc:before {
  content: "";
}
.sf-fa-file:before {
  content: "";
}
.sf-fa-file-text:before {
  content: "";
}
.sf-fa-sort-alpha-asc:before {
  content: "";
}
.sf-fa-sort-alpha-desc:before {
  content: "";
}
.sf-fa-sort-amount-asc:before {
  content: "";
}
.sf-fa-sort-amount-desc:before {
  content: "";
}
.sf-fa-sort-numeric-asc:before {
  content: "";
}
.sf-fa-sort-numeric-desc:before {
  content: "";
}
.sf-fa-thumbs-up:before {
  content: "";
}
.sf-fa-thumbs-down:before {
  content: "";
}
.sf-fa-youtube-square:before {
  content: "";
}
.sf-fa-youtube:before {
  content: "";
}
.sf-fa-xing:before {
  content: "";
}
.sf-fa-xing-square:before {
  content: "";
}
.sf-fa-youtube-play:before {
  content: "";
}
.sf-fa-dropbox:before {
  content: "";
}
.sf-fa-stack-overflow:before {
  content: "";
}
.sf-fa-instagram:before {
  content: "";
}
.sf-fa-flickr:before {
  content: "";
}
.sf-fa-adn:before {
  content: "";
}
.sf-fa-bitbucket:before {
  content: "";
}
.sf-fa-bitbucket-square:before {
  content: "";
}
.sf-fa-tumblr:before {
  content: "";
}
.sf-fa-tumblr-square:before {
  content: "";
}
.sf-fa-long-arrow-down:before {
  content: "";
}
.sf-fa-long-arrow-up:before {
  content: "";
}
.sf-fa-long-arrow-left:before {
  content: "";
}
.sf-fa-long-arrow-right:before {
  content: "";
}
.sf-fa-apple:before {
  content: "";
}
.sf-fa-windows:before {
  content: "";
}
.sf-fa-android:before {
  content: "";
}
.sf-fa-linux:before {
  content: "";
}
.sf-fa-dribbble:before {
  content: "";
}
.sf-fa-skype:before {
  content: "";
}
.sf-fa-foursquare:before {
  content: "";
}
.sf-fa-trello:before {
  content: "";
}
.sf-fa-female:before {
  content: "";
}
.sf-fa-male:before {
  content: "";
}
.sf-fa-gittip:before,
.sf-fa-gratipay:before {
  content: "";
}
.sf-fa-sun-o:before {
  content: "";
}
.sf-fa-moon-o:before {
  content: "";
}
.sf-fa-archive:before {
  content: "";
}
.sf-fa-bug:before {
  content: "";
}
.sf-fa-vk:before {
  content: "";
}
.sf-fa-weibo:before {
  content: "";
}
.sf-fa-renren:before {
  content: "";
}
.sf-fa-pagelines:before {
  content: "";
}
.sf-fa-stack-exchange:before {
  content: "";
}
.sf-fa-arrow-circle-o-right:before {
  content: "";
}
.sf-fa-arrow-circle-o-left:before {
  content: "";
}
.sf-fa-toggle-left:before,
.sf-fa-caret-square-o-left:before {
  content: "";
}
.sf-fa-dot-circle-o:before {
  content: "";
}
.sf-fa-wheelchair:before {
  content: "";
}
.sf-fa-vimeo-square:before {
  content: "";
}
.sf-fa-turkish-lira:before,
.sf-fa-try:before {
  content: "";
}
.sf-fa-plus-square-o:before {
  content: "";
}
.sf-fa-space-shuttle:before {
  content: "";
}
.sf-fa-slack:before {
  content: "";
}
.sf-fa-envelope-square:before {
  content: "";
}
.sf-fa-wordpress:before {
  content: "";
}
.sf-fa-openid:before {
  content: "";
}
.sf-fa-institution:before,
.sf-fa-bank:before,
.sf-fa-university:before {
  content: "";
}
.sf-fa-mortar-board:before,
.sf-fa-graduation-cap:before {
  content: "";
}
.sf-fa-yahoo:before {
  content: "";
}
.sf-fa-google:before {
  content: "";
}
.sf-fa-reddit:before {
  content: "";
}
.sf-fa-reddit-square:before {
  content: "";
}
.sf-fa-stumbleupon-circle:before {
  content: "";
}
.sf-fa-stumbleupon:before {
  content: "";
}
.sf-fa-delicious:before {
  content: "";
}
.sf-fa-digg:before {
  content: "";
}
.sf-fa-pied-piper-pp:before {
  content: "";
}
.sf-fa-pied-piper-alt:before {
  content: "";
}
.sf-fa-drupal:before {
  content: "";
}
.sf-fa-joomla:before {
  content: "";
}
.sf-fa-language:before {
  content: "";
}
.sf-fa-fax:before {
  content: "";
}
.sf-fa-building:before {
  content: "";
}
.sf-fa-child:before {
  content: "";
}
.sf-fa-paw:before {
  content: "";
}
.sf-fa-spoon:before {
  content: "";
}
.sf-fa-cube:before {
  content: "";
}
.sf-fa-cubes:before {
  content: "";
}
.sf-fa-behance:before {
  content: "";
}
.sf-fa-behance-square:before {
  content: "";
}
.sf-fa-steam:before {
  content: "";
}
.sf-fa-steam-square:before {
  content: "";
}
.sf-fa-recycle:before {
  content: "";
}
.sf-fa-automobile:before,
.sf-fa-car:before {
  content: "";
}
.sf-fa-cab:before,
.sf-fa-taxi:before {
  content: "";
}
.sf-fa-tree:before {
  content: "";
}
.sf-fa-spotify:before {
  content: "";
}
.sf-fa-deviantart:before {
  content: "";
}
.sf-fa-soundcloud:before {
  content: "";
}
.sf-fa-database:before {
  content: "";
}
.sf-fa-file-pdf-o:before {
  content: "";
}
.sf-fa-file-word-o:before {
  content: "";
}
.sf-fa-file-excel-o:before {
  content: "";
}
.sf-fa-file-powerpoint-o:before {
  content: "";
}
.sf-fa-file-photo-o:before,
.sf-fa-file-picture-o:before,
.sf-fa-file-image-o:before {
  content: "";
}
.sf-fa-file-zip-o:before,
.sf-fa-file-archive-o:before {
  content: "";
}
.sf-fa-file-sound-o:before,
.sf-fa-file-audio-o:before {
  content: "";
}
.sf-fa-file-movie-o:before,
.sf-fa-file-video-o:before {
  content: "";
}
.sf-fa-file-code-o:before {
  content: "";
}
.sf-fa-vine:before {
  content: "";
}
.sf-fa-codepen:before {
  content: "";
}
.sf-fa-jsfiddle:before {
  content: "";
}
.sf-fa-life-bouy:before,
.sf-fa-life-buoy:before,
.sf-fa-life-saver:before,
.sf-fa-support:before,
.sf-fa-life-ring:before {
  content: "";
}
.sf-fa-circle-o-notch:before {
  content: "";
}
.sf-fa-ra:before,
.sf-fa-resistance:before,
.sf-fa-rebel:before {
  content: "";
}
.sf-fa-ge:before,
.sf-fa-empire:before {
  content: "";
}
.sf-fa-git-square:before {
  content: "";
}
.sf-fa-git:before {
  content: "";
}
.sf-fa-y-combinator-square:before,
.sf-fa-yc-square:before,
.sf-fa-hacker-news:before {
  content: "";
}
.sf-fa-tencent-weibo:before {
  content: "";
}
.sf-fa-qq:before {
  content: "";
}
.sf-fa-wechat:before,
.sf-fa-weixin:before {
  content: "";
}
.sf-fa-send:before,
.sf-fa-paper-plane:before {
  content: "";
}
.sf-fa-send-o:before,
.sf-fa-paper-plane-o:before {
  content: "";
}
.sf-fa-history:before {
  content: "";
}
.sf-fa-circle-thin:before {
  content: "";
}
.sf-fa-header:before {
  content: "";
}
.sf-fa-paragraph:before {
  content: "";
}
.sf-fa-sliders:before {
  content: "";
}
.sf-fa-share-alt:before {
  content: "";
}
.sf-fa-share-alt-square:before {
  content: "";
}
.sf-fa-bomb:before {
  content: "";
}
.sf-fa-soccer-ball-o:before,
.sf-fa-futbol-o:before {
  content: "";
}
.sf-fa-tty:before {
  content: "";
}
.sf-fa-binoculars:before {
  content: "";
}
.sf-fa-plug:before {
  content: "";
}
.sf-fa-slideshare:before {
  content: "";
}
.sf-fa-twitch:before {
  content: "";
}
.sf-fa-yelp:before {
  content: "";
}
.sf-fa-newspaper-o:before {
  content: "";
}
.sf-fa-wifi:before {
  content: "";
}
.sf-fa-calculator:before {
  content: "";
}
.sf-fa-paypal:before {
  content: "";
}
.sf-fa-google-wallet:before {
  content: "";
}
.sf-fa-cc-visa:before {
  content: "";
}
.sf-fa-cc-mastercard:before {
  content: "";
}
.sf-fa-cc-discover:before {
  content: "";
}
.sf-fa-cc-amex:before {
  content: "";
}
.sf-fa-cc-paypal:before {
  content: "";
}
.sf-fa-cc-stripe:before {
  content: "";
}
.sf-fa-bell-slash:before {
  content: "";
}
.sf-fa-bell-slash-o:before {
  content: "";
}
.sf-fa-trash:before {
  content: "";
}
.sf-fa-copyright:before {
  content: "";
}
.sf-fa-at:before {
  content: "";
}
.sf-fa-eyedropper:before {
  content: "";
}
.sf-fa-paint-brush:before {
  content: "";
}
.sf-fa-birthday-cake:before {
  content: "";
}
.sf-fa-area-chart:before {
  content: "";
}
.sf-fa-pie-chart:before {
  content: "";
}
.sf-fa-line-chart:before {
  content: "";
}
.sf-fa-lastfm:before {
  content: "";
}
.sf-fa-lastfm-square:before {
  content: "";
}
.sf-fa-toggle-off:before {
  content: "";
}
.sf-fa-toggle-on:before {
  content: "";
}
.sf-fa-bicycle:before {
  content: "";
}
.sf-fa-bus:before {
  content: "";
}
.sf-fa-ioxhost:before {
  content: "";
}
.sf-fa-angellist:before {
  content: "";
}
.sf-fa-cc:before {
  content: "";
}
.sf-fa-shekel:before,
.sf-fa-sheqel:before,
.sf-fa-ils:before {
  content: "";
}
.sf-fa-meanpath:before {
  content: "";
}
.sf-fa-buysellads:before {
  content: "";
}
.sf-fa-connectdevelop:before {
  content: "";
}
.sf-fa-dashcube:before {
  content: "";
}
.sf-fa-forumbee:before {
  content: "";
}
.sf-fa-leanpub:before {
  content: "";
}
.sf-fa-sellsy:before {
  content: "";
}
.sf-fa-shirtsinbulk:before {
  content: "";
}
.sf-fa-simplybuilt:before {
  content: "";
}
.sf-fa-skyatlas:before {
  content: "";
}
.sf-fa-cart-plus:before {
  content: "";
}
.sf-fa-cart-arrow-down:before {
  content: "";
}
.sf-fa-diamond:before {
  content: "";
}
.sf-fa-ship:before {
  content: "";
}
.sf-fa-user-secret:before {
  content: "";
}
.sf-fa-motorcycle:before {
  content: "";
}
.sf-fa-street-view:before {
  content: "";
}
.sf-fa-heartbeat:before {
  content: "";
}
.sf-fa-venus:before {
  content: "";
}
.sf-fa-mars:before {
  content: "";
}
.sf-fa-mercury:before {
  content: "";
}
.sf-fa-intersex:before,
.sf-fa-transgender:before {
  content: "";
}
.sf-fa-transgender-alt:before {
  content: "";
}
.sf-fa-venus-double:before {
  content: "";
}
.sf-fa-mars-double:before {
  content: "";
}
.sf-fa-venus-mars:before {
  content: "";
}
.sf-fa-mars-stroke:before {
  content: "";
}
.sf-fa-mars-stroke-v:before {
  content: "";
}
.sf-fa-mars-stroke-h:before {
  content: "";
}
.sf-fa-neuter:before {
  content: "";
}
.sf-fa-genderless:before {
  content: "";
}
.sf-fa-facebook-official:before {
  content: "";
}
.sf-fa-pinterest-p:before {
  content: "";
}
.sf-fa-whatsapp:before {
  content: "";
}
.sf-fa-server:before {
  content: "";
}
.sf-fa-user-plus:before {
  content: "";
}
.sf-fa-user-times:before {
  content: "";
}
.sf-fa-hotel:before,
.sf-fa-bed:before {
  content: "";
}
.sf-fa-viacoin:before {
  content: "";
}
.sf-fa-train:before {
  content: "";
}
.sf-fa-subway:before {
  content: "";
}
.sf-fa-medium:before {
  content: "";
}
.sf-fa-yc:before,
.sf-fa-y-combinator:before {
  content: "";
}
.sf-fa-optin-monster:before {
  content: "";
}
.sf-fa-opencart:before {
  content: "";
}
.sf-fa-expeditedssl:before {
  content: "";
}
.sf-fa-battery-4:before,
.sf-fa-battery:before,
.sf-fa-battery-full:before {
  content: "";
}
.sf-fa-battery-3:before,
.sf-fa-battery-three-quarters:before {
  content: "";
}
.sf-fa-battery-2:before,
.sf-fa-battery-half:before {
  content: "";
}
.sf-fa-battery-1:before,
.sf-fa-battery-quarter:before {
  content: "";
}
.sf-fa-battery-0:before,
.sf-fa-battery-empty:before {
  content: "";
}
.sf-fa-mouse-pointer:before {
  content: "";
}
.sf-fa-i-cursor:before {
  content: "";
}
.sf-fa-object-group:before {
  content: "";
}
.sf-fa-object-ungroup:before {
  content: "";
}
.sf-fa-sticky-note:before {
  content: "";
}
.sf-fa-sticky-note-o:before {
  content: "";
}
.sf-fa-cc-jcb:before {
  content: "";
}
.sf-fa-cc-diners-club:before {
  content: "";
}
.sf-fa-clone:before {
  content: "";
}
.sf-fa-balance-scale:before {
  content: "";
}
.sf-fa-hourglass-o:before {
  content: "";
}
.sf-fa-hourglass-1:before,
.sf-fa-hourglass-start:before {
  content: "";
}
.sf-fa-hourglass-2:before,
.sf-fa-hourglass-half:before {
  content: "";
}
.sf-fa-hourglass-3:before,
.sf-fa-hourglass-end:before {
  content: "";
}
.sf-fa-hourglass:before {
  content: "";
}
.sf-fa-hand-grab-o:before,
.sf-fa-hand-rock-o:before {
  content: "";
}
.sf-fa-hand-stop-o:before,
.sf-fa-hand-paper-o:before {
  content: "";
}
.sf-fa-hand-scissors-o:before {
  content: "";
}
.sf-fa-hand-lizard-o:before {
  content: "";
}
.sf-fa-hand-spock-o:before {
  content: "";
}
.sf-fa-hand-pointer-o:before {
  content: "";
}
.sf-fa-hand-peace-o:before {
  content: "";
}
.sf-fa-trademark:before {
  content: "";
}
.sf-fa-registered:before {
  content: "";
}
.sf-fa-creative-commons:before {
  content: "";
}
.sf-fa-gg:before {
  content: "";
}
.sf-fa-gg-circle:before {
  content: "";
}
.sf-fa-tripadvisor:before {
  content: "";
}
.sf-fa-odnoklassniki:before {
  content: "";
}
.sf-fa-odnoklassniki-square:before {
  content: "";
}
.sf-fa-get-pocket:before {
  content: "";
}
.sf-fa-wikipedia-w:before {
  content: "";
}
.sf-fa-safari:before {
  content: "";
}
.sf-fa-chrome:before {
  content: "";
}
.sf-fa-firefox:before {
  content: "";
}
.sf-fa-opera:before {
  content: "";
}
.sf-fa-internet-explorer:before {
  content: "";
}
.sf-fa-tv:before,
.sf-fa-television:before {
  content: "";
}
.sf-fa-contao:before {
  content: "";
}
.sf-fa-500px:before {
  content: "";
}
.sf-fa-amazon:before {
  content: "";
}
.sf-fa-calendar-plus-o:before {
  content: "";
}
.sf-fa-calendar-minus-o:before {
  content: "";
}
.sf-fa-calendar-times-o:before {
  content: "";
}
.sf-fa-calendar-check-o:before {
  content: "";
}
.sf-fa-industry:before {
  content: "";
}
.sf-fa-map-pin:before {
  content: "";
}
.sf-fa-map-signs:before {
  content: "";
}
.sf-fa-map-o:before {
  content: "";
}
.sf-fa-map:before {
  content: "";
}
.sf-fa-commenting:before {
  content: "";
}
.sf-fa-commenting-o:before {
  content: "";
}
.sf-fa-houzz:before {
  content: "";
}
.sf-fa-vimeo:before {
  content: "";
}
.sf-fa-black-tie:before {
  content: "";
}
.sf-fa-fonticons:before {
  content: "";
}
.sf-fa-reddit-alien:before {
  content: "";
}
.sf-fa-edge:before {
  content: "";
}
.sf-fa-credit-card-alt:before {
  content: "";
}
.sf-fa-codiepie:before {
  content: "";
}
.sf-fa-modx:before {
  content: "";
}
.sf-fa-fort-awesome:before {
  content: "";
}
.sf-fa-usb:before {
  content: "";
}
.sf-fa-product-hunt:before {
  content: "";
}
.sf-fa-mixcloud:before {
  content: "";
}
.sf-fa-scribd:before {
  content: "";
}
.sf-fa-pause-circle:before {
  content: "";
}
.sf-fa-pause-circle-o:before {
  content: "";
}
.sf-fa-stop-circle:before {
  content: "";
}
.sf-fa-stop-circle-o:before {
  content: "";
}
.sf-fa-shopping-bag:before {
  content: "";
}
.sf-fa-shopping-basket:before {
  content: "";
}
.sf-fa-hashtag:before {
  content: "";
}
.sf-fa-bluetooth:before {
  content: "";
}
.sf-fa-bluetooth-b:before {
  content: "";
}
.sf-fa-percent:before {
  content: "";
}
.sf-fa-gitlab:before {
  content: "";
}
.sf-fa-wpbeginner:before {
  content: "";
}
.sf-fa-wpforms:before {
  content: "";
}
.sf-fa-envira:before {
  content: "";
}
.sf-fa-universal-access:before {
  content: "";
}
.sf-fa-wheelchair-alt:before {
  content: "";
}
.sf-fa-question-circle-o:before {
  content: "";
}
.sf-fa-blind:before {
  content: "";
}
.sf-fa-audio-description:before {
  content: "";
}
.sf-fa-volume-control-phone:before {
  content: "";
}
.sf-fa-braille:before {
  content: "";
}
.sf-fa-assistive-listening-systems:before {
  content: "";
}
.sf-fa-asl-interpreting:before,
.sf-fa-american-sign-language-interpreting:before {
  content: "";
}
.sf-fa-deafness:before,
.sf-fa-hard-of-hearing:before,
.sf-fa-deaf:before {
  content: "";
}
.sf-fa-glide:before {
  content: "";
}
.sf-fa-glide-g:before {
  content: "";
}
.sf-fa-signing:before,
.sf-fa-sign-language:before {
  content: "";
}
.sf-fa-low-vision:before {
  content: "";
}
.sf-fa-viadeo:before {
  content: "";
}
.sf-fa-viadeo-square:before {
  content: "";
}
.sf-fa-snapchat:before {
  content: "";
}
.sf-fa-snapchat-ghost:before {
  content: "";
}
.sf-fa-snapchat-square:before {
  content: "";
}
.sf-fa-pied-piper:before {
  content: "";
}
.sf-fa-first-order:before {
  content: "";
}
.sf-fa-yoast:before {
  content: "";
}
.sf-fa-themeisle:before {
  content: "";
}
.sf-fa-google-plus-circle:before,
.sf-fa-google-plus-official:before {
  content: "";
}
.sf-fa-fa:before,
.sf-fa-font-awesome:before {
  content: "";
}
.sf-fa-handshake-o:before {
  content: "";
}
.sf-fa-envelope-open:before {
  content: "";
}
.sf-fa-envelope-open-o:before {
  content: "";
}
.sf-fa-linode:before {
  content: "";
}
.sf-fa-address-book:before {
  content: "";
}
.sf-fa-address-book-o:before {
  content: "";
}
.sf-fa-vcard:before,
.sf-fa-address-card:before {
  content: "";
}
.sf-fa-vcard-o:before,
.sf-fa-address-card-o:before {
  content: "";
}
.sf-fa-user-circle:before {
  content: "";
}
.sf-fa-user-circle-o:before {
  content: "";
}
.sf-fa-user-o:before {
  content: "";
}
.sf-fa-id-badge:before {
  content: "";
}
.sf-fa-drivers-license:before,
.sf-fa-id-card:before {
  content: "";
}
.sf-fa-drivers-license-o:before,
.sf-fa-id-card-o:before {
  content: "";
}
.sf-fa-quora:before {
  content: "";
}
.sf-fa-free-code-camp:before {
  content: "";
}
.sf-fa-telegram:before {
  content: "";
}
.sf-fa-thermometer-4:before,
.sf-fa-thermometer:before,
.sf-fa-thermometer-full:before {
  content: "";
}
.sf-fa-thermometer-3:before,
.sf-fa-thermometer-three-quarters:before {
  content: "";
}
.sf-fa-thermometer-2:before,
.sf-fa-thermometer-half:before {
  content: "";
}
.sf-fa-thermometer-1:before,
.sf-fa-thermometer-quarter:before {
  content: "";
}
.sf-fa-thermometer-0:before,
.sf-fa-thermometer-empty:before {
  content: "";
}
.sf-fa-shower:before {
  content: "";
}
.sf-fa-bathtub:before,
.sf-fa-s15:before,
.sf-fa-bath:before {
  content: "";
}
.sf-fa-podcast:before {
  content: "";
}
.sf-fa-window-maximize:before {
  content: "";
}
.sf-fa-window-minimize:before {
  content: "";
}
.sf-fa-window-restore:before {
  content: "";
}
.sf-fa-times-rectangle:before,
.sf-fa-window-close:before {
  content: "";
}
.sf-fa-times-rectangle-o:before,
.sf-fa-window-close-o:before {
  content: "";
}
.sf-fa-bandcamp:before {
  content: "";
}
.sf-fa-grav:before {
  content: "";
}
.sf-fa-etsy:before {
  content: "";
}
.sf-fa-imdb:before {
  content: "";
}
.sf-fa-ravelry:before {
  content: "";
}
.sf-fa-eercast:before {
  content: "";
}
.sf-fa-microchip:before {
  content: "";
}
.sf-fa-snowflake-o:before {
  content: "";
}
.sf-fa-superpowers:before {
  content: "";
}
.sf-fa-wpexplorer:before {
  content: "";
}
.sf-fa-meetup:before {
  content: "";
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
sf-app.sf-app {
  --badge-white-border-color: #e4e4e4;
  --badge-color-bg-positive: #38ab63;
  --badge-color-bg-negative: #ff4848;
  --badge-add-variation-bg-color: #b3d3f4;
  --badge-add-variation-border-color: #b3d3f4;
  --badge-add-variation-hover: #99c4f0;
  --badge-add-variation-border-hover: #99c4f0;
  --badge-add-variation-color: #fff;
  --badge-edit-variation-color: #fff;
  --badge-edit-variation-bg-color: #006CD9;
  --badge-edit-variation-hover: #005bb7;
  --badge-add-color: #333;
  --badge-icon-color: #333;
  --badge-white-color: #333;
  --badge-negative-color: #fff;
  --badge-positive-color: #fff;
  --badge-color: #fff;
}
sf-app.sf-app {
  --button-border-color: #e4e4e4;
  --button-background-color: #fff;
  --button-color: #333;
  --button-interaction-border-color: #e4e4e4;
  --button-interaction-background-color: #e4e4e4;
  --button-interaction-color: #333;
  --button-disabled-border-color: #eee;
  --button-disabled-background-color: #fff;
  --button-disabled-color: #e4e4e4;
  --button-disabled-darker-color: #999;
  --action-button-border-color: #38ab63;
  --action-button-background-color: #38ab63;
  --action-button-color: #fff;
  --action-button-interaction-border-color: #309255;
  --action-button-interaction-background-color: #309255;
  --action-button-interaction-color: #fff;
  --action-button-disabled-border-color: #c4e6d1;
  --action-button-disabled-background-color: #c4e6d1;
  --action-button-disabled-color: #fff;
  --delete-button-border-color: #ff4848;
  --delete-button-background-color: #ff4848;
  --delete-button-color: #fff;
  --delete-button-interaction-border-color: #e62f2f;
  --delete-button-interaction-background-color: #e62f2f;
  --delete-button-interaction-color: #fff;
  --delete-button-disabled-border-color: #ffc8c8;
  --delete-button-disabled-background-color: #ffc8c8;
  --delete-button-disabled-color: #fff;
}
sf-app.sf-app {
  --checkbox-border: #e4e4e4;
  --checkbox-checked-border: #e4e4e4;
  --checkbox-border-hover: #DCECF5;
}
sf-app.sf-app {
  --radio-chip-border: #cbcbcb;
  --radio-chip-selected-bg-color: #DCECF5;
}
sf-app.sf-app {
  --color-success: #38ab63;
  --color-error: #ff4848;
}
sf-app.sf-app {
  --dropdown-border: #eee;
  --dropdown-item-counter-neutral: #ccc;
}
sf-app.sf-app {
  --editor-inline-min-height: 150px;
  --editor-inline-min-height-long: 300px;
  --editor-collapsed-height: 450px;
}
sf-app.sf-app {
  --default-icon-color: #777;
  --icon-lighter-color: #eee;
  --icon-light-color: #ccc;
  --icon-illustrative-font-color: #eee;
  --icon-positive-color: #38ab63;
}
sf-app.sf-app {
  --default-icon-size: 1.8rem;
  --icon-size-7xs: .5rem;
  --icon-size-5xs: 1rem;
  --icon-size-4xs: 1.1rem;
  --icon-size-3xs: 1.2rem;
  --icon-size-2xs: 1.3rem;
  --icon-size-xs: 1.4rem;
  --icon-size-s: 1.6rem;
  --icon-size-m: 1.8rem;
  --icon-size-l: 2rem;
  --icon-size-xl: 2.2rem;
  --icon-size-2xl: 2.8rem;
  --icon-size-3xl: 3.6rem;
  --icon-size-4xl: 4.8rem;
  --icon-size-5xl: 6rem;
  --icon-illustrative-size: 10rem;
  --icon-illustrative-font-size: 4.6rem;
  --icon-illustrative-size-sm: 6rem;
  --icon-zone-editor-size: 1.5rem;
  --icon-faq-size: 2.4rem;
  --icon-menu-font-size: 4.2rem;
}
sf-app.sf-app {
  --input-border: #e4e4e4;
  --input-border-hover: #e4e4e4;
  --input-char-counter-success-color: #38ab63;
  --input-char-counter-error-color: #ff4848;
  --input-placeholder-color: #ccc;
  --input-title-placeholder-color: #ccc;
}
sf-app.sf-app {
  --link-secondary-color: #777;
  --link-side-secondary-color: #ccc;
  --link-side-secondary-color-active: #333;
  --link-side-secondary-color-hover: #999;
  --link-color: #006CD9;
}
sf-app.sf-app {
  --image-empty-border: #e4e4e4;
  --not-translated-image-label-bg: transparent;
}
sf-app.sf-app {
  --select-arrow-color: #777;
}
sf-app.sf-app {
  --input-box-shadow-hover: #e4e4e4;
}
sf-app.sf-app {
  --status-icon-color-system: #ccc;
  --status-icon-color-published: #38ab63;
  --status-icon-color-restricted: #ff4848;
  --status-icon-color-unpublished: #999;
  --status-icon-color-scheduled: #006CD9;
  --status-icon-color-draft: #333;
  --status-bg-color-default: #ED8527;
}
sf-app.sf-app {
  --secondary-text-color: #999;
}
sf-app.sf-app {
  --font-size-h1-lg: 6.4rem;
  --font-size-h1: 4.2rem;
  --font-size-h2: 2rem;
  --font-size-h3: 2rem;
  --font-size-h4-lg: 1.4rem;
  --font-size-h4: 1.3rem;
  --font-size-h5: 1rem;
  --font-size-base: 1.3rem;
  --font-size-lg: 1.5rem;
  --color-h2: #777;
  --color-h5: #999;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
html:not(.sfPageEditorWrp) {
  font-size: 62.5%;
  min-height: 100%;
}
.-sf-integrated-app body:not(.sfPageEditor) {
  font-size: var(--font-size-base);
  background-color: #fff;
  overflow-x: auto;
  overflow-y: scroll;
}
sf-app.sf-app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: #333;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
::-webkit-scrollbar-track {
  background-color: #eee;
}
::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: #c2c2c2;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #b8b8b8;
}
::-webkit-scrollbar-thumb:active {
  background-color: #adadad;
}
.-scrollbar-small::-webkit-scrollbar {
  border-radius: 1px;
  width: 5px;
  height: 5px;
}
sf-app.sf-app {
  /***
  * Link:
  */
  /**
  * Default and secondary links:
  *
  *     @example
  *     <a href="#">Default link</a><br>
  *     <a class="-secondary">Secondary link</a>
  */
  /**
  * Navigation links:
  *
  *     @example
  *     <a class="-side" href="#">Navigation link</a><br>
  *     <a class="-side -active">Settings link</a>
  */
  /**
  * Section nav links:
  *
  *     @example
  *     <a class="-side-secondary" href="#">Categories and tags</a><br>
  *     <a class="-side-secondary -active">Search engine optimi...</a><br>
  *     <a class="-side-secondary" href="#">Social media</a><br>
  */
  /**
  * Basic links:
  *
  *     @example
  *     <span tabindex="0" class="sf-link -basic">Categories and tags</span><br>
  */
  /**
  /**
  * Toolbar links:
  *
  *     @example
  *     <div class="sf-top-toolbar" style="position: static;">
  *       <span tabindex="0" class="sf-link -top-toolbar">Categories and tags</span><br>
  *       <span tabindex="0" class="sf-link -top-toolbar -active">Categories and tags</span><br>
  *     </div>
  */
  /***
  * List:
  */
  /**
  * Default lists:
  *
  *     @example
  *     <ul>
  *       <li>Item 1</li>
  *       <li>Item 2</li>
  *     </ul>
  *     <br>
  *     <ol>
  *       <li>Item 1</li>
  *       <li>Item 2</li>
  *     </ol>
  */
  /**
  * List with list-style: none:
  *
  *     @example
  *     <ul class="-list-style-none">
  *       <li>Item 1</li>
  *       <li>Item 2</li>
  *     </ul>
  *     <br>
  *     <ol class="-list-style-none">
  *       <li>Item 1</li>
  *       <li>Item 2</li>
  *     </ol>
  */
  /***
   * Spacing utility classes:
   */
  /**
   * Margin left and right specials:
   * `-sf-ml-auto, -sf-mr-auto, -sf-ml-50, -sf-mr-50`
   *
   *     @example
   *     <div class="-sf-ml-auto">.-sf-ml-auto - auto</div>
   *     <div class="-sf-mr-auto">.-sf-mr-auto - auto</div>
   *     <div class="-sf-ml-50">.-sf-ml-50 - 50%</div>
   *     <div class="-sf-mr-50">.-sf-mr-50 - 50%</div>
   *
   */
  /**
   * Margin-top classes:
   * `-sf-mt-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
   *
   *     @example
   *     <div class="-sf-mt-zero">.-sf-mt-zero - 0</div>
   *     <div class="-sf-mt-8xs">.-sf-mt-8xs - 1px</div>
   *     <div class="-sf-mt-7xs">.-sf-mt-7xs - 2px</div>
   *     <div class="-sf-mt-6xs">.-sf-mt-6xs - 3px</div>
   *     <div class="-sf-mt-5xs">.-sf-mt-5xs - 4px</div>
   *     <div class="-sf-mt-4xs">.-sf-mt-4xs - 5px</div>
   *     <div class="-sf-mt-3xs">.-sf-mt-3xs - 10px</div>
   *     <div class="-sf-mt-2xs">.-sf-mt-2xs - 15px</div>
   *     <div class="-sf-mt-xs">.-sf-mt-xs - 20px</div>
   *     <div class="-sf-mt-s">.-sf-mt-s - 25px</div>
   *     <div class="-sf-mt-m">.-sf-mt-m - 30px</div>
   *     <div class="-sf-mt-l">.-sf-mt-l - 35px</div>
   *     <div class="-sf-mt-xl">.-sf-mt-xl - 40x</div>
   *     <div class="-sf-mt-2xl">.-sf-mt-2xl - 45px</div>
   *     <div class="-sf-mt-3xl">.-sf-mt-3xl  - 50px</div>
   *     <div class="-sf-mt-4xl">.-sf-mt-4xl - 55px</div>
   *     <div class="-sf-mt-5xl">.-sf-mt-5xl  - 60px</div>
   *     <div class="-sf-mt-6xl">.-sf-mt-6xl - 80px</div>
   *     <div class="-sf-mt-7xl">.-sf-mt-7xl  - 100px</div>
   *     <div class="-sf-mt-8xl">.-sf-mt-8xl  - 120px</div>
   *     <div class="-sf-mt-9xl">.-sf-mt-9xl  - 140px</div>
   *     <div class="-sf-mt-10xl">.-sf-mt-10xl  - 160px</div>
   *     <div class="-sf-mt-11xl">.-sf-mt-11xl  - 180px</div>
   *     <div class="-sf-mt-12xl">.-sf-mt-12xl  - 200px</div>
   *
   */
  /**
   * Margin-top negative classes:
   * `-sf-mt--{6xl, 5xl, 4xl, 3xl, 2xl, xl, l, m, s, xs, 2xs, 3xs, 4xs}`
   *
   *     @example
   *     <div class="--sf-mt--6xl">.-sf-mt--6xl - -80px</div>
   *     <div class="--sf-mt--5xl">.-sf-mt--5xl  - -60px</div>
   *     <div class="--sf-mt--4xl">.-sf-mt--4xl - -55px</div>
   *     <div class="--sf-mt--3xl">.-sf-mt--3xl  - -50px</div>
   *     <div class="--sf-mt--2xl">.-sf-mt--2xl - -45px</div>
   *     <div class="--sf-mt--xl">.-sf-mt--xl - -40x</div>
   *     <div class="--sf-mt--l">.-sf-mt--l - -35px</div>
   *     <div class="--sf-mt--m">.-sf-mt--m - -30px</div>
   *     <div class="--sf-mt--s">.-sf-mt--s - -25px</div>
   *     <div class="--sf-mt--xs">.-sf-mt--xs - -20px</div>
   *     <div class="--sf-mt--2xs">.-sf-mt--2xs - -15px</div>
   *     <div class="--sf-mt--3xs">.-sf-mt--3xs - -10px</div>
   *     <div class="--sf-mt--4xs">.-sf-mt--4xs - -5px</div>
   *
   */
  /**
   * Margin-bottom classes:
   * `-sf-mb-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
   *
   *     @example
   *     <div class="-sf-mb-zero">.-sf-mb-zero - 0</div>
   *     <div class="-sf-mb-8xs">.-sf-mb-8xs - 1px</div>
   *     <div class="-sf-mb-7xs">.-sf-mb-7xs - 2px</div>
   *     <div class="-sf-mb-6xs">.-sf-mb-6xs - 3px</div>
   *     <div class="-sf-mb-5xs">.-sf-mb-5xs - 4px</div>
   *     <div class="-sf-mb-4xs">.-sf-mb-4xs - 5px</div>
   *     <div class="-sf-mb-3xs">.-sf-mb-3xs - 10px</div>
   *     <div class="-sf-mb-2xs">.-sf-mb-2xs - 15px</div>
   *     <div class="-sf-mb-xs">.-sf-mb-xs - 20px</div>
   *     <div class="-sf-mb-s">.-sf-mb-s - 25px</div>
   *     <div class="-sf-mb-m">.-sf-mb-m - 30px</div>
   *     <div class="-sf-mb-l">.-sf-mb-l - 35px</div>
   *     <div class="-sf-mb-xl">.-sf-mb-xl - 40x</div>
   *     <div class="-sf-mb-2xl">.-sf-mb-2xl - 45px</div>
   *     <div class="-sf-mb-3xl">.-sf-mb-3xl  - 50px</div>
   *     <div class="-sf-mb-4xl">.-sf-mb-4xl - 55px</div>
   *     <div class="-sf-mb-5xl">.-sf-mb-5xl  - 60px</div>
   *     <div class="-sf-mb-6xl">.-sf-mb-6xl - 80px</div>
   *     <div class="-sf-mb-7xl">.-sf-mb-7xl  - 100px</div>
   *     <div class="-sf-mb-8xl">.-sf-mb-8xl  - 120px</div>
   *
   */
  /**
   * Margin-bottom negative classes:
   * `-sf-mb--{6xl, 5xl, 4xl, 3xl, 2xl, xl, l, m, s, xs, 2xs, 3xs, 4xs}`
   *
   *     @example
   *     <div class="--sf-mb--6xl">.-sf-mb--6xl - -80px</div>
   *     <div class="--sf-mb--5xl">.-sf-mb--5xl  - -60px</div>
   *     <div class="--sf-mb--4xl">.-sf-mb--4xl - -55px</div>
   *     <div class="--sf-mb--3xl">.-sf-mb--3xl  - -50px</div>
   *     <div class="--sf-mb--2xl">.-sf-mb--2xl - -45px</div>
   *     <div class="--sf-mb--xl">.-sf-mb--xl - -40x</div>
   *     <div class="--sf-mb--l">.-sf-mb--l - -35px</div>
   *     <div class="--sf-mb--m">.-sf-mb--m - -30px</div>
   *     <div class="--sf-mb--s">.-sf-mb--s - -25px</div>
   *     <div class="--sf-mb--xs">.-sf-mb--xs - -20px</div>
   *     <div class="--sf-mb--2xs">.-sf-mb--2xs - -15px</div>
   *     <div class="--sf-mb--3xs">.-sf-mb--3xs - -10px</div>
   *     <div class="--sf-mb--4xs">.-sf-mb--4xs - -5px</div>
   *
   */
  /**
   * Margin-left classes:
   * `-sf-ml-{auto,zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
   *
   *     @example
   *     <div class="-sf-ml-auto">.-sf-ml-auto - auto</div>
   *     <div class="-sf-ml-zero">.-sf-ml-zero - 0</div>
   *     <div class="-sf-ml-8xs">.-sf-ml-8xs - 1px</div>
   *     <div class="-sf-ml-7xs">.-sf-ml-7xs - 2px</div>
   *     <div class="-sf-ml-6xs">.-sf-ml-6xs - 3px</div>
   *     <div class="-sf-ml-5xs">.-sf-ml-5xs - 4px</div>
   *     <div class="-sf-ml-4xs">.-sf-ml-4xs - 5px</div>
   *     <div class="-sf-ml-3xs">.-sf-ml-3xs - 10px</div>
   *     <div class="-sf-ml-2xs">.-sf-ml-2xs - 15px</div>
   *     <div class="-sf-ml-xs">.-sf-ml-xs - 20px</div>
   *     <div class="-sf-ml-s">.-sf-ml-s - 25px</div>
   *     <div class="-sf-ml-m">.-sf-ml-m - 30px</div>
   *     <div class="-sf-ml-l">.-sf-ml-l - 35px</div>
   *     <div class="-sf-ml-xl">.-sf-ml-xl - 40x</div>
   *     <div class="-sf-ml-2xl">.-sf-ml-2xl - 45px</div>
   *     <div class="-sf-ml-3xl">.-sf-ml-3xl  - 50px</div>
   *     <div class="-sf-ml-4xl">.-sf-ml-4xl - 55px</div>
   *     <div class="-sf-ml-5xl">.-sf-ml-5xl  - 60px</div>
   *     <div class="-sf-ml-6xl">.-sf-ml-6xl - 80px</div>
   *     <div class="-sf-ml-7xl">.-sf-ml-7xl  - 100px</div>
   *     <div class="-sf-ml-8xl">.-sf-ml-8xl  - 120px</div>
   *
   */
  /**
   * Margin-left negative classes:
   * `-sf-ml--{6xl, 5xl, 4xl, 3xl, 2xl, xl, l, m, s, xs, 2xs, 3xs, 4xs}`
   *
   *     @example
   *     <div class="--sf-ml--6xl">.-sf-ml--6xl - -80px</div>
   *     <div class="--sf-ml--5xl">.-sf-ml--5xl  - -60px</div>
   *     <div class="--sf-ml--4xl">.-sf-ml--4xl - -55px</div>
   *     <div class="--sf-ml--3xl">.-sf-ml--3xl  - -50px</div>
   *     <div class="--sf-ml--2xl">.-sf-ml--2xl - -45px</div>
   *     <div class="--sf-ml--xl">.-sf-ml--xl - -40x</div>
   *     <div class="--sf-ml--l">.-sf-ml--l - -35px</div>
   *     <div class="--sf-ml--m">.-sf-ml--m - -30px</div>
   *     <div class="--sf-ml--s">.-sf-ml--s - -25px</div>
   *     <div class="--sf-ml--xs">.-sf-ml--xs - -20px</div>
   *     <div class="--sf-ml--2xs">.-sf-ml--2xs - -15px</div>
   *     <div class="--sf-ml--3xs">.-sf-ml--3xs - -10px</div>
   *     <div class="--sf-ml--4xs">.-sf-ml--4xs - -5px</div>
   *
   */
  /**
   * Margin-right classes:
   * `-sf-mr-{auto,zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
   *
   *     @example
   *     <div class="-sf-mr-auto">.-sf-mr-auto - auto</div>
   *     <div class="-sf-mr-zero">.-sf-mr-zero - 0</div>
   *     <div class="-sf-mr-8xs">.-sf-mr-8xs - 1px</div>
   *     <div class="-sf-mr-7xs">.-sf-mr-7xs - 2px</div>
   *     <div class="-sf-mr-6xs">.-sf-mr-6xs - 3px</div>
   *     <div class="-sf-mr-5xs">.-sf-mr-5xs - 4px</div>
   *     <div class="-sf-mr-4xs">.-sf-mr-4xs - 5px</div>
   *     <div class="-sf-mr-3xs">.-sf-mr-3xs - 10px</div>
   *     <div class="-sf-mr-2xs">.-sf-mr-2xs - 15px</div>
   *     <div class="-sf-mr-xs">.-sf-mr-xs - 20px</div>
   *     <div class="-sf-mr-s">.-sf-mr-s - 25px</div>
   *     <div class="-sf-mr-m">.-sf-mr-m - 30px</div>
   *     <div class="-sf-mr-l">.-sf-mr-l - 35px</div>
   *     <div class="-sf-mr-xl">.-sf-mr-xl - 40x</div>
   *     <div class="-sf-mr-2xl">.-sf-mr-2xl - 45px</div>
   *     <div class="-sf-mr-3xl">.-sf-mr-3xl  - 50px</div>
   *     <div class="-sf-mr-4xl">.-sf-mr-4xl - 55px</div>
   *     <div class="-sf-mr-5xl">.-sf-mr-5xl  - 60px</div>
   *     <div class="-sf-mr-6xl">.-sf-mr-6xl - 80px</div>
   *     <div class="-sf-mr-7xl">.-sf-mr-7xl  - 100px</div>
   *     <div class="-sf-mr-8xl">.-sf-mr-8xl  - 120px</div>
   *
   */
  /**
   * Margin-right negative classes:
   * `-sf-mr--{6xl, 5xl, 4xl, 3xl, 2xl, xl, l, m, s, xs, 2xs, 3xs, 4xs}`
   *
   *     @example
   *     <div class="--sf-mr--6xl">.-sf-mr--6xl - -80px</div>
   *     <div class="--sf-mr--5xl">.-sf-mr--5xl  - -60px</div>
   *     <div class="--sf-mr--4xl">.-sf-mr--4xl - -55px</div>
   *     <div class="--sf-mr--3xl">.-sf-mr--3xl  - -50px</div>
   *     <div class="--sf-mr--2xl">.-sf-mr--2xl - -45px</div>
   *     <div class="--sf-mr--xl">.-sf-mr--xl - -40x</div>
   *     <div class="--sf-mr--l">.-sf-mr--l - -35px</div>
   *     <div class="--sf-mr--m">.-sf-mr--m - -30px</div>
   *     <div class="--sf-mr--s">.-sf-mr--s - -25px</div>
   *     <div class="--sf-mr--xs">.-sf-mr--xs - -20px</div>
   *     <div class="--sf-mr--2xs">.-sf-mr--2xs - -15px</div>
   *     <div class="--sf-mr--3xs">.-sf-mr--3xs - -10px</div>
   *     <div class="--sf-mr--4xs">.-sf-mr--4xs - -5px</div>
   *
   */
  /**
  * Margin classes:
  * `-sf-m-{auto,zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
  *
  *     @example
  *     <div class="-sf-m-auto">.-sf-m-auto - auto</div>
  *     <div class="-sf-m-zero">.-sf-m-zero - 0</div>
  *     <div class="-sf-m-8xs">.-sf-m-8xs - 1px</div>
  *     <div class="-sf-m-7xs">.-sf-m-7xs - 2px</div>
  *     <div class="-sf-m-6xs">.-sf-m-6xs - 3px</div>
  *     <div class="-sf-m-5xs">.-sf-m-5xs - 4px</div>
  *     <div class="-sf-m-4xs">.-sf-m-4xs - 5px</div>
  *     <div class="-sf-m-3xs">.-sf-m-3xs - 10px</div>
  *     <div class="-sf-m-2xs">.-sf-m-2xs - 15px</div>
  *     <div class="-sf-m-xs">.-sf-m-xs - 20px</div>
  *     <div class="-sf-m-s">.-sf-m-s - 25px</div>
  *     <div class="-sf-m-m">.-sf-m-m - 30px</div>
  *     <div class="-sf-m-l">.-sf-m-l - 35px</div>
  *     <div class="-sf-m-xl">.-sf-m-xl - 40x</div>
  *     <div class="-sf-m-2xl">.-sf-m-2xl - 45px</div>
  *     <div class="-sf-m-3xl">.-sf-m-3xl  - 50px</div>
  *     <div class="-sf-m-4xl">.-sf-m-4xl - 55px</div>
  *     <div class="-sf-m-5xl">.-sf-m-5xl  - 60px</div>
  *     <div class="-sf-m-6xl">.-sf-m-6xl - 80px</div>
  *     <div class="-sf-m-7xl">.-sf-m-7xl  - 100px</div>
  *     <div class="-sf-m-8xl">.-sf-m-8xl  - 120px</div>
  *
  */
  /**
   * Padding-top classes:
   * `-sf-pt-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
   *
   *     @example
   *     <div class="-sf-pt-zero">.-sf-pt-zero - 0</div>
   *     <div class="-sf-m-8xs">.-sf-pt-8xs - 1px</div>
   *     <div class="-sf-m-7xs">.-sf-pt-7xs - 2px</div>
   *     <div class="-sf-m-6xs">.-sf-pt-6xs - 3px</div>
   *     <div class="-sf-m-5xs">.-sf-pt-5xs - 4px</div>
   *     <div class="-sf-pt-4xs">.-sf-pt-4xs - 5px</div>
   *     <div class="-sf-pt-3xs">.-sf-pt-3xs - 10px</div>
   *     <div class="-sf-pt-2xs">.-sf-pt-2xs - 15px</div>
   *     <div class="-sf-pt-xs">.-sf-pt-xs - 20px</div>
   *     <div class="-sf-pt-s">.-sf-pt-s - 25px</div>
   *     <div class="-sf-pt-m">.-sf-pt-m - 30px</div>
   *     <div class="-sf-pt-l">.-sf-pt-l - 35px</div>
   *     <div class="-sf-pt-xl">.-sf-pt-xl - 40x</div>
   *     <div class="-sf-pt-2xl">.-sf-pt-2xl - 45px</div>
   *     <div class="-sf-pt-3xl">.-sf-pt-3xl  - 50px</div>
   *     <div class="-sf-pt-4xl">.-sf-pt-4xl - 55px</div>
   *     <div class="-sf-pt-5xl">.-sf-pt-5xl  - 60px</div>
   *     <div class="-sf-pt-6xl">.-sf-pt-6xl - 80px</div>
   *     <div class="-sf-pt-7xl">.-sf-pt-7xl  - 100px</div>
   *     <div class="-sf-pt-8xl">.-sf-pt-8xl  - 120px</div>
   *
   */
  /**
   * Padding-bottom classes:
   * `-sf-pb-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
   *
   *     @example
   *     <div class="-sf-pb-zero">.-sf-pb-zero - 0</div>
   *     <div class="-sf-m-8xs">.-sf-pb-8xs - 1px</div>
   *     <div class="-sf-m-7xs">.-sf-pb-7xs - 2px</div>
   *     <div class="-sf-m-6xs">.-sf-pb-6xs - 3px</div>
   *     <div class="-sf-m-5xs">.-sf-pb-5xs - 4px</div>
   *     <div class="-sf-pb-4xs">.-sf-pb-4xs - 5px</div>
   *     <div class="-sf-pb-3xs">.-sf-pb-3xs - 10px</div>
   *     <div class="-sf-pb-2xs">.-sf-pb-2xs - 15px</div>
   *     <div class="-sf-pb-xs">.-sf-pb-xs - 20px</div>
   *     <div class="-sf-pb-s">.-sf-pb-s - 25px</div>
   *     <div class="-sf-pb-m">.-sf-pb-m - 30px</div>
   *     <div class="-sf-pb-l">.-sf-pb-l - 35px</div>
   *     <div class="-sf-pb-xl">.-sf-pb-xl - 40x</div>
   *     <div class="-sf-pb-2xl">.-sf-pb-2xl - 45px</div>
   *     <div class="-sf-pb-3xl">.-sf-pb-3xl  - 50px</div>
   *     <div class="-sf-pb-4xl">.-sf-pb-4xl - 55px</div>
   *     <div class="-sf-pb-5xl">.-sf-pb-5xl  - 60px</div>
   *     <div class="-sf-pb-6xl">.-sf-pb-6xl - 80px</div>
   *     <div class="-sf-pb-7xl">.-sf-pb-7xl  - 100px</div>
   *     <div class="-sf-pb-8xl">.-sf-pb-8xl  - 120px</div>
   *
   */
  /**
   * Padding-left classes:
   * `-sf-pl-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
   *
   *     @example
   *     <div class="-sf-pl-zero">.-sf-pl-zero - 0</div>
   *     <div class="-sf-m-8xs">.-sf-pl-8xs - 1px</div>
   *     <div class="-sf-m-7xs">.-sf-pl-7xs - 2px</div>
   *     <div class="-sf-m-6xs">.-sf-pl-6xs - 3px</div>
   *     <div class="-sf-m-5xs">.-sf-pl-5xs - 4px</div>
   *     <div class="-sf-pl-4xs">.-sf-pl-4xs - 5px</div>
   *     <div class="-sf-pl-3xs">.-sf-pl-3xs - 10px</div>
   *     <div class="-sf-pl-2xs">.-sf-pl-2xs - 15px</div>
   *     <div class="-sf-pl-xs">.-sf-pl-xs - 20px</div>
   *     <div class="-sf-pl-s">.-sf-pl-s - 25px</div>
   *     <div class="-sf-pl-m">.-sf-pl-m - 30px</div>
   *     <div class="-sf-pl-l">.-sf-pl-l - 35px</div>
   *     <div class="-sf-pl-xl">.-sf-pl-xl - 40x</div>
   *     <div class="-sf-pl-2xl">.-sf-pl-2xl - 45px</div>
   *     <div class="-sf-pl-3xl">.-sf-pl-3xl  - 50px</div>
   *     <div class="-sf-pl-4xl">.-sf-pl-4xl - 55px</div>
   *     <div class="-sf-pl-5xl">.-sf-pl-5xl  - 60px</div>
   *     <div class="-sf-pl-6xl">.-sf-pl-6xl - 80px</div>
   *     <div class="-sf-pl-7xl">.-sf-pl-7xl  - 100px</div>
   *     <div class="-sf-pl-8xl">.-sf-pl-8xl  - 120px</div>
   *
   */
  /**
   * Padding-right classes:
   * `-sf-pr-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
   *
   *     @example
   *     <div class="-sf-pr-zero">.-sf-pr-zero - 0</div>
   *     <div class="-sf-m-8xs">.-sf-pr-8xs - 1px</div>
   *     <div class="-sf-m-7xs">.-sf-pr-7xs - 2px</div>
   *     <div class="-sf-m-6xs">.-sf-pr-6xs - 3px</div>
   *     <div class="-sf-m-5xs">.-sf-pr-5xs - 4px</div>
   *     <div class="-sf-pr-4xs">.-sf-pr-4xs - 5px</div>
   *     <div class="-sf-pr-3xs">.-sf-pr-3xs - 10px</div>
   *     <div class="-sf-pr-2xs">.-sf-pr-2xs - 15px</div>
   *     <div class="-sf-pr-xs">.-sf-pr-xs - 20px</div>
   *     <div class="-sf-pr-s">.-sf-pr-s - 25px</div>
   *     <div class="-sf-pr-m">.-sf-pr-m - 30px</div>
   *     <div class="-sf-pr-l">.-sf-pr-l - 35px</div>
   *     <div class="-sf-pr-xl">.-sf-pr-xl - 40x</div>
   *     <div class="-sf-pr-2xl">.-sf-pr-2xl - 45px</div>
   *     <div class="-sf-pr-3xl">.-sf-pr-3xl  - 50px</div>
   *     <div class="-sf-pr-4xl">.-sf-pr-4xl - 55px</div>
   *     <div class="-sf-pr-5xl">.-sf-pr-5xl  - 60px</div>
   *     <div class="-sf-pr-6xl">.-sf-pr-6xl - 80px</div>
   *     <div class="-sf-pr-7xl">.-sf-pr-7xl  - 100px</div>
   *     <div class="-sf-pr-8xl">.-sf-pr-8xl  - 120px</div>
   *
   */
  /* Padding classes:
  * `-sf-p-{4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}`
  *
  *     @example
  *     <div class="-sf-p-4xs">.-sf-p-4xs - 5px</div>
  *     <div class="-sf-p-3xs">.-sf-p-3xs - 10px</div>
  *     <div class="-sf-p-2xs">.-sf-p-2xs - 15px</div>
  *     <div class="-sf-p-xs">.-sf-p-xs - 20px</div>
  *     <div class="-sf-p-s">.-sf-p-s - 25px</div>
  *     <div class="-sf-p-m">.-sf-p-m - 30px</div>
  *     <div class="-sf-p-l">.-sf-p-l - 35px</div>
  *     <div class="-sf-p-xl">.-sf-p-xl - 40x</div>
  *     <div class="-sf-p-2xl">.-sf-p-2xl - 45px</div>
  *     <div class="-sf-p-3xl">.-sf-p-3xl  - 50px</div>
  *     <div class="-sf-p-4xl">.-sf-p-4xl - 55px</div>
  *     <div class="-sf-p-5xl">.-sf-p-5xl  - 60px</div>
  *     <div class="-sf-p-6xl">.-sf-p-6xl - 80px</div>
  *     <div class="-sf-p-7xl">.-sf-p-7xl  - 100px</div>
  *     <div class="-sf-p-8xl">.-sf-p-8xl  - 120px</div>
  *
  */
  /***
   * Border utility classes:
   */
  /**
   * Border:
   * `-sf-border-top, -sf-border-bottom, -sf-border-lighter, -sf-border-lightest`
   *
   *     @example
   *     <div class="-sf-border-top">.-sf-border-top</div>
   *     <div class="-sf-border-bottom">.-sf-border-bottom</div>
   *     <div class="-sf-border-left">.-sf-border-left</div>
   *     <div class="-sf-border-right">.-sf-border-right</div>
   *     <div class="-sf-border-bottom -sf-border-lighter">.-sf-border-lighter</div>
   *     <div class="-sf-border-bottom -sf-border-lightest">.-sf-border-lightest</div>
   *
   */
  /***
   * Center utility classes:
   */
  /**
   * Centered box:
   * `-sf-centered-box` Sets box's right and left margins to auto to center the box horizontally if it has width.
   *
   *     @example
   *     <div style="width: 200px" class="-sf-centered-box">Centered box with fixed width</div>
   */
  /**
   * Centered horizontaly and verticaly box:
   * `-sf-centered-vertical-box` Sets box's right and left margins to auto to center the box horizontally if it has width and set it's display to flex and min-height to 100% of the view height.
   *
   *     @example
   *     <div class="-sf-centered-vertical-box">Centered box with fixed width</div>
   */
  /**
   * Expands element to 100% height of parent:
   * `-sf-full-height`
   *
   *     @example
   *     <div style="height: 300px; width: 300px; border:1px solid #eee">
   *      <div class="-sf-full-height" style="background-color: #fefefe;">Grey child is as tall as parent</div>
   *     </div>
   */
  /***
   * Cursor/Disabled utility classes:
   */
  /**
   * Disabled link:
   * `-sf-disabled`
   *
   *     @example
   *     <a class="-sf-disabled" href="https://www.progress.com/">Disabled link</a>
   */
  /**
   * Element which looks clickable:
   * `-sf-clickable`
   *
   *     @example
   *     <span class="-sf-clickable">Clickable element</span>
   */
  /**
   * Element with cursor text:
   * `-sf-cursor-text`
   *
   *     @example
   *     <span class="-sf-cursor-text">Cursor text</span>
   */
  /**
   * Element that cannot be selected:
   * `-sf-user-select-none`
   *
   *     @example
   *     <span class="-sf-user-select-none">User selection none</span>
   */
  /***
   * Text utility classes:
   */
  /**
   * Hint, dimmed, success, failure:
   *`.-sf-txt-hint, .-sf-txt-dimmed, .-sf-txt-success, .-sf-txt-failure`
   *
   *     @example
   *     <div class="-sf-txt-hint">Hint: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
   *     <div class="-sf-txt-dimmed">Dimmed: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
   *     <div class="-sf-txt-success">Success: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
   *     <div class="-sf-txt-failure">Failure: Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
   */
  /**
   * Text align:
   *`.-sf-txt-align-left, -sf-txt-align-right, -sf-txt-align-center`
   *
   *     @example
   *     <div class="-sf-txt-align-left">Pellentesque luctus, erat sed elementum aliquam.</div>
   *     <div class="-sf-txt-align-right">Pellentesque luctus, erat sed elementum aliquam.</div>
   *     <div class="-sf-txt-align-center">Pellentesque luctus, erat sed elementum aliquam.</div>
   */
  /**
   * Vertical align middle:
   *`.-sf-txt-vertical-align-middle`
   *
   *     @example
   *     <div class="-sf-txt-vertical-align-middle">Pellentesque luctus, erat sed elementum aliquam.</div>
   */
  /**
   * Text transform:
   *`.-sf-txt-nowrap, -sf-txt-lower-case, -sf-txt-upper-case`
   *
   *     @example
   *     <div class="-sf-txt-nowrap">Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
   *     <div class="-sf-txt-lower-case">Pellentesque luctus, erat sed elementum aliquam.</div>
   *     <div class="-sf-txt-upper-case">Pellentesque luctus, erat sed elementum aliquam.</div>
   */
  /**
   * Overflow hidden:
   * `-sf-overflow-hidden`
   *
   *     @example
   *     <p class="-sf-overflow-hidden" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>
   */
  /**
   * Overflow auto:
   * `-sf-overflow-auto`
   *
   *     @example
   *     <p class="-sf-overflow-auto" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>
   */
  /**
   * Overflow ellipsis:
   * `-sf-overflow-ellipsis`
   *
   *     @example
   *     <p class="-sf-overflow-ellipsis" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>
   */
  /**
   * Overflow ellipsis on the second line:
   * `-sf-overflow-multiline-ellipsis`
   *
   *     @example
   *     <p class="-sf-overflow-multiline-ellipsis" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>
   */
  /**
   * Word break:
   * `-sf-word-break-all`
   *
   *     @example
   *     <p class="-sf-word-break-all" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>
   */
  /**
   * Word break:
   * `-sf-word-break-word`
   *
   *     @example
   *     <p class="-sf-word-break-word" style="width: 500px; ">Loremipsumdolorsitamet,consecteturadipiscingelit.Seddapibustemporjustononullamcorper.Phasellusullamcorpernislorci,idfringillaexegestasin.Pellentesquetortorurna,feugiatutnunclaoreet,imperdietsollicitudinneque.Duisbibendumnonauguequisullamcorper.Quisqueeunibhegetestdignissimpharetra.Sedeupulvinarelit,quismalesuadaleo.Duisvitaevariusligula.Sedsitametpulvinardiam.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namutiaculisdui.Aeneanefficitur,tortorveldictumauctor,nibhtortorcondimentumnunc,noncursusnisinuncsedest.Utfringillamaurisacnislbibendum,velsagittisquamfacilisis.Vestibulumsagittisnonligulanonsollicitudin.</p>
   */
  /**
   * Text direction:
   * `-sf-direction-rtl, -sf-direction-ltr`
   *
   *     @example
   *     <p class="-sf-direction-rtl">Loremipsumdolorsitamet, consecteturadipiscingelit. Seddapibustemporjustononullamcorper. Phasellusullamcorpernislorci, idfringillaexegestasin. Pellentesquetortorurna, feugiatutnunclaoreet, imperdietsollicitudinneque.</p>
   *     <p class="-sf-direction-ltr">Loremipsumdolorsitamet, consecteturadipiscingelit. Seddapibustemporjustononullamcorper. Phasellusullamcorpernislorci, idfringillaexegestasin. Pellentesquetortorurna, feugiatutnunclaoreet, imperdietsollicitudinneque.</p>
   */
  /**
   * Large text:
   *`.-sf-txt-large`
   *
   *     @example
   *     <div class="-sf-txt-large">Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
   */
  /**
   * Small text:
   *`.-sf-txt-small`
   *
   *     @example
   *     <div class="-sf-txt-small">Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
   */
  /**
   * Base text:
   *`.-sf-txt-base`
   *
   *     @example
   *     <div class="-sf-txt-base">Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi.</div>
   */
  /***
   * Visibility utility classes:
   */
  /**
   * Hide classes:
   * `-sf-hidden, -sf-invisible, -sf-transparent`
   *
   *     @example
   *     <div class="-sf-hidden">.-sf-hidden</div>
   *     <div class="-sf-invisible">.-sf-invisible</div>
   *     <div class="-sf-transparent">.-sf-transparent</div>
   */
  /**
   * Visually hidden but accessible to screen readers:
   * `-sf-visually-hidden`
   *
   *     @example
   *     <div class="-sf-visually-hidden">This text is visually hidden but accessible to screen readers</div>
   */
  /**
   * Visually hidden but accessible to screen readers:
   * `-sf-visually-hidden`
   *
   *     @example
   *     <div style="width: 200px; height: 300px"><img src="https://d117h1jjiq768j.cloudfront.net/images/default-source/company-section/yogesh_gupta-11-16-16.png"  alt="" class="-sf-img-fit-cover"></div>
   */
  /**
   * Positions:
   * `-sf-absolute, -sf-relative`
   *
   *     @example
   *     <div class="-sf-absolute">Absolute position</div>
   *     <div class="-sf-relative">Relative position</div>
   *     <div class="-sf-static">Static position</div>
   */
  /***
   * Width utility classes:
   */
  /**
   * Width classes:
   * `.-sf-width-{1,2,...,12}, .-sf-width-form-{small, medium, large}`
   *
   *     @example
   *     <div class="-sf-width-1" style="background-color: #83e3ff;">.-sf-width-1 ~8%</div>
   *     <div class="-sf-width-2" style="background-color: #83e3ff;">.-sf-width-2 ~16%</div>
   *     <div class="-sf-width-3" style="background-color: #83e3ff;">.-sf-width-3 25%</div>
   *     <div class="-sf-width-4" style="background-color: #83e3ff;">.-sf-width-4 ~33%</div>
   *     <div class="-sf-width-5" style="background-color: #83e3ff;">.-sf-width-5 ~41%</div>
   *     <div class="-sf-width-6" style="background-color: #83e3ff;">.-sf-width-6 50%</div>
   *     <div class="-sf-width-7" style="background-color: #83e3ff;">.-sf-width-7 ~58%</div>
   *     <div class="-sf-width-8" style="background-color: #83e3ff;">.-sf-width-8 ~66%</div>
   *     <div class="-sf-width-9" style="background-color: #83e3ff;">.-sf-width-9 75%</div>
   *     <div class="-sf-width-10" style="background-color: #83e3ff;">.-sf-width-10 ~83%</div>
   *     <div class="-sf-width-11" style="background-color: #83e3ff;">.-sf-width-11 ~91%</div>
   *     <div class="-sf-width-12" style="background-color: #83e3ff;">.-sf-width-12 100%</div>
   *     <div class="-sf-width-12" style="background-color: #83e3ff;">.-sf-width-form-small 410px}</div>
   *     <div class="-sf-width-12" style="background-color: #83e3ff;">.-sf-width-form-medium 630px}</div>
   *     <div class="-sf-width-12" style="background-color: #83e3ff;">.-sf-width-form-large 1000px}</div>
   */
  /***
  * Typography:
  */
  /**
   * Headings:
   *
   *     @example
   *     <h1 class="-sf-h-large">H1 List Page Title</h1>
   *     <h1>H1 Detail Page Title</h1>
   *     <h2>H2 Group Title</h2>
   *     <h3>H3 Item Title</h3>
   *     <h4 class="-sf-h-large">H4 Form Label</h4>
   *     <h4>H4 Regular Label</h4>
   *     <h5>H5 Small Labels</h5>
   */
  /**
   * Heading CSS Classes:
   *
   *     @example
   *     <div class="h1 -sf-h-large">H1 List Page Title</div>
   *     <div class="h1">H1 Detail Page Title</div>
   *     <div class="h2">H2 Group Title</div>
   *     <div class="h3">H3 Item Title</div>
   *     <div class="h4 -sf-h-large">H4 Form Label</div>
   *     <div class="h4">H4 Regular Label</div>
   *     <div class="h5">H5 Small Labels</div>
   */
  /**
  * Paragraph:
  *
  *     @example
  *     <p><a href="#">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <a class="-secondary">Pellentesque luctus</a>, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat. Nulla iaculis id sem eget ullamcorper. In ac euismod nunc. Fusce at tortor viverra, maximus quam quis, interdum velit. Mauris varius risus ut ante porttitor tempor.</p>
  */
  /***
   * Breadcrumb:
   */
  /**
   * Default:
   * `.sf-breadcrumb`
   *
   *     @example
   *     <div class="sf-breadcrumb">Earth > Europe > Bulgaria > Sofia > Mladost</div>
   *     <div class="sf-breadcrumb -sf-overflow-ellipsis" style="width: 150px; ">Earth > Europe > Bulgaria > Sofia > Mladost</div>
   */
  /***
   * Tabstrip:
   */
  /**
   * Default:
   * `.sf-tabs`
   *
   *     @example
   *     <div class="sf-tabs">
   *          <a class="sf-tabs__item">Recent</a>
   *          <a class="sf-tabs__item -selected">Libraries</a>
   *          <a class="sf-tabs__item">Selected <span class="sf-tabs__badge sf-badge">0</span></a>
   *     </div>
   */
  /**
   * Large:
   * `.sf-tabs.-large`
   *
   *     @example
   *     <div class="sf-tabs -large">
   *          <a class="sf-tabs__item">Recent</a>
   *          <a class="sf-tabs__item -selected">Libraries</a>
   *          <a class="sf-tabs__item">Selected <span class="sf-tabs__badge sf-badge -positive">4</span></a>
   *     </div>
   */
  /***
   * Icon:
   */
  /**
   * Icons with text:
   * `.sf-icon`
   *
   *     @example
   *     <i class="sf-fa sf-fa-sliders sf-icon"></i><span>Settings</span><br />
   *     <i class="sf-fa sf-fa-question-circle sf-icon"></i><span>Help</span><br />
   *     <i class="sf-fa sf-fa-folder-o sf-icon"></i><span>Folder</span><br />
   *     <i class="sf-fa sf-fa-exclamation-circle sf-icon -exclamation"></i><br />
   */
  /**
   * Close icon:
   * `.sf-icon.-close`
   *
   *     @example
   *     <i class="sf-icon -close"></i>
   */
  /**
  * Illustrative icons:
  * `.sf-icon.-illustrative`
  *
  *     @example
  *     <i class="sf-fa sf-fa-check-square-o sf-icon -illustrative"></i>
  *     <i class="sf-fa sf-fa-user sf-icon -illustrative -size-3xl"></i>
  */
  /**
  * Colors:
  * `.sf-icon.-{light, lighter, black, white, color-inherit}`
  *
  *     @example
  *     <i class="sf-fa sf-fa-folder-o sf-icon -light -size-xl"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -light"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -light -size-xs"></i>
  *     <br />
  *     <i class="sf-fa sf-fa-folder-o sf-icon -lighter -size-xl"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -lighter"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -lighter -size-xs"></i>
  *     <br />
  *     <i class="sf-fa sf-fa-folder-o sf-icon -black -size-xl"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -black"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -black -size-xs"></i>
  *     <div style="background-color: grey; color: pink; padding: 5px; max-width: 150px;">
  *     <i class="sf-fa sf-fa-folder-o sf-icon -white -size-xl"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -white"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -white -size-xs"></i>
  *     <br />
  *     <i class="sf-fa sf-fa-folder-o sf-icon -color-inherit -size-xl"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -color-inherit"></i>
  *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -color-inherit -size-xs"></i>
  *     </div>
  */
  /**
   * Icon sizes:
   * `.sf-icon.-size-{7xs, 4xs, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl}`
   *
   *     @example
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-7xs"></i>-size-7xs — 5px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-4xs"></i>-size-4xs — 11px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-3xs"></i>-size-3xs — 12px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-2xs"></i>-size-2xs — 13px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-xs"></i>-size-xs — 14px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-s"></i>-size-s — 16px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-m"></i>-size-m — 18px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-l"></i>-size-l — 20px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-xl"></i>-size-xl — 22px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-2xl"></i>-size-2xl — 28px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-3xl"></i>-size-3xl — 36px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-4xl"></i>-size-4xl — 48px<br />
   *     <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-5xl"></i>-size-5xl — 60px<br />
   */
  /***
  * Stacked icons:
  * `.sf-stack {.sf-stack__in,.sf-stack__out}`
  *
  *     @example
  *     <div class="sf-icon-stack">
  *       <i class="sf-icon-stack__in sf-fa sf-fa-info sf-icon -size-3xs -white"></i>
  *       <i class="sf-icon-stack__out sf-fa sf-fa-circle sf-icon -size-l -black"></i>
  *     </div>
  *     <div class="sf-icon-stack">
  *       <i class="sf-icon-stack__in sf-fa sf-fa-check sf-icon -size-2xs -light"></i>
  *       <i class="sf-icon-stack__in sf-fa sf-fa-circle sf-icon -size-xl -black"></i>
  *       <i class="sf-icon-stack__out sf-fa sf-fa-circle sf-icon -size-2xl -light"></i>
  *     </div>
  */
  /***
   * Status:
   */
  /**
   * Text:
   * `.sf-status__text`
   *
   *     @example
   *     <p class="sf-status__text">Published</p>
   *
   */
  /**
   * Icon:
   * `.status__icon.-{published, locked, unpublished, rejectedforpublishing, rejected, scheduled, draft, draftnewer, dimmed, for-translation, for-published, for-restricted, for-scheduled, for-draft}`
   *
   *     @example
   *     <i class="sf-status__icon"></i> Default<br /><br />
   *     <i class="sf-status__icon -published"></i> Published<br /><br />
   *     <i class="sf-status__icon -locked"></i> Locked<br /><br />
   *     <i class="sf-status__icon -unpublished"></i> Unpublished<br /><br />
   *     <i class="sf-status__icon -rejectedforpublishing"></i> Rejected for publishing<br /><br />
   *     <i class="sf-status__icon -rejected"></i> Rejected<br /><br />
   *     <i class="sf-status__icon -scheduled"></i> Scheduled<br /><br />
   *     <i class="sf-status__icon -draft"></i> Draft<br /><br />
   *     <i class="sf-status__icon -draftnewer"></i> Draft newer than published<br /><br />
   *     <i class="sf-status__icon -published -dimmed"></i> Published Dimmed — used to dim the status of not translated items<br /><br />
   *     <i class="sf-status__icon -for-translation"></i> For traslation<br /><br />
   *     <i class="sf-status__icon -for-published sf-fa-bell-o"></i> Custom status icon with color of Published<br /><br />
   *     <i class="sf-status__icon -for-restricted sf-fa-bullhorn"></i> Custom status icon with color of Rejected<br /><br />
   *     <i class="sf-status__icon -for-unpublished sf-fa-envelope-o"></i> Custom status icon with color of Unpublished<br /><br />
   *     <i class="sf-status__icon -for-scheduled sf-fa-eye"></i> Custom status with color of Scheduled<br /><br />
   *     <i class="sf-status__icon -for-draft sf-fa-star-o"></i> Custom status with color of Draft<br />
   *
   */
  /***
   * Badge:
   */
  /**
   * Default:
   * `.sf-badge`
   *
   *     @example
   *     <i class="sf-badge">5</i> Default diameter size 22px and default color grey <br />
   *     <i class="sf-badge -hover">5</i> Default with hover <br />
   */
  /**
   * Badge Size:
   * `.sf-badge.-size-{s,m,l,xl}`
   *
   *     @example
   *     <i class="sf-badge -size-s">5</i> Size s: 16px diameter <br />
   *     <i class="sf-badge -size-m">5</i> Size m: 22px diameter (Default) <br />
   *     <i class="sf-badge -size-l">5</i> Size l: 24px diameter <br />
   *     <i class="sf-badge -size-xl">5</i> Size xl: 26px diameter <br />
   */
  /**
   * Badge Color:
   * `.sf-badge.-{positive,negative,white}`
   *
   *     @example
   *     <i class="sf-badge">0</i> Default background color <br /><br />
   *     <i class="sf-badge -positive">5</i> Positive background color <br /><br />
   *     <i class="sf-badge -negative">5</i> Negative background color <br /><br />
   *     <span style="padding: 5px; background-color: #000; color: #fff;"><i class="sf-badge -white -icon"><i class="sf-fa sf-fa-check-circle sf-icon -size-m"></i></i> White background color used for icons</span> <br />
   *
   */
  /**
   * Badge for Languages:
   * `.sf-badge.-{add, -add-variation, -edit-variation}`
   *
   *     @example
   *     <i class="sf-badge -add">5</i> White badge with border and hover <br />
   *     <i class="sf-badge -add -hover">5</i> White badge with border <br /><br />
   *     <i class="sf-badge -add-variation -sf-txt-small">EN</i> Light blue background background color <br />
   *     <i class="sf-badge -add-variation -hover -sf-txt-small">EN</i> Light blue background background color and hover <br /><br />
   *     <i class="sf-badge -edit-variation -sf-txt-small">BG</i> Dark blue background background color <br />
   *     <i class="sf-badge -edit-variation -hover -sf-txt-small">BG</i> Dark blue background background color and hover <br /><br />
   *     <i class="sf-badge -add-variation -floating-txt -sf-txt-small"><span class="sf-badge__animated-content">Bulgaria on three seas</span></i> Badge with floating text
   *
   */
  /**
   * Badge with Icon:
   * `.sf-badge.-icon`
   *
   *     @example
   *     <i class="sf-badge -white -icon"><i class="sf-fa sf-fa-question-circle sf-icon"></i></i> Default badge size and default icon size <br />
   *     <i class="sf-badge -white -icon"><i class="sf-fa sf-fa-check-circle sf-icon -size-l"></i></i> Default badge size and L icon size <br />
   *     <i class="sf-badge -white -icon -size-s"><i class="sf-fa sf-fa-info-circle sf-icon -size-s"></i></i> Badge size S and icon size S <br />
   *
   */
  /***
   * Button:
   */
  /**
   * Default Button:
   * `.sf-button`
   *
   *     @example
   *     <button class="sf-button">Default Button</button>
   *     <button class="sf-button" disabled>Disabled Default Button</button>
   *     <a class="sf-button">Default Button</a>
   *     <a class="sf-button -disabled">Disabled Default Button</a>
   */
  /**
  * large Button:
  * `.sf-button.-large`
  *
  *     @example
  *     <button class="sf-button -large">large Default Button</button>
  *     <button class="sf-button -large" disabled>Disabled large Default Button</button>
  */
  /**
  * small Button:
  * `.sf-button.-small`
  *
  *     @example
  *     <button class="sf-button -small">small Default Button</button>
  *     <button class="sf-button -small" disabled>Disabled small Default Button</button>
  */
  /**
  * action Button:
  * `.sf-button.-action`
  *
  *     @example
  *     <button class="sf-button -action">action Default Button</button>
  *     <button class="sf-button -action" disabled>Disabled action Default Button</button>
  */
  /**
  * action large Button:
  * `.sf-button.-large.-action`
  *
  *     @example
  *     <button class="sf-button -action -large">action large Default Button</button>
  *     <button class="sf-button -action -large" disabled>Disabled action large Default Button</button>
  */
  /**
  * action small Button:
  * `.sf-button.-small.-action`
  *
  *     @example
  *     <button class="sf-button -action -small">action small Default Button</button>
  *     <button class="sf-button -action -small" disabled>Disabled action small Default Button</button>
  */
  /**
  * delete Button:
  * `.sf-button.-delete`
  *
  *     @example
  *     <button class="sf-button -delete">delete Default Button</button>
  *     <button class="sf-button -delete" disabled>Disabled delete Default Button</button>
  */
  /**
  * delete large Button:
  * `.sf-button.-large.-delete`
  *
  *     @example
  *     <button class="sf-button -delete -large">delete large Default Button</button>
  *     <button class="sf-button -delete -large" disabled>Disabled delete large Default Button</button>
  */
  /**
  * delete small Button:
  * `.sf-button.-small.-delete`
  *
  *     @example
  *     <button class="sf-button -delete -small">delete small Default Button</button>
  *     <button class="sf-button -delete -small" disabled>Disabled delete small Default Button</button>
  */
  /**
  * link Button:
  * `.sf-button.-link`
  *
  *     @example
  *     <button class="sf-button -link">link Default Button</button>
  *     <button class="sf-button -link" disabled>Disabled link Default Button</button>
  */
  /**
  * link large Button:
  * `.sf-button.-large.-link`
  *
  *     @example
  *     <button class="sf-button -link -large">link large Default Button</button>
  *     <button class="sf-button -link -large" disabled>Disabled link large Default Button</button>
  */
  /**
  * link small Button:
  * `.sf-button.-small.-link`
  *
  *     @example
  *     <button class="sf-button -link -small">link small Default Button</button>
  *     <button class="sf-button -link -small" disabled>Disabled link small Default Button</button>
  */
  /**
  * invert Button:
  * `.sf-button.-invert`
  *
  *     @example
  *     <button class="sf-button -invert">invert Default Button</button>
  *     <button class="sf-button -invert" disabled>Disabled invert Default Button</button>
  */
  /**
  * invert large Button:
  * `.sf-button.-large.-invert`
  *
  *     @example
  *     <button class="sf-button -invert -large">invert large Default Button</button>
  *     <button class="sf-button -invert -large" disabled>Disabled invert large Default Button</button>
  */
  /**
  * invert small Button:
  * `.sf-button.-small.-invert`
  *
  *     @example
  *     <button class="sf-button -invert -small">invert small Default Button</button>
  *     <button class="sf-button -invert -small" disabled>Disabled invert small Default Button</button>
  */
  /**
   * Button with Feedback Icon:
   * `.sf-button.-feedback`
   *
   *     @example
   *     <button class="sf-button -feedback"><div class="sf-button__content">Feedback Button</div><i class="sf-button__icon sf-fa sf-fa-check sf-icon"></i></button>
   *     <button class="sf-button -feedback -done"><div class="sf-button__content">Feedback Button</div><i class="sf-button__icon sf-fa sf-fa-check sf-icon"></i></button>
   */
  /**
   * Button with Loader:
   *
   *
   *     @example
   *     <button class="sf-button -loader -inprogress">
   *         <div class="sf-loader -color">
   *             <div class="sf-loader__content">
   *                  <div class="sf-loader__rect -first"></div>
   *                  <div class="sf-loader__rect -second"></div>
   *                  <div class="sf-loader__rect -third"></div>
   *             </div>
   *         </div>
   *         <span class="sf-button__content">Button</span>
   *     </button>
   *     <button class="sf-button -loader -action -inprogress">
   *         <div class="sf-loader -transparent">
   *             <div class="sf-loader__content">
   *                  <div class="sf-loader__rect -first"></div>
   *                  <div class="sf-loader__rect -second"></div>
   *                  <div class="sf-loader__rect -third"></div>
   *             </div>
   *         </div>
   *         <span class="sf-button__content">Button</span>
   *     </button>
   *
   */
  /**
   * Dropdown button:
   * `.sf-button`
   *
   *     @example
   *     <div style="height: 150px; padding-left: 160px;">
   *         <button type="button" class="sf-button -icon -dropdown -dropped">
   *             <i class="sf-button__icon sf-icon sf-fa sf-fa-ellipsis-h -size-m" title="Actions"></i>
   *             <div class="sf-button__dropdown">
   *                 <div class="sf-dropdown">
   *                      <div class="sf-dropdown__heading">
   *                         Edit
   *                      </div>
   *                      <div class="sf-dropdown__item -active">
   *                         Default News
   *                      </div>
   *                      <div class="sf-dropdown__item">
   *                          News items<span class="sf-dropdown__counter -positive">14</span>
   *                      </div>
   *                      <div class="sf-dropdown__separator">
   *                      </div>
   *                      <div class="sf-dropdown__item -sf-txt-failure">
   *                          Delete
   *                      </div>
   *                 </div>
   *            </div>
   *         </button>
   *     </div>
   */
  /**
   * Dropdown button without border:
   * `.sf-button.-no-border`
   *
   *     @example
   *     <div style="height: 150px; padding-left: 160px;">
   *         <button type="button" class="sf-button -no-border -icon -dropdown -dropped">
   *             <i class="sf-button__icon sf-icon sf-fa sf-fa-ellipsis-h -size-m" title="Actions"></i>
   *             <div class="sf-button__dropdown">
   *                 <div class="sf-dropdown">
   *                      <div class="sf-dropdown__heading">
   *                         Edit
   *                      </div>
   *                      <div class="sf-dropdown__item -active">
   *                         Default News
   *                      </div>
   *                      <div class="sf-dropdown__item">
   *                         test News
   *                      </div>
   *                      <div class="sf-dropdown__separator">
   *                      </div>
   *                      <div class="sf-dropdown__item -sf-txt-failure">
   *                          Delete
   *                      </div>
   *                 </div>
   *            </div>
   *         </button>
   *     </div>
   */
  /**
   * Dropdown button with icon and text:
   *
   *     @example
   *     <div style="height: 120px;">
   *         <a class="sf-button -no-border -left -icon -dropdown -dropped">
   *             <span>Default News</span>
   *             <i class="sf-button__icon sf-icon sf-fa sf-fa-caret-down -size-xs"></i>
   *             <div class="sf-button__dropdown">
   *                 <div class="sf-dropdown">
   *                      <div class="sf-dropdown__item -active">
   *                         Default News
   *                      </div>
   *                      <div class="sf-dropdown__item">
   *                         test News
   *                      </div>
   *                 </div>
   *            </div>
   *         </a>
   *     </div>
   */
  /**
   * Dropdown as color picker:
   *
   *     @example
   *     <a class="sf-button -large -left -angled -sf-pr-5xs -no-hover -icon -dropdown -dropped" aria-expanded="true" aria-haspopup="true" role="listbox" tabindex="0" >
   *     	<span class="sf-button__content">
   *     		<i class="sf-badge -sf-m-4xs -size-l -square" style="background-color: rgb(220, 236, 245);"></i>
   *     	</span>
   *     	<i class="sf-button__icon sf-icon sf-fa sf-fa-caret-down -size-m"></i>
   *     	<div class="sf-button__dropdown">
   *     		<div class="sf-dropdown -narrow" >
   *     			<div class="sf-color-palette" style="grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;">
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 173, 173);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 164, 225);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(245, 154, 255);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(139, 244, 255);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(146, 255, 251);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(158, 255, 201);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 255, 174);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 235, 141);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(228, 207, 197);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(220, 236, 245);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 122, 123);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 113, 173);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(194, 103, 220);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(87, 193, 255);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(95, 208, 200);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(107, 222, 150);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 255, 123);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 184, 90);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(177, 157, 146);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(169, 185, 194);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 72, 72);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(220, 62, 123);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(143, 52, 169);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(35, 142, 252);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(44, 157, 149);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(56, 171, 99);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(255, 224, 72);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(237, 133, 39);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(126, 106, 95);"></div>
   *     				<div class="sf-color-palette__item" style="background-color: rgb(118, 134, 143);"></div>
   *     			</div>
   *     		</div>
   *     	</div>
   *     </a>
   */
  /**
  * Icon Button:
  * `.sf-button.-icon`
  *
  *     @example
  *     <button class="sf-button -icon"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
  *     <button class="sf-button -icon" disabled><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
  *     <button class="sf-button -action -icon"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
  *     <button class="sf-button -action -icon" disabled><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
  *     <br>
  *     <a class="sf-button -icon"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></a>
  *     <a class="sf-button -icon -disabled"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></a>
  */
  /**
  * Toggle buttons:
  * `.sf-button.-toggle`
  *
  *     @example
  *     <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-sitemap sf-button__icon"></i></button>
  *     <button class="sf-button -active -icon -toggle"><i class="sf-icon sf-fa sf-fa-filter sf-button__icon"></i></button>
  *     <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-cog sf-button__icon"></i></button>
  *     <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-lightbulb-o sf-button__icon"></i></button>
  *     <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-th-list sf-button__icon"></i></button>
  *     <button class="sf-button -toggle"><span class="sf-button__content"><i class="sf-badge -size-xl-fixed -add-variation -sf-txt-small">EN</i></span></button>
  *     <br>
  *     <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-sitemap sf-button__icon"></i></a>
  *     <a class="sf-button -active -icon -toggle"><i class="sf-icon sf-fa sf-fa-filter sf-button__icon"></i></a>
  *     <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-cog sf-button__icon"></i></a>
  *     <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-lightbulb-o sf-button__icon"></i></a>
  *     <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-th-list sf-button__icon"></i></a>
  *     <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-angle-left -size-2xl sf-button__icon"></i></a>
  *     <a class="sf-button -icon -toggle -disabled"><i class="sf-icon sf-fa sf-fa-angle-left -size-2xl sf-button__icon"></i></a>
  */
  /**
  * Circled Icon Button:
  * `.sf-button.-icon.-circle`
  *
  *     @example
  *     <button class="sf-button -icon -circle"><i class="sf-icon -size-xs sf-fa sf-fa-plus sf-button__icon"></i></button>
  *     <button class="sf-button -icon -circle" disabled><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></button>
  *     <button class="sf-button -icon -circle -small"><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></button>
  *     <br>
  *     <a class="sf-button -icon -circle"><i class="sf-icon -size-xs sf-fa sf-fa-plus sf-button__icon"></i></a>
  *     <a class="sf-button -icon -circle -disabled"><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></a>
  *     <a class="sf-button -icon -circle -small"><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></a>
  */
  /**
  * Circled Icon with small font size:
  * `.sf-button.-txt-small.-circle`
  *
  *     @example
  *     <button class="sf-button -txt-small -small -circle">+4</button>
  *     <br>
  *     <a class="sf-button -txt-small -small -circle">+4</a>
  */
  /***
   * Button group:
   */
  /**
   * `.sf-button-group`
   *
   *     @example
   *     <div class="sf-button-group">
   *     <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-sitemap sf-button__icon"></i></button>
   *     <button class="sf-button -active -icon -toggle"><i class="sf-icon sf-fa sf-fa-filter sf-button__icon"></i></button>
   *     <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-cog sf-button__icon"></i></button>
   *     <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-lightbulb-o sf-button__icon"></i></button>
   *     <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-th-list sf-button__icon"></i></button>
   *     </div>
   */
  /**
   * Search Button Group:
   * `.sf-button-group`
   *
   *     @example
   *     <div class="sf-button-group -search">
   *      <div class="sf-input">
   *           <input type="text" class="sf-input__field" placeholder="Search..." />
   *     </div>
   *      <button class="sf-button -icon">
   *          <i class="sf-fa sf-fa-search sf-icon -size-s sf-button__icon"></i>
   *      </button>
   *    </div>
   */
  /**
   *  Filter Button Group:
   * `.sf-button-group`
   *
   *     @example
   *     <div class="sf-button-group -search">
   *      <i class="sf-fa sf-fa-search sf-icon -size-s -light"></i>
   *      <div class="sf-input -clearable">
   *         <input type="text" class="sf-input__field" placeholder="Narrow by typing..." />
   *          <span class="sf-input__clear-button">
   *              <i class="sf-icon sf-fa sf-fa-times -size-3xs"></i>
   *          </span>
   *       </div>
   *    </div>
    *     <div class="sf-button-group -search">
   *      <i class="sf-fa sf-fa-search sf-icon -size-s -light"></i>
   *      <div class="sf-input -clearable">
   *         <input type="text" class="sf-input__field" placeholder="Narrow by typing..." />
   *          <span class="sf-input__clear-button -show">
   *              <i class="sf-icon sf-fa sf-fa-times -size-3xs"></i>
   *          </span>
   *       </div>
   *    </div>
   */
  /***
   * Notification:
   */
  /**
   * info Notification:
   * `.sf-notification.-info`
   *
   *     @example
   *     <div class="sf-notification -info">
   *         <div class="sf-notification__content">
   *             <h4>Curabitur sem nulla</h4>
   *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
   *         </div>
   *     </div>
   */
  /**
   * success Notification:
   * `.sf-notification.-success`
   *
   *     @example
   *     <div class="sf-notification -success">
   *         <div class="sf-notification__content">
   *             <h4>Curabitur sem nulla</h4>
   *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
   *         </div>
   *     </div>
   */
  /**
   * error Notification:
   * `.sf-notification.-error`
   *
   *     @example
   *     <div class="sf-notification -error">
   *         <div class="sf-notification__content">
   *             <h4>Curabitur sem nulla</h4>
   *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
   *         </div>
   *     </div>
   */
  /**
   * warning Notification:
   * `.sf-notification.-warning`
   *
   *     @example
   *     <div class="sf-notification -warning">
   *         <div class="sf-notification__content">
   *             <h4>Curabitur sem nulla</h4>
   *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
   *         </div>
   *     </div>
   */
  /**
   * black Notification:
   * `.sf-notification.-black`
   *
   *     @example
   *     <div class="sf-notification -black">
   *         <div class="sf-notification__content">
   *             <h4>Curabitur sem nulla</h4>
   *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
   *         </div>
   *     </div>
   */
  /**
   * transparent Notification:
   * `.sf-notification.-transparent`
   *
   *     @example
   *     <div class="sf-notification -transparent">
   *         <div class="sf-notification__content">
   *             <h4>Curabitur sem nulla</h4>
   *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
   *         </div>
   *     </div>
   */
  /**
   * info notification with close button:
   * `.sf-notification.-success`
   *
   *     @example
   *     <div class="sf-notification -success">
   *         <span class="sf-notification__close-button"></span>
   *         <div class="sf-notification__content">
   *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
   *         </div>
   *     </div>
   */
  /**
   * Inline notification (as wide as the content in it):
   * `.sf-notification.-inline`
   *
   *     @example
   *     <div class="sf-notification -info -inline">
   *         <span class="sf-notification__close-button"></span>
   *         <div class="sf-notification__content">
   *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
   *         </div>
   *     </div>
   */
  /**
  * Notification with bottom up:
  * `.sf-notification.-info.-up`
  *
  *     @example
  *     <div class="sf-notification -info -up">
  *          <div class="sf-notification__content">
  *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
  *          </div>
  *      </div>
  */
  /**
          * Notification with top arrow:
          * `.sf-notification.-info.-down`
          *
          *     @example
          *     <div class="sf-notification -info -down">
          *          <div class="sf-notification__content">
          *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
          *          </div>
          *      </div>
          */
  /**
         * Notification with right arrow:
         * `.sf-notification.-info.-left`
         *
         *     @example
         *     <div class="sf-notification -info -left">
         *          <div class="sf-notification__content">
         *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         *          </div>
         *      </div>
         */
  /**
          * Notification with left arrow:
          * `.sf-notification.-info.-right`
          *
          *     @example
          *     <div class="sf-notification -info -right">
          *          <div class="sf-notification__content">
          *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
          *          </div>
          *      </div>
          */
  /**
          * Notification as tooltip:
          * `.sf-notification.-tooltip`
          *
          *     @example
          *     <div class="sf-notification -tooltip">
          *          <div class="sf-notification__content">
          *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
          *          </div>
          *      </div>
          */
  /**
  * Notification as tooltip with top left arrow:
  * `.sf-notification.-tooltip.-down-left`
  *
  *     @example
  *     <div class="sf-notification -tooltip -down-left">
  *          <div class="sf-notification__content">
  *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
  *          </div>
  *      </div>
  */
  /**
  * Notification as tooltip with top right arrow and close button:
  * `.sf-notification.-tooltip.-down-right`
  *
  *     @example
  *     <div class="sf-notification -tooltip -down-right">
  *          <i class="sf-notification__close-button sf-icon -close -black -size-2xs"></i>
  *          <div class="sf-notification__content">
  *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
  *          </div>
  *      </div>
  */
  /**
  * Notification as tooltip with left arrow:
  * `.sf-notification.-tooltip.-left`
  *
  *     @example
  *     <div class="sf-notification -tooltip -left">
  *          <div class="sf-notification__content">
  *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
  *          </div>
  *      </div>
  */
  /**
  * Notification as tooltip with right arrow:
  * `.sf-notification.-tooltip.-right`
  *
  *     @example
  *     <div class="sf-notification -tooltip -right">
  *          <i class="sf-notification__close-button sf-icon -close -black -size-2xs"></i>
  *          <div class="sf-notification__content">
  *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
  *          </div>
  *      </div>
  */
  /**
  * Notification as tooltip with down arrow:
  * `.sf-notification.-tooltip.-down`
  *
  *     @example
  *     <div class="sf-notification -tooltip -down">
  *          <div class="sf-notification__content">
  *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
  *          </div>
  *      </div>
  */
  /**
  * Notification as tooltip with up arrow:
  * `.sf-notification.-tooltip.-up`
  *
  *     @example
  *     <div class="sf-notification -tooltip -up">
  *          <i class="sf-notification__close-button sf-icon -close -black -size-2xs"></i>
  *          <div class="sf-notification__content">
  *              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
  *          </div>
  *      </div>
  */
  /**
  * Edit item notification:
  * `.sf-notification.-success.-fixed.-inline`
  *
  *     @example
  *     <div class="sf-notification -success -fixed -inline">
  *   	<div class="sf-notification__close-button"><i class="sf-icon sf-fa sf-fa-times -size-3xs -darkest"></i></div>
  *   	<div class="sf-notification__content">
  *   		Content has been published successfully.
  *   	</div>
  *    </div>
  */
  /**
  * Notification as toolset for link:
  * `.sf-notification.-toolset.-black.-down`
  *
  *     @example
  *     <div class="sf-notification -black -toolset -down">
  *          <div class="sf-notification__content">
  *              <span class="sf-notification__tool-link" title="Open link: https://drive.google.com/drive/folders/">https://drive.google.com/drive/folders/</span>
  *              <span class="sf-notification__tool-button"><i class="sf-icon -color-inherit -size-xs sf-fa sf-fa-external-link"></i></span>
  *              <span class="sf-notification__tool-separator"></span>
  *              <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-pencil"></i></span>
  *              <span class="sf-notification__tool-separator"></span>
  *              <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-unlink"></i></span>
  *          </div>
  *      </div>
  */
  /**
  * Notification as toolset for other objects:
  * `.sf-notification.-toolset.-black.-up`
  *
  *     @example
  *     <div class="sf-notification -black -toolset -up">
  *          <div class="sf-notification__content">
  *              <span class="sf-notification__tool-group">
  *                   <span class="sf-notification__tool-button">
  *                       <i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-align-left"></i>
  *                   </span>
  *                   <span class="sf-notification__tool-button">
  *                       <i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-align-center"></i>
  *                   </span>
  *                   <span class="sf-notification__tool-button -active">
  *                       <i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-align-right"></i>
  *                   </span>
  *              </span>
  *              <span class="sf-notification__tool-separator"></span>
  *              <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-link"></i></span>
  *              <span class="sf-notification__tool-separator"></span>
  *              <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-paint-brush"></i></span>
  *              <span class="sf-notification__tool-separator"></span>
  *              <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-pencil"></i></span>
  *          </div>
  *      </div>
  */
  /**
  * Notification as toolset for styles menu:
  * `.sf-notification.-toolset.-black.-down`
  *
  *     @example
  *     <div class="sf-notification -black -toolset -down">
  *          <div class="sf-notification__content">
  *              <span class="sf-notification__tool">
  *                  <label>Link Style
  *                       <select class="sf-notification__tool-dropdown">
  *                           <option selected>No style</option>
  *                           <option value="volvo">Big call action</option>
  *                           <option value="mercedes">Small button</option>
  *                       </select>
  *                  </label>
  *              </span>
  *          </div>
  *      </div>
  */
  /***
   * Tooltip:
   */
  /**
   * Info icon and tooltip:
   * `.sf-tooltip`
   *
   *     @example
   *     <div class="sf-tooltip">
   *          <i class="sf-icon sf-fa sf-fa-info-circle -black -size-m"></i>
   *          <div class="sf-tooltip__content sf-notification -tooltip">
   *              <div class="sf-notification__content">
   *                  1920 x 1200<br>
   *			        <span class="-sf-txt-upper-case">jpeg</span><br>
   *			        762.72 KB
   *              </div>
   *          </div>
   *     </div>
   *
   */
  /**
   * Info icon and tooltip opens on click:
   * `.sf-tooltip`
   *
   *     @example
   *     <div class="sf-row -align-items-center">
   *     <div class="sf-tooltip -open-on-click">
   *          <i class="sf-icon -sf-clickable sf-fa sf-fa-info-circle -black -size-m"></i>
   *          <div class="sf-tooltip__content sf-notification -tooltip">
   *              <div class="sf-notification__content">
   *                  1920 x 1200<br>
   *			        <span class="-sf-txt-upper-case">jpeg</span><br>
   *			        762.72 KB
   *              </div>
   *          </div>
   *     </div>
   *     <div class="sf-tooltip -open-on-click -dropped">
   *          <i class="sf-icon -sf-clickable sf-fa sf-fa-info-circle -black -size-m"></i>
   *          <div class="sf-tooltip__content sf-notification -tooltip">
   *              <div class="sf-notification__content">
   *                  1920 x 1200<br>
   *			        <span class="-sf-txt-upper-case">jpeg</span><br>
   *			        762.72 KB
   *              </div>
   *          </div>
   *     </div>
   *     </div>
   */
  /**
   * Tooltip on the right:
   * `.sf-tooltip`
   *
   *     @example
   *     <div class="sf-row -align-items-center">
   *      <div class="sf-tooltip -dropped">
   *            <button type="button" class="sf-button">Load 50 more News</button>
   *             <div class="sf-tooltip__content -right">
   *              <div class="sf-notification -tooltip -right">
   *                <span class="sf-notification__close-button"></span>
   *                <div class="sf-notification__content">
   *                    <h4>Looking for specific items?</h4>
   *                    <a>Search </a>or<a> filtering</a> may be easier
   *                </div>
   *              </div>
   *          </div>
   *      </div>
   *     </div>
   */
  /**
  * Tooltip on the left:
  * `.sf-tooltip`
  *
  *     @example
  *     <div class="sf-row -align-items-center" style="padding-left: 250px;">
  *     <div class="sf-tooltip -dropped">
  *          <button type="button" class="sf-button">Load 50 more News</button>
  *          <div class="sf-tooltip__content -left">
  *              <div class="sf-notification -tooltip -left">
  *                  <span class="sf-notification__close-button"></span>
  *                  <div class="sf-notification__content">
  *                      <h4>Looking for specific items?</h4>
  *                      <a>Search </a>or<a> filtering</a> may be easier
  *                  </div>
  *              </div>
  *          </div>
  *       </div>
  *       </div>
  */
  /**
  * Tooltip on top:
  * `.sf-tooltip`
  *
  *     @example
  *     <div class="sf-row -align-items-center" style="padding-top: 100px;">
  *     <div class="sf-tooltip -dropped">
  *          <div class="sf-tooltip__content -up">
  *              <div class="sf-notification -tooltip -up">
  *                  <span class="sf-notification__close-button"></span>
  *                  <div class="sf-notification__content">
  *                      <h4>Looking for specific items?</h4>
  *                      <a>Search </a>or<a> filtering</a> may be easier
  *                  </div>
  *              </div>
  *          </div>
  *          <button type="button" class="sf-button">Load 50 more News</button>
  *       </div>
  *       </div>
  */
  /**
  * Tooltip on bottom:
  * `.sf-tooltip`
  *
  *     @example
  *     <div class="sf-row -align-items-center" style="padding-bottom: 100px;">
  *     <div class="sf-tooltip -dropped">
  *          <button type="button" class="sf-button">Load 50 more News</button>
  *          <div class="sf-tooltip__content -down">
  *              <div class="sf-notification -tooltip -down">
  *                  <span class="sf-notification__close-button"></span>
  *                  <div class="sf-notification__content">
  *                      <h4>Looking for specific items?</h4>
  *                      <a>Search</a> or <a>filtering</a> may be easier
  *                  </div>
  *              </div>
  *          </div>
  *       </div>
  *       </div>
  */
  /***
   * Input:
   */
  /**
      * Default:
      * `.sf-input`
      *
      *     @example
      *     <div class="sf-input">
      *         <label class="sf-input__label" for="input_1">
      *             <span>Input title</span>
      *         </label>
      *          <input type="text" class="sf-input__field" id="input_1" placeholder="Search the blog..." />
      *         <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
      *     </div>
      */
  /**
  * Disabled:
  * `.sf-input`
  *
  *     @example
  *     <div class="sf-input">
  *         <label class="sf-input__label" for="input-6">
  *             <span>Input title</span>
  *         </label>
  *         <input type="text" class="sf-input__field" disabled value="User name" id="input-6" />
  *     </div>
  */
  /**
  * Readonly:
  * `.sf-input`
  *
  *     @example
  *     <div class="sf-input">
  *         <label class="sf-input__label" for="input-7" >
  *              <span>Input title</span>
  *         </label>
  *         <input type="text" class="sf-input__field" readonly value="User name" id="input-7" />
  *     </div>
  */
  /**
  * Value not set:
  * `.sf-input .sf-input__no-value`
  *
  *     @example
  *     <div class="sf-input">
  *         <label class="sf-input__label" for="input-4">
  *             <span>Input title</span>
  *         </label>
  *         <div class="sf-input__no-value">Not set</div>
  *     </div>
  *
  */
  /**
  * Invalid field :
  * `.sf-input.ng-invalid`
  *
  *     @example
  *     <div class="sf-input ng-invalid ng-dirty">
  *         <label class="sf-input__label" for="input-77" >
  *              <span>Required Input</span>
  *         </label>
  *         <input type="text" class="sf-input__field ng-invalid ng-dirty" required value="User name" id="input-77" />
  *         <p class="sf-input__required">Field is required</p>
  *         <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
  *     </div>
  *     <div class="sf-input -required">
  *         <label class="sf-input__label" for="input-8" >
  *              <span>Required Input</span>
  *         </label>
  *         <input type="text" class="sf-input__field -required ng-invalid ng-dirty" required value="User name" id="input-8" />
  *         <p class="sf-input__required">Field is required</p>
  *         <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
  *     </div>
  */
  /**
  * Input with clear button:
  * `.sf-input.-clear`
  *
  *     @example
  *     <div class="sf-input -clearable">
  *         <label class="sf-input__label" for="input-32">
  *             <span>Input title</span>
  *         </label>
  *         <input type="text" class="sf-input__field" id="input-32" />
  *         <span class="sf-input__clear-button -show"><i class="sf-icon -size-3xs sf-fa sf-fa-times"></i></span>
  *         <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
  *     </div>
  */
  /**
  * Input with units:
  * `.sf-input.-unit`
  *
  *     @example
  *     <div class="sf-input -left -unit">
  *         <input type="search" class="sf-input__field" id="input-24" />
  *         <label for="input-24" class="sf-icon -light -size-s sf-input__unit"><i class="sf-fa sf-fa-eur"></i></label>
  *     </div>
  *     </br>
  *     </br>
  *     <div class="sf-input -unit">
  *         <input type="search" class="sf-input__field" id="input-4" />
  *         <label  class="sf-icon -light -size-s sf-input__unit" for="input-4">m<sup>2</sup></label>
  *     </div>
  */
  /**
  * Input and textarea with character counter:
  * `.sf-input .-char-counter`
  *
  *     @example
  *     <div class="sf-input -char-counter">
  *         <input type="text" class="sf-input__field" id="input-45" />
  *         <span class="sf-input__char-counter">352</span>
  *     </div>
  *     </br>
  *     </br>
  *     <div class="sf-input -textarea -char-counter">
  *         <textarea type="textarea" class="sf-input__textarea" id="textarea-4">Longer than 4</textarea>
  *         <span class="sf-input__char-counter -error">-9</span>
  *     </div>
  */
  /**
  * Side content with char counter:
  * `.sf-input.-char-counter .sf-input__char-counter`
  * `.sf-input.-side-content .sf-input__char-counter`
  *
  *     @example
  *     <div class="sf-input -textarea -char-counter -side-content" style="width:600px;">
  *         <textarea type="textarea" class="sf-input__textarea" id="textarea-49"></textarea>
  *         <span class="sf-input__char-counter -success">44</span>
  *         <span class="sf-input__side-content">Side content</span>
  *     </div>
  */
  /**
  * Textarea:
  * `.sf-input`
  *
  *     @example
  *     <div class="sf-input -textarea">
  *         <label class="sf-input__label" for="textarea-1">
  *             <span>Textarea title</span>
  *         </label>
  *         <textarea type="textarea" class="sf-input__textarea" id="textarea-1"></textarea>
  *     </div>
  */
  /**
  * Title:
  * `.sf-input.-title`
  *
  *     @example
  *     <div class="sf-input -title">
  *         <h1 class="sf-input__title -title" contenteditable="true" data-placeholder="Title"></h1>
  *     </div>
  */
  /**
  * Title Large:
  * `.sf-input.-title.-large`
  *
  *     @example
  *     <div class="sf-input -title -large">
  *         <h1 class="sf-input__title -title" contenteditable="true" data-placeholder="Title"></h1>
  *     </div>
  */
  /**
  * Title with side-content:
  * `.sf-input.-title.-side-content`
  *
  *     @example
  *     <div class="sf-input -title -side-content">
  *         <h1 class="sf-input__title -title" contenteditable="true" data-placeholder="Title"></h1>
  *         <span class="sf-input__side-content"><i class="sf-icon sf-fa sf-fa-question-circle -size-xs -black"></i></span>
  *     </div>
  */
  /**
  * Title with side-content and validation:
  * `.sf-input.-title.-side-content.-required`
  *
  *     @example
  *     <div class="sf-input -title -side-content -required">
  *         <h1 class="sf-input__title -title" contenteditable="true" data-placeholder="Title"></h1>
  *         <p class="sf-input__required">Enter Title<br /></p>
  *         <span class="sf-input__side-content"><i class="sf-icon sf-fa sf-fa-question-circle -size-xs -black"></i></span>
  *     </div>
  */
  /***
   * File input:
   */
  /**
  * Upload icon:
  * `.sf-input-file`
  *
  *     @example
  *     <div class="sf-input-file">
  *         <label class="sf-input-file__label" for="input-file_1">
  *             <a class="-secondary sf-icon sf-fa sf-fa-upload -size-xl" title="Upload"></a>
  *         </label>
  *          <input type="file" id="input-file_1" />
  *     </div>
  */
  /**
  * Plus icon:
  * `.sf-input-file`
  *
  *     @example
  *     <div class="sf-input-file">
  *         <label class="sf-input-file__label" for="input-file_2">
  *         <a class="sf-button -icon -circle">
  *               <i class="sf-icon -size-xs sf-fa sf-fa-plus sf-button__icon"></i>
  *         </a>
  *         </label>
  *          <input type="file" id="input-file_2" />
  *     </div>
  */
  /**
  * Upload button:
  * `.sf-input-file`
  *
  *     @example
  *     <div class="sf-input-file">
  *         <label class="sf-input-file__label sf-row -column -align-items-center -sf-mt-xl" for="input-file_3">
  *             <i class="sf-icon sf-fa sf-fa-upload -illustrative -sf-mb-xl -sf-mr-zero"></i>
  *             <span class="sf-button -action -large -sf-mb-m">Upload images from your computer</span>
  *         </label>
  *          <input type="file" id="input-file_3" />
  *     </div>
  */
  /***
   * Dropdown:
   */
  /**
   * `.sf-dropdown`
   *
   *     @example
   *     <div class="sf-dropdown" style="vertical-align:top;">
   *         <div class="sf-dropdown__item -active">
   *             Pages
   *         </div>
   *         <div class="sf-dropdown__item -disabled">
   *              Blogs<span class="sf-dropdown__counter -positive">14</span>
   *         </div>
   *         <div class="sf-dropdown__item">
   *              News items<span class="sf-dropdown__counter -neutral">0</span>
   *         </div>
   *     </div>
   *     <div class="sf-dropdown" style="vertical-align:top;">
   *         <div class="sf-dropdown__heading">
   *              Pages
   *         </div>
   *         <div class="sf-dropdown__item">
   *              Blogs
   *         </div>
   *         <div class="sf-dropdown__separator">
   *         </div>
   *         <div class="sf-dropdown__item">
   *              News items
   *         </div>
   *         <div class="sf-dropdown__item ">
   *              Blog posts
   *         </div>
   *         <div class="sf-dropdown__separator">
   *         </div>
   *         <div class="sf-dropdown__heading">
   *              Pages
   *         </div>
   *         <div class="sf-dropdown__item">
   *              Lists
   *         </div>
   *         <div class="sf-dropdown__item">
   *             Restaurants
   *         </div>
   *     </div>
   */
  /**
   * Dropdown with no items:
   * `.sf-dropdown .sf-dropdown__no-items`
   *
   *     @example
   *     <div class="sf-dropdown">
   *         <div class="sf-dropdown__no-items">
   *              No items
   *         </div>
   *     </div>
   */
  /**
   * Dropdown without top and bottom padding:
   * `.sf-dropdown.-condensed`
   *
   *     @example
   *     <div class="sf-dropdown -condensed">
   *         <div class="sf-dropdown__item">
   *             Restaurants
   *         </div>
   *         <div class="sf-dropdown__item">
   *             Hotels
   *         </div>
   *         <div class="sf-dropdown__separator">
   *         </div>
   *         <div class="sf-dropdown__item">
   *             Clubs
   *         </div>
   *         <div class="sf-dropdown__item">
   *              Show all related items
   *         </div>
   *     </div>
   */
  /***
   * Expander:
   */
  /**
   * Collapsed:
   * `.sf-expander`
   * <br>
   * <span style="font-size:12px">&nbsp;Web Accessibility: If non-custom element is used, user must handle the change for aria-expanded="true/false" through javaScript.</span>
   *
   *     @example
   *     <div class="sf-expander">
   *         <input class="sf-expander__checkbox" type="checkbox" id="some-id" aria-expanded="false">
   *         <label class="sf-expander__header" for="some-id"><span class="sf-expander__icon sf-button -circle -icon"><i class="sf-button__icon sf-icon -size-l sf-fa sf-fa-angle-down"></i></span>Exapnded</label>
   *         <label class="sf-expander__header" for="some-id"><span class="sf-expander__icon sf-button -circle -icon"><i class="sf-button__icon sf-icon -size-l sf-fa sf-fa-angle-right"></i></span>Collapsed</label>
   *         <div class="sf-expander__content">
   *             <h4>
   *                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit.
   *             </h4>
   *         <div class="sf-input">
   *            <label class="sf-input__label" for="input_1">
   *              <span>Input title</span>
   *            </label>
   *            <input type="text" class="sf-input__field" id="input_1" />
   *            <p class="sf-input__required">Field is required</p>
   *            <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
   *          </div>
   *         </div>
   *     </div>
   */
  /***
   * Checkbox:
   */
  /**
  * `.sf-checkbox`
  *
  *     @example
  *<div class="sf-checkbox">
  *    <input type="checkbox" class="sf-checkbox__input" id="id_1"/>
  *    <label class="sf-checkbox__label" for="id_1">
  *         <span class="sf-checkbox__icon"></span>
  *          <span class="sf-checkbox__text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
  *      </label>
  *   </div>
  *<div class="sf-checkbox">
  *    <input type="checkbox" class="sf-checkbox__input" id="id_3" checked/>
  *    <label class="sf-checkbox__label" for="id_3">
  *         <span class="sf-checkbox__icon"></span>
  *          <span class="sf-checkbox__text">CheckBox checked</span>
  *      </label>
  *</div>
  *<div class="sf-checkbox">
  *    <input type="checkbox" class="sf-checkbox__input" id="id_2" disabled/>
  *    <label class="sf-checkbox__label" for="id_2">
  *         <span class="sf-checkbox__icon"></span>
  *          <span class="sf-checkbox__text">Checkbox disabled</span>
  *      </label>
  *</div>
  *<div class="sf-checkbox">
  *    <input type="checkbox" class="sf-checkbox__input" id="id_4" checked disabled />
  *    <label class="sf-checkbox__label" for="id_4">
  *         <span class="sf-checkbox__icon"></span>
  *          <span class="sf-checkbox__text">Checkbox disabled checked</span>
  *      </label>
  *</div>
  */
  /**
  * Checkbox Without a Label:
  * `.sf-checkbox`
  *
  *     @example
  *<div class="sf-checkbox">
  *    <input type="checkbox" class="sf-checkbox__input" id="id_5" checked />
  *    <label class="sf-checkbox__label" for="id_5">
  *         <span class="sf-checkbox__icon"></span>
  *      </label>
  *</div>
  */
  /**
   * Checkbox Ellipsis:
   * `.sf-checkbox.-ellipsis`
   *
   *     @example
   *<div style="width: 100px">
   *    <div class="sf-checkbox -ellipsis">
   *        <input type="checkbox" class="sf-checkbox__input" id="id_6" checked />
   *        <label class="sf-checkbox__label" for="id_6">
   *             <span class="sf-checkbox__icon"></span>
   *              <span class="sf-checkbox__text">Checkbox ellipsis</span>
   *          </label>
   *    </div>
   *</div>
   */
  /***
   * Radio:
   */
  /**
   * Default Radio Button:
   * `.sf-radio`
   *
   *     @example
   *<div class="sf-radio">
   *     <input type="radio" class="sf-radio__input" name="navigation" id="radio_1"/>
   *     <label class="sf-radio__label" for="radio_1">
   *         <span class="sf-radio__icon"></span>
   *          <span class="sf-radio__text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
   *     </label>
   *</div>
   *<div class="sf-radio">
   *     <input type="radio" class="sf-radio__input" name="navigation" id="radio_2" disabled />
   *     <label class="sf-radio__label" for="radio_2">
   *         <span class="sf-radio__icon"></span>
   *          <span class="sf-radio__text">Radio label</span>
   *     </label>
   *</div>
   *<div class="sf-radio">
   *     <input type="radio" class="sf-radio__input" name="navigation" id="radio_3" checked/>
   *     <label class="sf-radio__label" for="radio_3">
   *         <span class="sf-radio__icon"></span>
   *          <span class="sf-radio__text">Radio label</span>
   *     </label>
   *</div>
   */
  /**
   * Radio Button Without a Label:
   * `.sf-radio`
   *
   *     @example
   *<div class="sf-radio">
   *     <input type="radio" class="sf-radio__input" name="navigation1" id="radio_5" checked />
   *     <label class="sf-radio__label" for="radio_5">
   *         <span class="sf-radio__icon"></span>
   *     </label>
   *</div>
   */
  /**
   * Radio Button Ellipsis:
   * `.sf-radio.-ellipsis`
   *
   *     @example
   *<div style="width: 100px">
   *    <div class="sf-radio -ellipsis">
   *         <input type="radio" class="sf-radio__input" name="navigation2" id="radio_6" />
   *         <label class="sf-radio__label" for="radio_6">
   *             <span class="sf-radio__icon"></span>
   *             <span class="sf-radio__text">Radio label ellipsis</span>
   *         </label>
   *    </div>
   *</div>
   */
  /***
   * Loader:
   */
  /**
   * Loader:
   * `.sf-loader`
   *
   *     @example
   *     <div class="sf-loader">
   *  	 <div class="sf-loader__content">
   *		  <div class="sf-loader__rect -first"></div>
   *		  <div class="sf-loader__rect -second"></div>
   *	      <div class="sf-loader__rect -third"></div>
   *	    </div>
   *    </div>
   */
  /**
   * Loader Big:
   * `.sf-loader.-big`
   *
   *     @example
   *     <div class="sf-loader -big">
   *  	 <div class="sf-loader__content">
   *		  <div class="sf-loader__rect -first"></div>
   *		  <div class="sf-loader__rect -second"></div>
   *	      <div class="sf-loader__rect -third"></div>
   *	    </div>
   *    </div>
   */
  /**
  * Loader Mini:
  * `.sf-loader.-mini`
  *
  *     @example
  *     <div class="sf-loader -mini">
  *  	 <div class="sf-loader__content">
  *		  <div class="sf-loader__rect -first"></div>
  *		  <div class="sf-loader__rect -second"></div>
  *	      <div class="sf-loader__rect -third"></div>
  *	    </div>
  *    </div>
  */
  /**
   * Loader Color:
   * `.sf-loader.-color`
   *
   *     @example
   *     <div class="sf-loader -color">
   *  	 <div class="sf-loader__content">
   *		  <div class="sf-loader__rect -first"></div>
   *		  <div class="sf-loader__rect -second"></div>
   *	      <div class="sf-loader__rect -third"></div>
   *	    </div>
   *    </div>
   */
  /**
  * Loader Progressbar:
  * `.sf-loader.-progressbar`
  *
  *     @example
  *     <div class="sf-loader -progressbar">
  *  	 <div class="sf-loader__content">
  *	    </div>
  *    </div>
  */
  /**
  * Loader Skeleton Content:
  * `.sf-loader.-skeleton.-content`
  *
  *     @example
  *     <div class="sf-loader -skeleton -content">
  *  	 <div class="sf-loader__content">
  *	    </div>
  *    </div>
  */
  /**
  * Loader Skeleton Title:
  * `.sf-loader.-skeleton.-title`
  *
  *     @example
  *     <div class="sf-loader -skeleton -title">
  *  	 <div class="sf-loader__content">
  *	    </div>
  *    </div>
  */
  /**
  * Loader Skeleton List:
  * `.sf-loader.-skeleton.-list`
  *
  *     @example
  *     <div class="sf-loader -skeleton -list">
  *  	 <div class="sf-loader__content">
  *	    </div>
  *    </div>
  */
  /**
  * Loader Skeleton Horizontal List:
  * `.sf-loader.-skeleton.-list-horizontal`
  *
  *     @example
  *     <div class="sf-loader -skeleton -list-horizontal">
  *  	 <div class="sf-loader__content">
  *	    </div>
  *    </div>
  */
  /**
  * Loader Skeleton Horizontal List With Thumbnail:
  * `.sf-loader.-skeleton.-list-with-thumb`
  *
  *     @example
  *     <div class="sf-loader -skeleton -list-with-thumb">
  *  	 <div class="sf-loader__content">
  *	    </div>
  *    </div>
  */
  /**
  * Loader Skeleton side-content:
  * `.sf-loader.-skeleton.-side-content.-darker`
  *
  *     @example
  *     <div class="sf-loader -skeleton -side-content -darker">
  *  	 <div class="sf-loader__content">
  *	    </div>
  *    </div>
  */
  /***
   * Chips:
   */
  /**
   * Chip:
   * `.sf-chip`
   *
   *     @example
   *     <div class="sf-chip">
   *         <div class="sf-chip__content">
   *             Default chip
   *         </div>
   *     </div>
   *     <div class="sf-chip -removable">
   *         <div class="sf-chip__content">
   *             Default chip with remove
   *         </div>
   *         <i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
   *     </div>
   */
  /**
   * success Chip:
   * `.sf-chip.-success`
   *
   *     @example
   *     <div class="sf-chip -success">
   *         <div class="sf-chip__content">
   *             success chip
   *         </div>
   *     </div>
   *     <div class="sf-chip -success -removable">
   *         <div class="sf-chip__content">
   *             success chip with remove
   *         </div>
   *         <i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
   *     </div>
   */
  /**
   * error Chip:
   * `.sf-chip.-error`
   *
   *     @example
   *     <div class="sf-chip -error">
   *         <div class="sf-chip__content">
   *             error chip
   *         </div>
   *     </div>
   *     <div class="sf-chip -error -removable">
   *         <div class="sf-chip__content">
   *             error chip with remove
   *         </div>
   *         <i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
   *     </div>
   */
  /**
   * invert Chip:
   * `.sf-chip.-invert`
   *
   *     @example
   *     <div class="sf-chip -invert">
   *         <div class="sf-chip__content">
   *             invert chip
   *         </div>
   *     </div>
   *     <div class="sf-chip -invert -removable">
   *         <div class="sf-chip__content">
   *             invert chip with remove
   *         </div>
   *         <i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
   *     </div>
   */
  /**
   * Chip with avatar:
   *
   *     @example
   *     <div class="sf-chip -avatar  -removable">
   *         <span class="sf-chip__avatar">
   *              <img class="sf-chip__image" src="https://d117h1jjiq768j.cloudfront.net/images/default-source/company-section/yogesh_gupta-11-16-16.png?sfvrsn=f938a1d9_1" alt="Avatar Image" />
   *         </span>
   *         <span class="sf-chip__content">
   *              John Smith
   *         </span>
   *         <i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
   *     </div>
   */
  /**
   * Chip with icon:
   *
   *     @example
   *     <div class="sf-chip -removable -icon">
   *         <span class="sf-chip__icon">
   *              <span class="sf-fa sf-fa-users"></span>
   *         </span>
   *         <span class="sf-chip__content">
   *              John Smith
   *         </span>
   *         <i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
   *     </div>
   */
  /**
   * Chip with initials:
   *
   *     @example
   *     <div class="sf-chip -initials -removable">
   *         <span class="sf-chip__initials">
   *              JS
   *         </span>
   *         <span class="sf-chip__content">
   *              John Smith
   *         </span>
   *         <i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
   *     </div>
   */
  /**
   * Editable chip:
   *
   *     @example
   *     <div class="sf-chip -editable">
   *         <span class="sf-chip__content" contenteditable="true"></span>
   *     </div>
   */
  /**
  * Chip with popup with suggestions:
  *
  *     @example
  *     <div class="sf-chip -editable -dropdown -dropped">
  *         <span class="sf-chip__content" contenteditable="true"></span>
  *        <div class="sf-dropdown sf-chip__dropdown">
  *           <div class="sf-dropdown__heading">
  *               Recent
  *           </div>
  *           <div class="sf-dropdown__item">
  *             european
  *           </div>
  *           <div class="sf-dropdown__item">
  *             evacuation
  *           </div>
  *           <div class="sf-dropdown__item">
  *             event
  *           </div>
  *         </div>
  *     </div>
  */
  /**
  * Chip with popup with suggestions that looks like an input:
  *
  *     @example
  *     <div class="sf-chip -editable -dropdown -dropped -input">
  *         <span class="sf-chip__content" contenteditable="true"></span>
  *        <div class="sf-dropdown sf-chip__dropdown">
  *           <div class="sf-dropdown__heading">
  *               Recent
  *           </div>
  *           <div class="sf-dropdown__item">
  *             european
  *           </div>
  *           <div class="sf-dropdown__item">
  *             evacuation
  *           </div>
  *           <div class="sf-dropdown__item">
  *             event
  *           </div>
  *         </div>
  *     </div>
  */
  /***
   * Error:
   */
  /**
   * Default:
   * `.sf-error`
   *
   *     @example
   *     <div class="sf-error">This is an error!</div>
   *     <div class="sf-error-block">This is an error block!</div>
   */
  /***
   * Select:
   */
  /**
   * Large select:
   * `.sf-select`
   *
   *     @example
   *<div class="sf-select">
   *     <select class="sf-select__item">
   *         <option>Option 1</option>
   *         <option>Option 2</option>
   *         <option>Option 3</option>
   *     </select>
   *</div>
   */
  /**
   * Small select:
   * `.sf-select.-small`
   *
   *     @example
   *<div class="sf-select -small">
   *     <select class="sf-select__item">
   *         <option>Option 1</option>
   *         <option>Option 2</option>
   *         <option>Option 3</option>
   *     </select>
   *</div>
   */
  /***
   * Form:
   */
  /**
   * Default, Small, Large:
   * `.sf-form, .sf-form.-small, .sf-form.-large`
   *
   *     @example
   *     <div class="sf-form">
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_1">
   *                  <span>Field 1</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_1" placeholder="Search the blog..." />
   *         <p class="sf-input__required" style="display: block">Field is required</p>
   *         <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
   *          </div>
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_2">
   *                  <span>Field 2</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_2" placeholder="Search the blog..." />
   *          </div>
   *     </div>
   *     <div class="sf-form -small">
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_3">
   *                  <span>Field 1</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_3" placeholder="Search the blog..." />
   *         <p class="sf-input__required" style="display: block">Field is required</p>
   *         <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
   *          </div>
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_4">
   *                  <span>Field 2</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_4" placeholder="Search the blog..." />
   *          </div>
   *      </div>
   *     <div class="sf-form -large">
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_5">
   *                  <span>Field 1</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_5" placeholder="Search the blog..." />
   *              <p class="sf-input__required" style="display: block">Field is required</p>
   *              <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
   *          </div>
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_6">
   *                  <span>Field 2</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_6" placeholder="Search the blog..." />
   *          </div>
   *      </div>
   */
  /**
   * Medium Form:
   * `.sf-form.-medium`
   *
   *     @example
   *     <div class="sf-form -medium">
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_3">
   *                  <span>Field 1</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_3" placeholder="Search the blog ..." />
   *         <p class="sf-input__required" style="display: block">Field is required</p>
   *         <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
   *          </div>
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_4">
   *                  <span>Field 2</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_4" placeholder="Search the blog ..." />
   *          </div>
   *      </div>
   */
  /**
   * Framed:
   * `.sf-form.-framed`
   *
   *     @example
   *     <div class="sf-form -framed">
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_7">
   *                  <span>Field 1</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_7" placeholder="Search the blog..." />
   *          </div>
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_8">
   *                  <span>Field 2</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_8" placeholder="Search the blog..." />
   *          </div>
   *     </div>
   */
  /**
   * Condensed:
   * `.sf-form.-condensed`
   *
   *     @example
   *     <div class="sf-form -condensed">
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_9">
   *                  <span>Field 1</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_9" placeholder="Search the blog..." />
   *         <p class="sf-input__required" style="display: block">Field is required</p>
   *         <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
   *          </div>
   *          <div class="sf-input">
   *              <label class="sf-input__label" for="form_input_10">
   *                  <span>Field 2</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_10" placeholder="Search the blog..." />
   *          </div>
   *     </div>
   */
  /**
   * Shrinked row — no bottom margin:
   * `.sf-form > .sf-input.-shrinked`
   *
   *     @example
   *     <div class="sf-form">
   *          <div class="sf-input -shrinked">
   *              <label class="sf-input__label" for="form_input_11">
   *                  <span>Field 1</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_11" placeholder="Search the blog..." />
   *              <p class="sf-input__required" style="display: block">Field is required</p>
   *              <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
   *          </div>
   *          <div class="sf-input -shrinked">
   *              <label class="sf-input__label" for="form_input_12">
   *                  <span>Field 2</span>
   *              </label>
   *              <input type="text" class="sf-input__field" id="form_input_12" placeholder="Search the blog..." />
   *          </div>
   *     </div>
   */
  /***
  * Link:
  */
  /**
  * Default and secondary links:
  *
  *     @example
  *     <span tabindex="0" class="sf-link">Default link</span><br>
  *     <span tabindex="0" class="sf-link -secondary">Secondary link</span>
  */
  /**
  * Navigation links:
  *
  *     @example
  *     <span tabindex="0" class="sf-link -side">Navigation link</span><br>
  *     <span tabindex="0" class="sf-link -side -active">Settings link</span>
  */
  /**
  * Section nav links:
  *
  *     @example
  *     <span tabindex="0" class="sf-link -side-secondary">Categories and tags</span><br>
  *     <span tabindex="0" class="sf-link -side-secondary -active">Search engine optimi...</span><br>
  *     <span tabindex="0" class="sf-link -side-secondary">Social media</span><br>
  */
  /**
  * Basic links:
  *
  *     @example
  *     <span tabindex="0" class="sf-link -basic">Categories and tags</span><br>
  */
  /**
  * Toolbar links:
  *
  *     @example
  *     <div class="sf-top-toolbar" style="position: static;">
  *       <span tabindex="0" class="sf-link -top-toolbar">Categories and tags</span><br>
  *       <span tabindex="0" class="sf-link -top-toolbar -active">Categories and tags</span><br>
  *     </div>
  */
}
sf-app.sf-app h1, sf-app.sf-app h2, sf-app.sf-app h3, sf-app.sf-app h4, sf-app.sf-app h5, sf-app.sf-app h6,
sf-app.sf-app p, sf-app.sf-app blockquote, sf-app.sf-app pre,
sf-app.sf-app dl, sf-app.sf-app dd, sf-app.sf-app ol, sf-app.sf-app ul,
sf-app.sf-app form, sf-app.sf-app fieldset, sf-app.sf-app legend,
sf-app.sf-app table, sf-app.sf-app th, sf-app.sf-app td, sf-app.sf-app caption,
sf-app.sf-app hr {
  margin: 0;
  padding: 0;
}
sf-app.sf-app abbr[title],
sf-app.sf-app dfn[title] {
  cursor: help;
}
sf-app.sf-app u,
sf-app.sf-app ins {
  text-decoration: none;
  border-bottom: 1px solid;
}
sf-app.sf-app article,
sf-app.sf-app aside,
sf-app.sf-app details,
sf-app.sf-app figcaption,
sf-app.sf-app figure,
sf-app.sf-app footer,
sf-app.sf-app header,
sf-app.sf-app hgroup,
sf-app.sf-app main,
sf-app.sf-app nav,
sf-app.sf-app section,
sf-app.sf-app summary {
  display: block;
}
sf-app.sf-app audio,
sf-app.sf-app canvas,
sf-app.sf-app progress,
sf-app.sf-app video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
sf-app.sf-app audio:not([controls]) {
  display: none;
  height: 0;
}
sf-app.sf-app [hidden],
sf-app.sf-app template {
  display: none;
}
sf-app.sf-app a {
  background: transparent;
}
sf-app.sf-app a:active,
sf-app.sf-app a:hover {
  outline: 0;
}
sf-app.sf-app abbr[title] {
  border-bottom: 1px dotted;
}
sf-app.sf-app b,
sf-app.sf-app strong {
  font-weight: bold;
}
sf-app.sf-app dfn {
  font-style: italic;
}
sf-app.sf-app h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
sf-app.sf-app mark {
  background: #FFFFCC;
  color: #333;
}
sf-app.sf-app small {
  font-size: 80%;
}
sf-app.sf-app sub,
sf-app.sf-app sup {
  font-size: 75%;
  line-height: 0;
}
sf-app.sf-app img {
  border: 0;
}
sf-app.sf-app svg:not(:root) {
  overflow: hidden;
}
sf-app.sf-app figure {
  margin: 1em 40px;
}
sf-app.sf-app hr {
  box-sizing: content-box;
  height: 0;
}
sf-app.sf-app pre {
  overflow: auto;
}
sf-app.sf-app code,
sf-app.sf-app kbd,
sf-app.sf-app pre,
sf-app.sf-app samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
sf-app.sf-app button,
sf-app.sf-app input,
sf-app.sf-app optgroup,
sf-app.sf-app select,
sf-app.sf-app textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
sf-app.sf-app button {
  overflow: visible;
}
sf-app.sf-app button,
sf-app.sf-app select {
  text-transform: none;
}
sf-app.sf-app button,
sf-app.sf-app sf-app.sf-app input[type=button],
sf-app.sf-app input[type=reset],
sf-app.sf-app input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}
sf-app.sf-app button[disabled],
sf-app.sf-app sf-app.sf-app input[disabled] {
  cursor: default;
}
sf-app.sf-app input {
  line-height: normal;
}
sf-app.sf-app input[type=checkbox],
sf-app.sf-app input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
sf-app.sf-app input[type=number]::-webkit-inner-spin-button,
sf-app.sf-app input[type=number]::-webkit-outer-spin-button {
  height: auto;
}
sf-app.sf-app input[type=search]::-webkit-search-cancel-button,
sf-app.sf-app input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
sf-app.sf-app fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
sf-app.sf-app legend {
  border: 0;
  padding: 0;
}
sf-app.sf-app textarea {
  overflow: auto;
}
sf-app.sf-app optgroup {
  font-weight: bold;
}
sf-app.sf-app table {
  border-collapse: collapse;
  border-spacing: 0;
}
sf-app.sf-app td,
sf-app.sf-app th {
  padding: 0;
}
sf-app.sf-app ol {
  list-style-position: inside;
}
sf-app.sf-app *,
sf-app.sf-app *:before,
sf-app.sf-app *:after,
sf-app.sf-app sf-app.sf-app .k-editor *,
sf-app.sf-app sf-app.sf-app .k-editor *:before {
  box-sizing: border-box;
}
sf-app.sf-app a {
  color: var(--link-color);
  text-decoration: none;
  cursor: pointer;
}
sf-app.sf-app a.-secondary {
  color: var(--link-secondary-color);
}
sf-app.sf-app a:hover, sf-app.sf-app a:active, sf-app.sf-app a:focus {
  color: #333;
}
sf-app.sf-app a.-no-hover:hover, sf-app.sf-app a.-no-hover:active, sf-app.sf-app a.-no-hover:focus {
  color: var(--link-color);
}
sf-app.sf-app a.-side {
  display: inline-block;
  margin-bottom: 2px;
  padding: 3px 6px;
  color: #333;
}
sf-app.sf-app a.-side.-active, sf-app.sf-app a.-side:focus, sf-app.sf-app a.-side:hover {
  background-color: #e4e4e4;
  border-radius: 2px;
}
sf-app.sf-app a.-side-secondary {
  color: var(--link-side-secondary-color);
}
sf-app.sf-app a.-side-secondary:hover {
  color: var(--link-side-secondary-color-hover);
}
sf-app.sf-app a.-side-secondary.-active {
  color: var(--link-side-secondary-color-active);
}
sf-app.sf-app a.-basic {
  color: #333;
}
sf-app.sf-app a.-basic:hover, sf-app.sf-app a.-basic:active, sf-app.sf-app a.-basic:focus {
  color: #333;
}
sf-app.sf-app a.-top-toolbar {
  align-items: center;
  justify-content: center;
  display: inline-flex;
  padding: 0 10px;
  color: #333;
  border: 0;
  background-color: #fff;
  border-radius: 0;
  height: 100%;
}
sf-app.sf-app a.-top-toolbar.-active, sf-app.sf-app a.-top-toolbar:focus, sf-app.sf-app a.-top-toolbar:hover {
  color: #333;
  background-color: #f5f5f5;
  border-color: #eee;
}
sf-app.sf-app ul.-list-style-none, sf-app.sf-app ol.-list-style-none {
  list-style: none;
}
sf-app.sf-app ul.-list-style-disc, sf-app.sf-app ol.-list-style-disc {
  list-style: disc;
}
sf-app.sf-app ul.-list-inline li, sf-app.sf-app ol.-list-inline li {
  display: inline-block;
}
sf-app.sf-app ul.-full-height, sf-app.sf-app ol.-full-height {
  height: 100%;
}
sf-app.sf-app ul.-full-height li, sf-app.sf-app ol.-full-height li {
  height: 100%;
}
sf-app.sf-app .-sf-mt-zero {
  margin-top: 0 !important;
}
sf-app.sf-app .-sf-mt-4xs {
  margin-top: 5px !important;
}
sf-app.sf-app .-sf-mt-3xs {
  margin-top: 10px !important;
}
sf-app.sf-app .-sf-mt-2xs {
  margin-top: 15px !important;
}
sf-app.sf-app .-sf-mt-xs {
  margin-top: 20px !important;
}
sf-app.sf-app .-sf-mt-s {
  margin-top: 25px !important;
}
sf-app.sf-app .-sf-mt-m {
  margin-top: 30px !important;
}
sf-app.sf-app .-sf-mt-l {
  margin-top: 35px !important;
}
sf-app.sf-app .-sf-mt-xl {
  margin-top: 40px !important;
}
sf-app.sf-app .-sf-mt-2xl {
  margin-top: 45px !important;
}
sf-app.sf-app .-sf-mt-3xl {
  margin-top: 50px !important;
}
sf-app.sf-app .-sf-mt-4xl {
  margin-top: 55px !important;
}
sf-app.sf-app .-sf-mt-5xl {
  margin-top: 60px !important;
}
sf-app.sf-app .-sf-mt-6xl {
  margin-top: 80px !important;
}
sf-app.sf-app .-sf-mt-7xl {
  margin-top: 100px !important;
}
sf-app.sf-app .-sf-mt-8xl {
  margin-top: 120px !important;
}
sf-app.sf-app .-sf-mt-9xl {
  margin-top: 140px !important;
}
sf-app.sf-app .-sf-mt-10xl {
  margin-top: 160px !important;
}
sf-app.sf-app .-sf-mt-11xl {
  margin-top: 180px !important;
}
sf-app.sf-app .-sf-mt-12xl {
  margin-top: 200px !important;
}
sf-app.sf-app .-sf-mb-zero {
  margin-bottom: 0 !important;
}
sf-app.sf-app .-sf-mb-4xs {
  margin-bottom: 5px !important;
}
sf-app.sf-app .-sf-mb-3xs {
  margin-bottom: 10px !important;
}
sf-app.sf-app .-sf-mb-2xs {
  margin-bottom: 15px !important;
}
sf-app.sf-app .-sf-mb-xs {
  margin-bottom: 20px !important;
}
sf-app.sf-app .-sf-mb-s {
  margin-bottom: 25px !important;
}
sf-app.sf-app .-sf-mb-m {
  margin-bottom: 30px !important;
}
sf-app.sf-app .-sf-mb-l {
  margin-bottom: 35px !important;
}
sf-app.sf-app .-sf-mb-xl {
  margin-bottom: 40px !important;
}
sf-app.sf-app .-sf-mb-2xl {
  margin-bottom: 45px !important;
}
sf-app.sf-app .-sf-mb-3xl {
  margin-bottom: 50px !important;
}
sf-app.sf-app .-sf-mb-4xl {
  margin-bottom: 55px !important;
}
sf-app.sf-app .-sf-mb-5xl {
  margin-bottom: 60px !important;
}
sf-app.sf-app .-sf-mb-6xl {
  margin-bottom: 80px !important;
}
sf-app.sf-app .-sf-mb-7xl {
  margin-bottom: 100px !important;
}
sf-app.sf-app .-sf-mb-8xl {
  margin-bottom: 120px !important;
}
sf-app.sf-app .-sf-ml-zero {
  margin-left: 0 !important;
}
sf-app.sf-app .-sf-ml-4xs {
  margin-left: 5px !important;
}
sf-app.sf-app .-sf-ml-3xs {
  margin-left: 10px !important;
}
sf-app.sf-app .-sf-ml-2xs {
  margin-left: 15px !important;
}
sf-app.sf-app .-sf-ml-xs {
  margin-left: 20px !important;
}
sf-app.sf-app .-sf-ml-s {
  margin-left: 25px !important;
}
sf-app.sf-app .-sf-ml-m {
  margin-left: 30px !important;
}
sf-app.sf-app .-sf-ml-l {
  margin-left: 35px !important;
}
sf-app.sf-app .-sf-ml-xl {
  margin-left: 40px !important;
}
sf-app.sf-app .-sf-ml-2xl {
  margin-left: 45px !important;
}
sf-app.sf-app .-sf-ml-3xl {
  margin-left: 50px !important;
}
sf-app.sf-app .-sf-ml-4xl {
  margin-left: 55px !important;
}
sf-app.sf-app .-sf-ml-5xl {
  margin-left: 60px !important;
}
sf-app.sf-app .-sf-ml-6xl {
  margin-left: 80px !important;
}
sf-app.sf-app .-sf-ml-7xl {
  margin-left: 100px !important;
}
sf-app.sf-app .-sf-ml-8xl {
  margin-left: 120px !important;
}
sf-app.sf-app .-sf-mr-zero {
  margin-right: 0 !important;
}
sf-app.sf-app .-sf-mr-4xs {
  margin-right: 5px !important;
}
sf-app.sf-app .-sf-mr-3xs {
  margin-right: 10px !important;
}
sf-app.sf-app .-sf-mr-2xs {
  margin-right: 15px !important;
}
sf-app.sf-app .-sf-mr-xs {
  margin-right: 20px !important;
}
sf-app.sf-app .-sf-mr-s {
  margin-right: 25px !important;
}
sf-app.sf-app .-sf-mr-m {
  margin-right: 30px !important;
}
sf-app.sf-app .-sf-mr-l {
  margin-right: 35px !important;
}
sf-app.sf-app .-sf-mr-xl {
  margin-right: 40px !important;
}
sf-app.sf-app .-sf-mr-2xl {
  margin-right: 45px !important;
}
sf-app.sf-app .-sf-mr-3xl {
  margin-right: 50px !important;
}
sf-app.sf-app .-sf-mr-4xl {
  margin-right: 55px !important;
}
sf-app.sf-app .-sf-mr-5xl {
  margin-right: 60px !important;
}
sf-app.sf-app .-sf-mr-6xl {
  margin-right: 80px !important;
}
sf-app.sf-app .-sf-mr-7xl {
  margin-right: 100px !important;
}
sf-app.sf-app .-sf-mr-8xl {
  margin-right: 120px !important;
}
sf-app.sf-app .-sf-m-zero {
  margin: 0 !important;
}
sf-app.sf-app .-sf-m-4xs {
  margin: 5px !important;
}
sf-app.sf-app .-sf-m-3xs {
  margin: 10px !important;
}
sf-app.sf-app .-sf-m-2xs {
  margin: 15px !important;
}
sf-app.sf-app .-sf-m-xs {
  margin: 20px !important;
}
sf-app.sf-app .-sf-m-s {
  margin: 25px !important;
}
sf-app.sf-app .-sf-m-m {
  margin: 30px !important;
}
sf-app.sf-app .-sf-m-l {
  margin: 35px !important;
}
sf-app.sf-app .-sf-m-xl {
  margin: 40px !important;
}
sf-app.sf-app .-sf-m-2xl {
  margin: 45px !important;
}
sf-app.sf-app .-sf-m-3xl {
  margin: 50px !important;
}
sf-app.sf-app .-sf-m-4xl {
  margin: 55px !important;
}
sf-app.sf-app .-sf-m-5xl {
  margin: 60px !important;
}
sf-app.sf-app .-sf-m-6xl {
  margin: 80px !important;
}
sf-app.sf-app .-sf-m-7xl {
  margin: 100px !important;
}
sf-app.sf-app .-sf-m-8xl {
  margin: 120px !important;
}
sf-app.sf-app .-sf-mt-8xs {
  margin-top: 1px !important;
}
sf-app.sf-app .-sf-mt-7xs {
  margin-top: 2px !important;
}
sf-app.sf-app .-sf-mt-6xs {
  margin-top: 3px !important;
}
sf-app.sf-app .-sf-mt-5xs {
  margin-top: 4px !important;
}
sf-app.sf-app .-sf-mb-8xs {
  margin-bottom: 1px !important;
}
sf-app.sf-app .-sf-mb-7xs {
  margin-bottom: 2px !important;
}
sf-app.sf-app .-sf-mb-6xs {
  margin-bottom: 3px !important;
}
sf-app.sf-app .-sf-mb-5xs {
  margin-bottom: 4px !important;
}
sf-app.sf-app .-sf-ml-8xs {
  margin-left: 1px !important;
}
sf-app.sf-app .-sf-ml-7xs {
  margin-left: 2px !important;
}
sf-app.sf-app .-sf-ml-6xs {
  margin-left: 3px !important;
}
sf-app.sf-app .-sf-ml-5xs {
  margin-left: 4px !important;
}
sf-app.sf-app .-sf-mr-8xs {
  margin-right: 1px !important;
}
sf-app.sf-app .-sf-mr-7xs {
  margin-right: 2px !important;
}
sf-app.sf-app .-sf-mr-6xs {
  margin-right: 3px !important;
}
sf-app.sf-app .-sf-mr-5xs {
  margin-right: 4px !important;
}
sf-app.sf-app .-sf-mt--4xs {
  margin-top: -5px !important;
}
sf-app.sf-app .-sf-mt--3xs {
  margin-top: -10px !important;
}
sf-app.sf-app .-sf-mt--2xs {
  margin-top: -15px !important;
}
sf-app.sf-app .-sf-mt--xs {
  margin-top: -20px !important;
}
sf-app.sf-app .-sf-mt--s {
  margin-top: -25px !important;
}
sf-app.sf-app .-sf-mt--m {
  margin-top: -30px !important;
}
sf-app.sf-app .-sf-mt--l {
  margin-top: -35px !important;
}
sf-app.sf-app .-sf-mt--xl {
  margin-top: -40px !important;
}
sf-app.sf-app .-sf-mt--2xl {
  margin-top: -45px !important;
}
sf-app.sf-app .-sf-mt--3xl {
  margin-top: -50px !important;
}
sf-app.sf-app .-sf-mt--4xl {
  margin-top: -55px !important;
}
sf-app.sf-app .-sf-mt--5xl {
  margin-top: -60px !important;
}
sf-app.sf-app .-sf-mt--6xl {
  margin-top: -80px !important;
}
sf-app.sf-app .-sf-mb--4xs {
  margin-bottom: -5px !important;
}
sf-app.sf-app .-sf-mb--3xs {
  margin-bottom: -10px !important;
}
sf-app.sf-app .-sf-mb--2xs {
  margin-bottom: -15px !important;
}
sf-app.sf-app .-sf-mb--xs {
  margin-bottom: -20px !important;
}
sf-app.sf-app .-sf-mb--s {
  margin-bottom: -25px !important;
}
sf-app.sf-app .-sf-mb--m {
  margin-bottom: -30px !important;
}
sf-app.sf-app .-sf-mb--l {
  margin-bottom: -35px !important;
}
sf-app.sf-app .-sf-mb--xl {
  margin-bottom: -40px !important;
}
sf-app.sf-app .-sf-mb--2xl {
  margin-bottom: -45px !important;
}
sf-app.sf-app .-sf-mb--3xl {
  margin-bottom: -50px !important;
}
sf-app.sf-app .-sf-mb--4xl {
  margin-bottom: -55px !important;
}
sf-app.sf-app .-sf-mb--5xl {
  margin-bottom: -60px !important;
}
sf-app.sf-app .-sf-mb--6xl {
  margin-bottom: -80px !important;
}
sf-app.sf-app .-sf-ml--4xs {
  margin-left: -5px !important;
}
sf-app.sf-app .-sf-ml--3xs {
  margin-left: -10px !important;
}
sf-app.sf-app .-sf-ml--2xs {
  margin-left: -15px !important;
}
sf-app.sf-app .-sf-ml--xs {
  margin-left: -20px !important;
}
sf-app.sf-app .-sf-ml--s {
  margin-left: -25px !important;
}
sf-app.sf-app .-sf-ml--m {
  margin-left: -30px !important;
}
sf-app.sf-app .-sf-ml--l {
  margin-left: -35px !important;
}
sf-app.sf-app .-sf-ml--xl {
  margin-left: -40px !important;
}
sf-app.sf-app .-sf-ml--2xl {
  margin-left: -45px !important;
}
sf-app.sf-app .-sf-ml--3xl {
  margin-left: -50px !important;
}
sf-app.sf-app .-sf-ml--4xl {
  margin-left: -55px !important;
}
sf-app.sf-app .-sf-ml--5xl {
  margin-left: -60px !important;
}
sf-app.sf-app .-sf-ml--6xl {
  margin-left: -80px !important;
}
sf-app.sf-app .-sf-mr--4xs {
  margin-right: -5px !important;
}
sf-app.sf-app .-sf-mr--3xs {
  margin-right: -10px !important;
}
sf-app.sf-app .-sf-mr--2xs {
  margin-right: -15px !important;
}
sf-app.sf-app .-sf-mr--xs {
  margin-right: -20px !important;
}
sf-app.sf-app .-sf-mr--s {
  margin-right: -25px !important;
}
sf-app.sf-app .-sf-mr--m {
  margin-right: -30px !important;
}
sf-app.sf-app .-sf-mr--l {
  margin-right: -35px !important;
}
sf-app.sf-app .-sf-mr--xl {
  margin-right: -40px !important;
}
sf-app.sf-app .-sf-mr--2xl {
  margin-right: -45px !important;
}
sf-app.sf-app .-sf-mr--3xl {
  margin-right: -50px !important;
}
sf-app.sf-app .-sf-mr--4xl {
  margin-right: -55px !important;
}
sf-app.sf-app .-sf-mr--5xl {
  margin-right: -60px !important;
}
sf-app.sf-app .-sf-mr--6xl {
  margin-right: -80px !important;
}
sf-app.sf-app .-sf-pt-zero {
  padding-top: 0 !important;
}
sf-app.sf-app .-sf-pt-4xs {
  padding-top: 5px !important;
}
sf-app.sf-app .-sf-pt-3xs {
  padding-top: 10px !important;
}
sf-app.sf-app .-sf-pt-2xs {
  padding-top: 15px !important;
}
sf-app.sf-app .-sf-pt-xs {
  padding-top: 20px !important;
}
sf-app.sf-app .-sf-pt-s {
  padding-top: 25px !important;
}
sf-app.sf-app .-sf-pt-m {
  padding-top: 30px !important;
}
sf-app.sf-app .-sf-pt-l {
  padding-top: 35px !important;
}
sf-app.sf-app .-sf-pt-xl {
  padding-top: 40px !important;
}
sf-app.sf-app .-sf-pt-2xl {
  padding-top: 45px !important;
}
sf-app.sf-app .-sf-pt-3xl {
  padding-top: 50px !important;
}
sf-app.sf-app .-sf-pt-4xl {
  padding-top: 55px !important;
}
sf-app.sf-app .-sf-pt-5xl {
  padding-top: 60px !important;
}
sf-app.sf-app .-sf-pt-6xl {
  padding-top: 80px !important;
}
sf-app.sf-app .-sf-pt-7xl {
  padding-top: 100px !important;
}
sf-app.sf-app .-sf-pt-8xl {
  padding-top: 120px !important;
}
sf-app.sf-app .-sf-pb-zero {
  padding-bottom: 0 !important;
}
sf-app.sf-app .-sf-pb-4xs {
  padding-bottom: 5px !important;
}
sf-app.sf-app .-sf-pb-3xs {
  padding-bottom: 10px !important;
}
sf-app.sf-app .-sf-pb-2xs {
  padding-bottom: 15px !important;
}
sf-app.sf-app .-sf-pb-xs {
  padding-bottom: 20px !important;
}
sf-app.sf-app .-sf-pb-s {
  padding-bottom: 25px !important;
}
sf-app.sf-app .-sf-pb-m {
  padding-bottom: 30px !important;
}
sf-app.sf-app .-sf-pb-l {
  padding-bottom: 35px !important;
}
sf-app.sf-app .-sf-pb-xl {
  padding-bottom: 40px !important;
}
sf-app.sf-app .-sf-pb-2xl {
  padding-bottom: 45px !important;
}
sf-app.sf-app .-sf-pb-3xl {
  padding-bottom: 50px !important;
}
sf-app.sf-app .-sf-pb-4xl {
  padding-bottom: 55px !important;
}
sf-app.sf-app .-sf-pb-5xl {
  padding-bottom: 60px !important;
}
sf-app.sf-app .-sf-pb-6xl {
  padding-bottom: 80px !important;
}
sf-app.sf-app .-sf-pb-7xl {
  padding-bottom: 100px !important;
}
sf-app.sf-app .-sf-pb-8xl {
  padding-bottom: 120px !important;
}
sf-app.sf-app .-sf-pl-zero {
  padding-left: 0 !important;
}
sf-app.sf-app .-sf-pl-4xs {
  padding-left: 5px !important;
}
sf-app.sf-app .-sf-pl-3xs {
  padding-left: 10px !important;
}
sf-app.sf-app .-sf-pl-2xs {
  padding-left: 15px !important;
}
sf-app.sf-app .-sf-pl-xs {
  padding-left: 20px !important;
}
sf-app.sf-app .-sf-pl-s {
  padding-left: 25px !important;
}
sf-app.sf-app .-sf-pl-m {
  padding-left: 30px !important;
}
sf-app.sf-app .-sf-pl-l {
  padding-left: 35px !important;
}
sf-app.sf-app .-sf-pl-xl {
  padding-left: 40px !important;
}
sf-app.sf-app .-sf-pl-2xl {
  padding-left: 45px !important;
}
sf-app.sf-app .-sf-pl-3xl {
  padding-left: 50px !important;
}
sf-app.sf-app .-sf-pl-4xl {
  padding-left: 55px !important;
}
sf-app.sf-app .-sf-pl-5xl {
  padding-left: 60px !important;
}
sf-app.sf-app .-sf-pl-6xl {
  padding-left: 80px !important;
}
sf-app.sf-app .-sf-pl-7xl {
  padding-left: 100px !important;
}
sf-app.sf-app .-sf-pl-8xl {
  padding-left: 120px !important;
}
sf-app.sf-app .-sf-pr-zero {
  padding-right: 0 !important;
}
sf-app.sf-app .-sf-pr-4xs {
  padding-right: 5px !important;
}
sf-app.sf-app .-sf-pr-3xs {
  padding-right: 10px !important;
}
sf-app.sf-app .-sf-pr-2xs {
  padding-right: 15px !important;
}
sf-app.sf-app .-sf-pr-xs {
  padding-right: 20px !important;
}
sf-app.sf-app .-sf-pr-s {
  padding-right: 25px !important;
}
sf-app.sf-app .-sf-pr-m {
  padding-right: 30px !important;
}
sf-app.sf-app .-sf-pr-l {
  padding-right: 35px !important;
}
sf-app.sf-app .-sf-pr-xl {
  padding-right: 40px !important;
}
sf-app.sf-app .-sf-pr-2xl {
  padding-right: 45px !important;
}
sf-app.sf-app .-sf-pr-3xl {
  padding-right: 50px !important;
}
sf-app.sf-app .-sf-pr-4xl {
  padding-right: 55px !important;
}
sf-app.sf-app .-sf-pr-5xl {
  padding-right: 60px !important;
}
sf-app.sf-app .-sf-pr-6xl {
  padding-right: 80px !important;
}
sf-app.sf-app .-sf-pr-7xl {
  padding-right: 100px !important;
}
sf-app.sf-app .-sf-pr-8xl {
  padding-right: 120px !important;
}
sf-app.sf-app .-sf-p-zero {
  padding: 0 !important;
}
sf-app.sf-app .-sf-p-4xs {
  padding: 5px !important;
}
sf-app.sf-app .-sf-p-3xs {
  padding: 10px !important;
}
sf-app.sf-app .-sf-p-2xs {
  padding: 15px !important;
}
sf-app.sf-app .-sf-p-xs {
  padding: 20px !important;
}
sf-app.sf-app .-sf-p-s {
  padding: 25px !important;
}
sf-app.sf-app .-sf-p-m {
  padding: 30px !important;
}
sf-app.sf-app .-sf-p-l {
  padding: 35px !important;
}
sf-app.sf-app .-sf-p-xl {
  padding: 40px !important;
}
sf-app.sf-app .-sf-p-2xl {
  padding: 45px !important;
}
sf-app.sf-app .-sf-p-3xl {
  padding: 50px !important;
}
sf-app.sf-app .-sf-p-4xl {
  padding: 55px !important;
}
sf-app.sf-app .-sf-p-5xl {
  padding: 60px !important;
}
sf-app.sf-app .-sf-p-6xl {
  padding: 80px !important;
}
sf-app.sf-app .-sf-p-7xl {
  padding: 100px !important;
}
sf-app.sf-app .-sf-p-8xl {
  padding: 120px !important;
}
sf-app.sf-app .-sf-pt-8xs {
  padding-top: 1px !important;
}
sf-app.sf-app .-sf-pt-7xs {
  padding-top: 2px !important;
}
sf-app.sf-app .-sf-pt-6xs {
  padding-top: 3px !important;
}
sf-app.sf-app .-sf-pt-5xs {
  padding-top: 4px !important;
}
sf-app.sf-app .-sf-pb-8xs {
  padding-bottom: 1px !important;
}
sf-app.sf-app .-sf-pb-7xs {
  padding-bottom: 2px !important;
}
sf-app.sf-app .-sf-pb-6xs {
  padding-bottom: 3px !important;
}
sf-app.sf-app .-sf-pb-5xs {
  padding-bottom: 4px !important;
}
sf-app.sf-app .-sf-pl-8xs {
  padding-left: 1px !important;
}
sf-app.sf-app .-sf-pl-7xs {
  padding-left: 2px !important;
}
sf-app.sf-app .-sf-pl-6xs {
  padding-left: 3px !important;
}
sf-app.sf-app .-sf-pl-5xs {
  padding-left: 4px !important;
}
sf-app.sf-app .-sf-pr-8xs {
  padding-right: 1px !important;
}
sf-app.sf-app .-sf-pr-7xs {
  padding-right: 2px !important;
}
sf-app.sf-app .-sf-pr-6xs {
  padding-right: 3px !important;
}
sf-app.sf-app .-sf-pr-5xs {
  padding-right: 4px !important;
}
sf-app.sf-app .-sf-ml-auto {
  margin-left: auto !important;
}
sf-app.sf-app .-sf-mr-auto {
  margin-right: auto !important;
}
sf-app.sf-app .-sf-ml-50 {
  margin-left: 50% !important;
}
sf-app.sf-app .-sf-mr-50 {
  margin-right: 50% !important;
}
sf-app.sf-app .-sf-border-top {
  border-top: 1px solid #ccc;
}
sf-app.sf-app .-sf-border-bottom {
  border-bottom: 1px solid #ccc;
}
sf-app.sf-app .-sf-border-left {
  border-left: 1px solid #ccc;
}
sf-app.sf-app .-sf-border-right {
  border-right: 1px solid #ccc;
}
sf-app.sf-app .-sf-border {
  border: 1px solid #ccc;
}
sf-app.sf-app .-sf-border-lighter {
  border-color: #e4e4e4;
}
sf-app.sf-app .-sf-border-lightest {
  border-color: #eee;
}
sf-app.sf-app .-sf-centered-box {
  margin-left: auto;
  margin-right: auto;
}
sf-app.sf-app .-sf-centered-vertical-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
sf-app.sf-app .-sf-full-height {
  height: 100% !important;
}
sf-app.sf-app .-sf-auto-height {
  height: auto !important;
}
sf-app.sf-app .-sf-disabled {
  pointer-events: none;
  cursor: default;
}
sf-app.sf-app .-sf-clickable {
  cursor: pointer;
}
sf-app.sf-app .-sf-cursor-text {
  cursor: text;
}
sf-app.sf-app .-sf-user-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
sf-app.sf-app .-sf-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100000000;
}
sf-app.sf-app .-sf-txt-hint {
  color: var(--secondary-text-color);
}
sf-app.sf-app .-sf-txt-dimmed {
  color: var(--secondary-text-color);
}
sf-app.sf-app .-sf-txt-success {
  color: var(--color-success);
}
sf-app.sf-app .-sf-txt-failure {
  color: var(--color-error);
}
sf-app.sf-app .-sf-txt-align-left {
  text-align: left;
}
sf-app.sf-app .-sf-txt-align-right {
  text-align: right;
}
sf-app.sf-app .-sf-txt-align-center {
  text-align: center;
}
sf-app.sf-app .-sf-txt-vertical-align-middle {
  vertical-align: middle;
}
sf-app.sf-app .-sf-txt-vertical-align-top {
  vertical-align: top;
}
sf-app.sf-app .-sf-txt-nowrap {
  white-space: nowrap;
}
sf-app.sf-app .-sf-txt-pre-wrap {
  white-space: pre-wrap;
}
sf-app.sf-app .-sf-txt-lower-case {
  text-transform: lowercase;
}
sf-app.sf-app .-sf-txt-upper-case {
  text-transform: uppercase;
}
sf-app.sf-app .-sf-overflow-hidden {
  overflow: hidden;
}
sf-app.sf-app .-sf-overflow-auto {
  overflow: auto;
}
sf-app.sf-app .-sf-txt-code {
  font-family: "Courier New Regular", "Courier New", Courier, monospace;
}
sf-app.sf-app .-sf-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
sf-app.sf-app .-sf-overflow-multiline-ellipsis {
  display: block;
  display: -webkit-box;
  word-break: break-all;
  max-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
sf-app.sf-app .-sf-word-break-all {
  word-break: break-all;
}
sf-app.sf-app .-sf-word-break-word {
  word-break: break-word;
}
sf-app.sf-app .-sf-direction-rtl {
  direction: rtl;
  text-align: right;
}
sf-app.sf-app .-sf-direction-ltr {
  direction: ltr;
  text-align: left;
}
sf-app.sf-app .-sf-txt-large {
  font-size: var(--font-size-lg);
}
sf-app.sf-app .-sf-txt-small {
  font-size: var(--font-size-h5);
}
sf-app.sf-app .-sf-txt-base {
  font-size: var(--font-size-base);
}
sf-app.sf-app .-sf-hidden {
  display: none !important;
}
sf-app.sf-app .-sf-invisible {
  visibility: hidden !important;
}
sf-app.sf-app .-sf-block {
  display: block !important;
}
sf-app.sf-app .-sf-inline-block {
  display: inline-block !important;
}
sf-app.sf-app .-sf-flex {
  display: flex !important;
}
sf-app.sf-app .-sf-inline-flex {
  display: inline-flex !important;
}
sf-app.sf-app .-sf-absolute {
  position: absolute !important;
}
sf-app.sf-app .-sf-relative {
  position: relative !important;
}
sf-app.sf-app .-sf-static {
  position: static !important;
}
sf-app.sf-app .-sf-transparent {
  opacity: 0;
}
sf-app.sf-app .-sf-align-self-center {
  align-self: center !important;
}
sf-app.sf-app .-sf-visually-hidden {
  padding: 0;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
}
sf-app.sf-app .-sf-img-fit-cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
sf-app.sf-app .-sf-hide-empty:empty {
  display: none;
}
sf-app.sf-app .-sf-width-1 {
  width: 8.3333333333% !important;
}
sf-app.sf-app .-sf-width-2 {
  width: 16.6666666667% !important;
}
sf-app.sf-app .-sf-width-3 {
  width: 25% !important;
}
sf-app.sf-app .-sf-width-4 {
  width: 33.3333333333% !important;
}
sf-app.sf-app .-sf-width-5 {
  width: 41.6666666667% !important;
}
sf-app.sf-app .-sf-width-6 {
  width: 50% !important;
}
sf-app.sf-app .-sf-width-7 {
  width: 58.3333333333% !important;
}
sf-app.sf-app .-sf-width-8 {
  width: 66.6666666667% !important;
}
sf-app.sf-app .-sf-width-9 {
  width: 75% !important;
}
sf-app.sf-app .-sf-width-10 {
  width: 83.3333333333% !important;
}
sf-app.sf-app .-sf-width-11 {
  width: 91.6666666667% !important;
}
sf-app.sf-app .-sf-width-12 {
  width: 100% !important;
}
sf-app.sf-app .-sf-width-form-small {
  width: 410px !important;
}
sf-app.sf-app .-sf-width-form-medium {
  width: 630px !important;
}
sf-app.sf-app .-sf-width-form-large {
  width: 1000px !important;
}
sf-app.sf-app .-sf-width-100 {
  width: 100% !important;
}
sf-app.sf-app .-sf-clearfix::after {
  display: table;
  content: "";
  clear: both;
}
sf-app.sf-app .-sf-pull-left {
  float: left;
}
sf-app.sf-app .-sf-hover-bg-light-grey:hover {
  background: #f5f5f5;
}
sf-app.sf-app h1,
sf-app.sf-app .h1 {
  font-family: "Open Sans Condensed", sans-serif;
  font-size: var(--font-size-h1);
  font-weight: bold;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
}
sf-app.sf-app h2,
sf-app.sf-app .h2 {
  font-size: var(--font-size-h2);
  font-weight: 300;
  line-height: 1.3;
  color: var(--color-h2);
  margin-top: 0;
  margin-bottom: 0;
}
sf-app.sf-app h3,
sf-app.sf-app .h3 {
  font-family: "Open Sans Condensed", sans-serif;
  font-size: var(--font-size-h3);
  font-weight: bold;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
}
sf-app.sf-app h4,
sf-app.sf-app .h4 {
  font-size: var(--font-size-h4);
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}
sf-app.sf-app h5,
sf-app.sf-app .h5 {
  font-size: var(--font-size-h5);
  font-weight: normal;
  color: var(--color-h5);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
sf-app.sf-app h1.-sf-h-large {
  font-size: var(--font-size-h1-lg);
}
sf-app.sf-app .h1.-sf-h-large {
  font-size: var(--font-size-h1-lg);
}
sf-app.sf-app h4.-sf-h-large {
  font-size: var(--font-size-h4-lg);
}
sf-app.sf-app .h4.-sf-h-large {
  font-size: var(--font-size-h4-lg);
}
sf-app.sf-app p {
  margin-bottom: calc(var(--font-size-base) * 1.4);
}
sf-app.sf-app .sf-breadcrumb {
  color: var(--secondary-text-color);
}
sf-app.sf-app .sf-tabs {
  display: flex;
  justify-content: center;
}
sf-app.sf-app .sf-tabs.-large {
  font-size: var(--font-size-lg);
}
sf-app.sf-app .sf-tabs__item {
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
}
sf-app.sf-app .sf-tabs__item.-selected {
  padding-bottom: 5px;
}
sf-app.sf-app .sf-tabs__item.-selected, sf-app.sf-app .sf-tabs__item.-selected:hover, sf-app.sf-app .sf-tabs__item.-selected:active, sf-app.sf-app .sf-tabs__item.-selected:focus {
  color: #333;
  border-bottom: 2px solid #777;
}
sf-app.sf-app .sf-tabs__item.-selected .sf-button.-link {
  color: #333;
}
sf-app.sf-app .sf-tabs__badge {
  position: absolute;
  top: 0;
  right: -27px;
  font-size: var(--font-size-base);
}
sf-app.sf-app .sf-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 1em;
  width: 1em;
  font-size: var(--default-icon-size);
  font-style: normal;
  color: var(--default-icon-color);
}
sf-app.sf-app .sf-icon.-close::before {
  content: "✖";
}
sf-app.sf-app .sf-icon.-illustrative {
  font-size: var(--icon-illustrative-font-size);
  color: var(--icon-illustrative-font-color);
  width: var(--icon-illustrative-size);
  height: var(--icon-illustrative-size);
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--icon-illustrative-font-color);
}
sf-app.sf-app .sf-icon.-illustrative.-size-3xl {
  width: var(--icon-illustrative-size-sm);
  height: var(--icon-illustrative-size-sm);
}
sf-app.sf-app .sf-icon.-light {
  color: var(--icon-light-color);
}
sf-app.sf-app .sf-icon.-faq {
  width: var(--icon-faq-size);
  height: var(--icon-faq-size);
  border-radius: 50%;
  background: #fff;
  line-height: var(--icon-faq-size);
  box-shadow: 0 3px 5px rgba(228, 228, 228, 0.5);
}
sf-app.sf-app .sf-icon.-zone-editor {
  font-size: var(--icon-zone-editor-size);
}
sf-app.sf-app .sf-icon.-lightest {
  color: #ccc;
}
sf-app.sf-app .sf-icon.-lighter {
  color: var(--icon-lighter-color);
}
sf-app.sf-app .sf-icon.-darker {
  color: #999;
}
sf-app.sf-app .sf-icon.-darkest {
  color: #777;
}
sf-app.sf-app .sf-icon.-black {
  color: #333;
}
sf-app.sf-app .sf-icon.-color-inherit {
  color: inherit;
}
sf-app.sf-app .sf-icon.-white {
  color: #fff;
}
sf-app.sf-app .sf-icon.-positive {
  color: var(--icon-positive-color);
}
sf-app.sf-app .sf-icon.-square {
  padding: 5px;
  border: 2px solid currentColor;
}
sf-app.sf-app .sf-icon.-svg {
  width: auto;
  height: auto;
}
sf-app.sf-app .sf-icon.-size-7xs {
  font-size: var(--icon-size-7xs);
}
sf-app.sf-app .sf-icon.-size-5xs {
  font-size: var(--icon-size-5xs);
}
sf-app.sf-app .sf-icon.-size-4xs {
  font-size: var(--icon-size-4xs);
}
sf-app.sf-app .sf-icon.-size-3xs {
  font-size: var(--icon-size-3xs);
}
sf-app.sf-app .sf-icon.-size-2xs {
  font-size: var(--icon-size-2xs);
}
sf-app.sf-app .sf-icon.-size-xs {
  font-size: var(--icon-size-xs);
}
sf-app.sf-app .sf-icon.-size-s {
  font-size: var(--icon-size-s);
}
sf-app.sf-app .sf-icon.-size-m {
  font-size: var(--icon-size-m);
}
sf-app.sf-app .sf-icon.-size-l {
  font-size: var(--icon-size-l);
}
sf-app.sf-app .sf-icon.-size-xl {
  font-size: var(--icon-size-xl);
}
sf-app.sf-app .sf-icon.-size-2xl {
  font-size: var(--icon-size-2xl);
}
sf-app.sf-app .sf-icon.-size-3xl {
  font-size: var(--icon-size-3xl);
}
sf-app.sf-app .sf-icon.-size-4xl {
  font-size: var(--icon-size-4xl);
}
sf-app.sf-app .sf-icon.-size-5xl {
  font-size: var(--icon-size-5xl);
}
sf-app.sf-app .sf-icon__svg {
  width: 1em;
  height: 1em;
}
sf-app.sf-app .sf-icon__svg.-color-current {
  background-color: currentColor;
}
sf-app.sf-app .sf-icon-stack {
  position: relative;
  display: inline-flex;
}
sf-app.sf-app .sf-icon-stack__in {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
sf-app.sf-app .sf-icon-stack .sf-icon-stack__in + .sf-icon-stack__in {
  z-index: 5;
}
sf-app.sf-app .sf-icon-stack__out {
  position: relative;
}
sf-app.sf-app .sf-status__text {
  font-size: var(--font-size-base);
  margin-top: 0;
  margin-bottom: 0;
  color: var(--secondary-text-color);
}
sf-app.sf-app .sf-status__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--font-size-base);
  color: #fff;
  background-color: var(--status-bg-color-default);
}
sf-app.sf-app .sf-status__icon:not([class*=sf-fa-])::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-for-published {
  background-color: var(--status-icon-color-published);
}
sf-app.sf-app .sf-status__icon.-for-restricted {
  background-color: var(--status-icon-color-restricted);
}
sf-app.sf-app .sf-status__icon.-for-unpublished {
  background-color: var(--status-icon-color-unpublished);
}
sf-app.sf-app .sf-status__icon.-for-scheduled {
  background-color: var(--status-icon-color-scheduled);
}
sf-app.sf-app .sf-status__icon.-for-draft {
  background-color: var(--status-icon-color-draft);
}
sf-app.sf-app .sf-status__icon.-system-icon {
  background-color: transparent;
  color: var(--status-icon-color-system);
  font-size: var(--icon-size-xl);
  overflow: visible;
}
sf-app.sf-app .sf-status__icon.-system-icon.-dimmed {
  background-color: transparent;
}
sf-app.sf-app .sf-status__icon.-published {
  background-color: var(--status-icon-color-published);
}
sf-app.sf-app .sf-status__icon.-published::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-locked {
  background-color: var(--status-icon-color-restricted);
}
sf-app.sf-app .sf-status__icon.-locked::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-unpublished {
  background-color: var(--status-icon-color-unpublished);
}
sf-app.sf-app .sf-status__icon.-unpublished::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-deleted {
  font-size: var(--icon-size-xl);
  background-color: transparent;
  color: #ccc;
}
sf-app.sf-app .sf-status__icon.-deleted::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-deleted.-dimmed {
  background-color: transparent;
}
sf-app.sf-app .sf-status__icon[class*=-rejected] {
  background-color: var(--status-icon-color-restricted);
}
sf-app.sf-app .sf-status__icon[class*=-rejected]::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-scheduled {
  background-color: var(--status-icon-color-scheduled);
}
sf-app.sf-app .sf-status__icon.-scheduled::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-group-page {
  background-color: transparent;
  color: var(--status-icon-color-system);
  font-size: var(--icon-size-xl);
  overflow: visible;
}
sf-app.sf-app .sf-status__icon.-group-page.-dimmed {
  background-color: transparent;
}
sf-app.sf-app .sf-status__icon.-group-page::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-hierarchical {
  background-color: transparent;
  color: var(--status-icon-color-system);
  font-size: var(--icon-size-xl);
  overflow: visible;
}
sf-app.sf-app .sf-status__icon.-hierarchical.-dimmed {
  background-color: transparent;
}
sf-app.sf-app .sf-status__icon.-hierarchical::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-flat {
  background-color: transparent;
  color: var(--status-icon-color-system);
  font-size: var(--icon-size-xl);
  overflow: visible;
}
sf-app.sf-app .sf-status__icon.-flat.-dimmed {
  background-color: transparent;
}
sf-app.sf-app .sf-status__icon.-flat::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-redirecting-page {
  background-color: transparent;
  color: var(--status-icon-color-system);
  font-size: var(--icon-size-xl);
  overflow: visible;
}
sf-app.sf-app .sf-status__icon.-redirecting-page.-dimmed {
  background-color: transparent;
}
sf-app.sf-app .sf-status__icon.-redirecting-page::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-draft, sf-app.sf-app .sf-status__icon.-draftnewer, sf-app.sf-app .sf-status__icon.-publishedanddraft {
  background-color: var(--status-icon-color-draft);
}
sf-app.sf-app .sf-status__icon.-draft::before, sf-app.sf-app .sf-status__icon.-draftnewer::before, sf-app.sf-app .sf-status__icon.-publishedanddraft::before {
  content: "";
}
sf-app.sf-app .sf-status__icon[class*=-awaiting]::before {
  content: "";
}
sf-app.sf-app .sf-status__icon.-dimmed {
  background-color: #ccc;
}
sf-app.sf-app .sf-status__icon.-for-translation {
  font-size: var(--icon-size-3xs);
  background-color: #006CD9;
}
sf-app.sf-app .sf-status__icon.-for-translation::before {
  content: "";
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
sf-app.sf-app .sf-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  border-radius: 22px;
  overflow: hidden;
  white-space: nowrap;
  font-style: normal;
  background-color: #ccc;
  font-family: "Open Sans", sans-serif;
  font-weight: normal;
  color: var(--badge-color);
}
sf-app.sf-app .sf-badge.-ellipse {
  width: auto;
  min-width: 22px;
}
sf-app.sf-app .sf-badge:not(sub):not(sup) {
  vertical-align: middle;
}
sf-app.sf-app .sf-badge:not(.-icon):not(.-add) {
  padding-left: 3px;
  padding-right: 3px;
}
sf-app.sf-app .sf-badge.-hover {
  cursor: pointer;
}
sf-app.sf-app .sf-badge.-size-s {
  width: 16px;
  height: 16px;
  border-radius: 16px;
}
sf-app.sf-app .sf-badge.-size-s.-ellipse {
  width: auto;
  min-width: 16px;
}
sf-app.sf-app .sf-badge.-size-m {
  width: 22px;
  height: 22px;
  border-radius: 22px;
}
sf-app.sf-app .sf-badge.-size-m.-ellipse {
  width: auto;
  min-width: 22px;
}
sf-app.sf-app .sf-badge.-size-l {
  width: 24px;
  height: 24px;
  border-radius: 24px;
}
sf-app.sf-app .sf-badge.-size-l.-ellipse {
  width: auto;
  min-width: 24px;
}
sf-app.sf-app .sf-badge.-size-xl {
  width: 26px;
  height: 26px;
  border-radius: 26px;
}
sf-app.sf-app .sf-badge.-size-xl.-ellipse {
  width: auto;
  min-width: 26px;
}
sf-app.sf-app .sf-badge.-positive {
  background-color: var(--badge-color-bg-positive);
  color: var(--badge-positive-color);
}
sf-app.sf-app .sf-badge.-negative {
  background-color: var(--badge-color-bg-negative);
  color: var(--badge-negative-color);
}
sf-app.sf-app .sf-badge.-white {
  background-color: #fff;
  color: var(--badge-white-color);
}
sf-app.sf-app .sf-badge.-icon {
  color: var(--badge-icon-color);
}
sf-app.sf-app .sf-badge.-icon .sf-icon {
  color: inherit;
  margin-right: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
sf-app.sf-app .sf-badge.-add {
  background-color: #fff;
  border: 1px solid var(--badge-white-border-color);
  color: var(--badge-add-color);
}
sf-app.sf-app .sf-badge.-add.-hover:hover {
  background-color: #e4e4e4;
}
sf-app.sf-app .sf-badge.-add-variation {
  border: 1px solid var(--badge-add-variation-border-color);
  background-color: var(--badge-add-variation-bg-color);
  color: var(--badge-add-variation-color);
}
sf-app.sf-app .sf-badge.-add-variation.-hover:hover {
  border: 1px solid var(--badge-add-variation-border-hover);
  background-color: var(--badge-add-variation-hover);
}
sf-app.sf-app .sf-badge.-add-variation.-dimmed {
  border-color: #cae0f7;
  background-color: #cae0f7;
}
sf-app.sf-app .sf-badge.-edit-variation {
  border: 1px solid var(--badge-edit-variation-bg-color);
  background-color: var(--badge-edit-variation-bg-color);
  color: var(--badge-edit-variation-color);
}
sf-app.sf-app .sf-badge.-edit-variation.-hover:hover {
  border: 1px solid var(--badge-edit-variation-hover);
  background-color: var(--badge-edit-variation-hover);
}
sf-app.sf-app .sf-badge.-edit-variation.-dimmed {
  border-color: #80b6ec;
  background-color: #80b6ec;
}
sf-app.sf-app .sf-badge.-floating-txt {
  padding-left: 3px;
  justify-content: left;
}
sf-app.sf-app .sf-badge.-floating-txt:hover .sf-badge__animated-content {
  display: inline-block;
  -webkit-animation: 3s ease floatingText;
          animation: 3s ease floatingText;
}
sf-app.sf-app .sf-badge.-square {
  border-radius: 0;
}
sf-app.sf-app .sf-badge.-bordered {
  border: 1px solid currentColor;
}
sf-app.sf-app .sf-button {
  align-items: center;
  justify-content: center;
  display: inline-flex;
  margin: 0 5px 0 0;
  font-weight: normal;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  white-space: nowrap;
  height: 32px;
  min-width: 32px;
  padding: 0 16px;
  font-size: var(--font-size-base);
  border-radius: 3px;
  color: var(--button-color);
  background-color: var(--button-background-color);
  border-color: var(--button-border-color);
}
sf-app.sf-app .sf-button:hover, sf-app.sf-app .sf-button:active, sf-app.sf-app .sf-button:focus {
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
sf-app.sf-app .sf-button[disabled] {
  pointer-events: none;
  cursor: default;
}
sf-app.sf-app .sf-button[disabled].-icon .sf-button__icon {
  color: inherit;
}
sf-app.sf-app .sf-button.-disabled {
  pointer-events: none;
  cursor: default;
}
sf-app.sf-app .sf-button.-disabled.-icon .sf-button__icon {
  color: inherit;
}
sf-app.sf-app .sf-button.-large {
  height: 36px;
  min-width: 36px;
  padding: 0 20px;
  font-size: var(--font-size-lg);
}
sf-app.sf-app .sf-button.-small {
  height: 26px;
  min-width: 26px;
  padding: 0 10px;
  border-radius: 2px;
}
sf-app.sf-app .sf-button:focus {
  color: var(--button-color);
}
sf-app.sf-app .sf-button:not(.-no-hover):hover {
  color: var(--button-interaction-color);
  background-color: var(--button-interaction-background-color);
  border-color: var(--button-interaction-border-color);
}
sf-app.sf-app .sf-button:not(.-no-focus):focus {
  color: var(--button-interaction-color);
  background-color: var(--button-interaction-background-color);
  border-color: var(--button-interaction-border-color);
}
sf-app.sf-app .sf-button:not(.-no-active):active {
  color: var(--button-interaction-color);
  background-color: var(--button-interaction-background-color);
  border-color: var(--button-interaction-border-color);
}
sf-app.sf-app .sf-button[disabled]:not(.-done):not(.-inprogress):not(.-no-border), sf-app.sf-app .sf-button.-disabled:not(.-done):not(.-inprogress):not(.-no-border) {
  color: var(--button-disabled-color);
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
}
sf-app.sf-app .sf-button.-action {
  color: var(--action-button-color);
  background-color: var(--action-button-background-color);
  border-color: var(--action-button-border-color);
}
sf-app.sf-app .sf-button.-action:focus {
  color: var(--action-button-color);
}
sf-app.sf-app .sf-button.-action:not(.-no-hover):hover {
  color: var(--action-button-interaction-color);
  background-color: var(--action-button-interaction-background-color);
  border-color: var(--action-button-interaction-border-color);
}
sf-app.sf-app .sf-button.-action:not(.-no-focus):focus {
  color: var(--action-button-interaction-color);
  background-color: var(--action-button-interaction-background-color);
  border-color: var(--action-button-interaction-border-color);
}
sf-app.sf-app .sf-button.-action:not(.-no-active):active {
  color: var(--action-button-interaction-color);
  background-color: var(--action-button-interaction-background-color);
  border-color: var(--action-button-interaction-border-color);
}
sf-app.sf-app .sf-button.-action[disabled]:not(.-done):not(.-inprogress):not(.-no-border), sf-app.sf-app .sf-button.-action.-disabled:not(.-done):not(.-inprogress):not(.-no-border) {
  color: var(--action-button-disabled-color);
  background-color: var(--action-button-disabled-background-color);
  border-color: var(--action-button-disabled-border-color);
}
sf-app.sf-app .sf-button.-delete {
  color: var(--delete-button-color);
  background-color: var(--delete-button-background-color);
  border-color: var(--delete-button-border-color);
}
sf-app.sf-app .sf-button.-delete:focus {
  color: var(--delete-button-color);
}
sf-app.sf-app .sf-button.-delete:not(.-no-hover):hover {
  color: var(--delete-button-interaction-color);
  background-color: var(--delete-button-interaction-background-color);
  border-color: var(--delete-button-interaction-border-color);
}
sf-app.sf-app .sf-button.-delete:not(.-no-focus):focus {
  color: var(--delete-button-interaction-color);
  background-color: var(--delete-button-interaction-background-color);
  border-color: var(--delete-button-interaction-border-color);
}
sf-app.sf-app .sf-button.-delete:not(.-no-active):active {
  color: var(--delete-button-interaction-color);
  background-color: var(--delete-button-interaction-background-color);
  border-color: var(--delete-button-interaction-border-color);
}
sf-app.sf-app .sf-button.-delete[disabled]:not(.-done):not(.-inprogress):not(.-no-border), sf-app.sf-app .sf-button.-delete.-disabled:not(.-done):not(.-inprogress):not(.-no-border) {
  color: var(--delete-button-disabled-color);
  background-color: var(--delete-button-disabled-background-color);
  border-color: var(--delete-button-disabled-border-color);
}
sf-app.sf-app .sf-button.-link {
  color: var(--link-color);
  background-color: transparent;
  border-color: transparent;
}
sf-app.sf-app .sf-button.-link:focus {
  color: var(--link-color);
}
sf-app.sf-app .sf-button.-link:not(.-no-hover):hover {
  color: #333;
  background-color: transparent;
  border-color: transparent;
}
sf-app.sf-app .sf-button.-link:not(.-no-focus):focus {
  color: #333;
  background-color: transparent;
  border-color: transparent;
}
sf-app.sf-app .sf-button.-link:not(.-no-active):active {
  color: #333;
  background-color: transparent;
  border-color: transparent;
}
sf-app.sf-app .sf-button.-link[disabled]:not(.-done):not(.-inprogress):not(.-no-border), sf-app.sf-app .sf-button.-link.-disabled:not(.-done):not(.-inprogress):not(.-no-border) {
  border-color: transparent;
}
sf-app.sf-app .sf-button.-invert {
  color: #fff;
  background-color: #333;
  border-color: #333;
}
sf-app.sf-app .sf-button.-invert:focus {
  color: #fff;
}
sf-app.sf-app .sf-button.-feedback {
  position: relative;
}
sf-app.sf-app .sf-button.-feedback .sf-button__icon {
  display: none;
}
sf-app.sf-app .sf-button.-feedback.-done .sf-button__icon {
  display: flex;
  margin-right: 0;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: inherit;
}
sf-app.sf-app .sf-button.-feedback.-done .sf-button__content {
  opacity: 0;
}
sf-app.sf-app .sf-button.-loader {
  position: relative;
}
sf-app.sf-app .sf-button.-loader .sf-loader {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  right: -1px;
  bottom: -1px;
}
sf-app.sf-app .sf-button.-inprogress .sf-button__content {
  opacity: 0;
}
sf-app.sf-app .sf-button.-inprogress .sf-loader {
  display: block;
  border-radius: 2px;
}
sf-app.sf-app .sf-button.-inprogress .sf-icon {
  opacity: 0;
}
sf-app.sf-app .sf-button.-white {
  color: #fff;
}
sf-app.sf-app .sf-button.-link {
  margin: 0;
  padding: 0;
  height: auto;
  font-size: inherit;
  vertical-align: baseline;
  border: 0;
}
sf-app.sf-app .sf-button.-dropdown {
  position: relative;
}
sf-app.sf-app .sf-button.-dropped.-left .sf-button__dropdown {
  right: auto;
  left: -1px;
}
sf-app.sf-app .sf-button.-dropped .sf-button__dropdown {
  opacity: 1;
  z-index: 1000;
}
sf-app.sf-app .sf-button.-txt-small {
  font-size: var(--font-size-h5);
}
sf-app.sf-app .sf-button.-no-border {
  background: transparent;
  border: 0;
}
sf-app.sf-app .sf-button.-no-border:hover {
  background-color: transparent;
}
sf-app.sf-app .sf-button.-no-border .sf-button__dropdown {
  top: 100%;
}
sf-app.sf-app .sf-button.-no-padding {
  padding: 0;
}
sf-app.sf-app .sf-button.-icon .sf-button__icon {
  margin: 0;
}
sf-app.sf-app .sf-button.-icon[disabled] .sf-button__icon, sf-app.sf-app .sf-button.-icon.-disabled .sf-button__icon, sf-app.sf-app .sf-button.-icon.-action .sf-button__icon, sf-app.sf-app .sf-button.-icon.-delete .sf-button__icon, sf-app.sf-app .sf-button.-icon:not(.-no-hover):hover .sf-button__icon, sf-app.sf-app .sf-button.-icon:not(.-no-active):active .sf-button__icon, sf-app.sf-app .sf-button.-icon:not(.-no-focus):focus .sf-button__icon {
  color: inherit;
}
sf-app.sf-app .sf-button.-icon:not(.-icon-and-text):not(.-toolset) {
  padding: 0;
}
sf-app.sf-app .sf-button.-icon[disabled].-no-border, sf-app.sf-app .sf-button.-icon.-disabled.-no-border {
  background-color: transparent;
  color: var(--button-disabled-color);
}
sf-app.sf-app .sf-button.-icon[disabled].-no-border.-darker-disabled, sf-app.sf-app .sf-button.-icon.-disabled.-no-border.-darker-disabled {
  color: var(--button-disabled-darker-color);
}
sf-app.sf-app .sf-button.-toggle {
  padding: 0;
  margin-right: 0;
  width: 48px;
  height: 46px;
  color: #777;
  border: 0;
  background-color: #fff;
  border-radius: 0;
  /* Combine these two when we have a combining mixin for elements and modifiers */
}
sf-app.sf-app .sf-button.-toggle:hover .sf-button__icon {
  color: #333;
  background-color: #e4e4e4;
  border-color: #e4e4e4;
}
sf-app.sf-app .sf-button.-toggle:focus {
  background-color: transparent;
}
sf-app.sf-app .sf-button.-toggle.-active {
  color: #333;
  background-color: #f5f5f5;
  border-color: #eee;
}
sf-app.sf-app .sf-button.-toggle.-active .sf-button__icon {
  color: #333;
}
sf-app.sf-app .sf-button.-toggle.-active:hover .sf-button__icon {
  background-color: transparent;
  border-color: #eee;
}
sf-app.sf-app .sf-button.-toggle.-dropped {
  color: #333;
  background-color: #f5f5f5;
  border-color: #eee;
}
sf-app.sf-app .sf-button.-toggle.-dropped .sf-button__icon {
  color: #333;
}
sf-app.sf-app .sf-button.-toggle.-dropped:hover .sf-button__icon {
  background-color: transparent;
  border-color: #eee;
}
sf-app.sf-app .sf-button.-toggle .sf-button__icon {
  width: 48px;
  height: 46px;
  line-height: 46px;
}
sf-app.sf-app .sf-button.-toggle .sf-button__dropdown {
  top: 100%;
}
sf-app.sf-app .sf-button.-circle {
  border-radius: 50%;
}
sf-app.sf-app .sf-button.-circle.-small {
  padding: 0;
  height: 26px;
  width: 26px;
  min-width: 26px;
}
sf-app.sf-app .sf-button.-angled {
  border-radius: 0;
}
sf-app.sf-app .sf-button.-angled .sf-button__dropdown {
  top: 100%;
}
sf-app.sf-app .sf-button.-toolset {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  color: inherit;
  height: 100%;
  margin-right: 0;
  min-width: 0;
}
sf-app.sf-app .sf-button.-toolset:hover {
  cursor: pointer;
  color: #ccc;
}
sf-app.sf-app .sf-button__icon {
  margin: 0 5px 0 0;
}
sf-app.sf-app .sf-button__icon.-right {
  margin: 0 0 0 5px;
}
sf-app.sf-app .sf-button__content {
  vertical-align: baseline;
}
sf-app.sf-app .sf-button__dropdown {
  position: absolute;
  text-align: left;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease-out;
  transition-property: opacity;
  top: calc(100% + 8px);
  right: -1px;
  min-width: calc(100% + 2px);
  width: auto;
}
sf-app.sf-app .sf-button__dropdown .sf-dropdown__item {
  font-size: inherit;
  line-height: normal;
  word-break: normal;
}
sf-app.sf-app .sf-button__arrow {
  margin: 0;
  padding: 0;
  height: 30px;
  line-height: 30px;
  font-size: var(--icon-size-xs);
}
sf-app.sf-app .sf-button-group {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
sf-app.sf-app .sf-button-group .sf-input .sf-input__field,
sf-app.sf-app .sf-button-group .sf-button {
  margin: 0;
  border-right-width: 0;
  border-radius: 0;
}
sf-app.sf-app .sf-button-group.-search {
  padding: 0 14px;
  height: 32px;
  width: 460px;
  border-radius: 16px;
  background-color: #f5f5f5;
}
sf-app.sf-app .sf-button-group.-search:focus-within {
  box-shadow: 0 0 2px rgba(0, 108, 217, 0.8);
}
sf-app.sf-app .sf-button-group.-search .sf-input__field {
  margin-left: 5px;
  padding-left: 0;
  height: 30px;
  font-size: var(--font-size-base);
}
sf-app.sf-app .sf-button-group.-search .sf-input__field:focus {
  box-shadow: none;
}
sf-app.sf-app .sf-button-group.-search .sf-input__field,
sf-app.sf-app .sf-button-group.-search .sf-button {
  border: 0;
  background-color: transparent;
}
sf-app.sf-app .sf-button-group.-search .sf-button.-icon,
sf-app.sf-app .sf-button-group.-search .sf-input__clear-button {
  margin-right: -10px;
}
sf-app.sf-app .sf-button-group.-search.-secondary {
  padding: 0;
  border-radius: 0;
  background-color: #fff;
  height: auto;
}
sf-app.sf-app .sf-button-group.-search.-secondary .sf-input__field {
  padding-left: 8px;
}
sf-app.sf-app .sf-button-group.-fluid {
  width: 100%;
}
sf-app.sf-app .sf-button-group.-no-focus:focus-within {
  box-shadow: none;
}
sf-app.sf-app .sf-notification {
  position: relative;
  display: flex;
  text-align: left;
  vertical-align: middle;
  padding: 10px 9px;
  border-radius: 3px;
  background-color: currentcolor;
  border-color: currentcolor;
  color: #DCECF5;
}
sf-app.sf-app .sf-notification > * {
  color: #333;
}
sf-app.sf-app .sf-notification.-info {
  color: #DCECF5;
}
sf-app.sf-app .sf-notification.-info > *:not(.sf-notification__close-button) {
  color: #333;
}
sf-app.sf-app .sf-notification.-success {
  color: #CAEED8;
}
sf-app.sf-app .sf-notification.-success > *:not(.sf-notification__close-button) {
  color: #333;
}
sf-app.sf-app .sf-notification.-error {
  color: #FFCCCC;
}
sf-app.sf-app .sf-notification.-error > *:not(.sf-notification__close-button) {
  color: #333;
}
sf-app.sf-app .sf-notification.-warning {
  color: #FFFFCC;
}
sf-app.sf-app .sf-notification.-warning > *:not(.sf-notification__close-button) {
  color: #333;
}
sf-app.sf-app .sf-notification.-black {
  color: #333;
}
sf-app.sf-app .sf-notification.-black > *:not(.sf-notification__close-button) {
  color: #fff;
}
sf-app.sf-app .sf-notification.-transparent {
  color: transparent;
}
sf-app.sf-app .sf-notification.-transparent > *:not(.sf-notification__close-button) {
  color: #333;
}
sf-app.sf-app .sf-notification.-small {
  padding: 0 20px;
  height: 32px;
  align-items: center;
}
sf-app.sf-app .sf-notification.-inline {
  display: inline-flex;
}
sf-app.sf-app .sf-notification.-preline .sf-notification__content {
  white-space: pre-line;
}
sf-app.sf-app .sf-notification.-up, sf-app.sf-app .sf-notification.-up-right, sf-app.sf-app .sf-notification.-up-left {
  margin-bottom: 10px;
}
sf-app.sf-app .sf-notification.-up:after, sf-app.sf-app .sf-notification.-up:before, sf-app.sf-app .sf-notification.-up-right:after, sf-app.sf-app .sf-notification.-up-right:before, sf-app.sf-app .sf-notification.-up-left:after, sf-app.sf-app .sf-notification.-up-left:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
sf-app.sf-app .sf-notification.-up:after, sf-app.sf-app .sf-notification.-up-right:after, sf-app.sf-app .sf-notification.-up-left:after {
  border-width: 10px;
  border-top-color: inherit;
  bottom: -20px;
  right: 50%;
  margin-right: -10px;
}
sf-app.sf-app .sf-notification.-up:before, sf-app.sf-app .sf-notification.-up-right:before, sf-app.sf-app .sf-notification.-up-left:before {
  border-width: 11px;
  border-top-color: #e4e4e4;
  bottom: -22px;
  right: 50%;
  margin-right: -11px;
}
sf-app.sf-app .sf-notification.-down, sf-app.sf-app .sf-notification.-down-right, sf-app.sf-app .sf-notification.-down-left {
  margin-top: 10px;
}
sf-app.sf-app .sf-notification.-down:after, sf-app.sf-app .sf-notification.-down:before, sf-app.sf-app .sf-notification.-down-right:after, sf-app.sf-app .sf-notification.-down-right:before, sf-app.sf-app .sf-notification.-down-left:after, sf-app.sf-app .sf-notification.-down-left:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
sf-app.sf-app .sf-notification.-down:after, sf-app.sf-app .sf-notification.-down-right:after, sf-app.sf-app .sf-notification.-down-left:after {
  border-width: 10px;
  border-bottom-color: inherit;
  top: -20px;
  right: 50%;
  margin-right: -10px;
}
sf-app.sf-app .sf-notification.-down:before, sf-app.sf-app .sf-notification.-down-right:before, sf-app.sf-app .sf-notification.-down-left:before {
  border-width: 11px;
  border-bottom-color: #e4e4e4;
  top: -22px;
  right: 50%;
  margin-right: -11px;
}
sf-app.sf-app .sf-notification.-left, sf-app.sf-app .sf-notification.-left-up, sf-app.sf-app .sf-notification.-left-down {
  margin-right: 20px;
}
sf-app.sf-app .sf-notification.-left:after, sf-app.sf-app .sf-notification.-left:before, sf-app.sf-app .sf-notification.-left-up:after, sf-app.sf-app .sf-notification.-left-up:before, sf-app.sf-app .sf-notification.-left-down:after, sf-app.sf-app .sf-notification.-left-down:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
sf-app.sf-app .sf-notification.-left:after, sf-app.sf-app .sf-notification.-left-up:after, sf-app.sf-app .sf-notification.-left-down:after {
  border-width: 10px;
  border-left-color: inherit;
  right: -20px;
  top: 50%;
  margin-top: -10px;
}
sf-app.sf-app .sf-notification.-left:before, sf-app.sf-app .sf-notification.-left-up:before, sf-app.sf-app .sf-notification.-left-down:before {
  border-width: 11px;
  border-left-color: #e4e4e4;
  right: -22px;
  top: 50%;
  margin-top: -11px;
}
sf-app.sf-app .sf-notification.-right, sf-app.sf-app .sf-notification.-right-up, sf-app.sf-app .sf-notification.-right-down {
  margin-left: 20px;
}
sf-app.sf-app .sf-notification.-right:after, sf-app.sf-app .sf-notification.-right:before, sf-app.sf-app .sf-notification.-right-up:after, sf-app.sf-app .sf-notification.-right-up:before, sf-app.sf-app .sf-notification.-right-down:after, sf-app.sf-app .sf-notification.-right-down:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
sf-app.sf-app .sf-notification.-right:after, sf-app.sf-app .sf-notification.-right-up:after, sf-app.sf-app .sf-notification.-right-down:after {
  border-width: 10px;
  border-right-color: inherit;
  left: -20px;
  top: 50%;
  margin-top: -10px;
}
sf-app.sf-app .sf-notification.-right:before, sf-app.sf-app .sf-notification.-right-up:before, sf-app.sf-app .sf-notification.-right-down:before {
  border-width: 11px;
  border-right-color: #e4e4e4;
  left: -22px;
  top: 50%;
  margin-top: -11px;
}
sf-app.sf-app .sf-notification.-down-left:before, sf-app.sf-app .sf-notification.-down-left:after, sf-app.sf-app .sf-notification.-up-left:before, sf-app.sf-app .sf-notification.-up-left:after {
  right: auto;
  left: 20px;
}
sf-app.sf-app .sf-notification.-down-right:before, sf-app.sf-app .sf-notification.-down-right:after, sf-app.sf-app .sf-notification.-up-right:before, sf-app.sf-app .sf-notification.-up-right:after {
  right: 20px;
}
sf-app.sf-app .sf-notification.-left-down:before, sf-app.sf-app .sf-notification.-left-down:after, sf-app.sf-app .sf-notification.-right-down:before, sf-app.sf-app .sf-notification.-right-down:after {
  bottom: 10px;
  top: auto;
}
sf-app.sf-app .sf-notification.-left-up:before, sf-app.sf-app .sf-notification.-left-up:after, sf-app.sf-app .sf-notification.-right-up:before, sf-app.sf-app .sf-notification.-right-up:after {
  top: 20px;
}
sf-app.sf-app .sf-notification.-tooltip {
  padding: 20px;
  border: 1px solid #e4e4e4;
  border-radius: 0;
  box-shadow: 0 0 8px rgba(228, 228, 228, 0.6);
}
sf-app.sf-app .sf-notification.-tooltip .sf-notification__close-button {
  position: absolute;
  top: 10px;
  right: 10px;
}
sf-app.sf-app .sf-notification.-tooltip.-up:after {
  border-top-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-down:after {
  border-bottom-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-left:after {
  border-left-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-right:after {
  border-right-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-down-left:after {
  border-bottom-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-down-right:after {
  border-bottom-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-up-left:after {
  border-top-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-up-right:after {
  border-top-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-left-down:after {
  border-left-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-left-up:after {
  border-left-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-right-down:after {
  border-right-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-tooltip.-right-up:after {
  border-right-color: #DCECF5;
}
sf-app.sf-app .sf-notification.-help {
  display: block;
  padding: 30px;
}
sf-app.sf-app .sf-notification.-faq {
  position: absolute;
  margin-bottom: 5px;
  bottom: 100%;
  right: 0;
  width: 290px;
}
sf-app.sf-app .sf-notification.-fixed {
  max-width: 850px;
}
sf-app.sf-app .sf-notification.-toolset {
  display: inline-block;
  padding: 0;
  height: 55px;
  line-height: 55px;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__content {
  display: flex;
  height: 100%;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool {
  padding-left: 20px;
  padding-right: 20px;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-group {
  display: inline-flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  white-space: nowrap;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-group .sf-notification__tool-button {
  padding: 5px;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-group .sf-notification__tool-button:not(:first-of-type) {
  margin-left: 10px;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-button:hover {
  cursor: pointer;
  color: #ccc;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-button:hover {
  cursor: pointer;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-button:hover.-active {
  color: #fff;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-button.-active {
  background-color: #999;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-dropdown {
  min-width: 200px;
  margin-left: 20px;
  padding: 5px;
  color: inherit;
  background-color: inherit;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
  display: inline-block;
  max-width: 200px;
  vertical-align: middle;
  padding-left: 20px;
}
sf-app.sf-app .sf-notification.-toolset .sf-notification__tool-separator {
  display: inline-block;
  width: 1px;
  background-color: #777;
}
sf-app.sf-app .sf-notification.-narrow {
  width: 250px;
}
sf-app.sf-app .sf-notification.-medium {
  width: 350px;
}
sf-app.sf-app .sf-notification__close-button {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  display: block;
  margin-left: 10px;
  order: 4;
  line-height: inherit;
  cursor: pointer;
}
sf-app.sf-app .sf-notification__close-button .sf-icon:hover {
  color: #333;
}
sf-app.sf-app .sf-notification__content {
  flex: 1;
  order: 2;
  max-width: 100%;
  word-break: normal;
}
sf-app.sf-app .sf-notification__separator {
  vertical-align: middle;
  margin-left: 10px;
  margin-right: 10px;
}
sf-app.sf-app .sf-notification-wrapper {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10000;
  height: 0;
}
sf-app.sf-app .sf-tooltip {
  position: relative;
}
sf-app.sf-app .sf-tooltip:not(:hover):not(:focus):not(:active):not(.-dropped) .sf-tooltip__content, sf-app.sf-app .sf-tooltip.-open-on-click:not(.-dropped) .sf-tooltip__content {
  padding: 0;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  left: -1000px;
}
sf-app.sf-app .sf-tooltip__content {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: var(--font-size-base);
  font-weight: normal;
}
sf-app.sf-app .sf-tooltip__content.-down, sf-app.sf-app .sf-tooltip__content.-up {
  left: 50%;
}
sf-app.sf-app .sf-tooltip__content.-down {
  transform: translateX(-50%);
}
sf-app.sf-app .sf-tooltip__content.-up {
  top: auto;
  transform: translate(-50%, -100%);
}
sf-app.sf-app .sf-tooltip__content.-right, sf-app.sf-app .sf-tooltip__content.-left {
  top: 50%;
  transform: translateY(-50%);
}
sf-app.sf-app .sf-tooltip__content.-right {
  left: 100%;
}
sf-app.sf-app .sf-tooltip__content.-left {
  left: auto;
  right: 100%;
}
sf-app.sf-app .sf-tooltip__content.-down-right, sf-app.sf-app .sf-tooltip__content.-down-left {
  transform: translateY(5px);
}
sf-app.sf-app .sf-tooltip__content.-down-right {
  left: auto;
  right: -10px;
}
sf-app.sf-app .sf-tooltip__content.-down-left {
  left: -20px;
}
sf-app.sf-app .sf-tooltip__content:not(.-toolset) {
  min-width: 250px;
  z-index: 1000000;
}
sf-app.sf-app .sf-tooltip__content.-toolset {
  z-index: 1000;
}
sf-app.sf-app .-side-content .sf-tooltip__content {
  left: auto;
  right: 0;
}
sf-app.sf-app ::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: var(--input-placeholder-color);
  font-weight: normal;
}
sf-app.sf-app :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: var(--input-placeholder-color);
  font-weight: normal;
  opacity: 1;
}
sf-app.sf-app ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: var(--input-placeholder-color);
  font-weight: normal;
  opacity: 1;
}
sf-app.sf-app :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--input-placeholder-color);
  font-weight: normal;
}
sf-app.sf-app :-moz-ui-invalid:not(output) {
  box-shadow: none;
}
sf-app.sf-app ::-ms-clear {
  display: none;
}
sf-app.sf-app :-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 25px #fff;
}
sf-app.sf-app input[type=search]::-webkit-search-decoration,
sf-app.sf-app input[type=search]::-webkit-search-cancel-button,
sf-app.sf-app input[type=search]::-webkit-search-results-button,
sf-app.sf-app input[type=search]::-webkit-search-results-decoration {
  display: none;
}
sf-app.sf-app input[type=week] {
  display: flex;
  align-items: center;
}
sf-app.sf-app .sf-input {
  position: relative;
  display: inline-block;
  line-height: 18px;
  vertical-align: top;
  width: 100%;
}
sf-app.sf-app .sf-input input,
sf-app.sf-app .sf-input textarea {
  display: block;
  font-family: "Open Sans", sans-serif;
  transition: border-color 0.3s;
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 0;
  background-color: #fff;
  box-sizing: border-box;
  -webkit-appearance: none;
  color: #333;
}
sf-app.sf-app .sf-input input:focus,
sf-app.sf-app .sf-input textarea:focus {
  box-shadow: 0 0 2px rgba(0, 108, 217, 0.8);
}
sf-app.sf-app .sf-input input:hover,
sf-app.sf-app .sf-input textarea:hover {
  border-color: var(--input-border-hover);
}
sf-app.sf-app .sf-input input:disabled,
sf-app.sf-app .sf-input textarea:disabled {
  background-color: #f5f5f5;
  color: #ccc;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
sf-app.sf-app .sf-input input:disabled:focus, sf-app.sf-app .sf-input input:disabled:hover,
sf-app.sf-app .sf-input textarea:disabled:focus,
sf-app.sf-app .sf-input textarea:disabled:hover {
  border-color: var(--input-border);
}
sf-app.sf-app .sf-input input {
  padding: 0 10px;
}
sf-app.sf-app .sf-input textarea {
  min-height: 80px;
  padding: 8px 10px;
}
sf-app.sf-app .sf-input:not(.-bordered) input:-moz-read-only,
sf-app.sf-app .sf-input:not(.-bordered) textarea:-moz-read-only {
  padding: 0;
  color: #333;
  background-color: transparent;
  border-color: transparent;
}
sf-app.sf-app .sf-input:not(.-bordered) input:-moz-read-only:focus, sf-app.sf-app .sf-input:not(.-bordered) input:-moz-read-only:hover,
sf-app.sf-app .sf-input:not(.-bordered) textarea:-moz-read-only:focus,
sf-app.sf-app .sf-input:not(.-bordered) textarea:-moz-read-only:hover {
  border-color: transparent;
}
sf-app.sf-app .sf-input:not(.-bordered) input:-moz-read-only, sf-app.sf-app .sf-input:not(.-bordered) textarea:-moz-read-only {
  padding: 0;
  color: #333;
  background-color: transparent;
  border-color: transparent;
}
sf-app.sf-app .sf-input:not(.-bordered) input:read-only,
sf-app.sf-app .sf-input:not(.-bordered) textarea:read-only {
  padding: 0;
  color: #333;
  background-color: transparent;
  border-color: transparent;
}
sf-app.sf-app .sf-input:not(.-bordered) input:-moz-read-only:focus, sf-app.sf-app .sf-input:not(.-bordered) input:-moz-read-only:hover, sf-app.sf-app .sf-input:not(.-bordered) textarea:-moz-read-only:focus, sf-app.sf-app .sf-input:not(.-bordered) textarea:-moz-read-only:hover {
  border-color: transparent;
}
sf-app.sf-app .sf-input:not(.-bordered) input:read-only:focus, sf-app.sf-app .sf-input:not(.-bordered) input:read-only:hover,
sf-app.sf-app .sf-input:not(.-bordered) textarea:read-only:focus,
sf-app.sf-app .sf-input:not(.-bordered) textarea:read-only:hover {
  border-color: transparent;
}
sf-app.sf-app .sf-input.-clearable .sf-input__field {
  padding-right: 20px;
}
sf-app.sf-app .sf-input.-side-content .sf-input__title {
  border-right: 1px solid var(--input-border);
}
sf-app.sf-app .sf-input.-side-content .sf-input__field {
  padding-right: 46px;
}
sf-app.sf-app .sf-input.-bold .sf-input__field {
  font-weight: bold;
}
sf-app.sf-app .sf-input.-unit {
  display: flex;
  flex-wrap: nowrap;
}
sf-app.sf-app .sf-input.-unit .sf-input__label {
  width: 100%;
}
sf-app.sf-app .sf-input.-unit .sf-input__field {
  flex: 1;
  width: auto;
  min-width: 40px;
}
sf-app.sf-app .sf-input.-unit.-left .sf-input__field {
  order: 2;
}
sf-app.sf-app .sf-input.-unit.-left .sf-input__unit {
  order: 1;
  border-right: 0;
  border-left: 1px solid var(--input-border);
}
sf-app.sf-app .sf-input.-unit.-left .sf-input__unit::before {
  right: auto;
  left: calc(100% + 8px);
  border-left: 0;
}
sf-app.sf-app .sf-input.-textarea .sf-input__side-content {
  margin-left: 10px;
  top: 1.8em;
  left: 100%;
  right: auto;
  background: transparent;
  border: transparent;
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: #333;
  height: auto;
  width: auto;
  text-align: left;
}
sf-app.sf-app .sf-input.-char-counter .sf-input__side-content {
  top: 4.3em;
}
sf-app.sf-app .sf-input.-title .sf-input__title[contenteditable=true] {
  padding-bottom: 10px;
}
sf-app.sf-app .sf-input.-title .sf-input__title[contenteditable=true]:hover {
  box-shadow: 0 3px 0 -2px var(--input-box-shadow-hover);
}
sf-app.sf-app .sf-input.-title .sf-input__title[contenteditable=true]:focus {
  box-shadow: 0 3px 2px -3px rgba(0, 108, 217, 0.8);
}
sf-app.sf-app .sf-input.-title.-large .sf-input__title {
  font-size: var(--font-size-h1-lg);
}
sf-app.sf-app .sf-input.-title.-small .sf-input__title {
  font-size: var(--font-size-h3);
  min-height: 0;
}
sf-app.sf-app .sf-input.-title .sf-input__side-content {
  margin-left: 10px;
  top: 0;
  left: 100%;
  right: auto;
  font-size: var(--font-size-base);
  line-height: 1.55;
  text-align: left;
}
sf-app.sf-app .sf-input.-short.-textarea textarea {
  min-height: 60px;
}
sf-app.sf-app .sf-input.-short .sf-input__field {
  height: 28px;
}
sf-app.sf-app .sf-input.-centered .sf-input__field {
  text-align: center;
}
sf-app.sf-app .sf-input.-no-border {
  border: 0;
  padding: 0;
}
sf-app.sf-app .sf-input.-no-border .sf-input__textarea {
  border: 0;
  padding: 0;
}
sf-app.sf-app .sf-input.-no-resize .sf-input__textarea {
  resize: none;
}
sf-app.sf-app .sf-input.-inline .sf-input__field,
sf-app.sf-app .sf-input.-inline .sf-input__textarea {
  font-size: var(--font-size-base);
  border: 0;
}
sf-app.sf-app .sf-input.-inline .sf-input__field:not([disabled]):hover,
sf-app.sf-app .sf-input.-inline .sf-input__textarea:not([disabled]):hover {
  background-color: #FFFFCC;
}
sf-app.sf-app .sf-input.-inline .sf-input__field:focus,
sf-app.sf-app .sf-input.-inline .sf-input__textarea:focus {
  box-shadow: none;
}
sf-app.sf-app .sf-input.-inline .sf-input__field {
  padding-left: 0;
  padding-right: 0;
  height: 22px;
}
sf-app.sf-app .sf-input.-inline .sf-input__textarea {
  padding: 0;
}
sf-app.sf-app .sf-input.-large .sf-input__field,
sf-app.sf-app .sf-input.-large .sf-input__textarea {
  font-size: var(--font-size-lg);
}
sf-app.sf-app .sf-input.-small-label .sf-input__label {
  font-size: var(--font-size-h5);
  font-weight: normal;
  color: var(--color-h5);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  margin: 0 0 5px;
}
sf-app.sf-app .sf-input__label:not(.-small-label) {
  display: block;
  margin: 0 0 5px;
  font-weight: 700;
  font-size: var(--font-size-lg);
}
sf-app.sf-app .sf-input__field {
  color: inherit;
  height: 36px;
}
sf-app.sf-app .sf-input__field:focus + .sf-input__unit {
  box-shadow: 0 0 2px rgba(0, 108, 217, 0.8);
}
sf-app.sf-app .sf-input__no-value {
  font-size: var(--font-size-lg);
  color: #ccc;
}
sf-app.sf-app .sf-input__hint {
  margin: 5px 0 0;
  color: var(--secondary-text-color);
  width: 100%;
}
sf-app.sf-app .sf-input__required {
  display: block;
  margin: 5px 0 0;
  color: var(--color-error);
}
sf-app.sf-app .sf-input__clear-button {
  position: absolute;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease-out;
  transition-property: opacity, transform;
  transition-delay: 100ms;
  outline: none;
  z-index: 1;
  z-index: 5;
}
sf-app.sf-app .sf-input__clear-button:hover .sf-icon, sf-app.sf-app .sf-input__clear-button:focus .sf-icon, sf-app.sf-app .sf-input__clear-button:active .sf-icon {
  color: #333;
}
sf-app.sf-app .sf-input__clear-button.-show {
  opacity: 1;
  transform: scale(1);
}
sf-app.sf-app .sf-input__side-content {
  position: absolute;
  opacity: 1;
  top: 1.3em;
  color: #ccc;
}
sf-app.sf-app .sf-input__unit {
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  width: auto;
  height: 36px;
  line-height: 36px;
  background-color: #f5f5f5;
  border-top: 1px solid var(--input-border);
  border-right: 1px solid var(--input-border);
  border-bottom: 1px solid var(--input-border);
  outline: none;
  white-space: nowrap;
}
sf-app.sf-app .sf-input__unit::before {
  display: block;
  content: "";
  position: relative;
  left: -11px;
  width: 3px;
  height: calc( 100% + 2px );
  border-top: 1px solid var(--input-border);
  border-bottom: 1px solid var(--input-border);
  background-color: #f5f5f5;
}
sf-app.sf-app .sf-input__char-counter {
  position: absolute;
  margin-left: 10px;
  font-size: var(--font-size-base);
  top: 0.7em;
  left: 100%;
  color: var(--input-char-counter-success-color);
}
sf-app.sf-app .sf-input__char-counter.-error {
  color: var(--input-char-counter-error-color);
}
sf-app.sf-app .sf-input__title {
  font-family: "Open Sans Condensed", sans-serif;
  font-size: var(--font-size-h1);
  font-weight: bold;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
  outline: none;
  cursor: text;
  min-height: 58px;
}
sf-app.sf-app .sf-input__title::-webkit-input-placeholder {
  font-family: Open Sans Condensed, sans-serif;
  font-size: var(--font-size-h1);
  line-height: 1.3;
  font-weight: bold;
}
sf-app.sf-app .sf-input__title::-moz-placeholder {
  /* Firefox 19+ */
  font-family: Open Sans Condensed, sans-serif;
  font-size: var(--font-size-h1);
  line-height: 1.3;
  font-weight: bold;
}
sf-app.sf-app .sf-input__title:-ms-input-placeholder {
  font-family: Open Sans Condensed, sans-serif;
  font-size: var(--font-size-h1);
  line-height: 1.3;
  font-weight: bold;
}
sf-app.sf-app .sf-input__title.-placeholder::before {
  display: block;
  content: attr(data-placeholder);
  color: var(--input-title-placeholder-color);
}
sf-app.sf-app .sf-input__title.-placeholder br:only-child {
  position: absolute;
  top: 0;
}
sf-app.sf-app .sf-input__title .sf-input__required {
  margin-top: -20px;
  padding-top: 3px;
  border-top: 1px solid #ff4848;
}
sf-app.sf-app .sf-input.ng-dirty.ng-invalid .sf-input__field.ng-dirty.ng-invalid, sf-app.sf-app .sf-input.ng-dirty.ng-invalid .sf-input__field.ng-dirty.ng-invalid:focus, sf-app.sf-app .sf-input.ng-dirty.ng-invalid .sf-input__field.ng-dirty.ng-invalid:hover,
sf-app.sf-app .sf-input.ng-dirty.ng-invalid .sf-input__textarea.ng-dirty.ng-invalid,
sf-app.sf-app .sf-input.ng-dirty.ng-invalid .sf-input__textarea.ng-dirty.ng-invalid:focus,
sf-app.sf-app .sf-input.ng-dirty.ng-invalid .sf-input__textarea.ng-dirty.ng-invalid:hover, sf-app.sf-app .sf-input.-required .sf-input__field.ng-dirty.ng-invalid, sf-app.sf-app .sf-input.-required .sf-input__field.ng-dirty.ng-invalid:focus, sf-app.sf-app .sf-input.-required .sf-input__field.ng-dirty.ng-invalid:hover,
sf-app.sf-app .sf-input.-required .sf-input__textarea.ng-dirty.ng-invalid,
sf-app.sf-app .sf-input.-required .sf-input__textarea.ng-dirty.ng-invalid:focus,
sf-app.sf-app .sf-input.-required .sf-input__textarea.ng-dirty.ng-invalid:hover {
  border-color: var(--color-error);
}
sf-app.sf-app .sf-input.ng-dirty.ng-invalid.-title .sf-input__required, sf-app.sf-app .sf-input.-required.-title .sf-input__required {
  margin-top: 0;
  padding-top: 3px;
  border-top: 1px solid var(--color-error);
}
sf-app.sf-app .sf-input-file {
  display: flex;
}
sf-app.sf-app .sf-input-file__label {
  position: relative;
  cursor: pointer;
  z-index: 10;
}
sf-app.sf-app .sf-input-file input[type=file] {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
  z-index: auto;
}
sf-app.sf-app .sf-input-file input[type=file]:focus + .sf-input-file__label .sf-button {
  background-color: #e4e4e4;
}
sf-app.sf-app .sf-input-file input[type=file]:focus + .sf-input-file__label .sf-button.-action {
  background-color: #309255;
}
sf-app.sf-app .sf-dropdown {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  display: inline-block;
}
sf-app.sf-app .sf-dropdown:not(.-empty) {
  padding: 10px 0;
  min-width: 200px;
  white-space: nowrap;
  border: 1px solid var(--dropdown-border);
  box-shadow: 0 3px 5px rgba(228, 228, 228, 0.5);
  background-color: #fff;
  color: #333;
  max-height: calc(100vh - 46px);
}
sf-app.sf-app .sf-dropdown.-condensed {
  padding-top: 0;
  padding-bottom: 0;
}
sf-app.sf-app .sf-dropdown.-color-picker {
  width: 231px;
  padding: 4px;
}
sf-app.sf-app .sf-dropdown__item {
  display: flex;
  flex-wrap: nowrap;
  width: auto;
  position: relative;
  margin-bottom: 1px;
  padding: 3px 20px;
  word-break: break-all;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
}
sf-app.sf-app .sf-dropdown__item:hover, sf-app.sf-app .sf-dropdown__item:focus {
  background-color: #f5f5f5;
}
sf-app.sf-app .sf-dropdown__item.-active {
  background-color: #eee;
}
sf-app.sf-app .sf-dropdown__item.-not-clickable {
  cursor: default;
}
sf-app.sf-app .sf-dropdown__item.-not-clickable:hover, sf-app.sf-app .sf-dropdown__item.-not-clickable:focus {
  background-color: transparent;
  outline: 0;
}
sf-app.sf-app .sf-dropdown__item[disabled], sf-app.sf-app .sf-dropdown__item.-disabled {
  color: #adadad;
  cursor: default;
  pointer-events: none;
}
sf-app.sf-app .sf-dropdown__no-items {
  padding: 5px 10px 30px;
  color: #999;
  cursor: default;
}
sf-app.sf-app .sf-dropdown__heading {
  font-size: var(--font-size-h5);
  font-weight: normal;
  color: var(--color-h5);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 20px 8px;
  line-height: 1;
  cursor: default;
}
sf-app.sf-app .sf-dropdown__heading.-condensed {
  padding-left: 10px;
  padding-right: 10px;
}
sf-app.sf-app .sf-dropdown__heading:hover {
  background: transparent;
}
sf-app.sf-app .sf-dropdown__separator {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  cursor: default;
}
sf-app.sf-app .sf-dropdown__description {
  font-size: var(--font-size-h5);
  font-weight: normal;
  color: var(--color-h5);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  text-transform: uppercase;
  line-height: 1;
}
sf-app.sf-app .sf-dropdown__counter {
  margin-left: auto;
  min-width: 50px;
  text-align: right;
}
sf-app.sf-app .sf-dropdown__counter.-positive {
  color: var(--color-success);
}
sf-app.sf-app .sf-dropdown__counter.-neutral {
  color: var(--dropdown-item-counter-neutral);
}
sf-app.sf-app .sf-dropdown__icon {
  font-size: inherit;
  margin-top: -5px;
}
sf-app.sf-app .sf-expander {
  display: block;
  margin-bottom: 10px;
  margin-left: -60px;
}
sf-app.sf-app .sf-expander > hr {
  margin-left: 60px;
}
sf-app.sf-app .sf-expander__header {
  font-size: var(--font-size-h2);
  font-weight: 300;
  line-height: 1.3;
  color: var(--color-h2);
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  position: relative;
  cursor: pointer;
}
sf-app.sf-app .sf-expander__header:focus .sf-expander__icon {
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
sf-app.sf-app .sf-expander__icon {
  margin-right: 28px !important;
}
sf-app.sf-app .sf-expander__content {
  margin-left: 60px;
}
sf-app.sf-app .sf-expander__checkbox {
  position: absolute;
  left: -9999px;
}
sf-app.sf-app .sf-expander__checkbox ~ .sf-expander__content {
  visibility: hidden;
}
sf-app.sf-app .sf-expander__checkbox:checked ~ .sf-expander__content {
  visibility: visible;
}
sf-app.sf-app .sf-checkbox {
  position: relative;
  display: block;
}
sf-app.sf-app .sf-checkbox.-inline {
  display: inline-block;
}
sf-app.sf-app .sf-checkbox__label {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  font-weight: normal;
  cursor: pointer;
  transition: color 0.3s;
}
sf-app.sf-app .sf-checkbox__label .sf-radio__icon,
sf-app.sf-app .sf-checkbox__label .sf-checkbox__icon {
  transition: color 0.3s;
}
sf-app.sf-app .sf-checkbox__label .sf-radio__text,
sf-app.sf-app .sf-checkbox__label .sf-checkbox__text {
  margin-left: 5px;
  width: 100%;
}
sf-app.sf-app .sf-checkbox__label .sf-radio__description {
  margin-left: 5px;
  width: 100%;
}
sf-app.sf-app .sf-checkbox__label.-inline {
  display: inline-flex;
  width: auto;
}
sf-app.sf-app .sf-checkbox__input {
  position: absolute;
  margin: 0;
  width: 15px;
  height: 15px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
sf-app.sf-app .sf-checkbox__input:checked + label .sf-radio__icon,
sf-app.sf-app .sf-checkbox__input:checked + label .sf-checkbox__icon {
  border-radius: 1px;
  border-color: var(--checkbox-checked-border);
  background-color: #fff;
  color: #777;
}
sf-app.sf-app .sf-checkbox__input:checked + label .sf-radio__icon:before,
sf-app.sf-app .sf-checkbox__input:checked + label .sf-checkbox__icon:before {
  opacity: 1;
}
sf-app.sf-app .sf-checkbox__input:checked:hover + label .sf-radio__icon,
sf-app.sf-app .sf-checkbox__input:checked:hover + label .sf-checkbox__icon {
  border-color: var(--checkbox-border-hover);
}
sf-app.sf-app .sf-checkbox__input:active + label .sf-radio__icon,
sf-app.sf-app .sf-checkbox__input:active + label .sf-checkbox__icon {
  background-color: #fff;
}
sf-app.sf-app .sf-checkbox__input:hover + label .sf-radio__icon,
sf-app.sf-app .sf-checkbox__input:hover + label .sf-checkbox__icon, sf-app.sf-app .sf-checkbox__input:focus + label .sf-radio__icon,
sf-app.sf-app .sf-checkbox__input:focus + label .sf-checkbox__icon {
  border-color: var(--checkbox-border-hover);
}
sf-app.sf-app .sf-checkbox__input:disabled {
  cursor: default;
}
sf-app.sf-app .sf-checkbox__input:disabled + label {
  cursor: default;
}
sf-app.sf-app .sf-checkbox__input:disabled + label .sf-radio__icon,
sf-app.sf-app .sf-checkbox__input:disabled + label .sf-checkbox__icon {
  border-color: var(--checkbox-border);
  background: #f5f5f5;
  color: #ccc;
}
sf-app.sf-app .sf-checkbox__input:disabled + label .sf-radio__icon:before {
  background-color: var(--checkbox-border);
}
sf-app.sf-app .sf-checkbox__icon {
  display: block;
  position: relative;
  flex: none;
  border: 1px solid var(--checkbox-border);
  transition: border-color 0.3s;
  border-radius: 1px;
  width: 15px;
  height: 15px;
}
sf-app.sf-app .sf-checkbox__icon:before {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  transition: opacity 0.3s;
  opacity: 0;
}
sf-app.sf-app .sf-checkbox__icon:before {
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  font-size: var(--icon-size-2xs);
  content: "";
}
sf-app.sf-app .sf-checkbox.-ellipsis {
  width: 100%;
}
sf-app.sf-app .sf-checkbox.-ellipsis label .sf-checkbox__text,
sf-app.sf-app .sf-checkbox.-ellipsis label .sf-radio__text {
  padding-left: 21px;
  margin-left: -16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
}
sf-app.sf-app .sf-radio {
  position: relative;
  display: block;
}
sf-app.sf-app .sf-radio.-inline {
  display: inline-block;
}
sf-app.sf-app .sf-radio__label {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  font-weight: normal;
  cursor: pointer;
  transition: color 0.3s;
}
sf-app.sf-app .sf-radio__label .sf-radio__icon,
sf-app.sf-app .sf-radio__label .sf-checkbox__icon {
  transition: color 0.3s;
}
sf-app.sf-app .sf-radio__label .sf-radio__text,
sf-app.sf-app .sf-radio__label .sf-checkbox__text {
  margin-left: 5px;
  width: 100%;
}
sf-app.sf-app .sf-radio__label .sf-radio__description {
  margin-left: 5px;
  width: 100%;
}
sf-app.sf-app .sf-radio__label.-inline {
  display: inline-flex;
  width: auto;
}
sf-app.sf-app .sf-radio__description {
  font-size: var(--font-size-base);
  margin-left: 21px;
  margin-bottom: 0;
  color: var(--secondary-text-color);
}
sf-app.sf-app .sf-radio__input {
  position: absolute;
  margin: 0;
  width: 16px;
  height: 16px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
sf-app.sf-app .sf-radio__input:checked + label .sf-radio__icon,
sf-app.sf-app .sf-radio__input:checked + label .sf-checkbox__icon {
  border-radius: 50%;
  border-color: var(--checkbox-checked-border);
  background-color: #fff;
  color: #777;
}
sf-app.sf-app .sf-radio__input:checked + label .sf-radio__icon:before,
sf-app.sf-app .sf-radio__input:checked + label .sf-checkbox__icon:before {
  opacity: 1;
}
sf-app.sf-app .sf-radio__input:checked:hover + label .sf-radio__icon,
sf-app.sf-app .sf-radio__input:checked:hover + label .sf-checkbox__icon {
  border-color: var(--checkbox-border-hover);
}
sf-app.sf-app .sf-radio__input:active + label .sf-radio__icon,
sf-app.sf-app .sf-radio__input:active + label .sf-checkbox__icon {
  background-color: #fff;
}
sf-app.sf-app .sf-radio__input:hover + label .sf-radio__icon,
sf-app.sf-app .sf-radio__input:hover + label .sf-checkbox__icon, sf-app.sf-app .sf-radio__input:focus + label .sf-radio__icon,
sf-app.sf-app .sf-radio__input:focus + label .sf-checkbox__icon {
  border-color: var(--checkbox-border-hover);
}
sf-app.sf-app .sf-radio__input:disabled {
  cursor: default;
}
sf-app.sf-app .sf-radio__input:disabled + label {
  cursor: default;
}
sf-app.sf-app .sf-radio__input:disabled + label .sf-radio__icon,
sf-app.sf-app .sf-radio__input:disabled + label .sf-checkbox__icon {
  border-color: var(--checkbox-border);
  background: #f5f5f5;
  color: #ccc;
}
sf-app.sf-app .sf-radio__input:disabled + label .sf-radio__icon:before {
  background-color: var(--checkbox-border);
}
sf-app.sf-app .sf-radio__icon {
  display: block;
  position: relative;
  flex: none;
  border: 1px solid var(--checkbox-border);
  transition: border-color 0.3s;
  border-radius: 50%;
  width: 16px;
  height: 16px;
}
sf-app.sf-app .sf-radio__icon:before {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  transition: opacity 0.3s;
  opacity: 0;
}
sf-app.sf-app .sf-radio__icon:before {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background-color: #777;
}
sf-app.sf-app .sf-radio.-ellipsis {
  width: 100%;
}
sf-app.sf-app .sf-radio.-ellipsis label .sf-checkbox__text,
sf-app.sf-app .sf-radio.-ellipsis label .sf-radio__text {
  padding-left: 21px;
  margin-left: -16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
}
sf-app.sf-app .sf-choice-group.-chip {
  display: inline-flex;
  font-size: var(--font-size-base);
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio {
  margin-right: 0;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio:first-child .sf-radio__label {
  border-left: 1px solid var(--button-border-color);
  border-top-left-radius: 28px;
  border-bottom-left-radius: 28px;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio:last-child .sf-radio__label {
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio.-size-m .sf-radio__label {
  width: 63px;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio.-size-l .sf-radio__label {
  width: auto;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio.-size-l .sf-radio__text {
  margin: 0 15px;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio.-wide .sf-radio__label {
  width: 40px;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio__label {
  display: inline-flex;
  justify-content: center;
  height: 28px;
  line-height: 28px;
  width: 30px;
  text-align: center;
  border-top: 1px solid var(--button-border-color);
  border-bottom: 1px solid var(--button-border-color);
  border-right: 1px solid var(--button-border-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio__label:hover {
  background-color: var(--button-interaction-background-color);
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio__icon {
  display: none;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio__text {
  margin: 0 10px;
}
sf-app.sf-app .sf-choice-group.-chip .sf-radio__input:checked + .sf-radio__label {
  background-color: var(--radio-chip-selected-bg-color);
}
sf-app.sf-app .sf-choice-group.-list .sf-radio,
sf-app.sf-app .sf-choice-group.-list .sf-checkbox {
  margin-bottom: 0;
  margin-right: 0;
}
sf-app.sf-app .sf-choice-group.-list .sf-radio:first-child .sf-radio__label,
sf-app.sf-app .sf-choice-group.-list .sf-radio:first-child .sf-checkbox__label,
sf-app.sf-app .sf-choice-group.-list .sf-checkbox:first-child .sf-radio__label,
sf-app.sf-app .sf-choice-group.-list .sf-checkbox:first-child .sf-checkbox__label {
  border-top: 1px solid var(--button-border-color);
}
sf-app.sf-app .sf-choice-group.-list .sf-radio__label,
sf-app.sf-app .sf-choice-group.-list .sf-checkbox__label {
  padding: 10px 9px;
  font-size: 13px;
  border-bottom: 1px solid var(--button-border-color);
}
sf-app.sf-app .sf-choice-group.-list .sf-radio__icon {
  display: none;
}
sf-app.sf-app .sf-choice-group.-list .sf-radio__text {
  margin-left: 0;
}
sf-app.sf-app .sf-choice-group.-list .sf-radio__input:checked + .sf-radio__label,
sf-app.sf-app .sf-choice-group.-list .sf-checkbox__input:checked + .sf-checkbox__label {
  background-color: var(--radio-chip-selected-bg-color);
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-loader {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
}
sf-app.sf-app .sf-loader__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0;
}
sf-app.sf-app .sf-loader__rect {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin: 0 1px 0 0;
  background-color: #38ab63;
  -webkit-animation: loader 1s infinite ease-in-out;
          animation: loader 1s infinite ease-in-out;
  opacity: 0.3;
  border-radius: 2px;
}
sf-app.sf-app .sf-loader__rect.-second {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
sf-app.sf-app .sf-loader__rect.-third {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
sf-app.sf-app .sf-loader.-home {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  z-index: 100000;
}
sf-app.sf-app .sf-loader.-big .sf-loader__rect, sf-app.sf-app .sf-loader.-home .sf-loader__rect {
  width: 10px;
  height: 10px;
}
sf-app.sf-app .sf-loader.-mini {
  margin-top: -4px;
}
sf-app.sf-app .sf-loader.-mini .sf-loader__rect {
  width: 4px;
  height: 4px;
  border-radius: 1px;
}
sf-app.sf-app .sf-loader.-inline {
  position: relative;
  display: inline-block;
}
sf-app.sf-app .sf-loader.-color .sf-loader__rect {
  background-color: #333;
}
sf-app.sf-app .sf-loader.-transparent .sf-loader__rect {
  background-color: #fff;
}
sf-app.sf-app .sf-loader.-progressbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  width: 100%;
  overflow: hidden;
  z-index: 10000;
}
sf-app.sf-app .sf-loader.-progressbar .sf-loader__content {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #38ab63;
  -webkit-animation: loadingProgressbar 1s linear infinite;
          animation: loadingProgressbar 1s linear infinite;
  transform-origin: 0 0;
}
sf-app.sf-app .sf-loader.-progressbar .sf-loader__rect {
  display: none;
}
sf-app.sf-app .sf-loader.-progressbar.-overlay {
  bottom: 0;
  height: 100%;
  z-index: 1000000;
}
sf-app.sf-app .sf-loader.-progressbar.-overlay .sf-loader__content {
  top: 0;
  left: 0;
}
sf-app.sf-app .sf-loader.-skeleton {
  position: static;
}
sf-app.sf-app .sf-loader.-skeleton.-fluid-content .sf-loader__content {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
sf-app.sf-app .sf-loader.-skeleton.-fluid-content .sf-loader__rect {
  width: 100%;
  height: 10px;
  margin-bottom: 6px;
  background-color: #f5f5f5;
  -webkit-animation: loadingSkeleton 1s linear infinite;
          animation: loadingSkeleton 1s linear infinite;
}
sf-app.sf-app .sf-loader.-skeleton.-fluid-content .sf-loader__rect:last-of-type {
  width: 75%;
  margin-bottom: 0;
}
sf-app.sf-app .sf-loader.-skeleton:not(.-fluid-content) .sf-loader__content {
  position: relative;
  height: 100%;
  color: #f5f5f5;
  background-repeat: no-repeat;
  -webkit-animation: loadingSkeleton 1s linear infinite;
          animation: loadingSkeleton 1s linear infinite;
}
sf-app.sf-app .sf-loader.-skeleton:not(.-fluid-content) .sf-loader__rect {
  display: none;
}
sf-app.sf-app .sf-loader.-skeleton.-content .sf-loader__content {
  height: 126px;
  background-image: linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%);
  background-size: 100% 10px, 100% 10px, 100% 10px, 100% 10px, 100% 10px, 100% 10px, 75% 10px;
  background-position: 0 0, 0 16px, 0 32px, 0 48px, 0 64px, 0 80px, 0 96px;
}
sf-app.sf-app .sf-loader.-skeleton.-title .sf-loader__content {
  height: 94px;
  background-image: linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%);
  background-size: 100% 42px, 75% 42px;
  background-position: 0 0, 0 52px;
}
sf-app.sf-app .sf-loader.-skeleton.-single-title .sf-loader__content {
  height: 88px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 42px;
  background-position: 0 16px;
}
sf-app.sf-app .sf-loader.-skeleton.-list {
  height: 53px;
  padding: 13px 8px;
}
sf-app.sf-app .sf-loader.-skeleton.-list .sf-loader__content {
  height: 26px;
  background-image: linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%);
  background-size: 100% 10px, 75% 10px;
  background-position: 0 0, 0 16px;
}
sf-app.sf-app .sf-loader.-skeleton.-list-horizontal {
  padding: 39px 18px;
  width: 190px;
  height: 230px;
  border: 1px solid #eee;
}
sf-app.sf-app .sf-loader.-skeleton.-list-horizontal .sf-loader__content {
  height: 58px;
  background-image: linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%);
  background-size: 100% 10px, 100% 10px, 100% 10px, 75% 10px;
  background-position: 0 0, 0 16px, 0 32px, 0 48px;
}
sf-app.sf-app .sf-loader.-skeleton.-list-with-thumb {
  width: 190px;
  height: 230px;
  border: 1px solid #eee;
}
sf-app.sf-app .sf-loader.-skeleton.-list-with-thumb .sf-loader__content {
  height: 100%;
  background-image: linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%);
  background-size: 100% 138px, 80% 10px, 80% 10px, 50% 10px;
  background-position: 0 0, 50% 164px, 50% 180px, 20% 196px;
}
sf-app.sf-app .sf-loader.-skeleton.-side-content .sf-loader__content {
  height: 100px;
  background-image: linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%), linear-gradient(currentColor 0, currentColor 100%);
  background-size: 90% 10px, 50% 10px, 75% 10px;
  background-position: 0 15px, 0 45px, 0 75px;
}
sf-app.sf-app .sf-loader.-skeleton.-darker .sf-loader__content {
  color: #e4e4e4;
}
sf-app.sf-app .sf-loader.-skeleton.-sequence {
  border-bottom: 1px solid #eee;
}
sf-app.sf-app .sf-loader.-skeleton.-sequence:first-child {
  border-top: 1px solid #eee;
}
sf-app.sf-app .sf-loader.-skeleton.-media .sf-loader__content {
  flex-direction: row;
}
sf-app.sf-app .sf-loader.-skeleton.-media .sf-loader__rect {
  height: 150px;
  background-color: #f5f5f5;
  margin-bottom: 0;
}
sf-app.sf-app .sf-loader.-skeleton.-media .sf-loader__rect:not(:first-child) {
  margin-left: 10px;
}
sf-app.sf-app .sf-loader.-skeleton.-media .-first {
  flex-basis: 15%;
}
sf-app.sf-app .sf-loader.-skeleton.-media .-second {
  flex-basis: 22%;
}
sf-app.sf-app .sf-loader.-skeleton.-media .-third {
  flex-basis: 11%;
}
sf-app.sf-app .sf-loader.-skeleton.-media .-fourth {
  flex-basis: 22%;
}
sf-app.sf-app .sf-loader.-skeleton.-media .-fifth {
  flex-basis: 15%;
}
sf-app.sf-app .sf-loader.-skeleton.-media .-sixth {
  flex-basis: 15%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media .-first {
  flex-basis: 11%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media .-second {
  flex-basis: 15%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media .-third {
  flex-basis: 15%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media .-fourth {
  flex-basis: 22%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media .-fifth {
  flex-basis: 15%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media .-sixth {
  flex-basis: 22%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media + .-media .-first {
  flex-basis: 22%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media + .-media .-second {
  flex-basis: 15%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media + .-media .-third {
  flex-basis: 22%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media + .-media .-fourth {
  flex-basis: 15%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media + .-media .-fifth {
  flex-basis: 15%;
}
sf-app.sf-app .sf-loader.-skeleton.-media + .-media + .-media .-sixth {
  flex-basis: 11%;
}
sf-app.sf-app .sf-loader.-negative-zindex {
  z-index: -1;
}
sf-app.sf-app .sf-chip {
  display: inline-block;
  position: relative;
  margin-right: 5px;
  margin-bottom: 5px;
  min-height: 28px;
  max-width: 100%;
  vertical-align: top;
  font-size: var(--font-size-h4);
}
sf-app.sf-app .sf-chip__content {
  background-color: #DCECF5;
}
sf-app.sf-app .sf-chip.-success .sf-chip__content {
  background-color: #CAEED8;
}
sf-app.sf-app .sf-chip.-error .sf-chip__content {
  background-color: #FFCCCC;
}
sf-app.sf-app .sf-chip.-invert .sf-chip__content {
  background-color: #333;
}
sf-app.sf-app .sf-chip.-white {
  color: #fff;
}
sf-app.sf-app .sf-chip.-removable .sf-chip__content {
  transition: text-indent 0.2s, padding 0.2s;
  overflow: hidden;
}
sf-app.sf-app .sf-chip.-removable:hover .sf-chip__remove-button {
  display: inline;
}
sf-app.sf-app .sf-chip.-removable:hover .sf-chip__content {
  text-indent: -6px;
  padding-right: 21px;
}
sf-app.sf-app .sf-chip.-avatar .sf-chip__content {
  padding-left: 33.5px;
}
sf-app.sf-app .sf-chip.-icon .sf-chip__content {
  padding-left: 33.5px;
}
sf-app.sf-app .sf-chip.-initials .sf-chip__content {
  padding-left: 33.5px;
}
sf-app.sf-app .sf-chip.-editable .sf-chip__content {
  display: inline-block;
  min-width: 65px;
}
sf-app.sf-app .sf-chip.-dropped .sf-chip__dropdown {
  display: block;
  position: absolute;
  top: 33px;
  padding-top: 0;
  padding-bottom: 0;
  width: auto;
  max-width: 800px;
  z-index: 10000;
}
sf-app.sf-app .sf-chip.-input {
  display: block;
  margin-right: 0;
  margin-bottom: 0;
}
sf-app.sf-app .sf-chip.-input .sf-chip__input {
  padding-left: 5px;
  padding-right: 5px;
  height: 36px;
  width: 100%;
  border: 1px solid #e4e4e4;
  background-color: #fff;
  border-radius: 0;
}
sf-app.sf-app .sf-chip.-input .sf-chip__dropdown {
  width: 100%;
}
sf-app.sf-app .sf-chip.-stripped {
  font-size: inherit;
}
sf-app.sf-app .sf-chip.-stripped .sf-chip__content {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}
sf-app.sf-app .sf-chip__content {
  display: inline-flex;
  padding-left: 15px;
  padding-right: 15px;
  height: 28px;
  line-height: 28px;
  text-align: left;
  vertical-align: top;
  border-radius: 28px;
  background-color: #DCECF5;
  overflow: hidden;
  max-width: 100%;
}
sf-app.sf-app .sf-chip__content:focus {
  outline-color: transparent;
}
sf-app.sf-app .sf-chip__hint {
  flex-shrink: 0;
}
sf-app.sf-app .sf-chip__avatar {
  display: inline-block;
  position: absolute;
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 7.5px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
  color: #777;
  z-index: 10;
  max-width: 100%;
}
sf-app.sf-app .sf-chip__avatar.-transparent {
  background-color: transparent;
}
sf-app.sf-app .sf-chip__icon {
  display: inline-block;
  position: absolute;
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 7.5px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
  color: #777;
  z-index: 10;
  max-width: 100%;
}
sf-app.sf-app .sf-chip__icon.-transparent {
  background-color: transparent;
}
sf-app.sf-app .sf-chip__initials {
  display: inline-block;
  position: absolute;
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 7.5px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
  color: #777;
  z-index: 10;
  max-width: 100%;
  font-size: var(--font-size-h5);
  text-transform: uppercase;
}
sf-app.sf-app .sf-chip__initials.-transparent {
  background-color: transparent;
}
sf-app.sf-app .sf-chip__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
}
sf-app.sf-app .sf-chip__remove-button {
  display: none;
  position: absolute;
  top: 0;
  right: 7.5px;
  height: 28px;
  line-height: 28px;
  text-align: right;
  cursor: pointer;
}
sf-app.sf-app .sf-chip__dropdown {
  display: none;
}
sf-app.sf-app .-grid-chip .sf-chip__content {
  max-width: 180px;
}
sf-app.sf-app .sf-error {
  display: block;
  color: var(--color-error);
}
sf-app.sf-app .sf-error-block {
  border-color: var(--color-error) !important;
}
sf-app.sf-app .sf-select {
  position: relative;
  height: 36px;
}
sf-app.sf-app .sf-select::after {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  top: 0;
  right: 10px;
  height: 36px;
  line-height: 36px;
  content: "";
  font-size: var(--icon-size-m);
  color: var(--select-arrow-color);
  pointer-events: none;
}
sf-app.sf-app .sf-select__item {
  height: 100%;
  width: 100%;
  padding-left: 10px;
  padding-right: calc(10px + var(--icon-size-m));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
sf-app.sf-app .sf-select__item::-ms-expand {
  display: none;
}
sf-app.sf-app .sf-select.-inline {
  display: inline-block;
}
sf-app.sf-app .sf-select.-small {
  height: 26px;
  font-size: var(--font-size-base);
}
sf-app.sf-app .sf-select.-small .sf-select__item {
  line-height: 1.8;
  padding-left: 6px;
  padding-right: calc(6px + var(--icon-size-xs));
}
sf-app.sf-app .sf-select.-small::after {
  height: 26px;
  line-height: 26px;
  font-size: var(--icon-size-xs);
  right: 6px;
}
sf-app.sf-app .sf-form {
  max-width: 850px;
  padding: 30px 0;
}
sf-app.sf-app .sf-form .sf-input {
  margin-bottom: 20px;
}
sf-app.sf-app .sf-form .sf-input.-shrinked,
sf-app.sf-app .sf-form .sf-input .sf-input {
  margin-bottom: 0;
}
sf-app.sf-app .sf-form .sf-checkbox:not(.-inline):not(.-in-group),
sf-app.sf-app .sf-form .sf-radio:not(.-inline):not(.-in-group) {
  margin-bottom: 10px;
}
sf-app.sf-app .sf-form .sf-checkbox:not(.-inline):not(.-in-group):last-child,
sf-app.sf-app .sf-form .sf-radio:not(.-inline):not(.-in-group):last-child {
  margin-bottom: 0;
}
sf-app.sf-app .sf-form .sf-checkbox,
sf-app.sf-app .sf-form .sf-radio {
  margin-right: 10px;
}
sf-app.sf-app .sf-form .sf-checkbox:last-child,
sf-app.sf-app .sf-form .sf-radio:last-child {
  margin-right: 0;
}
sf-app.sf-app .sf-form.-auto {
  width: auto;
}
sf-app.sf-app .sf-form.-small {
  width: 410px;
}
sf-app.sf-app .sf-form.-medium {
  width: 630px;
}
sf-app.sf-app .sf-form.-large {
  width: 1000px;
  max-width: 1000px;
}
sf-app.sf-app .sf-form.-short {
  padding-top: 0;
  padding-bottom: 0;
}
sf-app.sf-app .sf-form.-framed {
  border: 1px solid #eee;
  border-radius: 5px;
}
sf-app.sf-app .sf-form.-condensed .sf-input {
  margin-bottom: 15px;
}
sf-app.sf-app .sf-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  width: 100%;
  max-width: 100%;
  list-style-type: none;
  /***
  * Row:
  */
  /**
   * Row with auto sized columns (default):
   * `.sf-row .sf-row__col`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col">
   *            .sf-row__col
   *        </div>
   *        <div class="sf-row__col">
   *            .sf-row__col
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col">
   *            .sf-row__col
   *        </div>
   *        <div class="sf-row__col">
   *            .sf-row__col
   *        </div>
   *        <div class="sf-row__col">
   *            .sf-row__col
   *        </div>
   *     </div>
   */
  /**
   * Nested rows:
   * `.sf-row .sf-row`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-6">
   *          .sf-row__col.-col-6
   *          <div class="sf-row">
   *             <div class="sf-row__col -col-4">
   *                 .sf-row__col.-col-4
   *             </div>
   *             <div class="sf-row__col -col-8">
   *                 .sf-row__col.-col-8
   *             </div>
   *          </div>
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            .sf-row__col.-col-6
   *        </div>
   *     </div>
   *
   */
  /**
   * Row with no gutter:
   * `.sf-row.-no-gutter`
   *
   *     @example
   *     <div class="sf-row -no-gutter">
   *        <div class="sf-row__col -col-6">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *     </div>
   *
   */
  /**
   * Row inline:
   * `.sf-row.-inline`
   *
   *     @example
   *     <div class="sf-row -inline">
   *        <div class="sf-row__col -col-6">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *     </div>
   *
   */
  /**
   * Row inline:
   * `.sf-row.-full-height`
   *
   *     @example
   *     <div class="sf-row -full-height">
   *        <div class="sf-row__col -col-6">
   *            I am tall
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            I am tall
   *        </div>
   *     </div>
   *
   */
  /**
   * Width auto:
   * `.sf-row.-auto-width`
   *
   *     @example
   *     <div class="sf-row -auto-width">
   *     </div>
   *
   */
  /**
   * flex-wrap: wrap (Default):
   * `.sf-row.-wrap`
   *
   * If emitted flex-wrap: wrap
   *
   *     @example
   *     <div class="sf-row -wrap">
   *        <div class="sf-row__col -col-6">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-10">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
  */
  /**
   * flex-wrap: no-wrap:
   * `.sf-row.-no-wrap`
   *
   *     @example
   *     <div class="sf-row -no-wrap">
   *        <div class="sf-row__col -col-6">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-10">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
  */
  /**
   * flex-wrap: wrap-reverse:
   * `.sf-row.-wrap-reverse`
   *
   *     @example
   *     <div class="sf-row -wrap-reverse">
   *        <div class="sf-row__col -col-6">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-10">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * flex-direction: row (default):
   * `.sf-row.-row`
   *
   * If emitted flex-direction: row
   *
   *     @example
   *     <div class="sf-row -row">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * flex-direction: row-reverse:
   * `.sf-row.-row-reverse `
   *
   *     @example
   *     <div class="sf-row -row-reverse">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * flex-direction: column:
   * `.sf-row.-column`
   *
   *     @example
   *     <div class="sf-row -column">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * flex-direction: column-reverse:
   * `.sf-row.-column-reverse`
   *
   *     @example
   *     <div class="sf-row -column-reverse">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-items: stretch (default):
   * `.sf-row.-align-items-stretch`
   *
   * If emitted align-items: stretch
   *
   *     @example
   *     <div class="sf-row -align-items-stretch">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-items: flex-start:
   * `.sf-row.-align-items-start`
   *
   *     @example
   *     <div class="sf-row -align-items-start">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-items: flex-end:
   * `.sf-row.-align-items-end`
   *
   *     @example
   *     <div class="sf-row -align-items-end">
   *        <div class="sf-row__col -flex-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -flex-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -flex-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-items: center:
   * `.sf-row.-align-items-center`
   *
   *     @example
   *     <div class="sf-row -align-items-center">
   *        <div class="sf-row__col -flex-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -flex-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -flex-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-items: baseline:
   * `.sf-row.-align-items-baseline`
   *
   *     @example
   *     <div class="sf-row -align-items-baseline">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-content: stretch (default):
   * `.sf-row.-align-content-stretch`
   *
   * If emitted align-content: stretch
   *
   *     @example
   *     <div class="sf-row -align-content-stretch">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *       <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>sixth</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-content: flex-start:
   * `.sf-row.-align-content-start`
   *
   *     @example
   *     <div class="sf-row -align-content-start">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *       <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>sixth</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-content: flex-end:
   * `.sf-row.-align-content-end`
   *
   *     @example
   *     <div class="sf-row -align-content-end">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *       <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>sixth</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-content: center:
   * `.sf-row.-align-content-center`
   *
   *     @example
   *     <div class="sf-row -align-content-center">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *       <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>sixth</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-content: space-between:
   * `.sf-row.-align-content-between`
   *
   *     @example
   *     <div class="sf-row -align-content-between">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>sixth</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * align-content: space-around:
   * `.sf-row.-align-content-around`
   *
   *     @example
   *     <div class="sf-row -align-content-around">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>sixth</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * justify-content: flex-start (default):
   * `.sf-row.-justify-content-start`
   *
   * If emitted justify-content: flex-start
   *
   *     @example
   *     <div class="sf-row -justify-content-start">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *     </div>
   *
   */
  /**
   * justify-content: flex-end:
   * `.sf-row.-justify-content-end`
   *
   *     @example
   *     <div class="sf-row -justify-content-end">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *     </div>
   *
   */
  /**
   * justify-content: center:
   * `.sf-row.-justify-content-center`
   *
   *     @example
   *     <div class="sf-row -justify-content-center">
   *        <div class="sf-row__col -flex-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -flex-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *     </div>
   *
   */
  /**
   * justify-content: space-between:
   * `.sf-row.-justify-content-between`
   *
   *     @example
   *     <div class="sf-row -justify-content-between">
   *        <div class="sf-row__col -col-3">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-3">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *     </div>
   *
   */
  /**
   * justify-content: space-around:
   * `.sf-row.-justify-content-around`
   *
   *     @example
   *     <div class="sf-row -justify-content-around">
   *        <div class="sf-row__col -col-3">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-3">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fourth</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>fifth</strong> in the markup
   *        </div>
   *     </div>
   *
   */
  /**
   * Columns with flexible width:
   * `sf-row.-adjustable-ellipsis`
   *
   *     @example
   *     <div class="sf-row -adjustable-ellipsis">
   *        <div class="sf-row__col -truncatable">
   *            <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">I am <strong>First</strong>. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passa</div>
   *        </div>
   *        <div class="sf-row__col -full-width">
   *            <div>The width of <strong>First</strong> adjusts to my width</div>
   *        </div>
   *     </div>
   *
   *     <div class="sf-row -adjustable-ellipsis">
   *        <div class="sf-row__col -full-width">
   *            <div>The width of <strong>First</strong> adjusts to my width</div>
   *        </div>
   *        <div class="sf-row__col -truncatable">
   *            <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">I am <strong>First</strong>. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passa</div>
   *        </div>
   *     </div>
   */
  /***
  * Row — Single Column:
  */
  /**
   * Columns with no gutter:
   * `.sf-row__col.-no-gutter`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-6 -no-gutter">
   *            .sf-row__col.-col-6.-no-gutter
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            .sf-row__col.-col-6
   *        </div>
   *     </div>
   *
   */
  /**
   * Columns which are not flexible ('flex: none'):
   * `.sf-row__col.-no-flex`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-6 -no-flex">
   *            .sf-row__col.-col-6.-no-flex
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            .sf-row__col.-col-6
   *        </div>
   *     </div>
   *
   */
  /**
   * Columns which are auto flexible ('flex: auto'):
   * `.sf-row__col.-auto-flex`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-6 -auto-flex">
   *            .sf-row__col.-col-6.-auto-flex
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            .sf-row__col.-col-6
   *        </div>
   *     </div>
   *
   */
  /**
   * Columns hide:
   * `.sf-row__col.-hidden`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -hidden">
   *            .sf-row__col.-hidden: I am hidden for all resolutions
   *        </div>
   *        <div class="sf-row__col">
   *            .sf-row__col
   *        </div>
   *        <div class="sf-row__col">
   *            .sf-row__col
   *        </div>
   *     </div>
   *
   */
  /**
   * Columns align-self: stretch (default):
   * `.sf-row__col.-align-self-stretch`
   *
   * If emitted align-self: stretch
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4 -align-self-stretch">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * Columns align-self: flex-start:
   * `.sf-row__col.-align-self-start`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4 -align-self-start">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * Columns align-self: flex-end:
   * `.sf-row__col.-align-self-end`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4 -align-self-end">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * Columns align-self: center:
   * `.sf-row__col.-align-self-center`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4 -align-self-center">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
  /**
   * Columns align-self: baseline:
   * `.sf-row__col.-align-self-baseline`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-4">
   *            I am <strong>first</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4 -align-self-baseline">
   *            I am <strong>second</strong> in the markup
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            I am <strong>third</strong> in the markup
   *        </div>
   *     </div>
   */
}
sf-app.sf-app .sf-row.-no-gutter .sf-row__col {
  padding: 0;
}
sf-app.sf-app .sf-row.-inline {
  display: inline-flex;
  width: auto;
}
sf-app.sf-app .sf-row.-full-height {
  height: 100%;
}
sf-app.sf-app .sf-row.-auto-width {
  width: auto;
}
sf-app.sf-app .sf-row.-wrap {
  flex-wrap: wrap;
}
sf-app.sf-app .sf-row.-no-wrap {
  flex-wrap: nowrap;
}
sf-app.sf-app .sf-row.-wrap-reverse {
  flex-wrap: wrap-reverse;
}
sf-app.sf-app .sf-row.-row {
  flex-direction: row;
}
sf-app.sf-app .sf-row.-row-reverse {
  flex-direction: row-reverse;
}
sf-app.sf-app .sf-row.-column {
  flex-direction: column;
}
sf-app.sf-app .sf-row.-column-reverse {
  flex-direction: column-reverse;
}
sf-app.sf-app .sf-row.-align-items-stretch {
  align-items: stretch;
}
sf-app.sf-app .sf-row.-align-items-start {
  align-items: flex-start;
}
sf-app.sf-app .sf-row.-align-items-end {
  align-items: flex-end;
}
sf-app.sf-app .sf-row.-align-items-center {
  align-items: center;
}
sf-app.sf-app .sf-row.-align-items-baseline {
  align-items: baseline;
}
sf-app.sf-app .sf-row.-align-content-stretch {
  align-content: stretch;
}
sf-app.sf-app .sf-row.-align-content-start {
  align-content: flex-start;
}
sf-app.sf-app .sf-row.-align-content-end {
  align-content: flex-end;
}
sf-app.sf-app .sf-row.-align-content-center {
  align-content: center;
}
sf-app.sf-app .sf-row.-align-content-between {
  align-content: space-between;
}
sf-app.sf-app .sf-row.-align-content-around {
  align-content: space-around;
}
sf-app.sf-app .sf-row.-justify-content-start {
  justify-content: flex-start;
}
sf-app.sf-app .sf-row.-justify-content-end {
  justify-content: flex-end;
}
sf-app.sf-app .sf-row.-justify-content-center {
  justify-content: center;
}
sf-app.sf-app .sf-row.-justify-content-between {
  justify-content: space-between;
}
sf-app.sf-app .sf-row.-justify-content-around {
  justify-content: space-around;
}
sf-app.sf-app .sf-row.-adjustable-ellipsis {
  display: inline-flex;
  width: auto;
}
sf-app.sf-app .sf-row.-adjustable-ellipsis .sf-row__col.-truncatable {
  min-width: 0;
}
sf-app.sf-app .sf-row.-adjustable-ellipsis .sf-row__col.-full-width {
  flex: none;
  white-space: nowrap;
}
sf-app.sf-app .sf-row__col {
  padding: 0;
  flex: 1;
  max-width: 100%;
  /***
   * Row — Grid System:
   */
  /**
   * Columns sizes:
   * `.sf-row__col.-col-{1, 2, 3,..., 12}`
   *
   * Column sizes applies for all devices unless overridden
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-12">
   *            .sf-row__col.-col-12
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-1">
   *            .sf-row__col.-col-1
   *        </div>
   *        <div class="sf-row__col -col-11">
   *            .sf-row__col.-col-11
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-2">
   *            .sf-row__col.-col-2
   *        </div>
   *        <div class="sf-row__col -col-10">
   *            .sf-row__col.-col-10
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-3">
   *            .sf-row__col.-col-3
   *        </div>
   *        <div class="sf-row__col -col-9">
   *            .sf-row__col.-col-9
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-4">
   *            .sf-row__col.-col-4
   *        </div>
   *        <div class="sf-row__col -col-8">
   *            .sf-row__col.-col-8
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-5">
   *            .sf-row__col.-col-5
   *        </div>
   *        <div class="sf-row__col -col-7">
   *            .sf-row__col.-col-7
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-6">
   *            .sf-row__col.-col-6
   *        </div>
   *        <div class="sf-row__col -col-6">
   *            .sf-row__col.-col-6
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-7">
   *            .sf-row__col.-col-7
   *        </div>
   *        <div class="sf-row__col -col-5">
   *            .sf-row__col.-col-5
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-8">
   *            .sf-row__col.-col-8
   *        </div>
   *        <div class="sf-row__col -col-4">
   *            .sf-row__col.-col-4
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-9">
   *            .sf-row__col.-col-9
   *        </div>
   *        <div class="sf-row__col -col-3">
   *            .sf-row__col.-col-3
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-10">
   *            .sf-row__col.-col-10
   *        </div>
   *        <div class="sf-row__col -col-2">
   *            .sf-row__col.-col-2
   *        </div>
   *     </div>
   *     <div class="sf-row">
   *        <div class="sf-row__col -col-11">
   *            .sf-row__col.-col-11
   *        </div>
   *        <div class="sf-row__col -col-1">
   *            .sf-row__col.-col-1
   *        </div>
   *     </div>
   */
  /**
   * Columns order:
   * `.sf-row__col.-order-{1, 2, 3,..., 12}`
   *
   *     @example
   *     <div class="sf-row">
   *        <div class="sf-row__col -order-2">
   *            .sf-row__col.-order-2
   *            <p>I am <strong>first</strong>&nbsp;in the markup but ordered second on the screen</p>
   *        </div>
   *        <div class="sf-row__col -order-3">
   *            .sf-row__col.-order-3
   *            <p>I am <strong>second</strong>&nbsp;in the markup but ordered third on the screen</p>
   *        </div>
   *        <div class="sf-row__col -order-1">
   *            .sf-row__col.-order-1
   *            <p>I am <strong>third</strong>&nbsp;in the markup but ordered first on the screen</p>
   *        </div>
   *     </div>
   *
   */
}
sf-app.sf-app .sf-row__col.-col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}
sf-app.sf-app .sf-row__col.-col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}
sf-app.sf-app .sf-row__col.-col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
sf-app.sf-app .sf-row__col.-col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}
sf-app.sf-app .sf-row__col.-col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}
sf-app.sf-app .sf-row__col.-col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
sf-app.sf-app .sf-row__col.-col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}
sf-app.sf-app .sf-row__col.-col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}
sf-app.sf-app .sf-row__col.-col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
sf-app.sf-app .sf-row__col.-col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}
sf-app.sf-app .sf-row__col.-col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}
sf-app.sf-app .sf-row__col.-col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
sf-app.sf-app .sf-row__col.-order-1 {
  order: 1;
}
sf-app.sf-app .sf-row__col.-order-2 {
  order: 2;
}
sf-app.sf-app .sf-row__col.-order-3 {
  order: 3;
}
sf-app.sf-app .sf-row__col.-order-4 {
  order: 4;
}
sf-app.sf-app .sf-row__col.-order-5 {
  order: 5;
}
sf-app.sf-app .sf-row__col.-order-6 {
  order: 6;
}
sf-app.sf-app .sf-row__col.-order-7 {
  order: 7;
}
sf-app.sf-app .sf-row__col.-order-8 {
  order: 8;
}
sf-app.sf-app .sf-row__col.-order-9 {
  order: 9;
}
sf-app.sf-app .sf-row__col.-order-10 {
  order: 10;
}
sf-app.sf-app .sf-row__col.-order-11 {
  order: 11;
}
sf-app.sf-app .sf-row__col.-order-12 {
  order: 12;
}
sf-app.sf-app .sf-row .-no-gutter {
  padding: 0;
}
sf-app.sf-app .sf-row .-no-flex {
  flex: none;
}
sf-app.sf-app .sf-row .-auto-flex {
  flex: auto;
}
sf-app.sf-app .sf-row .-hidden {
  display: none;
}
sf-app.sf-app .sf-row .-align-self-stretch {
  align-self: stretch;
}
sf-app.sf-app .sf-row .-align-self-start {
  align-self: flex-start;
}
sf-app.sf-app .sf-row .-align-self-end {
  align-self: flex-end;
}
sf-app.sf-app .sf-row .-align-self-center {
  align-self: center;
}
sf-app.sf-app .sf-row .-align-self-baseline {
  align-self: baseline;
}
sf-app.sf-app .sf-grid {
  display: grid;
}
sf-app.sf-app .sf-grid.-gap-zero {
  grid-gap: 0 !important;
}
sf-app.sf-app .sf-grid.-gap-4xs {
  grid-gap: 5px !important;
}
sf-app.sf-app .sf-grid.-gap-3xs {
  grid-gap: 10px !important;
}
sf-app.sf-app .sf-grid.-gap-2xs {
  grid-gap: 15px !important;
}
sf-app.sf-app .sf-grid.-gap-xs {
  grid-gap: 20px !important;
}
sf-app.sf-app .sf-grid.-gap-s {
  grid-gap: 25px !important;
}
sf-app.sf-app .sf-grid.-gap-m {
  grid-gap: 30px !important;
}
sf-app.sf-app .sf-grid.-gap-l {
  grid-gap: 35px !important;
}
sf-app.sf-app .sf-grid.-gap-xl {
  grid-gap: 40px !important;
}
sf-app.sf-app .sf-grid.-gap-2xl {
  grid-gap: 45px !important;
}
sf-app.sf-app .sf-grid.-gap-3xl {
  grid-gap: 50px !important;
}
sf-app.sf-app .sf-grid.-gap-4xl {
  grid-gap: 55px !important;
}
sf-app.sf-app .sf-grid.-gap-5xl {
  grid-gap: 60px !important;
}
sf-app.sf-app .sf-grid.-gap-6xl {
  grid-gap: 80px !important;
}
sf-app.sf-app .sf-grid.-gap-7xl {
  grid-gap: 100px !important;
}
sf-app.sf-app .sf-grid.-gap-8xl {
  grid-gap: 120px !important;
}
sf-app.sf-app .sf-grid.-gap-col-zero {
  grid-column-gap: 0 !important;
}
sf-app.sf-app .sf-grid.-gap-col-4xs {
  grid-column-gap: 5px !important;
}
sf-app.sf-app .sf-grid.-gap-col-3xs {
  grid-column-gap: 10px !important;
}
sf-app.sf-app .sf-grid.-gap-col-2xs {
  grid-column-gap: 15px !important;
}
sf-app.sf-app .sf-grid.-gap-col-xs {
  grid-column-gap: 20px !important;
}
sf-app.sf-app .sf-grid.-gap-col-s {
  grid-column-gap: 25px !important;
}
sf-app.sf-app .sf-grid.-gap-col-m {
  grid-column-gap: 30px !important;
}
sf-app.sf-app .sf-grid.-gap-col-l {
  grid-column-gap: 35px !important;
}
sf-app.sf-app .sf-grid.-gap-col-xl {
  grid-column-gap: 40px !important;
}
sf-app.sf-app .sf-grid.-gap-col-2xl {
  grid-column-gap: 45px !important;
}
sf-app.sf-app .sf-grid.-gap-col-3xl {
  grid-column-gap: 50px !important;
}
sf-app.sf-app .sf-grid.-gap-col-4xl {
  grid-column-gap: 55px !important;
}
sf-app.sf-app .sf-grid.-gap-col-5xl {
  grid-column-gap: 60px !important;
}
sf-app.sf-app .sf-grid.-gap-col-6xl {
  grid-column-gap: 80px !important;
}
sf-app.sf-app .sf-grid.-gap-col-7xl {
  grid-column-gap: 100px !important;
}
sf-app.sf-app .sf-grid.-gap-col-8xl {
  grid-column-gap: 120px !important;
}
sf-app.sf-app .sf-grid.-gap-row-zero {
  grid-row-gap: 0 !important;
}
sf-app.sf-app .sf-grid.-gap-row-4xs {
  grid-row-gap: 5px !important;
}
sf-app.sf-app .sf-grid.-gap-row-3xs {
  grid-row-gap: 10px !important;
}
sf-app.sf-app .sf-grid.-gap-row-2xs {
  grid-row-gap: 15px !important;
}
sf-app.sf-app .sf-grid.-gap-row-xs {
  grid-row-gap: 20px !important;
}
sf-app.sf-app .sf-grid.-gap-row-s {
  grid-row-gap: 25px !important;
}
sf-app.sf-app .sf-grid.-gap-row-m {
  grid-row-gap: 30px !important;
}
sf-app.sf-app .sf-grid.-gap-row-l {
  grid-row-gap: 35px !important;
}
sf-app.sf-app .sf-grid.-gap-row-xl {
  grid-row-gap: 40px !important;
}
sf-app.sf-app .sf-grid.-gap-row-2xl {
  grid-row-gap: 45px !important;
}
sf-app.sf-app .sf-grid.-gap-row-3xl {
  grid-row-gap: 50px !important;
}
sf-app.sf-app .sf-grid.-gap-row-4xl {
  grid-row-gap: 55px !important;
}
sf-app.sf-app .sf-grid.-gap-row-5xl {
  grid-row-gap: 60px !important;
}
sf-app.sf-app .sf-grid.-gap-row-6xl {
  grid-row-gap: 80px !important;
}
sf-app.sf-app .sf-grid.-gap-row-7xl {
  grid-row-gap: 100px !important;
}
sf-app.sf-app .sf-grid.-gap-row-8xl {
  grid-row-gap: 120px !important;
}
sf-app.sf-app .sf-grid.-albums {
  grid-template-columns: repeat(auto-fill, 188px);
}
sf-app.sf-app .sf-grid.-col-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
sf-app.sf-app .sf-grid.-col-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
sf-app.sf-app .sf-grid.-col-equal-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
sf-app.sf-app .sf-link {
  color: var(--link-color);
  text-decoration: none;
  cursor: pointer;
}
sf-app.sf-app .sf-link.-secondary {
  color: var(--link-secondary-color);
}
sf-app.sf-app .sf-link:hover, sf-app.sf-app .sf-link:active, sf-app.sf-app .sf-link:focus {
  color: #333;
}
sf-app.sf-app .sf-link.-no-hover:hover, sf-app.sf-app .sf-link.-no-hover:active, sf-app.sf-app .sf-link.-no-hover:focus {
  color: var(--link-color);
}
sf-app.sf-app .sf-link.-side {
  display: inline-block;
  margin-bottom: 2px;
  padding: 3px 6px;
  color: #333;
}
sf-app.sf-app .sf-link.-side.-active, sf-app.sf-app .sf-link.-side:focus, sf-app.sf-app .sf-link.-side:hover {
  background-color: #e4e4e4;
  border-radius: 2px;
}
sf-app.sf-app .sf-link.-side-secondary {
  color: var(--link-side-secondary-color);
}
sf-app.sf-app .sf-link.-side-secondary:hover {
  color: var(--link-side-secondary-color-hover);
}
sf-app.sf-app .sf-link.-side-secondary.-active {
  color: var(--link-side-secondary-color-active);
}
sf-app.sf-app .sf-link.-basic {
  color: #333;
}
sf-app.sf-app .sf-link.-basic:hover, sf-app.sf-app .sf-link.-basic:active, sf-app.sf-app .sf-link.-basic:focus {
  color: #333;
}
sf-app.sf-app .sf-link.-top-toolbar {
  align-items: center;
  justify-content: center;
  display: inline-flex;
  padding: 0 10px;
  color: #333;
  border: 0;
  background-color: #fff;
  border-radius: 0;
  height: 100%;
}
sf-app.sf-app .sf-link.-top-toolbar.-active, sf-app.sf-app .sf-link.-top-toolbar:focus, sf-app.sf-app .sf-link.-top-toolbar:hover {
  color: #333;
  background-color: #f5f5f5;
  border-color: #eee;
}
sf-app.sf-app .sf-top-toolbar {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  box-shadow: 0 3px 5px #ededee;
  background-color: #fff;
  z-index: 10000;
}
sf-app.sf-app .sf-top-toolbar.-zindex-sm {
  z-index: 10;
}
sf-app.sf-app .sf-top-toolbar.-in-menu {
  box-shadow: none;
}
sf-app.sf-app .sf-top-toolbar.-in-menu .sf-top-toolbar__nav-button {
  border-right: 0;
}
sf-app.sf-app .sf-top-toolbar__nav-button {
  width: 50px;
  height: 46px;
  border-right: 1px solid #eee;
}
sf-app.sf-app .sf-toggle-menu {
  width: 50px;
  height: 46px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: rotate(0deg);
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
sf-app.sf-app .sf-toggle-menu:hover, sf-app.sf-app .sf-toggle-menu:focus {
  background: #e4e4e4;
}
sf-app.sf-app .sf-toggle-menu:hover span, sf-app.sf-app .sf-toggle-menu:focus span {
  background: #333;
}
sf-app.sf-app .sf-toggle-menu span {
  display: block;
  position: absolute;
  height: 3px;
  width: 17px;
  background: #777;
  border-radius: 3px;
  opacity: 1;
  left: 16px;
  transform: rotate(0deg);
  transition: 0.2s ease-in-out;
}
sf-app.sf-app .sf-toggle-menu span:nth-child(1) {
  top: 15px;
  transform-origin: center center;
}
sf-app.sf-app .sf-toggle-menu span:nth-child(2) {
  top: 20px;
  transform-origin: center center;
}
sf-app.sf-app .sf-toggle-menu span:nth-child(3) {
  top: 25px;
  transform-origin: center center;
}
sf-app.sf-app .sf-toggle-menu span:nth-child(4) {
  top: 20px;
  transform-origin: center center;
}
sf-app.sf-app .sf-toggle-menu.-open span:nth-child(1) {
  opacity: 0;
}
sf-app.sf-app .sf-toggle-menu.-open span:nth-child(2) {
  /* width: 0%; */
  transform: rotate(-45deg);
}
sf-app.sf-app .sf-toggle-menu.-open span:nth-child(3) {
  opacity: 0;
}
sf-app.sf-app .sf-toggle-menu.-open span:nth-child(4) {
  transform: rotate(45deg);
}
sf-app.sf-app .sf-split-button {
  display: flex;
  align-items: center;
}
sf-app.sf-app .sf-split-button.-align-top {
  align-items: flex-start;
}
sf-app.sf-app .sf-split-button .sf-button.-dropdown {
  z-index: 100;
}
sf-app.sf-app .sf-sidebar {
  position: fixed;
  top: 46px;
  bottom: 0;
  right: 0;
  width: 350px;
  background-color: #f5f5f5;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  z-index: 100;
}
sf-app.sf-app .sf-sidebar.-animate {
  -webkit-animation: sidebar 0.4s 1 ease-out;
          animation: sidebar 0.4s 1 ease-out;
}
sf-app.sf-app .sf-sidebar.-animate.-hidden {
  -webkit-animation: hideSidebar 0.4s 1 ease-out;
          animation: hideSidebar 0.4s 1 ease-out;
}
sf-app.sf-app .sf-sidebar.-hidden {
  right: -350px;
}
sf-app.sf-app .sf-sidebar.-hidden.-toggle {
  display: block;
  right: -335px;
}
sf-app.sf-app .sf-sidebar.-toggle .sf-sidebar__title,
sf-app.sf-app .sf-sidebar.-toggle .sf-sidebar__section {
  padding-left: 30px;
  padding-right: 30px;
}
sf-app.sf-app .sf-sidebar.-left {
  right: -350px;
}
sf-app.sf-app .sf-sidebar.-wide {
  width: 460px;
}
sf-app.sf-app .sf-sidebar__close {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 15px;
  margin-right: 10px;
  padding: 10px;
  z-index: 5;
  cursor: pointer;
}
sf-app.sf-app .sf-sidebar__toggle {
  align-items: center;
  justify-content: center;
  position: absolute;
  display: flex;
  top: 50%;
  width: 7px;
  height: 55px;
  background-color: #e4e4e4;
  cursor: pointer;
  z-index: 1000;
}
sf-app.sf-app .sf-sidebar__toggle-icon {
  width: 7px;
}
sf-app.sf-app .sf-sidebar.-left-aligned {
  left: 0;
  right: auto;
  border-left: 0;
  border-right: 1px solid #eee;
}
sf-app.sf-app .sf-sidebar.-static {
  position: static;
  height: 100%;
}
sf-app.sf-app .sf-sidebar.-width-auto {
  width: auto;
}
sf-app.sf-app .sf-sidebar.-no-animation {
  -webkit-animation: none;
          animation: none;
}
sf-app.sf-app .sf-sidebar__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 55px 35px 20px;
  border-bottom: 1px solid #eee;
}
sf-app.sf-app .sf-sidebar__title.-no-border {
  border-bottom: 0;
}
sf-app.sf-app .sf-sidebar__items-list {
  display: block;
  background-color: #fff;
}
sf-app.sf-app .sf-sidebar__header {
  padding: 10px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}
sf-app.sf-app .sf-sidebar__scroll {
  display: block;
  position: absolute;
  bottom: 0;
  top: 102px;
  overflow: auto;
  width: 100%;
}
sf-app.sf-app .sf-sidebar__inner-scroll {
  height: 100%;
}
sf-app.sf-app .sf-sidebar__section {
  padding: 45px 35px;
}
sf-app.sf-app .sf-sidebar__section .sf-field {
  margin-bottom: 0;
}
sf-app.sf-app .sf-sidebar__section .sf-field__label,
sf-app.sf-app .sf-sidebar__section .sf-field__content,
sf-app.sf-app .sf-sidebar__section .sf-field__no-value {
  font-size: inherit;
}
sf-app.sf-app .sf-sidebar__section .-sf-short-text-default .sf-field {
  padding-bottom: 0;
}
sf-app.sf-app .sf-sidebar__section .sf-input .sf-input__title {
  font-family: "Open Sans Condensed", sans-serif;
  font-size: var(--font-size-h3);
  font-weight: bold;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
  min-height: 0;
}
sf-app.sf-app .sf-sidebar__section hr {
  margin-top: 10px;
  margin-bottom: 10px;
}
sf-app.sf-app .sf-sidebar__slider-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
sf-app.sf-app .sf-sidebar__slider {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
sf-app.sf-app .sf-sidebar__no-items {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
@-webkit-keyframes sidebar {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes sidebar {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@-webkit-keyframes hideSidebar {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes hideSidebar {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
sf-app.sf-app .sf-switch {
  border: 0;
  background: 0;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #777;
  padding: 0;
}
sf-app.sf-app .sf-switch button {
  padding: 0;
  border: 0;
  background: 0;
}
sf-app.sf-app .sf-switch.-disabled {
  color: #ccc;
}
sf-app.sf-app .sf-insert-body {
  position: absolute;
  z-index: 1000000;
  top: 0;
  left: 0;
  visibility: hidden;
}
/* cyrillic-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url("/assets/fonts/open-sans/OpenSans-Light.ttf") format("truetype");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url("/assets/fonts/open-sans/OpenSans-Light.ttf") format("truetype");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url("/assets/fonts/open-sans/OpenSans-Light.ttf") format("truetype");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url("/assets/fonts/open-sans/OpenSans-Light.ttf") format("truetype");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url("/assets/fonts/open-sans/OpenSans-Light.ttf") format("truetype");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url("/assets/fonts/open-sans/OpenSans-Light.ttf") format("truetype");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url("/assets/fonts/open-sans/OpenSans-Light.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/assets/fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/assets/fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/assets/fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/assets/fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/assets/fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/assets/fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/assets/fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Condensed Bold"), local("OpenSansCondensed-Bold"), url("/assets/fonts/open-sans/OpenSansCondensed-Bold.ttf") format("truetype");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Condensed Bold"), local("OpenSansCondensed-Bold"), url("/assets/fonts/open-sans/OpenSansCondensed-Bold.ttf") format("truetype");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Condensed Bold"), local("OpenSansCondensed-Bold"), url("/assets/fonts/open-sans/OpenSansCondensed-Bold.ttf") format("truetype");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Condensed Bold"), local("OpenSansCondensed-Bold"), url("/assets/fonts/open-sans/OpenSansCondensed-Bold.ttf") format("truetype");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Condensed Bold"), local("OpenSansCondensed-Bold"), url("/assets/fonts/open-sans/OpenSansCondensed-Bold.ttf") format("truetype");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Condensed Bold"), local("OpenSansCondensed-Bold"), url("/assets/fonts/open-sans/OpenSansCondensed-Bold.ttf") format("truetype");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Condensed Bold"), local("OpenSansCondensed-Bold"), url("/assets/fonts/open-sans/OpenSansCondensed-Bold.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app {
  --date-time-icon-border-color: #e4e4e4;
  --date-time-icon-color: #777;
  --date-time-content-color: #656565;
}
sf-app.sf-app {
  --select-border-color: #e4e4e4;
}
body {
  --sf-footer-color: #ccc;
  --sf-topbar-color: #999;
  --sf-h5-color: #999;
  --sf-navigation-border-color: #e5e5e5;
  --sf-navigation-caret: #ccc;
  --sf-user-info-border-color: #e4e4e4;
  --sf-live-link: #4cb861;
  --sf-green-main: #38ab63;
}
sf-app.sf-app {
  --tree-list-expander-color: #777;
}
sf-app.sf-app {
  /* hides input type="number" spinbox */
  /***
   * Image:
   */
  /**
   * Image placeholder:
   * `.sf-media.-empty`
   *
   *     @example
   *     <div class="sf-media -empty">
   *         <i class="sf-icon sf-fa sf-fa-picture-o -size-4xl -sf-mr-zero"></i>
   *     </div>
   *     <br>
   *     <div class="sf-media -empty -small">
   *         <i class="sf-icon sf-fa sf-fa-picture-o -size-4xl -sf-mr-zero"></i>
   *     </div>
   *
   */
  /**
   * Image with remove button and info:
   * `.sf-media`
   *
   *     @example
   *     <div class="sf-media">
   *         <img src="image.png">
   *         <button class="sf-media__remove sf-button -icon -circle -small sf-element"><i class="sf-icon sf-fa sf-fa-times -normal % sf-button__icon -left"></i><span class="sf-button__content"></span></button>
   *         <sf-button type="icon circle small" icon="times" class="sf-media__remove"></sf-button>
   *         <div class="sf-tooltip sf-media__details">
   *             <i class="sf-icon sf-fa sf-fa-info-circle -black -size-m"></i>
   *             <div class="sf-notification -tooltip sf-tooltip__content -condensed">
   *              <div class="sf-notification__content">
   *                  1920 x 1200<br>
   *			        <span class="-sf-txt-upper-case">jpeg</span><br>
   *			        762.72 KB
   *              </div>
   *             </div>
   *          </div>
   *     </div>
   *     <br>
   *     <div class="sf-media -small">
   *         <img src="image.png">
   *         <button class="sf-media__remove sf-button -icon -circle -small sf-element"><i class="sf-icon sf-fa sf-fa-times -normal % sf-button__icon -left"></i><span class="sf-button__content"></span></button>
   *         <div class="sf-tooltip sf-media__details">
   *             <i class="sf-icon sf-fa sf-fa-info-circle -black -size-m"></i>
   *             <div class="sf-notification -tooltip sf-tooltip__content -condensed">
   *              <div class="sf-notification__content">
   *                  1920 x 1200<br>
   *			        <span class="-sf-txt-upper-case">jpeg</span><br>
   *			        762.72 KB
   *              </div>
   *             </div>
   *          </div>
   *     </div>
   *
   */
  /**
   * Selectable image:
   * `.sf-media.-selectable` `.sf-media.-selectable.-selected`
   *
   *     @example
   *     <div class="sf-media -selectable">
   *         <div class="sf-badge -white -icon"><i class="sf-icon sf-fa sf-fa-check-circle sf-media__selected-indicator -size-xl"></i></div>
   *         <img src="image.png">
   *         <div class="sf-tooltip sf-media__details">
   *             <i class="sf-icon sf-fa sf-fa-info-circle -black -size-m"></i>
   *             <div class="sf-notification -tooltip sf-tooltip__content -condensed">
   *              <div class="sf-notification__content">
   *                  1920 x 1200<br>
   *			        <span class="-sf-txt-upper-case">jpeg</span><br>
   *			        762.72 KB
   *              </div>
   *             </div>
   *          </div>
   *     </div>
   *      <br>
   *     <div class="sf-media -selectable -selected">
   *         <div class="sf-badge -white -icon"><i class="sf-icon sf-fa sf-fa-check-circle sf-media__selected-indicator -size-xl"></i></div>
   *         <img src="image.png">
   *         <div class="sf-tooltip sf-media__details">
   *             <i class="sf-icon sf-fa sf-fa-info-circle -black -size-m"></i>
   *             <div class="sf-notification -tooltip sf-tooltip__content -condensed">
   *              <div class="sf-notification__content">
   *                  1920 x 1200<br>
   *			        <span class="-sf-txt-upper-case">jpeg</span><br>
   *			        762.72 KB
   *              </div>
   *             </div>
   *          </div>
   *     </div>
   *     <br>
   *     <div class="sf-media -selectable -small">
   *         <div class="sf-badge -white -icon"><i class="sf-icon sf-fa sf-fa-check-circle sf-media__selected-indicator -size-xl"></i></div>
   *         <img src="image.png">
   *         <div class="sf-tooltip sf-media__details">
   *             <i class="sf-icon sf-fa sf-fa-info-circle -black -size-m"></i>
   *             <div class="sf-notification -tooltip sf-tooltip__content -condensed">
   *              <div class="sf-notification__content">
   *                  1920 x 1200<br>
   *			        <span class="-sf-txt-upper-case">jpeg</span><br>
   *			        762.72 KB
   *              </div>
   *             </div>
   *          </div>
   *     </div>
   *      <br>
    *     <div class="sf-media -selectable -selected -small">
   *         <div class="sf-badge -white -icon"><i class="sf-icon sf-fa sf-fa-check-circle sf-media__selected-indicator -size-xl"></i></div>
   *         <img src="image.png">
   *         <div class="sf-tooltip sf-media__details">
   *             <i class="sf-icon sf-fa sf-fa-info-circle -black -size-m"></i>
   *             <div class="sf-notification -tooltip sf-tooltip__hint -condensed">
   *              <div class="sf-content">
   *                  1920 x 1200<br>
   *			        <span class="-sf-txt-upper-case">jpeg</span><br>
   *			        762.72 KB
   *              </div>
   *             </div>
   *          </div>
   *     </div>
   *
   */
  /***
   * Album:
   */
  /**
   * Empty Album:
   * `.sf-album`
   *
   *     @example
   *	    <div class="sf-album">
   *		    <span class="sf-album__holder -empty"></span>
   *		    <span class="sf-album__holder -empty"></span>
   *		    <span class="sf-album__holder -empty"></span>
   *		    <span class="sf-album__holder -empty"></span>
   *	    </div>
   *
   */
  /**
   * Album with 3 images and no sub albums:
   * `.sf-album`
   *
   *     @example
   *	    <div class="sf-album">
   *	        <span class="sf-album__holder">
   *	            <img src="image.png" class="-landscape">
   *	        </span>
   *		    <span class="sf-album__holder">
   *	            <img src="image.png" class="-landscape">
   *	        </span>
   *		    <span class="sf-album__holder">
   *	            <img src="image.png" class="-landscape">
   *	        </span>
   *		    <span class="sf-album__holder -empty"></span>
   *	    </div>
   *
   */
  /**
   * Album width sub albums:
   * `.sf-album`
   *
   *     @example
   *	    <div class="sf-album">
   *	        <span class="sf-album__holder">
   *	            <span class="sf-album__folder"></span>
   *	        </span>
   *		    <span class="sf-album__holder">
   *	            <span class="sf-album__folder"></span>
   *	        </span>
   *		    <span class="sf-album__holder">
   *	            <span class="sf-album__folder"></span>
   *	        </span>
   *		    <span class="sf-album__holder -empty"></span>
   *	    </div>
   *
   */
}
sf-app.sf-app sf-home {
  display: block;
}
sf-app.sf-app sf-input {
  width: 100%;
}
sf-app.sf-app sf-input.-auto-width {
  width: auto;
}
sf-app.sf-app sf-icon {
  display: inline-flex;
}
sf-app.sf-app sf-video-player {
  display: flex;
}
sf-app.sf-app table {
  font-size: inherit;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  border: 0;
  background-color: #e4e4e4;
  color: #38ab63;
}
sf-app.sf-app progress[value]::-webkit-progress-bar {
  background-color: #e4e4e4;
}
sf-app.sf-app progress[value]::-webkit-progress-value {
  background-color: #38ab63;
}
sf-app.sf-app progress[value]::-moz-progress-bar {
  background-color: #38ab63;
}
sf-app.sf-app progress.-failure[value] {
  color: #ff4848;
}
sf-app.sf-app progress.-failure[value]::-webkit-progress-value {
  background-color: #ff4848;
}
sf-app.sf-app progress.-failure[value]::-moz-progress-bar {
  background-color: #ff4848;
}
sf-app.sf-app progress.-small {
  width: 80px;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app hr {
  margin-top: 30px;
  margin-bottom: 30px;
  border: 0;
  height: 1px;
  background-color: #e4e4e4;
}
sf-app.sf-app input[type=number] {
  -moz-appearance: textfield;
}
sf-app.sf-app input::-webkit-outer-spin-button,
sf-app.sf-app input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
sf-app.sf-app video {
  max-width: 100%;
  height: auto;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app select {
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid var(--select-border-color);
  background-color: #fff;
  line-height: 2;
}
sf-app.sf-app select:focus:focus, sf-app.sf-app select:active:focus {
  box-shadow: 0 0 2px rgba(0, 108, 217, 0.8);
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-flex-sub {
  position: relative;
  vertical-align: baseline;
  bottom: -0.5rem;
}
sf-app.sf-app .sf-flex-sup {
  position: relative;
  vertical-align: baseline;
  top: -0.5rem;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-router-wrapper.-menu {
  position: absolute;
  z-index: 10000000;
  display: flex;
  width: calc(100vw - 20px);
  overflow-x: hidden;
}
sf-app.sf-app .sf-router-wrapper.-menu sf-home {
  order: 1;
  z-index: 10000;
}
sf-app.sf-app .sf-router-wrapper.-menu sf-content {
  order: 2;
  z-index: 10000;
}
sf-app.sf-app .sf-router-wrapper.-is-animating > ng-component {
  position: absolute;
  width: 100%;
}
sf-app.sf-app .sf-router-wrapper.-active:not(.-is-animating) ~ .sf-router-wrapper,
sf-app.sf-app sf-modal-window ~ .sf-router-wrapper {
  display: none !important;
}
sf-app.sf-app .sf-router-wrapper.-active.-is-animating ~ .sf-router-wrapper {
  width: calc(100vw - 20px);
  overflow-x: hidden;
}
sf-app.sf-app .ng-animating .sf-top-toolbar__nav-button {
  display: none;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-wrapper {
  display: flex;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-host {
  display: block;
  background-color: #fff;
}
sf-app.sf-app .sf-host.-animated {
  flex: none;
  width: calc(100vw - 20px);
  min-height: 100vh;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-main {
  padding-bottom: 50px;
  transition: width 0.4s ease-out, padding-right 0.4s ease-out;
}
sf-app.sf-app .sf-main.-list {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  padding-top: 122px;
  padding-left: 50px;
  padding-right: 50px;
  width: 100%;
}
sf-app.sf-app .sf-main.-list.-shrink {
  padding-right: 400px;
}
sf-app.sf-app .sf-main.-list.-shrink.-skip-animation {
  transition: none;
}
sf-app.sf-app .sf-main.-list.-shrink.-no-width-constraint .sf-main__header,
sf-app.sf-app .sf-main.-list.-shrink.-no-width-constraint .sf-main__paging {
  width: calc(100vw - 120px - 350px);
}
sf-app.sf-app .sf-main.-list.-no-width-constraint {
  width: auto;
}
sf-app.sf-app .sf-main.-list.-no-width-constraint .sf-main__header,
sf-app.sf-app .sf-main.-list.-no-width-constraint .sf-main__paging {
  transition: width 0.4s ease-out;
  max-width: none;
  width: calc(100vw - 120px);
}
sf-app.sf-app .sf-main.-details {
  padding-top: 117px;
  width: calc(100vw - 20px);
  min-height: 100vh;
}
sf-app.sf-app .sf-main.-details.-shrink {
  width: calc(100vw - 350px);
}
sf-app.sf-app .sf-main.-details.-shrink.-narrow {
  width: calc(100vw - 460px);
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-section-nav {
  position: fixed;
  top: 170px;
  bottom: 0;
  left: 20px;
  max-width: 140px;
  overflow: auto;
  -webkit-animation: sectionNav 0.4s 1 ease-out;
          animation: sectionNav 0.4s 1 ease-out;
  z-index: 10;
}
@media only screen and (max-width: 1365px) {
  sf-app.sf-app .sf-section-nav {
    display: none;
  }
}
@media only screen and (max-width: 1715px) {
  sf-app.sf-app .sf-main.-shrink + sf-content-section-menu .sf-section-nav {
    display: none;
  }
}
@media only screen and (max-width: 1825px) {
  sf-app.sf-app .sf-main.-narrow + sf-content-section-menu .sf-section-nav {
    display: none;
  }
}
@-webkit-keyframes sectionNav {
  from {
    transform: translateX(calc( -100% - 20px ));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes sectionNav {
  from {
    transform: translateX(calc( -100% - 20px ));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-main-list-header {
  display: grid;
  grid-template-areas: "nav nav" "title buttons" "progress progress" "bulk bulk" "notification notification" "empty-message empty-message";
  grid-template-columns: minmax(100%, -webkit-max-content) minmax(0, -webkit-max-content);
  grid-template-columns: minmax(100%, max-content) minmax(0, max-content);
  width: 100%;
}
sf-app.sf-app .sf-main-list-header.-media {
  grid-template-areas: "title buttons" "progress progress" "bulk bulk" "notification notification" "nav nav" "empty-message empty-message";
}
sf-app.sf-app .sf-main-list-header.-empty {
  grid-template-areas: "nav" "title" "notification" "progress" "empty-message" "buttons" "bulk";
  justify-items: center;
}
sf-app.sf-app .sf-main-list-header.-empty.-media {
  grid-template-areas: "title" "notification" "nav" "progress" "empty-message" "buttons" "bulk";
}
sf-app.sf-app .sf-main-list-header:not(.-empty) .sf-main-list-header__buttons {
  justify-self: end;
  align-self: end;
  white-space: nowrap;
}
sf-app.sf-app .sf-main-list-header__nav {
  grid-area: nav;
}
sf-app.sf-app .sf-main-list-header__title {
  grid-area: title;
}
sf-app.sf-app .sf-main-list-header__buttons {
  grid-area: buttons;
}
sf-app.sf-app .sf-main-list-header__bulk {
  grid-area: bulk;
}
sf-app.sf-app .sf-main-list-header__notification {
  grid-area: notification;
}
sf-app.sf-app .sf-main-list-header__empty-message {
  grid-area: empty-message;
}
sf-app.sf-app .sf-main-list-header__progress {
  grid-area: progress;
  width: 350px;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
sf-app.sf-app .sf-menu__sub-wrapper {
  padding-top: 315px;
  width: 1020px;
}
sf-app.sf-app .sf-menu__sub {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 60px;
  width: 300px;
}
sf-app.sf-app .sf-menu__sub.-two-columns {
  width: 640px;
}
sf-app.sf-app .sf-menu__sub.-two-columns .sf-menu {
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: 40px;
       column-gap: 40px;
}
sf-app.sf-app .sf-menu__sub.-three-columns {
  width: 980px;
}
sf-app.sf-app .sf-menu__sub.-three-columns .sf-menu {
  -moz-column-count: 3;
       column-count: 3;
  -moz-column-gap: 40px;
       column-gap: 40px;
}
sf-app.sf-app .sf-menu__sticky-title {
  width: 100%;
  position: fixed;
  top: 0;
}
sf-app.sf-app .sf-menu__sticky-title:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0.2) 100%);
  z-index: auto;
}
sf-app.sf-app .sf-menu__sticky-title .sf-menu__back,
sf-app.sf-app .sf-menu__sticky-title .sf-menu__title {
  position: relative;
  z-index: 5;
}
sf-app.sf-app .sf-menu__back {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 10px;
}
sf-app.sf-app .sf-menu__title {
  margin-top: 10px;
  margin-bottom: 40px;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: bold;
  font-size: var(--font-size-h1-lg);
  line-height: 1.4;
  color: #333;
}
sf-app.sf-app .sf-menu__title.-sub {
  margin-top: 0;
  margin-bottom: 30px;
  font-size: var(--font-size-h2);
  color: #999;
  border-bottom: 1px solid #e4e4e4;
}
sf-app.sf-app .sf-menu__item:not(.-vertical) {
  margin-left: 10px;
  margin-right: 10px;
}
sf-app.sf-app .sf-menu__link {
  display: block;
  cursor: pointer;
  font-size: var(--font-size-lg);
  color: #333;
}
sf-app.sf-app .sf-menu__link:hover, sf-app.sf-app .sf-menu__link:focus {
  color: #333;
}
sf-app.sf-app .sf-menu__link:hover .sf-menu__icon-box, sf-app.sf-app .sf-menu__link:focus .sf-menu__icon-box {
  background-color: #f5f5f5;
  box-shadow: 2px 2px 1px #f5f5f5;
}
sf-app.sf-app .sf-menu__link.-leaf {
  display: inline-block;
  padding: 3px 5px 2px;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}
sf-app.sf-app .sf-menu__link.-leaf:hover, sf-app.sf-app .sf-menu__link.-leaf:focus, sf-app.sf-app .sf-menu__link.-leaf:active {
  background-color: #e4e4e4;
}
sf-app.sf-app .sf-menu__link.-disabled {
  pointer-events: none;
  cursor: default;
  color: #e4e4e4;
}
sf-app.sf-app .sf-menu__link.-disabled .sf-menu__icon-box {
  color: #e4e4e4;
}
sf-app.sf-app .sf-menu__icon-box {
  display: block;
  margin-bottom: 15px;
  width: 130px;
  height: 130px;
  line-height: 130px;
  font-size: var(--icon-menu-font-size);
  color: #38ab63;
  border: 1px solid #e4e4e4;
  border-radius: 3px;
}
sf-app.sf-app .sf-menu__logout {
  margin-top: 100px;
}
sf-app.sf-app .sf-menu__logout .sf-button {
  margin-right: 0;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-logo {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px;
  width: 180px;
  height: 106px;
  background: transparent url(data:image/svg+xml;base64, ) no-repeat 0 80px;
}
sf-app.sf-app .sf-logo.-fixed {
  position: fixed;
  top: 0;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-sticky {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100000;
  background-color: #fff;
}
sf-app.sf-app .sf-sticky.-top {
  top: 0;
  height: 46px;
}
sf-app.sf-app .sf-sticky.-bottom {
  bottom: 0;
}
sf-app.sf-app .sf-sticky.-left-indent {
  left: 50px;
  padding-right: 50px;
  padding-bottom: 0;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
sf-app.sf-app .sf-media {
  position: relative;
  z-index: 5;
}
sf-app.sf-app .sf-media:not(.-document), sf-app.sf-app .sf-media:not(.-album) {
  height: 100%;
}
sf-app.sf-app .sf-media:hover, sf-app.sf-app .sf-media:focus, sf-app.sf-app .sf-media:active {
  z-index: 100;
}
sf-app.sf-app .sf-media:hover .sf-media__details,
sf-app.sf-app .sf-media:hover .sf-media__selected-indicator, sf-app.sf-app .sf-media:focus .sf-media__details,
sf-app.sf-app .sf-media:focus .sf-media__selected-indicator, sf-app.sf-app .sf-media:active .sf-media__details,
sf-app.sf-app .sf-media:active .sf-media__selected-indicator {
  visibility: visible;
}
sf-app.sf-app .sf-media:not(:focus-within):not(:hover):not(.-remove-button-visible) .sf-media__remove .sf-button {
  padding: 0;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
}
sf-app.sf-app .sf-media:not(.-selected) .sf-media__selected-indicator {
  opacity: 0.5;
}
sf-app.sf-app .sf-media.-mvc::after {
  content: "mvc";
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2px 4px;
  font-size: 8px;
  color: #fff;
  background-color: #006CD9;
  text-transform: uppercase;
}
sf-app.sf-app .sf-media .-auto-height .sf-placeholder {
  height: auto;
}
sf-app.sf-app .sf-media img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  vertical-align: top;
}
sf-app.sf-app .sf-media__chip {
  max-width: calc(100% - 31px);
}
sf-app.sf-app .sf-media__chip .sf-chip {
  margin-bottom: 0;
}
sf-app.sf-app .sf-media.-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 160px;
  color: #eee;
  border: 1px dashed var(--image-empty-border);
}
sf-app.sf-app .sf-media.-empty.-small {
  width: 150px;
  height: 100px;
}
sf-app.sf-app .sf-media.-no-zindex {
  z-index: auto;
}
sf-app.sf-app .sf-media.-no-zindex.-dimmed::after {
  z-index: auto;
}
sf-app.sf-app .sf-media.-smaller {
  width: 60px;
  height: 60px;
}
sf-app.sf-app .sf-media.-landscape {
  width: 82px;
  height: 58px;
  border: 1px solid #f5f5f5;
}
sf-app.sf-app .sf-media.-landscape-smaller {
  width: 42px;
  height: 39px;
}
sf-app.sf-app .sf-media.-cropped {
  overflow: hidden;
}
sf-app.sf-app .sf-media.-cropped img {
  max-height: none;
}
sf-app.sf-app .sf-media.-wide img {
  max-width: none;
  height: 100%;
  width: auto;
}
sf-app.sf-app .sf-media.-preview {
  height: auto;
  max-width: 100%;
}
sf-app.sf-app .sf-media.-preview video {
  min-height: min(354px, 100%);
}
sf-app.sf-app .sf-media.-preview.-document .sf-input-file {
  position: absolute;
  right: -6px;
  bottom: -37px;
}
sf-app.sf-app .sf-media.-no-placeholder video,
sf-app.sf-app .sf-media.-no-placeholder img {
  max-height: 150px;
  width: auto;
}
sf-app.sf-app .sf-media.-prepreview {
  height: 300px;
}
sf-app.sf-app .sf-media.-prepreview.-small {
  height: 150px;
}
sf-app.sf-app .sf-media.-selectable {
  cursor: pointer;
}
sf-app.sf-app .sf-media.-selectable:not(.-dimmed):not(.-selected):hover::after, sf-app.sf-app .sf-media.-selectable:not(.-dimmed):not(.-selected):focus::after, sf-app.sf-app .sf-media.-selectable:not(.-dimmed):not(.-selected):active::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: linear-gradient(rgba(245, 245, 245, 0), rgba(245, 245, 245, 0.25));
  z-index: 1;
  pointer-events: none;
}
sf-app.sf-app .sf-media.-selected .sf-media__selected-indicator,
sf-app.sf-app .sf-media.-selected .sf-media__remove {
  visibility: visible;
}
sf-app.sf-app .sf-media.-selected:after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #DCECF5;
  z-index: 10;
}
sf-app.sf-app .sf-media.-dimmed .sf-media__no-selectable {
  visibility: visible;
}
sf-app.sf-app .sf-media.-dimmed:after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background: #ccc;
  z-index: 10;
}
sf-app.sf-app .sf-media.-upload-progress {
  height: 100%;
}
sf-app.sf-app .sf-media.-upload-progress::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #DCECF5;
  z-index: 10;
  font-size: 0;
}
sf-app.sf-app .sf-media.-upload-progress:not(.-upload-image-preview)::after {
  background-color: transparent;
}
sf-app.sf-app .sf-media.-edit-meta .sf-media__details:not(.-video) {
  bottom: 65px;
}
sf-app.sf-app .sf-media.-edit-meta .sf-input {
  z-index: 1000;
}
sf-app.sf-app .sf-media.-edit-meta img {
  max-height: calc(100% - 55px);
}
sf-app.sf-app .sf-media.-stretched img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  vertical-align: top;
  width: 100%;
}
sf-app.sf-app .sf-media.-stretched.-centered img {
  position: relative;
}
sf-app.sf-app .sf-media.-document {
  width: 200px;
  height: 260px;
  padding: 45px 20px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #eee;
}
sf-app.sf-app .sf-media.-document > sf-component-loader {
  flex: 1;
}
sf-app.sf-app .sf-media.-document .sf-media__thumbnail {
  margin-left: -20px;
  margin-right: -20px;
  padding-bottom: 45px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
sf-app.sf-app .sf-media.-document .sf-media__title {
  min-height: 42px;
}
sf-app.sf-app .sf-media.-document .sf-media__title,
sf-app.sf-app .sf-media.-document .sf-media__progress-status {
  position: relative;
}
sf-app.sf-app .sf-media.-document .sf-media__status {
  position: absolute;
  bottom: 20px;
}
sf-app.sf-app .sf-media.-document .sf-media__file-info.-right-align {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
sf-app.sf-app .sf-media.-document .sf-media__file-info.-badge {
  bottom: 130px;
}
sf-app.sf-app .sf-media.-document .sf-media__progress-status {
  z-index: 100;
}
sf-app.sf-app .sf-media.-document .sf-media__error-message {
  position: absolute;
  bottom: -37px;
  left: -20px;
  white-space: nowrap;
}
sf-app.sf-app .sf-media.-fade-in-effect img, sf-app.sf-app .sf-media.-fade-in-effect video {
  -webkit-animation: 0.6s ease-in fadeIn;
          animation: 0.6s ease-in fadeIn;
}
sf-app.sf-app .sf-media__progress.-absolute {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1000;
}
sf-app.sf-app .sf-media__progress[value].-vertical.-document {
  height: 200px;
  width: 260px;
  transform: rotate(-90deg) translate(-246px, -21px);
  transform-origin: top left;
  background-color: transparent;
  opacity: 0.5;
}
sf-app.sf-app .sf-media__progress[value].-vertical.-document:after {
  display: none;
}
sf-app.sf-app .sf-media__progress[value].-vertical.-document::-webkit-progress-bar {
  background-color: transparent;
}
sf-app.sf-app .sf-media__progress[value].-vertical.-document::-webkit-progress-value {
  -webkit-transition: width 1s linear;
  transition: width 1s linear;
  background-color: #CAEED8;
  color: #fff;
}
sf-app.sf-app .sf-media__progress[value].-vertical.-document::-moz-progress-bar {
  background-color: #CAEED8;
}
sf-app.sf-app .sf-media__progress[value].-vertical.-document.-failure::-webkit-progress-value {
  background-color: #FFCCCC;
}
sf-app.sf-app .sf-media__progress[value].-vertical.-document.-failure::-moz-progress-bar {
  background-color: #FFCCCC;
}
sf-app.sf-app .sf-media__details {
  position: absolute;
  visibility: hidden;
  bottom: 10px;
  left: 10px;
  z-index: 10000;
}
sf-app.sf-app .sf-media__remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10000;
}
sf-app.sf-app .sf-media__labeled {
  padding-left: 2px;
  padding-right: 2px;
  font-size: var(--font-size-base);
  text-align: center;
  z-index: 10000;
  color: #fff;
  background-color: var(--not-translated-image-label-bg);
}
sf-app.sf-app .sf-media__labeled.-down {
  align-self: flex-end;
  margin-bottom: 15px;
}
sf-app.sf-app .sf-media__stretched {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
sf-app.sf-app .sf-media__selected-indicator, sf-app.sf-app .sf-media__no-selectable {
  margin-right: 0;
  position: absolute;
  visibility: hidden;
  top: 10px;
  right: 10px;
  z-index: 10000;
  color: #333;
}
sf-app.sf-app .sf-media__svg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
}
sf-app.sf-app .sf-media__file-info.-right-align {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
sf-app.sf-app .sf-media video {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  overflow: hidden;
}
sf-app.sf-app .sf-image__empty.-view-in-edit {
  min-height: 150px;
}
sf-app.sf-app .sf-image__empty.-video {
  width: 82px;
  height: 58px;
  border: 1px solid #f5f5f5;
}
sf-app.sf-app .sf-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  height: 100%;
}
sf-app.sf-app .sf-placeholder.-upload-image-preview {
  height: calc(100% - 55px);
}
sf-app.sf-app .sf-placeholder.-video {
  background-color: #000;
}
sf-app.sf-app .sf-placeholder.-error {
  position: relative;
  z-index: 20;
}
sf-app.sf-app .sf-flickr-gallery {
  position: relative;
  width: 100%;
}
sf-app.sf-app .sf-flickr-gallery__item {
  position: absolute;
  list-style-type: none;
}
sf-app.sf-app .sf-flickr-gallery__item.-static {
  position: static;
}
sf-app.sf-app .sf-flickr-gallery__item.-video sf-component-loader,
sf-app.sf-app .sf-flickr-gallery__item.-video sf-video-player,
sf-app.sf-app .sf-flickr-gallery__item.-video .sf-video {
  display: block;
  width: 100%;
  height: 100%;
}
sf-app.sf-app .sf-flickr-gallery__drop-wrapper {
  position: absolute;
  display: flex;
  top: 0;
  width: 2px;
  background-color: #333;
  z-index: 1000;
  pointer-events: none;
  align-items: center;
}
sf-app.sf-app .sf-flickr-gallery__drop-image {
  position: absolute;
  left: -30px;
  width: 60px;
  height: auto;
  outline: 4px solid #FFFFCC;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #f5f5f5;
}
sf-app.sf-app .sf-flickr-gallery__drop-image.-wide {
  width: 90px;
  left: -45px;
}
sf-app.sf-app .sf-flickr-gallery__drop-image.-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background-color: #fff;
  border: 1px solid #eee;
}
sf-app.sf-app .sf-flickr-gallery__drag-zone {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  height: 110px;
  width: 100%;
  z-index: 100000;
}
sf-app.sf-app .sf-flickr-gallery__drag-zone.-bottom {
  top: auto;
  bottom: 0;
}
sf-app.sf-app .sf-flickr-gallery__drag-zone.-visible {
  display: block;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
sf-app.sf-app .sf-album {
  display: flex;
  flex-wrap: wrap;
  height: 140px;
  overflow: hidden;
}
sf-app.sf-app .sf-album img {
  -webkit-animation: 0.6s ease-in fadeIn;
          animation: 0.6s ease-in fadeIn;
}
sf-app.sf-app .sf-album:not(.-document) {
  padding: 7px;
  border: 1px solid #e4e4e4;
}
sf-app.sf-app .sf-album__holder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: auto;
  margin: 2px;
  width: 82px;
  height: 58px;
  overflow: hidden;
  background-color: #f5f5f5;
}
sf-app.sf-app .sf-album__holder.-transparent {
  background-color: transparent;
}
sf-app.sf-app .sf-album__folder {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #DCECF5;
  z-index: 5;
  -webkit-animation: 0.6s ease-in fadeIn;
          animation: 0.6s ease-in fadeIn;
}
sf-app.sf-app .sf-album__folder:before, sf-app.sf-app .sf-album__folder:after {
  display: block;
  content: " ";
  position: absolute;
  background-color: #fff;
  z-index: 10;
}
sf-app.sf-app .sf-album__folder:before {
  top: -7px;
  right: 27px;
  width: 12px;
  height: 9px;
  transform-origin: top left;
  transform: rotate(45deg);
  z-index: 100;
}
sf-app.sf-app .sf-album__folder:after {
  top: 0;
  right: 0;
  width: 36px;
  height: 9px;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-tree-list.-medium {
  min-width: 630px;
}
sf-app.sf-app .sf-tree-list.-normal {
  min-width: 850px;
}
sf-app.sf-app .sf-tree-list.-center-vertical .sf-tree-list__cell:not(.-head):not(.-group):not(.-action):not(.-media):not(.-translation) {
  padding-top: 16px;
  padding-bottom: 4px;
}
sf-app.sf-app .sf-tree-list.-center-vertical .sf-tree-list__cell.-translation:not(.-head) {
  padding-top: 15px;
  padding-bottom: 5px;
}
sf-app.sf-app .sf-tree-list.-center-vertical tree-node-checkbox {
  margin-top: 6px;
}
sf-app.sf-app .sf-tree-list.-center-vertical tree-node-expander {
  margin-top: 6px;
}
sf-app.sf-app .sf-tree-list.-bulk .sf-tree-list__row {
  padding-left: 0;
}
sf-app.sf-app .sf-tree-list.-bulk .sf-tree-list__cell {
  padding-left: 20px;
  padding-right: 20px;
}
sf-app.sf-app .sf-tree-list__row {
  display: flex;
  width: 100%;
}
sf-app.sf-app .sf-tree-list__row.-border {
  border-bottom: 1px solid #eee;
}
sf-app.sf-app .sf-tree-list__row.-head {
  font-size: var(--font-size-h5);
  text-transform: uppercase;
  text-align: left;
  color: var(--secondary-text-color);
  padding-left: 33px;
}
sf-app.sf-app .sf-tree-list__row.-head + .sf-tree-list__row.-loading {
  border-top: 1px solid #eee;
}
sf-app.sf-app .sf-tree-list__row.-head .-title {
  min-width: 200px;
}
sf-app.sf-app .sf-tree-list__row.-active {
  background-color: #DCECF5;
}
sf-app.sf-app .sf-tree-list__row.-loading {
  border-bottom: 1px solid #eee;
}
sf-app.sf-app .sf-tree-list__row.-loading .sf-tree-list__cell {
  padding: 0;
  width: 100%;
}
sf-app.sf-app .sf-tree-list__row.-loading .sf-tree-list__cell:hover {
  cursor: default;
  background-color: transparent;
}
sf-app.sf-app .sf-tree-list__row.-no-pointer .sf-tree-list__cell {
  cursor: inherit;
}
sf-app.sf-app .sf-tree-list__row.-no-pointer .sf-tree-list__cell.-title {
  cursor: inherit;
}
sf-app.sf-app .sf-tree-list__row.-disabled::before {
  display: block;
  content: "";
  height: 100%;
  position: absolute;
  z-index: 300;
  left: 0;
  right: 0;
}
sf-app.sf-app .sf-tree-list__row.-disable-checkbox::before {
  display: block;
  content: "";
  height: 100%;
  width: 33px;
  position: absolute;
  z-index: 300;
  left: 0;
  right: 0;
}
sf-app.sf-app .sf-tree-list__cell {
  padding: 10px 10px;
  word-break: break-all;
}
sf-app.sf-app .sf-tree-list__cell:not(.-title) {
  flex: none;
  width: 150px;
}
sf-app.sf-app .sf-tree-list__cell.-head {
  vertical-align: top;
  padding: 5px 10px;
  white-space: nowrap;
  text-align: left;
  font-weight: normal;
}
sf-app.sf-app .sf-tree-list__cell.-head.-status {
  padding-left: 52px;
}
sf-app.sf-app .sf-tree-list__cell.-head.-status.-toggle {
  padding-left: 78px;
}
sf-app.sf-app .sf-tree-list__cell.-head.-status.-thumbnail {
  padding-left: 106px;
}
sf-app.sf-app .sf-tree-list__cell.-head.-toggle {
  padding-left: 36px;
}
sf-app.sf-app .sf-tree-list__cell.-head:not(.-action):not(.-with-tooltip) {
  overflow: hidden;
  text-overflow: ellipsis;
}
sf-app.sf-app .sf-tree-list__cell.-title:not(.-head) {
  width: 100%;
  cursor: pointer;
}
sf-app.sf-app .sf-tree-list__cell.-title {
  margin-right: auto;
  min-width: 200px;
}
sf-app.sf-app .sf-tree-list__cell.-action {
  padding-right: 5px;
  text-align: right;
}
sf-app.sf-app .sf-tree-list__cell.-group {
  position: absolute;
  top: 15px;
  left: -30px;
  display: flex;
  padding: 0;
  width: auto;
}
sf-app.sf-app .sf-tree-list__cell.-fluid {
  width: auto;
}
sf-app.sf-app .sf-tree-list__cell.-fill {
  flex: 1;
}
sf-app.sf-app .sf-tree-list__cell.-sf-simple-media:not(.-document):not(.-video) {
  padding-right: 10px;
  width: 90px;
}
sf-app.sf-app .sf-tree-list__cell.-sf-simple-media:not(.-document):not(.-video) sf-image {
  display: block;
  width: 60px;
  height: 60px;
}
sf-app.sf-app .sf-tree-list__cell.-sf-simple-media:not(.-document):not(.-video) sf-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
sf-app.sf-app .sf-tree-list__cell.-sf-simple-media.-document sf-document {
  display: flex;
}
sf-app.sf-app .sf-tree-list__cell.-sf-simple-media.-document sf-document .sf-media__title {
  margin-left: 10px;
  font-size: var(--font-size-base);
}
sf-app.sf-app .sf-tree-list__cell.-sf-simple-media.-video sf-image {
  display: block;
}
sf-app.sf-app .sf-tree-list__cell.-sf-simple-media.-video sf-image img {
  width: 100%;
}
sf-app.sf-app .sf-tree-list__cell.-sf-short-text, sf-app.sf-app .sf-tree-list__cell.-sf-number, sf-app.sf-app .sf-tree-list__cell.-sf-yes-no-choice, sf-app.sf-app .sf-tree-list__cell.-sf-simple-media.-document {
  width: 200px;
}
sf-app.sf-app .sf-tree-list__cell.-sf-text-area, sf-app.sf-app .sf-tree-list__cell.-sf-related-data, sf-app.sf-app .sf-tree-list__cell.-sf-taxa {
  width: 300px;
}
sf-app.sf-app .sf-tree-list__cell.-sf-date-time {
  width: 400px;
}
sf-app.sf-app .sf-tree-list__cell.-sf-media {
  width: 190px;
}
sf-app.sf-app .sf-tree-list__cell.-sf-media.-wide {
  width: 280px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-4xs {
  width: 30px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-3xs {
  width: 50px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-2xs {
  width: 100px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-xs, sf-app.sf-app .sf-tree-list__cell.-sf-simple-media.-video {
  width: 120px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-s {
  width: 150px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-sm {
  width: 180px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-m {
  width: 200px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-l {
  width: 250px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-xl {
  width: 300px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-2xl {
  width: 350px;
}
sf-app.sf-app .sf-tree-list__cell.-col-size-3xl {
  width: 400px;
}
sf-app.sf-app .sf-tree-list__cell.-col-stretched {
  flex-grow: 1;
}
sf-app.sf-app .sf-tree-list__controlls:not(:empty) {
  min-height: 45px;
}
sf-app.sf-app .sf-tree-list__controlls:not(:empty) + .sf-tree-list__controlls:not(.-out-of-view) {
  min-height: auto;
}
sf-app.sf-app .sf-tree-list__back {
  margin-top: -19px;
  position: relative;
}
sf-app.sf-app .sf-tree-list__status {
  min-width: 42px;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-list__item {
  display: flex;
  align-items: center;
  margin-bottom: -1px;
  padding-left: 10px;
  padding-right: 10px;
  height: 36px;
  border: 1px solid var(--input-border);
  background-color: #fff;
}
sf-app.sf-app .sf-list__item:hover .sf-list__remove, sf-app.sf-app .sf-list__item:focus .sf-list__remove, sf-app.sf-app .sf-list__item:focus-within .sf-list__remove {
  visibility: visible;
}
sf-app.sf-app .sf-list__item.-error {
  position: relative;
}
sf-app.sf-app .sf-list__item.-error:last-child {
  z-index: 5;
}
sf-app.sf-app .sf-list__item.-edit {
  border-left: 0;
  border-right: 0;
  padding-left: 0;
  padding-right: 0;
}
sf-app.sf-app .sf-list__item.-error + .-edit {
  position: relative;
}
sf-app.sf-app .sf-list__item.-error + .-edit:before {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #ff4848;
  top: -1px;
  left: 0;
  z-index: 5;
}
sf-app.sf-app .sf-list__content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
sf-app.sf-app .sf-list__content.-editable {
  cursor: text;
}
sf-app.sf-app .sf-list__remove {
  visibility: hidden;
  margin-left: auto;
  margin-top: -5px;
  padding: 5px;
  cursor: pointer;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-form .sf-field {
  margin-bottom: 5px;
  padding-top: 10px;
  padding-bottom: 15px;
}
sf-app.sf-app .sf-form .sf-field .sf-input {
  margin-bottom: 0;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-field {
  position: relative;
}
sf-app.sf-app .sf-field.-has-errors .sf-field__input,
sf-app.sf-app .sf-field.-has-errors .sf-field__input + .sf-input__unit,
sf-app.sf-app .sf-field.-has-errors .sf-field__input + .sf-input__unit::before,
sf-app.sf-app .sf-field.-has-errors .k-datepicker .k-picker-wrap,
sf-app.sf-app .sf-field.-has-errors .k-timepicker .k-picker-wrap {
  border-color: var(--color-error);
}
sf-app.sf-app .sf-field.-filter {
  margin-top: 3px;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 0;
  border-top: 1px solid #e4e4e4;
}
sf-app.sf-app .sf-field.-filter .sf-field__label {
  display: inline-block;
  font-weight: normal;
}
sf-app.sf-app .sf-field.-boolean-tooltip {
  display: flex;
}
sf-app.sf-app .sf-field.-boolean-tooltip .sf-field__tooltip {
  margin-top: 5px;
  order: 2;
}
sf-app.sf-app .sf-field.-sequence {
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
sf-app.sf-app .sf-field__label {
  display: inline-block;
  font-size: var(--font-size-h4-lg);
  font-weight: bold;
}
sf-app.sf-app .sf-field__label.-legend {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}
sf-app.sf-app .sf-field__content {
  display: block;
  clear: both;
  margin-top: 5px;
}
sf-app.sf-app .sf-field__error {
  margin-top: 5px;
  color: var(--color-error);
}
sf-app.sf-app .sf-field__error.-underline {
  padding-top: 5px;
  border-top: 1px solid var(--color-error);
}
sf-app.sf-app .sf-field__hint {
  color: var(--secondary-text-color);
}
sf-app.sf-app .sf-field__no-value {
  color: var(--secondary-text-color);
}
sf-app.sf-app .sf-field__content, sf-app.sf-app .sf-field__no-value {
  font-size: var(--font-size-lg);
}
sf-app.sf-app .sf-field__table {
  width: 100%;
  table-layout: fixed;
}
sf-app.sf-app .sf-field__table .sf-field {
  padding-top: 10px;
  padding-bottom: 10px;
}
sf-app.sf-app .sf-field__table td .sf-field {
  padding-top: 0;
  padding-bottom: 0;
}
sf-app.sf-app .sf-field__table .-col-size-3xs {
  width: 50px;
}
sf-app.sf-app .sf-field__table .-col-size-2xs {
  width: 100px;
}
sf-app.sf-app .sf-field__table .-col-size-s {
  width: 150px;
}
sf-app.sf-app .sf-field__table .-col-size-sm {
  width: 180px;
}
sf-app.sf-app .sf-field__table.-col-size-3xl {
  width: 400px;
}
sf-app.sf-app .sf-field__table-header {
  font-size: var(--font-size-h5);
  text-transform: uppercase;
  text-align: left;
  color: var(--secondary-text-color);
  padding-top: 5px;
  padding-bottom: 5px;
}
sf-app.sf-app .sf-field__table-header.-first {
  width: 80px;
}
sf-app.sf-app .sf-field__table-row {
  border-bottom: 1px solid #eee;
  height: 55px;
}
sf-app.sf-app .sf-field__table-row.-head {
  height: auto;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-item {
  display: flex;
  align-items: center;
  height: 36px;
  font-size: var(--font-size-lg);
  border: 1px solid var(--input-border);
  border-radius: 0;
  background-color: #fff;
}
sf-app.sf-app .sf-item:hover .sf-item__right-align, sf-app.sf-app .sf-item:focus .sf-item__right-align, sf-app.sf-app .sf-item:focus-within .sf-item__right-align, sf-app.sf-app .sf-item.-loading .sf-item__right-align {
  visibility: visible;
}
sf-app.sf-app .sf-item.-error {
  border-color: var(--color-error);
}
sf-app.sf-app .sf-item.-error .sf-item__unit::before {
  color: var(--color-error);
}
sf-app.sf-app .sf-item.-loading .sf-item__right-align {
  min-width: 40px;
}
sf-app.sf-app .sf-item__content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  padding: 0 10px;
  width: 100%;
}
sf-app.sf-app .sf-item__right-align {
  position: relative;
  visibility: hidden;
  flex-shrink: 0;
  font-size: var(--font-size-base);
  margin-left: auto;
  margin-right: 10px;
}
sf-app.sf-app .sf-item__unit {
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  width: auto;
  height: 34px;
  background-color: #f5f5f5;
  outline: none;
  white-space: nowrap;
}
sf-app.sf-app .sf-item__unit sup {
  position: relative;
  top: -0.4rem;
  vertical-align: baseline;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-filters-list {
  --alphabet-filter-rows: 100;
}
sf-app.sf-app .sf-filters-list.-alphabet {
  display: grid;
  grid-gap: 0;
  grid-template-rows: repeat(var(--alphabet-filter-rows), 1fr);
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
}
sf-app.sf-app .sf-filters-list .-secondary-group {
  margin-top: 20px;
}
sf-app.sf-app .sf-filters-list .-secondary-group + .-secondary-group {
  margin-top: 0;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-help {
  white-space: normal;
}
sf-app.sf-app .sf-help__col1 {
  width: 195px;
}
sf-app.sf-app .sf-help__col2 {
  width: 150px;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-card {
  position: relative;
  border: 1px solid #eee;
}
sf-app.sf-app .sf-card.-selected .sf-card__selected-indicator {
  visibility: visible;
}
sf-app.sf-app .sf-card.-selected:after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #DCECF5;
  z-index: 10;
}
sf-app.sf-app .sf-card.-dashed {
  border-style: dashed;
}
sf-app.sf-app .sf-card.-darker {
  border-color: #ccc;
}
sf-app.sf-app .sf-card.-tooltip:hover {
  outline: 2px solid #CAEED8;
  outline-offset: -2px;
}
sf-app.sf-app .sf-card.-tooltip:hover .sf-card__label {
  display: block;
}
sf-app.sf-app .sf-card.-full-width {
  width: 100%;
}
sf-app.sf-app .sf-card.-full-height {
  height: 100%;
}
sf-app.sf-app .sf-card:not(.-selected):hover::after, sf-app.sf-app .sf-card:not(.-selected):focus::after, sf-app.sf-app .sf-card:not(.-selected):active::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background: #f5f5f5;
  z-index: 1;
}
sf-app.sf-app .sf-card:not(:hover):not(:focus) .sf-card__overlay, sf-app.sf-app .sf-card.-selected .sf-card__overlay {
  display: none;
}
sf-app.sf-app .sf-card .sf-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}
sf-app.sf-app .sf-card.-template {
  margin: 20px;
  padding: 20px;
  width: 260px;
  height: 320px;
}
sf-app.sf-app .sf-card.-template[data-framework=mvc]::before {
  position: absolute;
  top: 185px;
  right: 28px;
  padding: 6px 5px;
  font-size: 10px;
  text-transform: uppercase;
  content: attr(data-framework);
  color: #fff;
  background-color: #006CD9;
}
sf-app.sf-app .sf-card.-template .sf-card__image {
  width: 220px;
  height: 200px;
}
sf-app.sf-app .sf-card__selected-indicator {
  margin-right: 0;
  position: absolute;
  visibility: hidden;
  top: 10px;
  right: 10px;
  z-index: 10000;
  color: #333;
}
sf-app.sf-app .sf-card__label {
  position: absolute;
  display: none;
  left: -1px;
  bottom: 100%;
  font-size: 10px;
  text-transform: uppercase;
  background-color: #CAEED8;
  padding: 0 8px;
  height: 24px;
  vertical-align: middle;
  line-height: 24px;
  color: #999;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-datepicker.-two-lines .sf-datepicker__date {
  display: block;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .sf-zone-toolset {
  display: inline-block;
  padding: 20px;
  border-radius: 3px;
  background-color: #333;
  min-width: 280px;
  font-size: var(--font-size-base);
}
sf-app.sf-app .sf-zone-toolset__label {
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  color: #fff;
  font-size: 10px;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .-sf-virtualized__tree {
  transition: width 0.4s ease-out;
  width: calc(100vw - 2*50px - 10px);
  border-top: 1px solid #eee;
}
sf-app.sf-app .-shrink .-sf-virtualized__tree {
  width: calc(100vw - 2*50px - 350px - 10px );
}
sf-app.sf-app .-sf-virtualized__tree tree-viewport {
  height: 100%;
  display: block;
}
sf-app.sf-app .-sf-virtualized__tree .angular-tree-component {
  width: 100%;
  position: relative;
  display: inline-block;
}
sf-app.sf-app .-sf-virtualized__tree tree {
  display: inline;
}
sf-app.sf-app .-sf-virtualized__tree .sf-status__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
}
sf-app.sf-app .-sf-virtualized__tree .tree-children:not(:focus-within) {
  overflow: hidden;
}
sf-app.sf-app tree {
  display: block;
}
sf-app.sf-app .sf-tree {
  position: relative;
  width: 100%;
  text-align: left;
}
sf-app.sf-app .sf-tree .tree-node-focused > tree-node-wrapper > .node-wrapper {
  background-color: #f5f5f5;
}
sf-app.sf-app .sf-tree .tree-node-active > tree-node-wrapper > .node-wrapper, sf-app.sf-app .sf-tree .tree-node-active > tree-node-wrapper > .node-wrapper:hover, sf-app.sf-app .sf-tree .tree-node-active > tree-node-wrapper > .node-wrapper:focus {
  background-color: #DCECF5;
}
sf-app.sf-app .sf-tree:not(.-no-hover) .node-wrapper {
  position: relative;
  display: flex;
}
sf-app.sf-app .sf-tree:not(.-no-hover) .node-wrapper:hover, sf-app.sf-app .sf-tree:not(.-no-hover) .node-wrapper:focus {
  background-color: #f5f5f5;
}
sf-app.sf-app .sf-tree .tree-children tree-node-expander {
  margin-left: 18px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children tree-node-expander {
  margin-left: 36px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 54px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 72px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 90px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 108px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 126px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 144px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 162px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 180px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 198px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 216px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 234px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 252px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 270px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 288px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 306px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 324px !important;
}
sf-app.sf-app .sf-tree .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children .tree-children tree-node-expander {
  margin-left: 342px !important;
}
sf-app.sf-app .sf-tree .node-content-wrapper {
  flex: 1 1 0;
  display: block;
  min-width: 0;
}
sf-app.sf-app .sf-tree .toggle-children-wrapper,
sf-app.sf-app .sf-tree .toggle-children-placeholder {
  display: block;
  margin-left: -10px;
  margin-right: -10px;
  padding: 7px 10px;
  position: relative;
  min-width: 32px;
  z-index: 1;
}
sf-app.sf-app .sf-tree .toggle-children-wrapper {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--icon-size-s);
  line-height: inherit;
  vertical-align: top;
  text-align: right;
  color: var(--tree-list-expander-color);
  cursor: pointer;
}
sf-app.sf-app .sf-tree .toggle-children-wrapper-collapsed > .toggle-children::before {
  content: "";
}
sf-app.sf-app .sf-tree .toggle-children-wrapper-expanded > .toggle-children::before {
  content: "";
}
sf-app.sf-app .sf-tree__row {
  display: flex;
  width: 100%;
}
sf-app.sf-app .sf-tree__outer {
  position: absolute;
  left: 0;
  padding-top: 15px;
  text-align: center;
  z-index: 10;
}
sf-app.sf-app .sf-tree:not(.-flat) .sf-drag-handle {
  display: block;
  margin-top: -2px;
}
sf-app.sf-app .sf-tree__inner {
  display: flex;
  align-items: center;
  flex: auto;
  position: relative;
  padding: 10px;
  max-width: 100%;
  cursor: pointer;
}
sf-app.sf-app .sf-tree__inner.-loading {
  padding: 0;
}
sf-app.sf-app .sf-tree__inner.-loading:hover::after {
  content: none;
}
sf-app.sf-app .sf-tree__inner.-no-pointer {
  cursor: default;
}
sf-app.sf-app .sf-tree__inner.-inactive {
  color: #999;
}
sf-app.sf-app .sf-tree__inner.-link {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  color: #006CD9;
}
sf-app.sf-app .sf-tree__inner.-link:hover {
  color: #333;
}
sf-app.sf-app .sf-tree__content, sf-app.sf-app .sf-tree__description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
}
sf-app.sf-app .sf-tree__description {
  font-size: var(--font-size-base);
}
sf-app.sf-app .sf-tree__content, sf-app.sf-app .sf-tree__status, sf-app.sf-app .sf-tree__icon, sf-app.sf-app .sf-tree__avatar, sf-app.sf-app .sf-tree__right-align {
  position: relative;
  z-index: 10;
}
sf-app.sf-app .sf-tree__status {
  margin-right: 10px;
  align-self: flex-start;
}
sf-app.sf-app .sf-tree__content.-no-status {
  margin-left: 32px;
}
sf-app.sf-app .sf-tree__right-align {
  margin-right: 5px;
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
}
sf-app.sf-app .sf-tree__action {
  font-size: var(--font-size-base);
}
sf-app.sf-app .sf-tree__action:hover {
  cursor: pointer;
}
sf-app.sf-app .sf-tree__avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  width: 36px;
  margin-right: 10px;
  background-color: #eee;
  color: #999;
}
sf-app.sf-app .sf-tree__icon {
  margin-right: 10px;
}
sf-app.sf-app .sf-tree__icon + .sf-tree__content.-no-status {
  margin-left: 0;
}
sf-app.sf-app .sf-tree__separator {
  border-top: 1px solid #e4e4e4;
  position: relative;
  width: 200%;
  left: -100%;
  z-index: 10;
}
sf-app.sf-app .sf-tree__item-title.-heading {
  font-size: var(--font-size-h5);
  color: #999;
}
sf-app.sf-app .sf-tree.-checkbox tree-node-checkbox {
  padding-top: 15px;
  width: 33px;
  text-align: center;
}
sf-app.sf-app .sf-tree.-checkbox:not(.-main-list-view) tree-node-checkbox {
  padding-top: 12px;
}
sf-app.sf-app .sf-tree.-drag .node-wrapper {
  padding-left: 21px !important;
}
sf-app.sf-app .sf-tree.-drag .tree {
  padding-top: 2px;
}
sf-app.sf-app .sf-tree.-drag .tree > treenode:last-child > .tree-node-collapsed > treenodedropslot .node-drop-slot,
sf-app.sf-app .sf-tree.-drag .tree > treenode:last-child > .tree-node-expanded > treenodedropslot .node-drop-slot {
  bottom: -2px;
}
sf-app.sf-app .sf-tree.-drag .node-drop-slot {
  display: block;
  position: relative;
  margin-top: -10px;
  height: 10px;
  z-index: 1000;
  border: 0;
}
sf-app.sf-app .sf-tree.-drag .node-drop-slot::before {
  position: absolute;
  display: block;
  content: "";
  top: 5px;
  width: 100%;
  height: 5px;
}
sf-app.sf-app .sf-tree.-drag .node-drop-slot.is-dragging-over::before {
  background-color: #333;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children .node-drop-slot {
  margin-left: 43px !important;
  z-index: 1043;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children .node-drop-slot {
  margin-left: 61px !important;
  z-index: 1061;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 79px !important;
  z-index: 1079;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 97px !important;
  z-index: 1097;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 115px !important;
  z-index: 1115;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 133px !important;
  z-index: 1133;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 151px !important;
  z-index: 1151;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 169px !important;
  z-index: 1169;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 187px !important;
  z-index: 1187;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 205px !important;
  z-index: 1205;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 223px !important;
  z-index: 1223;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 241px !important;
  z-index: 1241;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 259px !important;
  z-index: 1259;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 277px !important;
  z-index: 1277;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 295px !important;
  z-index: 1295;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 313px !important;
  z-index: 1313;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 331px !important;
  z-index: 1331;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 349px !important;
  z-index: 1349;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children tree-node-children .node-drop-slot {
  margin-left: 367px !important;
  z-index: 1367;
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) .sf-tree__outer.-sf-just-added {
  height: 100%;
  padding-right: calc(100% - 21px);
}
sf-app.sf-app .sf-tree.-drag:not(.-flat) .is-dragging-over .sf-tree__item-title {
  background-color: #000;
  color: #fff;
}
sf-app.sf-app .sf-tree.-flat tree-node-expander {
  display: none;
}
sf-app.sf-app .sf-tree.-flat .sf-tree__outer + .sf-tree__inner {
  margin-left: -10px;
}
sf-app.sf-app .sf-tree.-actions-on-hover .sf-tree__action {
  visibility: hidden;
}
sf-app.sf-app .sf-tree.-actions-on-hover .sf-tree__inner:hover .sf-tree__action {
  visibility: visible;
}
sf-app.sf-app .sf-tree.-condensed .sf-tree__inner:not(.-link) {
  padding-top: 8px;
  padding-bottom: 8px;
}
sf-app.sf-app .sf-tree.-condensed .sf-tree__outer {
  padding-top: 8px;
  height: calc(100% - 1px);
}
sf-app.sf-app .sf-tree:not(.-no-separators) {
  border-top: 1px solid #eee;
}
sf-app.sf-app .sf-tree:not(.-no-separators) .node-wrapper {
  border-bottom: 1px solid #eee;
}
sf-app.sf-app .sf-tree.-status .toggle-children-wrapper,
sf-app.sf-app .sf-tree.-status .toggle-children-placeholder {
  padding-top: 9px;
}
sf-app.sf-app .sf-tree.-text-status .sf-tree__status {
  margin-top: 4px;
}
sf-app.sf-app .sf-tree.-list {
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
sf-app.sf-app .sf-tree.-list .sf-tree__file-extension {
  display: none;
}
sf-app.sf-app .sf-tree.-read-only .node-wrapper:hover, sf-app.sf-app .sf-tree.-read-only .node-wrapper:focus, sf-app.sf-app .-read-only .sf-tree .node-wrapper:hover, sf-app.sf-app .-read-only .sf-tree .node-wrapper:focus {
  background-color: transparent;
}
sf-app.sf-app .sf-tree.-read-only .tree-node-active > tree-node-wrapper > .node-wrapper,
sf-app.sf-app .sf-tree.-read-only .tree-node-focused > tree-node-wrapper > .node-wrapper, sf-app.sf-app .-read-only .sf-tree .tree-node-active > tree-node-wrapper > .node-wrapper,
sf-app.sf-app .-read-only .sf-tree .tree-node-focused > tree-node-wrapper > .node-wrapper {
  background-color: transparent;
}
sf-app.sf-app .sf-tree.-read-only .sf-tree__inner, sf-app.sf-app .-read-only .sf-tree .sf-tree__inner {
  cursor: default;
}
sf-app.sf-app .sf-tree.-drag .node-wrapper:hover .sf-tree__row.-system-link::before, sf-app.sf-app .sf-tree.-drag .node-wrapper:focus .sf-tree__row.-system-link::before, sf-app.sf-app .sf-tree.-status .node-wrapper:hover .sf-tree__row.-system-link::before, sf-app.sf-app .sf-tree.-status .node-wrapper:focus .sf-tree__row.-system-link::before, sf-app.sf-app .sf-tree.-checkbox .node-wrapper:hover .sf-tree__row.-system-link::before, sf-app.sf-app .sf-tree.-checkbox .node-wrapper:focus .sf-tree__row.-system-link::before {
  background-color: #f5f5f5;
}
sf-app.sf-app .sf-tree.-drag .sf-tree__row.-system-link::before, sf-app.sf-app .sf-tree.-status .sf-tree__row.-system-link::before, sf-app.sf-app .sf-tree.-checkbox .sf-tree__row.-system-link::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  width: 33px;
  height: 100%;
  background-color: #fff;
  z-index: 100;
}
sf-app.sf-app .sf-tree.-drag .sf-tree__row.-system-link .sf-tree__icon, sf-app.sf-app .sf-tree.-status .sf-tree__row.-system-link .sf-tree__icon, sf-app.sf-app .sf-tree.-checkbox .sf-tree__row.-system-link .sf-tree__icon {
  margin-left: auto;
  margin-right: 0;
  padding-right: 5px;
}
sf-app.sf-app .sf-tree.-drag .sf-tree__row.-system-link .sf-tree__icon,
sf-app.sf-app .sf-tree.-drag .sf-tree__row.-system-link .sf-tree__content, sf-app.sf-app .sf-tree.-status .sf-tree__row.-system-link .sf-tree__icon,
sf-app.sf-app .sf-tree.-status .sf-tree__row.-system-link .sf-tree__content, sf-app.sf-app .sf-tree.-checkbox .sf-tree__row.-system-link .sf-tree__icon,
sf-app.sf-app .sf-tree.-checkbox .sf-tree__row.-system-link .sf-tree__content {
  cursor: pointer;
}
sf-app.sf-app .sf-tree.-main-list-view:not(.-flat) tree-node-checkbox {
  padding-left: 10px;
  width: 43px;
}
sf-app.sf-app .sf-tree.-main-list-view:not(.-flat) .toggle-children-placeholder,
sf-app.sf-app .sf-tree.-main-list-view:not(.-flat) .toggle-children-wrapper {
  margin-top: 4px;
  min-width: 36px;
}
sf-app.sf-app .sf-tree.-sidebar .sf-tree__inner {
  padding: 3px 7px;
  border-radius: 3px;
}
sf-app.sf-app .sf-tree.-sidebar .tree-children {
  margin-left: 20px;
}
sf-app.sf-app .sf-tree.-sidebar .node-wrapper {
  border-radius: 3px;
  margin-bottom: 2px;
}
sf-app.sf-app .sf-tree.-sidebar .tree-node-focused > tree-node-wrapper > .node-wrapper,
sf-app.sf-app .sf-tree.-sidebar .node-wrapper:hover {
  display: inline-flex;
  background-color: #e4e4e4;
}
sf-app.sf-app .sf-tree.-sidebar-hiarachical-nav .sf-tree__inner {
  padding: 0;
}
sf-app.sf-app .sf-tree.-sidebar-hiarachical-nav .sf-tree__content:hover, sf-app.sf-app .sf-tree.-sidebar-hiarachical-nav .sf-tree__content:focus,
sf-app.sf-app .sf-tree.-sidebar-hiarachical-nav .sf-tree__right-align:not(:empty):hover,
sf-app.sf-app .sf-tree.-sidebar-hiarachical-nav .sf-tree__right-align:not(:empty):focus {
  background-color: #e4e4e4;
}
sf-app.sf-app .sf-tree.-sidebar-hiarachical-nav .sf-tree__content {
  flex: auto;
  padding: 10px;
}
sf-app.sf-app .sf-tree.-sidebar-hiarachical-nav .sf-tree__right-align {
  margin-right: 0;
  padding: 6px;
  min-width: 38px;
  height: 100%;
}
sf-app.sf-app .sf-drag-handle {
  width: 21px;
  font-size: var(--icon-size-xs);
  color: #ccc;
  cursor: move;
}
sf-app.sf-app .sf-drag-handle:hover, sf-app.sf-app .sf-drag-handle:focus {
  color: #333;
}
sf-app.sf-app .-sf-tree-dragging .sf-sticky,
sf-app.sf-app .-sf-tree-dragging .sf-modal-window__buttons {
  display: none !important;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
sf-app.sf-app .-sf-just-added {
  -webkit-animation-name: justAdded;
          animation-name: justAdded;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
sf-app.sf-app .-sf-just-added-disabled {
  -webkit-animation-name: justAddedDisabled;
          animation-name: justAddedDisabled;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
sf-app.sf-app .-sf-highlighted:not(.-on-hover) {
  background-color: #FFFFCC;
}
sf-app.sf-app .-sf-highlighted.-on-hover:hover {
  background-color: #FFFFCC;
}
@-webkit-keyframes justAdded {
  from {
    background-color: #FFFFCC;
  }
  to {
    background-color: #fff;
  }
}
@keyframes justAdded {
  from {
    background-color: #FFFFCC;
  }
  to {
    background-color: #fff;
  }
}
@-webkit-keyframes justAddedDisabled {
  from {
    background-color: #FFFFCC;
  }
  to {
    background-color: #f5f5f5;
  }
}
@keyframes justAddedDisabled {
  from {
    background-color: #FFFFCC;
  }
  to {
    background-color: #f5f5f5;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
sf-app.sf-app .-sf-fade-in {
  -webkit-animation: 0.4s ease-in fadeIn;
          animation: 0.4s ease-in fadeIn;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
.sf-zone__frame {
  position: fixed;
  left: 0;
  border: 0;
  width: calc(100% - 15px);
  height: calc(100vh - 46px);
  top: 46px;
  z-index: 5;
  transition: 0.4s ease-out, padding-right 0.4s ease-out;
}
.sf-zone__frame.-shrink {
  padding-right: 335px;
}
.-sf-integrated-app .-sf-new-zone-editor:not(.sfPageEditor) {
  overflow-y: auto;
  overflow-x: hidden;
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
/* --- PAGE EDITOR --- */
.sfPageContainer,
.ZoneEditorToolboxContainer {
  height: calc(100vh - 92px);
}
.sf-app {
  display: block;
}
:root {
  /* Page editor modal overlay */
}
:root .sfPageEditor:not(.sfFormsEditor) .sfMessagePane {
  position: relative;
  display: flex;
  padding: 45px 0 0 48px;
  height: 45px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
  box-shadow: none;
}
:root .sfPageEditor:not(.sfFormsEditor) .sfMessagePane::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 46px;
  width: 100%;
  background-color: #fff;
}
:root .sfPageEditor:not(.sfFormsEditor) .sfMessagePane .sfPagePersomalizationDdlWrp {
  margin-top: 15px;
  margin-left: 0;
  float: none;
  z-index: 999;
}
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar {
  display: block;
  width: 279px;
  margin-left: auto;
  visibility: visible;
  border-left: 1px solid #eee;
  background-color: transparent;
  position: relative;
  z-index: 999 !important;
}
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar .rtbOuter {
  padding: 0;
  background-image: none;
  background-color: #f5f5f5;
}
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar .rtbUL {
  display: flex !important;
  position: relative !important;
}
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar .rtbItem:last-child::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 50%;
  height: 2px;
  background-color: #777;
  z-index: 1000 !important;
  transition: left 0.4s;
}
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar .rtbItem.rtbChecked + .rtbItem:last-child::after {
  left: 0;
}
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar .rtbItem {
  flex-basis: 50%;
}
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar .rtbItem .rtbWrap {
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  vertical-align: bottom !important;
  line-height: 44px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  color: #006cd9 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar .rtbItemHovered .rtbWrap,
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar .rtbItem.rtbChecked .rtbWrap {
  color: #333 !important;
}
:root .sfPageEditor:not(.sfFormsEditor) .RadToolBar.sfLayoutToolbar .rtbItem .rtbWrap::before {
  display: none;
}
:root .sfPageEditor:not(.sfFormsEditor) .ZoneEditorToolboxContainer {
  background-color: #f5f5f5;
}
:root .sfPageEditor .sf-loading-wrapper {
  z-index: 1010 !important;
}
:root .sfPageEditor sf-app .sf-top-toolbar.-page-editor {
  z-index: 1000 !important;
}
/* end of Page editor modal overlay */
.-sf-integrated-app {
  --font-size-base: 1.3rem;
  /* Copied from Sitefintiy */
  /* Forms Rules - hide classic page editor when form rules is opened */
  /* stylelint-disable */
  /* Header */
  /* User Links (Top Right) */
  /* Footer */
  /* Site selector */
  /* Centered page  */
  /*Loading*/
  /* Common */
  /* Clear */
  /* Spacing */
  /* Integration Override */
  /* Selector */
  /* Grid Pager */
  /* Override Iris Css */
  /* toolbar */
  /* list and details wrappers */
  /* TODO: Check if sf-notification-wrapper is needed and can be replaced with -fixed modifier only */
  /* Sidebar in List */
  /* Modal Window */
  /* Because of the negative margin of .sf-modal - 26px + 46px */
  /* Icon */
  /* Button Switch */
  /* Stand alone navigation */
  /* Hide jquery validation messages in Iris */
  /* Send for tranlation pane*/
  /* Modal window styles*/
  /* end of Modal window styles*/
  /* Kendo overrides */
}
.-sf-integrated-app,
.-sf-integrated-app body,
.-sf-integrated-app body > form {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
}
.-sf-integrated-app body {
  float: left;
  clear: both;
  min-width: 100%;
  /* this is fix for body getting content width when there is horizontal scroll */
  font-family: "Open Sans", Arial, Verdana, sans-serif;
}
.-sf-integrated-app body.sfAdminAppControl {
  overflow-y: auto !important;
}
.-sf-integrated-app body.sfAdminAppControl .sfMessagePane,
.-sf-integrated-app body.sfAdminAppControl .sfPageEditorToolbarWrapper,
.-sf-integrated-app body.sfAdminAppControl .sfPageWrapper,
.-sf-integrated-app body.sfAdminAppControl .sfWarningLangWrapper {
  display: none;
}
.-sf-integrated-app string, .-sf-integrated-app b {
  font-family: inherit;
}
.-sf-integrated-app #sfSkip {
  /* stylelint-enable */
  position: absolute;
  left: -1000px;
  top: -1000px;
}
.-sf-integrated-app .sfWrapper {
  min-height: 100%;
  min-width: 1250px;
}
.-sf-integrated-app .sfTopBar a,
.-sf-integrated-app .sfFooter a {
  color: #333;
}
.-sf-integrated-app .sfTopBar a:hover,
.-sf-integrated-app .sfTopBar a:focus,
.-sf-integrated-app .sfFooter a:hover,
.-sf-integrated-app .sfFooter a:focus {
  color: #000;
}
.-sf-integrated-app .sfTopBar {
  display: flex;
  position: absolute;
  top: 0;
  right: calc(100% - 100vw + 20px);
  line-height: 1.2;
  color: var(--sf-topbar-color);
  z-index: 10000;
}
.-sf-integrated-app .sfLogo {
  margin: 0;
  padding: 0;
  width: 142px;
  height: 19px;
  border-bottom: 0;
  position: relative;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent url("/assets/images/ProgressSitefinityCms.min.svg") no-repeat 50% 0;
}
.-sf-integrated-app .sfTopBar .sfLogo {
  margin-top: 12px;
  order: 3;
}
.-sf-integrated-app .sfTopBar .sfInlineBlock {
  vertical-align: top;
}
.-sf-integrated-app div.sfTopBar a.sfLiveSite {
  display: inline-block;
  margin-top: 16px;
  margin-left: 20px;
  color: var(--sf-live-link);
  text-decoration: underline;
  order: 1;
  font-size: 13px;
}
.-sf-integrated-app div.sfTopBar a.sfLiveSite:hover,
.-sf-integrated-app div.sfTopBar a.sfLiveSite:focus {
  color: var(--sf-live-link);
  text-decoration: none;
}
.-sf-integrated-app .sfTopBar .sfHelpLnk {
  display: none;
}
.-sf-integrated-app .sfTopBar .sfLoggedUser {
  position: relative;
  margin-right: 15px;
  order: 2;
  border-right: 1px solid #ddd;
}
.-sf-integrated-app .sfTopBar .sfUserHeader {
  margin: 4px 15px;
  overflow: hidden;
  color: #333;
  text-align: right;
  cursor: pointer;
}
.-sf-integrated-app .sfTopBar .sfUserInfo {
  display: none;
  position: absolute;
  right: 9px;
  margin-top: 0;
  margin-right: -10px;
  margin-bottom: 0;
  padding: 15px 0;
  width: 280px;
  background-color: #fff;
  border: 1px solid var(--sf-user-info-border-color);
  box-shadow: 0 0 3px #e5e5e5;
  font-size: 13px;
}
.-sf-integrated-app .sfTopBar .sfUserHeader img {
  width: 36px;
  height: 36px;
  display: block;
}
.-sf-integrated-app .sfTopBar .sfUserInfo .sfShortInfo {
  padding: 0 15px;
}
.-sf-integrated-app .sfTopBar .sfUserInfo .sfShortInfo .sfProfileName {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}
.-sf-integrated-app .sfTopBar .sfUserInfo .sfShortInfo img {
  float: left;
  width: 64px;
  height: 64px;
  margin-right: 15px;
}
.-sf-integrated-app .sfTopBar .sfOpened .sfUserInfo {
  display: block;
}
.-sf-integrated-app .sfTopBar .sfUserInfo li {
  margin-top: 2px;
  list-style-type: none;
}
.-sf-integrated-app .sfUserInfoSwitchWrp {
  display: flex;
  margin-bottom: 8px;
  margin-top: 8px;
  padding: 8px 15px;
  align-items: center;
  cursor: pointer;
  color: #333;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.-sf-integrated-app .sfTopBar .sfUserInfo .sfUserInfoSwitch {
  color: #666;
  margin-left: auto;
  text-transform: uppercase;
}
.-sf-integrated-app .sfTopBar .sfUserInfoSwitch .sfUserInfoSwitchBtn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.-sf-integrated-app .sfTopBar .sfUserInfoSwitch i {
  position: relative;
  top: -1px;
  font-size: 22px;
  margin-left: 3px;
}
.-sf-integrated-app .sfTopBar .sfUserInfo a {
  padding: 5px 15px;
  display: block;
  text-decoration: none;
}
.-sf-integrated-app .sfTopBar .sfUserInfo a:hover,
.-sf-integrated-app .sfTopBar .sfUserInfo a:focus {
  background-color: #f2f2f2;
}
.-sf-integrated-app .sfTopBar .sfUserHeader img,
.-sf-integrated-app .sfTopBar .sfUserInfo img {
  border-radius: 50%;
}
.-sf-integrated-app .sfFooter {
  display: flex;
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-top: -35px;
  height: 34px;
  font-size: 12px;
  color: var(--sf-h5-color);
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  clear: both;
}
.-sf-integrated-app .sfFooter .sfCopy {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
}
.-sf-integrated-app .sfFooter .sfSupportLinks {
  margin-top: 0;
  margin-bottom: 0;
  display: inline-flex;
  padding-right: 20px;
}
.-sf-integrated-app .sfFooter .sfSupportLinks li {
  padding-left: 10px;
  padding-right: 10px;
  list-style-type: none;
}
.-sf-integrated-app .sfFooter .sfSupportLinks a {
  text-decoration: underline;
}
.-sf-integrated-app .sfFooter .sfSupportLinks a:hover,
.-sf-integrated-app .sfFooter .sfSupportLinks a:focus {
  text-decoration: none;
}
.-sf-integrated-app .sfSiteSelectorMenuWrp {
  display: inline-block;
  margin-left: -10px;
  height: 40px;
  position: relative;
  top: -2px;
  background-color: #fff;
  z-index: 2951 !important;
}
.-sf-integrated-app .sfSiteSelectorMenuWrp > ul {
  display: none;
}
.-sf-integrated-app div.sfSiteSelectorMenuWrp .clickMenu li.main::after {
  color: var(--sf-navigation-caret);
}
.-sf-integrated-app .sfSiteSelectorMenuWrp .clickMenu div.outerbox {
  border-color: var(--sf-navigation-border-color);
}
.-sf-integrated-app .sfSiteSelectorMenuWrp .clickMenu {
  margin-top: 9px;
}
.-sf-integrated-app a.sfBack {
  display: inline-block;
  vertical-align: top;
  margin-top: 20px;
}
.-sf-integrated-app a.sfBack::before {
  display: inline-block;
  margin-right: 8px;
  font-family: FontAwesome;
  vertical-align: middle;
  content: "";
  font-size: 14px;
}
.-sf-integrated-app .sfHeader a.sfBack {
  margin-top: 14px;
  margin-left: 15px;
}
.-sf-integrated-app .sfContentCentered {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 45px;
  width: 620px;
}
.-sf-integrated-app .sfContentCentered h1.sfBreadCrumb {
  padding: 40px 0 24px;
  font-size: 34px;
  line-height: 1.1;
  font-weight: normal;
  white-space: normal;
}
.-sf-integrated-app h1.sfBreadCrumb .sfBeta {
  padding: 1px 5px;
  position: relative;
  background-color: #6699ff;
  color: #fff;
  top: -15px;
  font-size: 9px;
  font-family: open_sanssemibold, Arial, Verdana, sans-serif;
}
.-sf-integrated-app div.RadAjax,
.-sf-integrated-app .k-loading-mask {
  position: fixed !important;
  width: 100% !important;
  height: 2px !important;
  left: 0 !important;
  top: 0 !important;
  text-align: left !important;
  z-index: 9006 !important;
  border-top: 0;
  border-bottom: 0;
  background-color: transparent !important;
  color: #cacfe6 !important;
  overflow: hidden;
}
.-sf-integrated-app .sfWhiteBgDiv {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 9005 !important;
  background-color: #fff !important;
  opacity: 0.1 !important;
  filter: alpha(opacity=10) !important;
}
.-sf-integrated-app div.RadAjax div.raColor,
.-sf-integrated-app .k-loading-mask .k-loading-color {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #4cb861;
  background-color: #38ab63;
  -webkit-animation: loadingAnimation 1s linear infinite;
  animation: loadingAnimation 1s linear infinite;
  transform-origin: 0 0;
}
.-sf-integrated-app div.RadAjax div.raDiv,
.-sf-integrated-app .k-loading-mask .k-loading-text {
  display: none;
}
.-sf-integrated-app .sfGreenMain {
  color: var(--sf-green-main);
}
.-sf-integrated-app .sfMoreDetails {
  color: #666;
  text-decoration: underline;
}
.-sf-integrated-app .sfMoreDetails:hover,
.-sf-integrated-app .sfMoreDetails:focus {
  color: #666;
  text-decoration: none;
}
.-sf-integrated-app .sfOverflowHidden {
  overflow: hidden;
}
.-sf-integrated-app .sfTextEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.-sf-integrated-app .sfSuccessTxt {
  color: #4cb861;
}
.-sf-integrated-app .sfBiggerTxt {
  font-size: 15px;
}
.-sf-integrated-app .sfSecondaryTxt {
  color: #666;
}
.-sf-integrated-app .sfMBottom20 {
  margin-bottom: 20px;
}
.-sf-integrated-app .sfMTop35 {
  margin-top: 35px;
}
.-sf-integrated-app .sfBorderList li,
.-sf-integrated-app .sfIrisOnOff .sfBorderList li {
  margin-bottom: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid #e4e4e4;
}
.-sf-integrated-app .sfForm,
.-sf-integrated-app .sfIrisOnOff .sfForm {
  margin-top: 15px;
  padding: 20px 30px;
  border-width: 1px;
  border-style: solid;
  border-color: #e4e4e4;
  background-color: #fff;
}
.-sf-integrated-app .sfSimpleLoadingWrp {
  color: #105ab5;
  padding-top: 3px;
  padding-left: 30px;
  background: transparent url("/assets/images/sfLoadingData.gif") no-repeat 0 1px;
  font-family: open_sanssemibold, Arial, Verdana, sans-serif;
}
.-sf-integrated-app .sfClearer {
  clear: both;
}
.-sf-integrated-app .sfClearfix:before,
.-sf-integrated-app .sfClearfix:after {
  content: "";
  display: table;
}
.-sf-integrated-app .sfClearfix:after {
  clear: both;
}
.-sf-integrated-app .sfMTop10 {
  margin-top: 10px;
}
.-sf-integrated-app .sfHeader {
  position: relative;
  margin-bottom: -46px;
  height: 46px !important;
  box-shadow: 0 3px 5px #f3f3f3;
  background-color: #fff;
  z-index: 1000;
}
.-sf-integrated-app .sfIrisOnOff {
  padding-top: 46px;
}
.-sf-integrated-app .sfIrisOnOff h1.sfBreadCrumb {
  font-family: open_sansregular, Arial, Verdana, sans-serif;
}
.-sf-integrated-app .sfWrapper .sfIrisOnOff h2 {
  font-size: 18px;
  font-family: open_sansregular, Arial, Verdana, sans-serif;
  color: #333;
}
.-sf-integrated-app .sfIrisOnOff .sfBorderList li {
  padding: 10px 4px;
  list-style-type: none;
}
.-sf-integrated-app .sfIrisOnOff .sfBorderList li:last-child {
  border-bottom: 0;
}
.-sf-integrated-app .sfIrisOnOff button.sf-button.-action {
  background-color: #4cb861;
  border: 0;
}
.-sf-integrated-app .sfIrisOnOff button.sf-button.-action:hover,
.-sf-integrated-app .sfIrisOnOff button.sf-button.-action:focus {
  background-color: #429f55;
}
.-sf-integrated-app .sfHeader .RadMenu_MainMenu .rmHorizontal .rmRootLink.rmLink {
  padding-bottom: 15px;
}
.-sf-integrated-app .sfHeader .RadMenu_MainMenu .rmRootGroup .rmItem .rmSlide .rmLevel1 {
  border-color: var(--sf-navigation-border-color);
}
.-sf-integrated-app .sfHeader .RadMenu_MainMenu .rmRootGroup .rmItem .rmSlide .rmLevel1 strong {
  color: var(--sf-h5-color);
}
.-sf-integrated-app .RadMenu_MainMenu .rmHorizontal .rmLink .rmExpandDown::after {
  color: var(--sf-navigation-caret);
}
.-sf-integrated-app .ui-dialog,
.-sf-integrated-app .ui-dialog * {
  box-sizing: content-box;
}
.-sf-integrated-app .sfSelectorDialog h1 {
  padding: 0 0 15px;
  font-size: 10px;
  font-family: open_sansregular, Arial, Verdana, sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  color: #666;
}
.-sf-integrated-app .sfSelectorDialog .sfSelectorFilters {
  padding: 9px 0 4px;
}
.-sf-integrated-app .sfSelectorDialog .sfSearchBoxSet {
  float: right;
  padding-right: 5px;
  z-index: 700009;
  position: relative;
}
.-sf-integrated-app .sfSearchBoxSet .sfSearchLbl {
  left: 5px;
  padding: 0;
  position: absolute;
  text-align: left;
  top: 6px;
  color: #999;
  font-style: italic;
  font-weight: normal;
}
.-sf-integrated-app .sfSelectorDialog .sfSelectorFilters .sfTxt {
  padding: 4px 5px;
  width: 190px;
  vertical-align: middle;
  font-family: open_sansregular, Arial, Verdana, sans-serif;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 0;
}
.-sf-integrated-app .sfSelectorDialog .sfSelectorGridWrapper {
  margin-bottom: 10px;
  padding: 10px;
  height: 340px;
  overflow: auto;
  border-width: 1px;
  background-color: #fff;
  border-style: solid;
  border-color: #ccc;
}
.-sf-integrated-app div.RadGrid {
  background-color: transparent;
  font-family: open_sansregular, Arial, Verdana, sans-serif;
  border: 0;
  color: #333;
  line-height: 16px;
}
.-sf-integrated-app .RadGrid tbody .rgRow,
.-sf-integrated-app .RadGrid tbody .rgAltRow {
  background-color: transparent;
}
.-sf-integrated-app .RadGrid tbody tr.rgHoveredRow:not(.rgSelectedRow),
.-sf-integrated-app .RadGrid tbody tr:hover:not(.rgSelectedRow) {
  background-color: #f9f9f9;
  background-image: none;
  color: #333;
}
.-sf-integrated-app .sfSelectorDialog .RadGrid tbody .rgRow td,
.-sf-integrated-app .sfSelectorDialog .RadGrid tbody .rgAltRow td {
  padding: 5px 7px 8px;
  border: 0;
}
.-sf-integrated-app .sfSelectorDialog .RadGrid .rgSelectedRow {
  background-image: none;
  background-color: #e6f2f8;
  color: #000;
}
.-sf-integrated-app .sfSelectorDialog .RadGrid .sfItemTitle {
  font-family: open_sanssemibold, Arial, Verdana, sans-serif;
  font-weight: normal;
  display: block;
  margin-top: -3px;
  line-height: 1.2;
  font-size: 13px;
}
.-sf-integrated-app .sfSelectorDialog .sfSelectorBtns {
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid #e5e5e5;
  color: #666;
  min-height: 30px;
}
.-sf-integrated-app .sfButtonArea .sfLinkBtn {
  margin-right: 5px;
  padding-right: 10px;
  padding-left: 10px;
  display: inline-block;
  min-height: 28px;
  line-height: 27px;
  max-width: 470px;
  vertical-align: middle;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  background-color: #fff;
  transition: background-color 0.2s;
  font-size: 13px;
}
.-sf-integrated-app .sfButtonArea .sfLinkBtnIn {
  font-weight: normal;
}
.-sf-integrated-app .sfSelectorDialog .sfSave {
  min-width: 50px;
  text-align: center;
  background-color: #4cb861;
  min-height: 30px;
  line-height: 29px;
  border: 0;
  color: #fff;
}
.-sf-integrated-app .sfSelectorDialog .sfCancel {
  padding-left: 3px;
  color: #f00;
}
.-sf-integrated-app div.RadGrid .rgMasterTable .rgPager,
.-sf-integrated-app div.RadGrid .rgMasterTable .rgPager tr:hover .rgPagerCell {
  background-color: #fff;
}
.-sf-integrated-app div.RadGrid .rgMasterTable .rgPager .rgPagerCell {
  border: 0;
}
.-sf-integrated-app div.RadGrid .NumericPages .rgNumPart {
  display: inline-block;
  margin-top: 20px;
  padding-left: 0;
  padding-right: 0;
  font-family: open_sansregular, Arial, Verdana, sans-serif;
}
.-sf-integrated-app div.RadGrid .rgNumPart a {
  margin-right: 5px;
  padding: 3px 2px;
  min-width: 25px;
  background-image: none;
  text-align: center;
  border-radius: 15px;
  color: #105cb6;
}
.-sf-integrated-app div.RadGrid .rgNumPart a:first-child {
  margin-left: 5px;
}
.-sf-integrated-app div.RadGrid .rgNumPart a:hover {
  background-color: #e6f2f8;
  background-image: none;
  color: #00f;
}
.-sf-integrated-app div.RadGrid .rgNumPart span {
  float: none;
  padding-left: 0;
}
.-sf-integrated-app div.RadGrid.RadGrid .rgNumPart a.rgCurrentPage span,
.-sf-integrated-app div.RadGrid.RadGrid .rgNumPart a.rgCurrentPage:hover span,
.-sf-integrated-app div.RadGrid.RadGrid .rgNumPart a span:hover,
.-sf-integrated-app div.RadGrid.RadGrid .rgNumPart a:hover span {
  background-image: none;
}
.-sf-integrated-app div.RadGrid .rgNumPart a.rgCurrentPage {
  background-image: none;
  color: #000;
  border: 1px solid #d2d2d2;
  padding: 2px;
  background-color: transparent;
}
.-sf-integrated-app div.RadGrid .rgNumPart a.rgCurrentPage:hover {
  background-color: transparent;
}
.-sf-integrated-app div.RadGrid .rgInfoPart {
  margin-top: 23px;
  font-size: 13px;
  color: #656565;
}
.-sf-integrated-app div.RadGrid .rgInfoPart strong {
  color: #4c4e54;
  font-weight: 600;
}
.-sf-integrated-app .sfWrapper .sf-top-toolbar.-integration-list:not(.sf-sticky) {
  position: absolute;
  justify-content: center;
  top: 63px;
  left: 50vw;
  margin-left: -260px;
  width: 480px;
  background-color: transparent;
  box-shadow: none;
  z-index: 0;
  z-index: 1;
}
.-sf-integrated-app .sfWrapper .sf-main.-list {
  padding-top: 120px;
  padding-bottom: 270px;
}
.-sf-integrated-app .sfWrapper .sf-main.-sf-virtualized {
  padding-bottom: 50px;
}
.-sf-integrated-app .sfWrapper .sf-main.-details {
  position: relative;
  padding-top: 72px;
  min-height: 100vh;
  background-color: #fff;
  z-index: 5;
}
.-sf-integrated-app .sfWrapper .sf-main.-details::after {
  display: block;
  content: "";
  height: 35px;
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.-sf-integrated-app .sfWrapper .sf-notification-wrapper,
.-sf-integrated-app .sfPageEditor .sf-notification-wrapper {
  top: 60px;
}
.-sf-integrated-app .sfPageEditor .sf-notification-wrapper {
  left: 50%;
  transform: translateX(-50%);
}
.-sf-integrated-app .sfWrapper .sf-wrapper.-list .sf-sidebar::before {
  display: block;
  content: "";
  position: absolute;
  top: -46px;
  right: 0;
  width: 350px;
  height: 46px;
  background-color: #f5f5f5;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  z-index: 100;
}
.-sf-integrated-app .sfWrapper .sf-modal {
  margin-top: -46px;
  width: 100%;
  min-height: 100vh;
}
.-sf-integrated-app .sfWrapper .-sf-centered-vertical-box {
  min-height: calc(100vh - 46px);
}
.-sf-integrated-app .sfWrapper .monaco-editor {
  margin-top: 72px;
}
.-sf-integrated-app .sf-icon.fa {
  display: inline-flex;
  /*font-size: 1.8rem;*/
}
.-sf-integrated-app .sf-menu__icon-box.fa {
  display: block;
  line-height: 130px;
  /*font-size: 4.2rem;*/
}
.-sf-integrated-app .sfWrapper .-list .sf-button.-icon.-toggle {
  margin-right: 4px;
  width: 36px;
  height: 32px;
  line-height: 32px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.-sf-integrated-app .sfWrapper .-list .sf-button.-icon.-toggle .sf-button__icon {
  width: 34px;
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
}
.-sf-integrated-app .sfWrapper .-list .sf-button.-icon.-toggle.-active {
  border-color: #eeeeee;
}
.-sf-integrated-app .sfWrapper .sf-host.-animated {
  position: relative;
  z-index: 1001;
}
.-sf-integrated-app sf-app .error[generated] {
  display: none !important;
}
.-sf-integrated-app .sfWarningLangWrapper .sfWarningField .sfWarningMsg {
  position: absolute;
  z-index: 100;
  top: 46px;
  margin-top: 11px;
  left: 190px;
  /* 48px + 50px + 85px */
  max-width: calc(100vw - 500px);
  /* 48px + 50px + 85px + 280px */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor {
  overflow: initial;
}
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor .k-calendar .k-calendar-monthview,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor .k-calendar .k-calendar-view,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor .k-calendar .k-content.k-scrollable {
  box-sizing: content-box !important;
}
.-sf-integrated-app.-sf-modal-window-open .sfPageWrapper,
.-sf-integrated-app.-sf-modal-window-open .sfMessagePane,
.-sf-integrated-app.-sf-modal-window-open .sfWarningLangWrapper {
  display: none !important;
}
.-sf-integrated-app.-sf-modal-window-open .k-editor-toolbar > li,
.-sf-integrated-app.-sf-modal-window-open .k-colorpicker .k-tool-icon {
  margin: 0;
}
.-sf-integrated-app.-sf-modal-window-open .k-picker-wrap .k-select {
  position: static;
}
.-sf-integrated-app.-sf-modal-window-open .sfFooter {
  visibility: hidden;
}
.-sf-integrated-app.-sf-modal-window-open .sf-upload a {
  font-weight: normal;
}
.-sf-integrated-app.-sf-modal-window-open .sf-expander__checkbox,
.-sf-integrated-app.-sf-modal-window-open .sf-checkbox__input,
.-sf-integrated-app.-sf-modal-window-open .sf-radio__input {
  display: inline-flex !important;
}
.-sf-integrated-app.-sf-modal-window-open .sf-expander__header,
.-sf-integrated-app.-sf-modal-window-open .sf-checkbox__label {
  display: flex !important;
  padding: 0 !important;
}
.-sf-integrated-app.-sf-modal-window-open .sf-expander__header::after, .-sf-integrated-app.-sf-modal-window-open .sf-expander__header::before,
.-sf-integrated-app.-sf-modal-window-open .sf-checkbox__label::after,
.-sf-integrated-app.-sf-modal-window-open .sf-checkbox__label::before {
  display: none !important;
}
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=email]:hover, .-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=email]:focus, .-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=email]:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=text]:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=text]:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=text]:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) textarea:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) textarea:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) textarea:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=tel]:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=tel]:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=tel]:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=password]:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=password]:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=password]:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=email]:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=email]:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=email]:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=text]:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=text]:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=text]:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) textarea:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) textarea:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) textarea:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=tel]:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=tel]:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=tel]:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=password]:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=password]:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) input[type=password]:active {
  border: 1px solid var(--input-border-hover) !important;
}
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) .k-editor-table-wizard-dialog .k-edit-field .k-input, .-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) .k-editor-table-wizard-dialog .k-edit-field .k-input:hover, .-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) .k-editor-table-wizard-dialog .k-edit-field .k-input:focus, .-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) .k-editor-table-wizard-dialog .k-edit-field .k-input:active,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) .k-editor-toolbar .k-combobox .k-input,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) .k-editor-toolbar .k-combobox .k-input:hover,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) .k-editor-toolbar .k-combobox .k-input:focus,
.-sf-integrated-app.-sf-modal-window-open .sfPageEditor:not(.sfFormsEditor) .k-editor-toolbar .k-combobox .k-input:active {
  border: 0 !important;
}
.-sf-integrated-app footer.sf-modal-window__buttons.-bottom {
  z-index: 1000;
}
.-sf-integrated-app .k-widget.k-window.k-window-maximized {
  overflow: auto !important;
}
.-sf-integrated-app .k-widget, .-sf-integrated-app .k-widget.k-datepicker,
.-sf-integrated-app .k-widget .k-state-default > .k-select,
.-sf-integrated-app .k-widget .k-editor-dropdown .k-dropdown-wrap.k-state-default {
  background-color: transparent;
}
.-sf-integrated-app .k-widget.k-datepicker.-small, .-sf-integrated-app .k-widget.k-timepicker.-small {
  width: 105px !important;
}
.-sf-integrated-app .k-widget .k-picker-wrap.k-state-default {
  background-color: transparent;
}
.-sf-integrated-app .k-widget .k-picker-wrap.k-state-focused, .-sf-integrated-app .k-widget .k-picker-wrap.k-state-active {
  border-radius: 0;
  box-shadow: none;
}
.-sf-integrated-app .k-widget .k-picker-wrap .k-input {
  padding: 0 10px;
}
.-sf-integrated-app .k-widget .k-colorpicker {
  display: inline-flex;
  align-items: center;
  box-shadow: none;
}
.-sf-integrated-app .k-widget .k-colorpicker .k-picker-wrap {
  padding: 0;
  height: 100%;
}
.-sf-integrated-app .k-widget .k-colorpicker .k-select {
  position: static;
}
.-sf-integrated-app .k-widget .k-colorpicker .k-icon {
  display: flex;
  align-items: center;
}
.-sf-integrated-app .k-widget .k-editor-dropdown .k-dropdown-wrap.k-state-default .k-input {
  color: inherit;
}
.-sf-integrated-app .k-widget .k-editor-dropdown .k-dropdown-wrap.k-state-active.k-state-border-down {
  box-shadow: none;
}
.-sf-integrated-app .k-widget .k-editor-dropdown .k-dropdown-wrap .k-input,
.-sf-integrated-app .k-widget .k-editor-dropdown .k-dropdown-wrap .k-select {
  display: flex;
}
.-sf-integrated-app .k-widget .k-editor-dropdown .k-dropdown-wrap .k-input,
.-sf-integrated-app .k-widget .k-editor-dropdown .k-numeric-wrap .k-input,
.-sf-integrated-app .k-widget .k-editor-dropdown .k-textbox,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-dropdown-wrap .k-input,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-numeric-wrap .k-input,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-textbox {
  padding: 4px 0 4px 8px !important;
}
.-sf-integrated-app .k-widget .k-editor-dropdown .k-checkbox,
.-sf-integrated-app .k-widget .k-editor-dropdown .k-checkbox-label,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-checkbox,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-checkbox-label {
  display: inline-flex !important;
}
.-sf-integrated-app .k-widget .k-editor-dropdown .k-checkbox-label::after,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-checkbox-label::after {
  display: none !important;
}
.-sf-integrated-app .k-widget .k-editor-toolbar > li {
  margin-right: 0;
}
.-sf-integrated-app .k-widget .k-editor-toolbar .k-state-selected {
  box-shadow: none;
  background-color: transparent !important;
}
.-sf-integrated-app .k-widget .k-editor-toolbar .k-tool:hover {
  cursor: pointer;
}
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-window-action .k-icon {
  width: 32px;
  height: 32px;
}
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-tabstrip-items .k-item.k-state-hover,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-dropdown-wrap.k-state-hover {
  background-color: transparent;
}
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-edit-field .k-textbox,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-edit-field .k-dropdown {
  width: 100%;
}
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-edit-field .k-textbox {
  font-family: "Open Sans", sans-serif;
  border-radius: 0;
}
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-edit-field .k-numerictextbox + .k-dropdown {
  width: auto;
}
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-edit-field .k-dropdown-wrap .k-select,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-edit-field .k-numeric-wrap .k-select,
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-edit-field .k-picker-wrap .k-select {
  position: static;
}
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-edit-buttons {
  background: transparent;
  border-top-color: #e4e4e4;
}
.-sf-integrated-app .k-widget .k-editor-table-wizard-dialog .k-tabstrip-wrapper .k-content {
  height: auto;
}
.-sf-integrated-app .k-animation-container .k-list-container.k-state-border-up .k-list .k-item {
  display: flex;
}
.-sf-integrated-app .k-animation-container .k-list-container.k-state-border-up .k-list .k-item:last-child {
  display: flex;
}
.-sf-integrated-app .k-animation-container .k-list-container.k-state-border-up .k-list .k-item.k-state-focused {
  background-color: transparent;
}
/* Outline styles */
body:not(.-sf-outline) :focus {
  outline: 0;
}
body:not(.-sf-outline) button::-moz-focus-inner,
body:not(.-sf-outline) input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.-sf-outline .sf-checkbox__input:focus + label .sf-radio__icon,
.-sf-outline .sf-checkbox__input:focus + label .sf-checkbox__icon,
.-sf-outline .sf-radio__input:focus + label .sf-radio__icon,
.-sf-outline .sf-radio__input:focus + label .sf-checkbox__icon {
  outline: 1px auto #4d90fe;
}
.-sf-outline .sf-input-file input:focus + label .sf-button {
  outline: 1px auto #4d90fe;
}
.-sf-outline a.k-tool:focus,
.-sf-outline .k-dropdown.k-widget:focus {
  outline: 1px auto #4d90fe;
}
.-sf-outline.sfPageEditor:not(.sfFormsEditor) .sf-input input:focus,
.-sf-outline.sfPageEditor:not(.sfFormsEditor) .sf-input textarea:focus {
  box-shadow: 0 0 2px rgba(0, 108, 217, 0.8) !important;
}
@-webkit-keyframes loadingAnimation {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingAnimation {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes floatingText {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(calc(-100% + 26px/2));
  }
  100% {
    transform: translate(0);
  }
}
@keyframes loader {
  40% {
    opacity: 1;
  }
}
@keyframes loadingProgressbar {
  from {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadingSkeleton {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.9;
  }
}
.-sf-contrast sf-app.sf-app {
  --color-h2: #696969;
  --color-h5: #696969;
  --color-error: #d40808;
  --color-success: #0E874C;
  --link-secondary-color: #696969;
  --link-side-secondary-color-active: #000;
  --link-side-secondary-color-hover: #000;
  --link-side-secondary-color: #696969;
  --link-color: #005FCC;
  --button-border-color: #cbcbcb;
  --button-interaction-border-color: #cbcbcb;
  --button-disabled-border-color: #f0f0f0;
  --button-disabled-color: #e4e4e4;
  --action-button-border-color: #0E874C;
  --action-button-background-color: #0E874C;
  --action-button-interaction-border-color: #006e33;
  --action-button-interaction-background-color: #006e33;
  --action-button-disabled-border-color: #b7dbca;
  --action-button-disabled-background-color: #b7dbca;
  --delete-button-border-color: #d40808;
  --delete-button-background-color: #d40808;
  --delete-button-interaction-border-color: #bb0000;
  --delete-button-interaction-background-color: #bb0000;
  --delete-button-disabled-border-color: #f2b5b5;
  --delete-button-disabled-background-color: #f2b5b5;
  --date-time-icon-border-color: #cbcbcb;
  --date-time-icon-color: #696969;
  --date-time-content-color: #696969;
  --default-icon-color: #696969;
  --icon-lighter-color: #cbcbcb;
  --icon-light-color: #cbcbcb;
  --icon-illustrative-font-color: #cbcbcb;
  --icon-positive-color: #0E874C;
  --status-icon-color-published: #0E874C;
  --status-icon-color-restricted: #d40808;
  --status-bg-color-default: #FF8151;
  --status-icon-color-system: #cbcbcb;
  --status-icon-color-scheduled: #005FCC;
  --badge-white-border-color: #cbcbcb;
  --badge-color-bg-positive: #0E874C;
  --badge-color-bg-negative: #d40808;
  --badge-add-variation-bg-color: #fff;
  --badge-add-variation-border-color: #cbcbcb;
  --badge-add-variation-hover: #e4e4e4;
  --badge-add-variation-border-hover: #cbcbcb;
  --badge-add-variation-color: #333;
  --badge-edit-variation-bg-color: #005FCC;
  --badge-edit-variation-hover: #004faa;
  --badge-color: #333;
  --secondary-text-color: #696969;
  --input-placeholder-color: #696969;
  --input-title-placeholder-color: #909090;
  --input-border: #696969;
  --input-border-hover: #696969;
  --input-char-counter-success-color: #0E874C;
  --input-char-counter-error-color: #d40808;
  --select-border-color: #696969;
  --select-arrow-color: #696969;
  --checkbox-checked-border: #696969;
  --checkbox-border: #696969;
  --checkbox-border-hover: #696969;
  --dropdown-border: #cbcbcb;
  --dropdown-item-counter-neutral: #696969;
  --image-empty-border: #696969;
  --not-translated-image-label-bg: #696969;
  --input-box-shadow-hover: #696969;
  --tree-list-expander-color: #696969;
}
body.-sf-contrast {
  --sf-footer-color: #696969;
  --sf-topbar-color: #696969;
  --sf-h5-color: #696969;
  --sf-navigation-border-color: #cbcbcb;
  --sf-user-info-border-color: #cbcbcb;
  --sf-navigation-caret: #666;
  --sf-live-link: #0E874C;
  --sf-green-main: #0E874C;
}
.sf-app .sf-loader.-home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  z-index: 100000;
}
.sf-app .sf-loader.-home .sf-loader__content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-app .sf-loader.-home .sf-loader__rect {
  margin-right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background-color: #38ab63;
  opacity: 0;
  -webkit-animation: indexLoader 1s infinite ease-in-out;
          animation: indexLoader 1s infinite ease-in-out;
}
.sf-app .sf-loader.-home .sf-loader__rect.-first {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.sf-app .sf-loader.-home .sf-loader__rect.-second {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}
.sf-app .sf-loader.-home .sf-loader__rect.-third {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}
@-webkit-keyframes indexLoader {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes indexLoader {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

/*# sourceMappingURL=styles.28b2480ac2a70d26607f.css.map*/