@keyframes medium-editor-image-loading {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }

@keyframes medium-editor-pop-upwards {
  0% {
    opacity: 0;
    transform: matrix(0.97, 0, 0, 1, 0, 12); }
  20% {
    opacity: .7;
    transform: matrix(0.99, 0, 0, 1, 0, 2); }
  40% {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, -1); }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0); } }

.medium-editor-anchor-preview {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  left: 0;
  line-height: 1.4;
  max-width: 280px;
  position: absolute;
  text-align: center;
  top: 0;
  word-break: break-all;
  word-wrap: break-word;
  visibility: hidden;
  z-index: 2000; }

.medium-editor-anchor-preview a {
    color: #fff;
    display: inline-block;
    margin: 5px 5px 10px; }

.medium-editor-anchor-preview-active {
  visibility: visible; }

.medium-editor-dragover {
  background: #ddd; }

.medium-editor-image-loading {
  animation: medium-editor-image-loading 1s infinite ease-in-out;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  height: 40px;
  width: 40px; }

.medium-editor-placeholder {
  position: relative; }

.medium-editor-placeholder:after {
    content: attr(data-placeholder) !important;
    font-style: italic;
    position: absolute;
    left: 0;
    top: 0;
    white-space: pre;
    padding: inherit;
    margin: inherit; }

.medium-editor-placeholder-relative {
  position: relative; }

.medium-editor-placeholder-relative:after {
    content: attr(data-placeholder) !important;
    font-style: italic;
    position: relative;
    white-space: pre;
    padding: inherit;
    margin: inherit; }

.medium-toolbar-arrow-under:after, .medium-toolbar-arrow-over:before {
  border-style: solid;
  content: '';
  display: block;
  height: 0;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  width: 0; }

.medium-toolbar-arrow-under:after {
  border-width: 8px 8px 0 8px; }

.medium-toolbar-arrow-over:before {
  border-width: 0 8px 8px 8px;
  top: -8px; }

.medium-editor-toolbar {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  left: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  z-index: 2000; }

.medium-editor-toolbar ul {
    margin: 0;
    padding: 0; }

.medium-editor-toolbar li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0; }

.medium-editor-toolbar li button {
      box-sizing: border-box;
      cursor: pointer;
      display: block;
      font-size: 14px;
      line-height: 1.33;
      margin: 0;
      padding: 15px;
      text-decoration: none; }

.medium-editor-toolbar li button:focus {
        outline: none; }

.medium-editor-toolbar li .medium-editor-action-underline {
      text-decoration: underline; }

.medium-editor-toolbar li .medium-editor-action-pre {
      font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
      font-size: 12px;
      font-weight: 100;
      padding: 15px 0; }

.medium-editor-toolbar-active {
  visibility: visible; }

.medium-editor-sticky-toolbar {
  position: fixed;
  top: 1px; }

.medium-editor-relative-toolbar {
  position: relative; }

.medium-editor-toolbar-active.medium-editor-stalker-toolbar {
  animation: medium-editor-pop-upwards 160ms forwards linear; }

.medium-editor-action-bold {
  font-weight: bolder; }

.medium-editor-action-italic {
  font-style: italic; }

.medium-editor-toolbar-form {
  display: none; }

.medium-editor-toolbar-form input,
  .medium-editor-toolbar-form a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.medium-editor-toolbar-form .medium-editor-toolbar-form-row {
    line-height: 14px;
    margin-left: 5px;
    padding-bottom: 5px; }

.medium-editor-toolbar-form .medium-editor-toolbar-input,
  .medium-editor-toolbar-form label {
    border: none;
    box-sizing: border-box;
    font-size: 14px;
    margin: 0;
    padding: 6px;
    width: 316px;
    display: inline-block; }

.medium-editor-toolbar-form .medium-editor-toolbar-input:focus,
    .medium-editor-toolbar-form label:focus {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      border: none;
      box-shadow: none;
      outline: 0; }

.medium-editor-toolbar-form a {
    display: inline-block;
    font-size: 24px;
    font-weight: bolder;
    margin: 0 10px;
    text-decoration: none; }

.medium-editor-toolbar-form-active {
  display: block; }

.medium-editor-toolbar-actions:after {
  clear: both;
  content: "";
  display: table; }

.medium-editor-element {
  word-wrap: break-word;
  min-height: 30px; }

.medium-editor-element img {
    max-width: 100%; }

.medium-editor-element sub {
    vertical-align: sub; }

.medium-editor-element sup {
    vertical-align: super; }

.medium-editor-hidden {
  display: none; }

.mentioner {
  position: relative; }

.mentioner__dropdown {
  border: solid 1px #e0e2e4;
  margin: 0;
  max-height: 242px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3px;
  position: absolute;
  width: 242px;
  z-index: 99999;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
  list-style-type: none; }

.mentioner__dropdown--hidden {
    display: none; }

.mentioner__dropdown__item {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  padding: 3px 0;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit; }

.mentioner__dropdown__item--help {
  padding-left: 15px;
  width: calc(100% - 15px); }

.desktop .mentioner__dropdown__item:hover, .mentioner__dropdown__item--selected {
  background-color: #f0f2f4; }

.desktop .mentioner__dropdown__item--help:hover {
  background-color: #fff; }

.mentioner__dropdown__item--selected--help {
  background-color: #fff; }

.mentioner__dropdown__item__name {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.mentioner__dropdown__item__name__highlight {
  text-decoration: underline; }

.mentioner__dropdown__item__avatar {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  padding: 0 5px;
  width: 24px; }

.mentioner__composer {
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.4;
  min-height: 14px;
  padding: 10px;
  background-color: #F5F5F5;
  outline: none;
  font-family: inherit; }

.mentioner__composer p {
    margin: 0; }

.mentioner__composer__mention {
  background-color: transparent;
  border: 0;
  font-size: 14px;
  line-height: 1.4;
  padding: 0;
  color: #000;
  font-family: inherit;
  opacity: 1;
  text-align: center;
  vertical-align: baseline; }

.datepicker--cells{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}

.datepicker--cell{border-radius:4px;box-sizing:border-box;cursor:pointer;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:32px;z-index:1}

.datepicker--cell.-focus-{background:#f0f0f0}

.datepicker--cell.-current-{color:#4EB5E6}

.datepicker--cell.-current-.-focus-{color:#4a4a4a}

.datepicker--cell.-current-.-in-range-{color:#4EB5E6}

.datepicker--cell.-in-range-{background:rgba(92,196,239,.1);color:#4a4a4a;border-radius:0}

.datepicker--cell.-in-range-.-focus-{background-color:rgba(92,196,239,.2)}

.datepicker--cell.-disabled-{cursor:default;color:#aeaeae}

.datepicker--cell.-disabled-.-focus-{color:#aeaeae}

.datepicker--cell.-disabled-.-in-range-{color:#a1a1a1}

.datepicker--cell.-disabled-.-current-.-focus-{color:#aeaeae}

.datepicker--cell.-range-from-{border:1px solid rgba(92,196,239,.5);background-color:rgba(92,196,239,.1);border-radius:4px 0 0 4px}

.datepicker--cell.-range-to-{border:1px solid rgba(92,196,239,.5);background-color:rgba(92,196,239,.1);border-radius:0 4px 4px 0}

.datepicker--cell.-selected-,.datepicker--cell.-selected-.-current-{color:#fff;background:#5cc4ef}

.datepicker--cell.-range-from-.-range-to-{border-radius:4px}

.datepicker--cell.-selected-{border:none}

.datepicker--cell.-selected-.-focus-{background:#45bced}

.datepicker--cell:empty{cursor:default}

.datepicker--days-names{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:8px 0 3px}

.datepicker--day-name{color:#FF9A19;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex:1;flex:1;text-align:center;text-transform:uppercase;font-size:.8em}

.-only-timepicker- .datepicker--content,.datepicker--body,.datepicker-inline .datepicker--pointer{display:none}

.datepicker--cell-day{width:14.28571%}

.datepicker--cells-months{height:170px}

.datepicker--cell-month{width:33.33%;height:25%}

.datepicker--cells-years,.datepicker--years{height:170px}

.datepicker--cell-year{width:25%;height:33.33%}

.datepickers-container{position:absolute;left:0;top:0}

@media print{.datepickers-container{display:none}}

.datepicker{background:#fff;border:1px solid #dbdbdb;box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:4px;box-sizing:content-box;font-family:Tahoma,sans-serif;font-size:14px;color:#4a4a4a;width:250px;position:absolute;left:-100000px;opacity:0;transition:opacity .3s ease,transform .3s ease,left 0s .3s;z-index:100}

.datepicker.-from-top-{transform:translateY(-8px)}

.datepicker.-from-right-{transform:translateX(8px)}

.datepicker.-from-bottom-{transform:translateY(8px)}

.datepicker.-from-left-{transform:translateX(-8px)}

.datepicker.active{opacity:1;transform:translate(0);transition:opacity .3s ease,transform .3s ease,left 0s 0s}

.datepicker-inline .datepicker{border-color:#d7d7d7;box-shadow:none;position:static;left:auto;right:auto;opacity:1;transform:none}

.datepicker--content{box-sizing:content-box;padding:4px}

.datepicker--pointer{position:absolute;background:#fff;border-top:1px solid #dbdbdb;border-right:1px solid #dbdbdb;width:10px;height:10px;z-index:-1}

.desktop .datepicker--nav-action:hover,.desktop .datepicker--nav-title:hover{background:#f0f0f0}

.-top-center- .datepicker--pointer,.-top-left- .datepicker--pointer,.-top-right- .datepicker--pointer{top:calc(100% - 4px);transform:rotate(135deg)}

.-right-bottom- .datepicker--pointer,.-right-center- .datepicker--pointer,.-right-top- .datepicker--pointer{right:calc(100% - 4px);transform:rotate(225deg)}

.-bottom-center- .datepicker--pointer,.-bottom-left- .datepicker--pointer,.-bottom-right- .datepicker--pointer{bottom:calc(100% - 4px);transform:rotate(315deg)}

.-left-bottom- .datepicker--pointer,.-left-center- .datepicker--pointer,.-left-top- .datepicker--pointer{left:calc(100% - 4px);transform:rotate(45deg)}

.-bottom-left- .datepicker--pointer,.-top-left- .datepicker--pointer{left:10px}

.-bottom-right- .datepicker--pointer,.-top-right- .datepicker--pointer{right:10px}

.-bottom-center- .datepicker--pointer,.-top-center- .datepicker--pointer{left:calc(50% - 10px / 2)}

.-left-top- .datepicker--pointer,.-right-top- .datepicker--pointer{top:10px}

.-left-bottom- .datepicker--pointer,.-right-bottom- .datepicker--pointer{bottom:10px}

.-left-center- .datepicker--pointer,.-right-center- .datepicker--pointer{top:calc(50% - 10px / 2)}

.datepicker--body.active{display:block}

.datepicker--nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-bottom:1px solid #efefef;min-height:32px;padding:4px}

.-only-timepicker- .datepicker--nav{display:none}

.datepicker--nav-action,.datepicker--nav-title{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}

.datepicker--nav-action{width:32px;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

.datepicker--nav-action.-disabled-{visibility:hidden}

.datepicker--nav-action svg{width:32px;height:32px}

.datepicker--nav-action path{fill:none;stroke:#9c9c9c;stroke-width:2px}

.datepicker--nav-title{border-radius:4px;padding:0 8px}

.datepicker--buttons,.datepicker--time{border-top:1px solid #efefef;padding:4px}

.datepicker--nav-title i{font-style:normal;color:#9c9c9c;margin-left:5px}

.datepicker--nav-title.-disabled-{cursor:default;background:0 0}

.datepicker--buttons{display:-ms-flexbox;display:flex}

.datepicker--button{color:#4EB5E6;cursor:pointer;border-radius:4px;-ms-flex:1;flex:1;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:32px}

.desktop .datepicker--button:hover{color:#4a4a4a;background:#f0f0f0}

.datepicker--time{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:relative}

.datepicker--time.-am-pm- .datepicker--time-sliders{-ms-flex:0 1 138px;flex:0 1 138px;max-width:138px}

.-only-timepicker- .datepicker--time{border-top:none}

.datepicker--time-sliders{-ms-flex:0 1 153px;flex:0 1 153px;margin-right:10px;max-width:153px}

.datepicker--time-label{display:none;font-size:12px}

.datepicker--time-current{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;font-size:14px;text-align:center;margin:0 0 0 10px}

.datepicker--time-current-colon{margin:0 2px 3px;line-height:1}

.datepicker--time-current-hours,.datepicker--time-current-minutes{line-height:1;font-size:19px;font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;position:relative;z-index:1}

.datepicker--time-current-hours:after,.datepicker--time-current-minutes:after{content:'';background:#f0f0f0;border-radius:4px;position:absolute;left:-2px;top:-3px;right:-2px;bottom:-2px;z-index:-1;opacity:0}

.datepicker--time-current-hours.-focus-:after,.datepicker--time-current-minutes.-focus-:after{opacity:1}

.datepicker--time-current-ampm{text-transform:uppercase;-ms-flex-item-align:end;align-self:flex-end;color:#9c9c9c;margin-left:6px;font-size:11px;margin-bottom:1px}

.datepicker--time-row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:11px;height:17px;background:linear-gradient(to right,#dedede,#dedede) left 50%/100% 1px no-repeat}

.datepicker--time-row:first-child{margin-bottom:4px}

.datepicker--time-row input[type=range]{background:0 0;cursor:pointer;-ms-flex:1;flex:1;height:100%;padding:0;margin:0;-webkit-appearance:none}

.datepicker--time-row input[type=range]::-ms-tooltip{display:none}

.desktop .datepicker--time-row input[type=range]:hover::-webkit-slider-thumb{border-color:#b8b8b8}

.desktop .datepicker--time-row input[type=range]:hover::-moz-range-thumb{border-color:#b8b8b8}

.desktop .datepicker--time-row input[type=range]:hover::-ms-thumb{border-color:#b8b8b8}

.datepicker--time-row input[type=range]:focus{outline:0}

.datepicker--time-row input[type=range]:focus::-webkit-slider-thumb{background:#5cc4ef;border-color:#5cc4ef}

.datepicker--time-row input[type=range]:focus::-moz-range-thumb{background:#5cc4ef;border-color:#5cc4ef}

.datepicker--time-row input[type=range]:focus::-ms-thumb{background:#5cc4ef;border-color:#5cc4ef}

.datepicker--time-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid #dedede;background:#fff;cursor:pointer;transition:background .2s;margin-top:-6px}

.datepicker--time-row input[type=range]::-moz-range-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid #dedede;background:#fff;cursor:pointer;transition:background .2s}

.datepicker--time-row input[type=range]::-ms-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid #dedede;background:#fff;cursor:pointer;transition:background .2s}

.datepicker--time-row input[type=range]::-webkit-slider-runnable-track{border:none;height:1px;cursor:pointer;color:transparent;background:0 0}

.datepicker--time-row input[type=range]::-moz-range-track{border:none;height:1px;cursor:pointer;color:transparent;background:0 0}

.datepicker--time-row input[type=range]::-ms-track{border:none;height:1px;cursor:pointer;color:transparent;background:0 0}

.datepicker--time-row input[type=range]::-ms-fill-lower{background:0 0}

.datepicker--time-row input[type=range]::-ms-fill-upper{background:0 0}

.datepicker--time-row span{padding:0 12px}

.datepicker--time-icon{color:#9c9c9c;border:1px solid;border-radius:50%;font-size:16px;position:relative;margin:0 5px -1px 0;width:1em;height:1em}

.datepicker--time-icon:after,.datepicker--time-icon:before{content:'';background:currentColor;position:absolute}

.datepicker--time-icon:after{height:.4em;width:1px;left:calc(50% - 1px);top:calc(50% + 1px);transform:translateY(-100%)}

.datepicker--time-icon:before{width:.4em;height:1px;top:calc(50% + 1px);left:calc(50% - 1px)}

.datepicker--cell-day.-other-month-,.datepicker--cell-year.-other-decade-{color:#dedede}

.desktop .datepicker--cell-day.-other-month-:hover,.desktop .datepicker--cell-year.-other-decade-:hover{color:#c5c5c5}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,.-disabled-.-focus-.datepicker--cell-year.-other-decade-{color:#dedede}

.-selected-.datepicker--cell-day.-other-month-,.-selected-.datepicker--cell-year.-other-decade-{color:#fff;background:#a2ddf6}

.-selected-.-focus-.datepicker--cell-day.-other-month-,.-selected-.-focus-.datepicker--cell-year.-other-decade-{background:#8ad5f4}

.-in-range-.datepicker--cell-day.-other-month-,.-in-range-.datepicker--cell-year.-other-decade-{background-color:rgba(92,196,239,.1);color:#ccc}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,.-in-range-.-focus-.datepicker--cell-year.-other-decade-{background-color:rgba(92,196,239,.2)}

.datepicker--cell-day.-other-month-:empty,.datepicker--cell-year.-other-decade-:empty{background:0 0;border:none}

/**
 *
 * All animations must live in their own file
 * in the animations directory and be included
 * here.
 *
 */

/**
 * Styles shared by multiple animations
 */

/**
 * Dots
 */

@keyframes scale {
  0% {
    transform: scale(1);
    opacity: 1; }
  45% {
    transform: scale(0.1);
    opacity: 0.7; }
  80% {
    transform: scale(1);
    opacity: 1; } }

.ball-pulse > div:nth-child(0) {
  animation: scale 0.75s -0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div:nth-child(1) {
  animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div:nth-child(2) {
  animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div:nth-child(3) {
  animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block; }

@keyframes ball-pulse-sync {
  33% {
    transform: translateY(10px); }
  66% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0); } }

.ball-pulse-sync > div:nth-child(0) {
  animation: ball-pulse-sync 0.6s -0.21s infinite ease-in-out; }

.ball-pulse-sync > div:nth-child(1) {
  animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out; }

.ball-pulse-sync > div:nth-child(2) {
  animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out; }

.ball-pulse-sync > div:nth-child(3) {
  animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; }

.ball-pulse-sync > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block; }

@keyframes ball-scale {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1);
    opacity: 0; } }

.ball-scale > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  height: 60px;
  width: 60px;
  animation: ball-scale 1s 0s ease-in-out infinite; }

@keyframes ball-scale {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1);
    opacity: 0; } }

.ball-scale > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  height: 60px;
  width: 60px;
  animation: ball-scale 1s 0s ease-in-out infinite; }

.ball-scale-random {
  width: 37px;
  height: 40px; }

.ball-scale-random > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    position: absolute;
    display: inline-block;
    height: 30px;
    width: 30px;
    animation: ball-scale 1s 0s ease-in-out infinite; }

.ball-scale-random > div:nth-child(1) {
      margin-left: -7px;
      animation: ball-scale 1s 0.2s ease-in-out infinite; }

.ball-scale-random > div:nth-child(3) {
      margin-left: -2px;
      margin-top: 9px;
      animation: ball-scale 1s 0.5s ease-in-out infinite; }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }

.ball-rotate {
  position: relative; }

.ball-rotate > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    position: relative; }

.ball-rotate > div:first-child {
      animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; }

.ball-rotate > div:before, .ball-rotate > div:after {
      background-color: #fff;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      margin: 2px;
      content: "";
      position: absolute;
      opacity: 0.8; }

.ball-rotate > div:before {
      top: 0px;
      left: -28px; }

.ball-rotate > div:after {
      top: 0px;
      left: 25px; }

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1); }
  50% {
    transform: rotate(180deg) scale(0.6); }
  100% {
    transform: rotate(360deg) scale(1); } }

.ball-clip-rotate > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  height: 25px;
  width: 25px;
  background: transparent !important;
  display: inline-block;
  animation: rotate 0.75s 0s linear infinite; }

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1); }
  50% {
    transform: rotate(180deg) scale(0.6); }
  100% {
    transform: rotate(360deg) scale(1); } }

@keyframes scale {
  30% {
    transform: scale(0.3); }
  100% {
    transform: scale(1); } }

.ball-clip-rotate-pulse {
  position: relative;
  transform: translateY(-15px); }

.ball-clip-rotate-pulse > div {
    animation-fill-mode: both;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 100%; }

.ball-clip-rotate-pulse > div:first-child {
      background: #fff;
      height: 16px;
      width: 16px;
      top: 7px;
      left: -7px;
      animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }

.ball-clip-rotate-pulse > div:last-child {
      position: absolute;
      border: 2px solid #fff;
      width: 30px;
      height: 30px;
      left: -16px;
      top: -2px;
      background: transparent;
      border: 2px solid;
      border-color: #fff transparent #fff transparent;
      animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
      animation-duration: 1s; }

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1); }
  50% {
    transform: rotate(180deg) scale(0.6); }
  100% {
    transform: rotate(360deg) scale(1); } }

.ball-clip-rotate-multiple {
  position: relative; }

.ball-clip-rotate-multiple > div {
    animation-fill-mode: both;
    position: absolute;
    left: -20px;
    top: -20px;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    animation: rotate 1s 0s ease-in-out infinite; }

.ball-clip-rotate-multiple > div:last-child {
      display: inline-block;
      top: -10px;
      left: -10px;
      width: 15px;
      height: 15px;
      animation-duration: 0.5s;
      border-color: #fff transparent #fff transparent;
      animation-direction: reverse; }

@keyframes ball-scale-ripple {
  0% {
    transform: scale(0.1);
    opacity: 1; }
  70% {
    transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

.ball-scale-ripple > div {
  animation-fill-mode: both;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  border: 2px solid #fff;
  animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }

@keyframes ball-scale-ripple-multiple {
  0% {
    transform: scale(0.1);
    opacity: 1; }
  70% {
    transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

.ball-scale-ripple-multiple {
  position: relative;
  transform: translateY(-25px); }

.ball-scale-ripple-multiple > div:nth-child(0) {
    animation-delay: -0.8s; }

.ball-scale-ripple-multiple > div:nth-child(1) {
    animation-delay: -0.6s; }

.ball-scale-ripple-multiple > div:nth-child(2) {
    animation-delay: -0.4s; }

.ball-scale-ripple-multiple > div:nth-child(3) {
    animation-delay: -0.2s; }

.ball-scale-ripple-multiple > div {
    animation-fill-mode: both;
    position: absolute;
    top: -2px;
    left: -26px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 2px solid #fff;
    animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }

@keyframes ball-beat {
  50% {
    opacity: 0.2;
    transform: scale(0.75); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.ball-beat > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  animation: ball-beat 0.7s 0s infinite linear; }

.ball-beat > div:nth-child(2n-1) {
    animation-delay: -0.35s !important; }

@keyframes ball-scale-multiple {
  0% {
    transform: scale(0);
    opacity: 0; }
  5% {
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 0; } }

.ball-scale-multiple {
  position: relative;
  transform: translateY(-30px); }

.ball-scale-multiple > div:nth-child(2) {
    animation-delay: -0.4s; }

.ball-scale-multiple > div:nth-child(3) {
    animation-delay: -0.2s; }

.ball-scale-multiple > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    position: absolute;
    left: -30px;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    animation: ball-scale-multiple 1s 0s linear infinite; }

@keyframes ball-triangle-path-1 {
  33% {
    transform: translate(25px, -50px); }
  66% {
    transform: translate(50px, 0px); }
  100% {
    transform: translate(0px, 0px); } }

@keyframes ball-triangle-path-2 {
  33% {
    transform: translate(25px, 50px); }
  66% {
    transform: translate(-25px, 50px); }
  100% {
    transform: translate(0px, 0px); } }

@keyframes ball-triangle-path-3 {
  33% {
    transform: translate(-50px, 0px); }
  66% {
    transform: translate(-25px, -50px); }
  100% {
    transform: translate(0px, 0px); } }

.ball-triangle-path {
  position: relative;
  transform: translate(-29.994px, -37.50938px); }

.ball-triangle-path > div:nth-child(1) {
    animation-name: ball-triangle-path-1;
    animation-delay: 0;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; }

.ball-triangle-path > div:nth-child(2) {
    animation-name: ball-triangle-path-2;
    animation-delay: 0;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; }

.ball-triangle-path > div:nth-child(3) {
    animation-name: ball-triangle-path-3;
    animation-delay: 0;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; }

.ball-triangle-path > div {
    animation-fill-mode: both;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 1px solid #fff; }

.ball-triangle-path > div:nth-of-type(1) {
      top: 50px; }

.ball-triangle-path > div:nth-of-type(2) {
      left: 25px; }

.ball-triangle-path > div:nth-of-type(3) {
      top: 50px;
      left: 50px; }

@keyframes ball-pulse-rise-even {
  0% {
    transform: scale(1.1); }
  25% {
    transform: translateY(-30px); }
  50% {
    transform: scale(0.4); }
  75% {
    transform: translateY(30px); }
  100% {
    transform: translateY(0);
    transform: scale(1); } }

@keyframes ball-pulse-rise-odd {
  0% {
    transform: scale(0.4); }
  25% {
    transform: translateY(30px); }
  50% {
    transform: scale(1.1); }
  75% {
    transform: translateY(-30px); }
  100% {
    transform: translateY(0);
    transform: scale(0.75); } }

.ball-pulse-rise > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
  animation-iteration-count: infinite;
  animation-delay: 0; }

.ball-pulse-rise > div:nth-child(2n) {
    animation-name: ball-pulse-rise-even; }

.ball-pulse-rise > div:nth-child(2n-1) {
    animation-name: ball-pulse-rise-odd; }

@keyframes ball-grid-beat {
  50% {
    opacity: 0.7; }
  100% {
    opacity: 1; } }

.ball-grid-beat {
  width: 57px; }

.ball-grid-beat > div:nth-child(1) {
    animation-delay: 0.44s;
    animation-duration: 1.27s; }

.ball-grid-beat > div:nth-child(2) {
    animation-delay: 0.2s;
    animation-duration: 1.52s; }

.ball-grid-beat > div:nth-child(3) {
    animation-delay: 0.14s;
    animation-duration: 0.61s; }

.ball-grid-beat > div:nth-child(4) {
    animation-delay: 0.15s;
    animation-duration: 0.82s; }

.ball-grid-beat > div:nth-child(5) {
    animation-delay: -0.01s;
    animation-duration: 1.24s; }

.ball-grid-beat > div:nth-child(6) {
    animation-delay: -0.07s;
    animation-duration: 1.35s; }

.ball-grid-beat > div:nth-child(7) {
    animation-delay: 0.29s;
    animation-duration: 1.44s; }

.ball-grid-beat > div:nth-child(8) {
    animation-delay: 0.63s;
    animation-duration: 1.19s; }

.ball-grid-beat > div:nth-child(9) {
    animation-delay: -0.18s;
    animation-duration: 1.48s; }

.ball-grid-beat > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    display: inline-block;
    float: left;
    animation-name: ball-grid-beat;
    animation-iteration-count: infinite;
    animation-delay: 0; }

@keyframes ball-grid-pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.5);
    opacity: 0.7; }
  100% {
    transform: scale(1);
    opacity: 1; } }

.ball-grid-pulse {
  width: 57px; }

.ball-grid-pulse > div:nth-child(1) {
    animation-delay: 0.58s;
    animation-duration: 0.9s; }

.ball-grid-pulse > div:nth-child(2) {
    animation-delay: 0.01s;
    animation-duration: 0.94s; }

.ball-grid-pulse > div:nth-child(3) {
    animation-delay: 0.25s;
    animation-duration: 1.43s; }

.ball-grid-pulse > div:nth-child(4) {
    animation-delay: -0.03s;
    animation-duration: 0.74s; }

.ball-grid-pulse > div:nth-child(5) {
    animation-delay: 0.21s;
    animation-duration: 0.68s; }

.ball-grid-pulse > div:nth-child(6) {
    animation-delay: 0.25s;
    animation-duration: 1.17s; }

.ball-grid-pulse > div:nth-child(7) {
    animation-delay: 0.46s;
    animation-duration: 1.41s; }

.ball-grid-pulse > div:nth-child(8) {
    animation-delay: 0.02s;
    animation-duration: 1.56s; }

.ball-grid-pulse > div:nth-child(9) {
    animation-delay: 0.13s;
    animation-duration: 0.78s; }

.ball-grid-pulse > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    display: inline-block;
    float: left;
    animation-name: ball-grid-pulse;
    animation-iteration-count: infinite;
    animation-delay: 0; }

@keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    transform: scale(0.4); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.ball-spin-fade-loader {
  position: relative;
  top: -10px;
  left: -10px; }

.ball-spin-fade-loader > div:nth-child(1) {
    top: 25px;
    left: 0;
    animation: ball-spin-fade-loader 1s -0.96s infinite linear; }

.ball-spin-fade-loader > div:nth-child(2) {
    top: 17.04545px;
    left: 17.04545px;
    animation: ball-spin-fade-loader 1s -0.84s infinite linear; }

.ball-spin-fade-loader > div:nth-child(3) {
    top: 0;
    left: 25px;
    animation: ball-spin-fade-loader 1s -0.72s infinite linear; }

.ball-spin-fade-loader > div:nth-child(4) {
    top: -17.04545px;
    left: 17.04545px;
    animation: ball-spin-fade-loader 1s -0.6s infinite linear; }

.ball-spin-fade-loader > div:nth-child(5) {
    top: -25px;
    left: 0;
    animation: ball-spin-fade-loader 1s -0.48s infinite linear; }

.ball-spin-fade-loader > div:nth-child(6) {
    top: -17.04545px;
    left: -17.04545px;
    animation: ball-spin-fade-loader 1s -0.36s infinite linear; }

.ball-spin-fade-loader > div:nth-child(7) {
    top: 0;
    left: -25px;
    animation: ball-spin-fade-loader 1s -0.24s infinite linear; }

.ball-spin-fade-loader > div:nth-child(8) {
    top: 17.04545px;
    left: -17.04545px;
    animation: ball-spin-fade-loader 1s -0.12s infinite linear; }

.ball-spin-fade-loader > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    position: absolute; }

@keyframes ball-spin-loader {
  75% {
    opacity: 0.2; }
  100% {
    opacity: 1; } }

.ball-spin-loader {
  position: relative; }

.ball-spin-loader > span:nth-child(1) {
    top: 45px;
    left: 0;
    animation: ball-spin-loader 2s 0.9s infinite linear; }

.ball-spin-loader > span:nth-child(2) {
    top: 30.68182px;
    left: 30.68182px;
    animation: ball-spin-loader 2s 1.8s infinite linear; }

.ball-spin-loader > span:nth-child(3) {
    top: 0;
    left: 45px;
    animation: ball-spin-loader 2s 2.7s infinite linear; }

.ball-spin-loader > span:nth-child(4) {
    top: -30.68182px;
    left: 30.68182px;
    animation: ball-spin-loader 2s 3.6s infinite linear; }

.ball-spin-loader > span:nth-child(5) {
    top: -45px;
    left: 0;
    animation: ball-spin-loader 2s 4.5s infinite linear; }

.ball-spin-loader > span:nth-child(6) {
    top: -30.68182px;
    left: -30.68182px;
    animation: ball-spin-loader 2s 5.4s infinite linear; }

.ball-spin-loader > span:nth-child(7) {
    top: 0;
    left: -45px;
    animation: ball-spin-loader 2s 6.3s infinite linear; }

.ball-spin-loader > span:nth-child(8) {
    top: 30.68182px;
    left: -30.68182px;
    animation: ball-spin-loader 2s 7.2s infinite linear; }

.ball-spin-loader > div {
    animation-fill-mode: both;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: green; }

@keyframes ball-zig {
  33% {
    transform: translate(-15px, -30px); }
  66% {
    transform: translate(15px, -30px); }
  100% {
    transform: translate(0, 0); } }

@keyframes ball-zag {
  33% {
    transform: translate(15px, 30px); }
  66% {
    transform: translate(-15px, 30px); }
  100% {
    transform: translate(0, 0); } }

.ball-zig-zag {
  position: relative;
  transform: translate(-15px, -15px); }

.ball-zig-zag > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    position: absolute;
    margin-left: 15px;
    top: 4px;
    left: -7px; }

.ball-zig-zag > div:first-child {
      animation: ball-zig 0.7s 0s infinite linear; }

.ball-zig-zag > div:last-child {
      animation: ball-zag 0.7s 0s infinite linear; }

@keyframes ball-zig-deflect {
  17% {
    transform: translate(-15px, -30px); }
  34% {
    transform: translate(15px, -30px); }
  50% {
    transform: translate(0, 0); }
  67% {
    transform: translate(15px, -30px); }
  84% {
    transform: translate(-15px, -30px); }
  100% {
    transform: translate(0, 0); } }

@keyframes ball-zag-deflect {
  17% {
    transform: translate(15px, 30px); }
  34% {
    transform: translate(-15px, 30px); }
  50% {
    transform: translate(0, 0); }
  67% {
    transform: translate(-15px, 30px); }
  84% {
    transform: translate(15px, 30px); }
  100% {
    transform: translate(0, 0); } }

.ball-zig-zag-deflect {
  position: relative;
  transform: translate(-15px, -15px); }

.ball-zig-zag-deflect > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    position: absolute;
    margin-left: 15px;
    top: 4px;
    left: -7px; }

.ball-zig-zag-deflect > div:first-child {
      animation: ball-zig-deflect 1.5s 0s infinite linear; }

.ball-zig-zag-deflect > div:last-child {
      animation: ball-zag-deflect 1.5s 0s infinite linear; }

/**
 * Lines
 */

@keyframes line-scale {
  0% {
    transform: scaley(1); }
  50% {
    transform: scaley(0.4); }
  100% {
    transform: scaley(1); } }

.line-scale > div:nth-child(1) {
  animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(2) {
  animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(3) {
  animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(4) {
  animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(5) {
  animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block; }

@keyframes line-scale-party {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.5); }
  100% {
    transform: scale(1); } }

.line-scale-party > div:nth-child(1) {
  animation-delay: -0.09s;
  animation-duration: 0.83s; }

.line-scale-party > div:nth-child(2) {
  animation-delay: 0.33s;
  animation-duration: 0.64s; }

.line-scale-party > div:nth-child(3) {
  animation-delay: 0.32s;
  animation-duration: 0.39s; }

.line-scale-party > div:nth-child(4) {
  animation-delay: 0.47s;
  animation-duration: 0.52s; }

.line-scale-party > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  animation-name: line-scale-party;
  animation-iteration-count: infinite;
  animation-delay: 0; }

@keyframes line-scale-pulse-out {
  0% {
    transform: scaley(1); }
  50% {
    transform: scaley(0.4); }
  100% {
    transform: scaley(1); } }

.line-scale-pulse-out > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); }

.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
    animation-delay: -0.4s !important; }

.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
    animation-delay: -0.2s !important; }

@keyframes line-scale-pulse-out-rapid {
  0% {
    transform: scaley(1); }
  80% {
    transform: scaley(0.3); }
  90% {
    transform: scaley(1); } }

.line-scale-pulse-out-rapid > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); }

.line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) {
    animation-delay: -0.25s !important; }

.line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) {
    animation-delay: 0s !important; }

@keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }

.line-spin-fade-loader {
  position: relative;
  top: -10px;
  left: -4px; }

.line-spin-fade-loader > div:nth-child(1) {
    top: 20px;
    left: 0;
    animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; }

.line-spin-fade-loader > div:nth-child(2) {
    top: 13.63636px;
    left: 13.63636px;
    transform: rotate(-45deg);
    animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; }

.line-spin-fade-loader > div:nth-child(3) {
    top: 0;
    left: 20px;
    transform: rotate(90deg);
    animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; }

.line-spin-fade-loader > div:nth-child(4) {
    top: -13.63636px;
    left: 13.63636px;
    transform: rotate(45deg);
    animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; }

.line-spin-fade-loader > div:nth-child(5) {
    top: -20px;
    left: 0;
    animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; }

.line-spin-fade-loader > div:nth-child(6) {
    top: -13.63636px;
    left: -13.63636px;
    transform: rotate(-45deg);
    animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; }

.line-spin-fade-loader > div:nth-child(7) {
    top: 0;
    left: -20px;
    transform: rotate(90deg);
    animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; }

.line-spin-fade-loader > div:nth-child(8) {
    top: 13.63636px;
    left: -13.63636px;
    transform: rotate(45deg);
    animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out; }

.line-spin-fade-loader > div {
    background-color: #fff;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    animation-fill-mode: both;
    position: absolute;
    width: 5px;
    height: 15px; }

/**
 * Misc
 */

@keyframes triangle-skew-spin {
  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    transform: perspective(100px) rotateX(0) rotateY(0); } }

.triangle-skew-spin > div {
  animation-fill-mode: both;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #fff;
  animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }

@keyframes square-spin {
  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    transform: perspective(100px) rotateX(0) rotateY(0); } }

.square-spin > div {
  animation-fill-mode: both;
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid red;
  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }

@keyframes rotate_pacman_half_up {
  0% {
    transform: rotate(270deg); }
  50% {
    transform: rotate(360deg); }
  100% {
    transform: rotate(270deg); } }

@keyframes rotate_pacman_half_down {
  0% {
    transform: rotate(90deg); }
  50% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(90deg); } }

@keyframes pacman-balls {
  75% {
    opacity: 0.7; }
  100% {
    transform: translate(-100px, -6.25px); } }

.pacman {
  position: relative; }

.pacman > div:nth-child(2) {
    animation: pacman-balls 1s -0.99s infinite linear; }

.pacman > div:nth-child(3) {
    animation: pacman-balls 1s -0.66s infinite linear; }

.pacman > div:nth-child(4) {
    animation: pacman-balls 1s -0.33s infinite linear; }

.pacman > div:nth-child(5) {
    animation: pacman-balls 1s 0s infinite linear; }

.pacman > div:first-of-type {
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    border-left: 25px solid #fff;
    border-bottom: 25px solid #fff;
    border-radius: 25px;
    animation: rotate_pacman_half_up 0.5s 0s infinite;
    position: relative;
    left: -30px; }

.pacman > div:nth-child(2) {
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    border-left: 25px solid #fff;
    border-bottom: 25px solid #fff;
    border-radius: 25px;
    animation: rotate_pacman_half_down 0.5s 0s infinite;
    margin-top: -50px;
    position: relative;
    left: -30px; }

.pacman > div:nth-child(3),
  .pacman > div:nth-child(4),
  .pacman > div:nth-child(5),
  .pacman > div:nth-child(6) {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    transform: translate(0, -6.25px);
    top: 25px;
    left: 70px; }

@keyframes cube-transition {
  25% {
    transform: translateX(50px) scale(0.5) rotate(-90deg); }
  50% {
    transform: translate(50px, 50px) rotate(-180deg); }
  75% {
    transform: translateY(50px) scale(0.5) rotate(-270deg); }
  100% {
    transform: rotate(-360deg); } }

.cube-transition {
  position: relative;
  transform: translate(-25px, -25px); }

.cube-transition > div {
    animation-fill-mode: both;
    width: 10px;
    height: 10px;
    position: absolute;
    top: -5px;
    left: -5px;
    background-color: #fff;
    animation: cube-transition 1.6s 0s infinite ease-in-out; }

.cube-transition > div:last-child {
      animation-delay: -0.8s; }

@keyframes spin-rotate {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }

.semi-circle-spin {
  position: relative;
  width: 35px;
  height: 35px;
  overflow: hidden; }

.semi-circle-spin > div {
    position: absolute;
    border-width: 0px;
    border-radius: 100%;
    animation: spin-rotate 0.6s 0s infinite linear;
    background-image: linear-gradient(transparent 0%, transparent 70%, #fff 30%, #fff 100%);
    width: 100%;
    height: 100%; }

@keyframes bar-progress {
  0% {
    transform: scaleY(20%);
    opacity: 1; }
  25% {
    transform: translateX(6%) scaleY(10%);
    opacity: 0.7; }
  50% {
    transform: translateX(20%) scaleY(20%);
    opacity: 1; }
  75% {
    transform: translateX(6%) scaleY(10%);
    opacity: 0.7; }
  100% {
    transform: scaleY(20%);
    opacity: 1; } }

.bar-progress {
  width: 30%;
  height: 12px; }

.bar-progress > div {
    position: relative;
    width: 20%;
    height: 12px;
    border-radius: 10px;
    background-color: #fff;
    animation: bar-progress 3s cubic-bezier(0.57, 0.1, 0.44, 0.93) infinite;
    opacity: 1; }

@keyframes bar-swing {
  0% {
    left: 0; }
  50% {
    left: 70%; }
  100% {
    left: 0; } }

.bar-swing {
  width: 30%;
  height: 8px; }

.bar-swing > div {
    position: relative;
    width: 30%;
    height: 8px;
    border-radius: 10px;
    background-color: #fff;
    animation: bar-swing 1.5s infinite; }

@keyframes bar-swing-container {
  0% {
    left: 0;
    transform: translateX(0); }
  50% {
    left: 70%;
    transform: translateX(-4px); }
  100% {
    left: 0;
    transform: translateX(0); } }

.bar-swing-container {
  width: 20%;
  height: 8px;
  position: relative; }

.bar-swing-container div:nth-child(1) {
    position: absolute;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    height: 12px;
    border-radius: 10px; }

.bar-swing-container div:nth-child(2) {
    position: absolute;
    width: 30%;
    height: 8px;
    border-radius: 10px;
    background-color: #fff;
    animation: bar-swing-container 2s cubic-bezier(0.91, 0.35, 0.12, 0.6) infinite;
    margin: 2px 2px 0; }

dialog {
  position: absolute;
  left: 0; right: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
  display: none;
}

dialog[open] {
  display: block;
}

dialog + .backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.1);
}

/* for small devices, modal dialogs go full-screen */

@media screen and (max-width: 540px) {
  dialog[_polyfill_modal] {  /* TODO: implement */
    top: 0;
    width: auto;
    margin: 1em;
  }
}

._dialog_overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

dialog.fixed {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}

.ui-pnotify{top:36px;right:36px;position:absolute;height:auto;z-index:2}

body>.ui-pnotify{position:fixed;z-index:100040}

.ui-pnotify-modal-overlay{background-color:rgba(0,0,0,.4);top:0;left:0;position:absolute;height:100%;width:100%;z-index:1}

body>.ui-pnotify-modal-overlay{position:fixed;z-index:100039}

.ui-pnotify.ui-pnotify-in{display:block!important}

.ui-pnotify.ui-pnotify-move{transition:left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}

.ui-pnotify.ui-pnotify-fade-slow{transition:opacity .6s linear;opacity:0}

.ui-pnotify.ui-pnotify-fade-slow.ui-pnotify.ui-pnotify-move{transition:opacity .6s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}

.ui-pnotify.ui-pnotify-fade-normal{transition:opacity .4s linear;opacity:0}

.ui-pnotify.ui-pnotify-fade-normal.ui-pnotify.ui-pnotify-move{transition:opacity .4s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}

.ui-pnotify.ui-pnotify-fade-fast{transition:opacity .2s linear;opacity:0}

.ui-pnotify.ui-pnotify-fade-fast.ui-pnotify.ui-pnotify-move{transition:opacity .2s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}

.ui-pnotify.ui-pnotify-fade-in{opacity:1}

.ui-pnotify .ui-pnotify-shadow{box-shadow:0 6px 28px 0 rgba(0,0,0,.1)}

.ui-pnotify-container{background-position:0 0;padding:.8em;height:100%;margin:0}

.ui-pnotify-container:after{content:" ";visibility:hidden;display:block;height:0;clear:both}

.ui-pnotify-container.ui-pnotify-sharp{border-radius:0}

.ui-pnotify-title{display:block;margin-bottom:.4em;margin-top:0}

.ui-pnotify-text{display:block}

.ui-pnotify-icon,.ui-pnotify-icon span{display:block;float:left;margin-right:.2em}

.ui-pnotify.stack-bottomleft,.ui-pnotify.stack-topleft{left:25px;right:auto}

.ui-pnotify.stack-bottomleft,.ui-pnotify.stack-bottomright{bottom:25px;top:auto}

.ui-pnotify.stack-modal{left:50%;right:auto;margin-left:-150px}

.ui-pnotify-closer,.ui-pnotify-sticker{float:right;margin-left:.2em}

/* Base styles */

/*
HTML5 Reset :: style.css
----------------------------------------------------------
We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://meyerweb.com
HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Handle box-sizing while better addressing child elements:
http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */

html {
  box-sizing: border-box;
}

/**,
*:before,
*:after {
  box-sizing: inherit;
}*/

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

/* Responsive images and other embedded objects
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */

img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */

html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
don't forget to restore the bullets within content. */

ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */

table {border-collapse: collapse; border-spacing: 0;}

th {font-weight: bold; vertical-align: bottom;}

td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}

input[type="checkbox"] {vertical-align: bottom;}

.ie7 input[type="checkbox"] {vertical-align: baseline;}

.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */

sub, sup {font-size: 75%; line-height: 0; position: relative;}

sup {top: -0.5em;}

sub {bottom: -0.25em;}

/* standardize any monospaced elements */

pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */

.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */

button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */

button,
input[type=button] {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */

.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover
(commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/

/* let's clear some floats */

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
* Remove default margin.
*/

body {
  margin: 0;
}

/* HTML5 display definitions
========================================================================== */

/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/

[hidden],
template {
  display: none;
}

/* Links
========================================================================== */

/**
* Remove the gray background color from active links in IE 10.
*/

a {
  background-color: transparent;
}

/**
* Improve readability when focused and also mouse hovered in all browsers.
*/

a:active,
.desktop a:hover {
  outline: 0;
}

/* Text-level semantics
========================================================================== */

/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/

abbr[title] {
  border-bottom: 1px dotted;
}

/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/

b,
strong {
  font-weight: bold;
}

/**
* Address styling not present in Safari and Chrome.
*/

dfn {
  font-style: italic;
}

/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/

h1 {
  font-size: 2em;
  margin: 0;
}

/**
* Address styling not present in IE 8/9.
*/

mark {
  background: #ff0;
  color: #000;
}

/**
* Address inconsistent and variable font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
========================================================================== */

/**
* Remove border when inside `a` element in IE 8/9/10.
*/

img {
  border: 0;
}

/**
* Correct overflow not hidden in IE 9/10/11.
*/

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
========================================================================== */

/**
* Address margin not present in IE 8/9 and Safari.
*/

figure {
  margin: 0px;
}

/**
* Address differences between Firefox and other browsers.
*/

hr {
  box-sizing: content-box;
  height: 0;
}

/**
* Contain overflow in all browsers.
*/

pre {
  overflow: auto;
}

/**
* Address odd `em`-unit font size rendering in all browsers.
*/

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
========================================================================== */

/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/

/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/

button {
  overflow: visible;
}

/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/

button,
select {
  text-transform: none;
}

/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
* Re-set default cursor for disabled elements.
*/

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
* Remove inner padding and border in Firefox 4+.
*/

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/

input {
  line-height: normal;
}

/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */ /* 2 */
  box-sizing: content-box;
}

/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* Define consistent border, margin, and padding.
*/

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0px;
  padding: 0;
}

/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/

textarea {
  overflow: auto;
}

/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/

optgroup {
  font-weight: bold;
}

/* Tables
========================================================================== */

/**
* Remove most spacing between table cells.
*/

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack \*/

* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* close commented backslash hack */

* html .clearfix             { zoom: 1; }

/* IE6 */

*:first-child+html .clearfix { zoom: 1; }

/* IE7 */

.clear{ clear: both; }

@font-face {
  font-family: 'Lato-Light';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url("../fonts/Lato-Light.woff") format('woff');
}

@font-face {
  font-family: 'Lato-Regular';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url("../fonts/Lato-Regular.woff") format('woff');
}

@font-face {
  font-family: 'Lato-Black';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url("../fonts/Lato-Black.woff") format('woff');
}

@font-face {
  font-family: 'Lato-Bold';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url("../fonts/Lato-Bold.woff") format('woff');
}

@font-face {
  font-family: 'Lato-Italic';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url("../fonts/Lato-Italic.woff") format('woff');
}

@font-face {
  font-family: 'Lato-BoldItalic';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url("../fonts/Lato-BoldItalic.woff") format('woff');
}

@charset "UTF-8";

@font-face {
  font-family: "iconset-sweetspot";
  src:url("../fonts/iconset-sweetspot.eot");
  src:url("../fonts/iconset-sweetspot.eot?#iefix") format("embedded-opentype"),
    url("../fonts/iconset-sweetspot.woff") format("woff"),
    url("../fonts/iconset-sweetspot.ttf") format("truetype"),
    url("../fonts/iconset-sweetspot.svg#iconset-sweetspot") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "iconset-sweetspot" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "iconset-sweetspot" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-down:before {
  content: "\e000";
}

.icon-arrow-left:before {
  content: "\e001";
}

.icon-details:before {
  content: "\e002";
}

.icon-delete:before {
  content: "\e003";
}

.icon-more-info:before {
  content: "\e004";
}

.icon-negative:before {
  content: "\e005";
}

.icon-select-off:before {
  content: "\e006";
}

.icon-reply:before {
  content: "\e007";
}

.icon-select-on:before {
  content: "\e008";
}

.icon-slide:before {
  content: "\e009";
}

.icon-slide-close-all:before {
  content: "\e00a";
}

.icon-table:before {
  content: "\e00b";
}

.icon-unlink:before {
  content: "\e00c";
}

.icon-user:before {
  content: "\e00d";
}

.icon-related-on:before {
  content: "\e00e";
}

.icon-related-off:before {
  content: "\e00f";
}

.icon-refresh:before {
  content: "\e010";
}

.icon-preload-slim:before {
  content: "\e011";
}

.icon-preload:before {
  content: "\e012";
}

.icon-positive:before {
  content: "\e013";
}

.icon-order-manual:before {
  content: "\e014";
}

.icon-order-az:before {
  content: "\e015";
}

.icon-password:before {
  content: "\e016";
}

.icon-neutral:before {
  content: "\e017";
}

.icon-download:before {
  content: "\e019";
}

.icon-drop-down:before {
  content: "\e01a";
}

.icon-arrow-up:before {
  content: "\e01b";
}

.icon-arrow-right:before {
  content: "\e01c";
}

.icon-attachment:before {
  content: "\e01d";
}

.icon-filter-close:before {
  content: "\e01e";
}

.icon-bubbles:before {
  content: "\e01f";
}

.icon-chart-view:before {
  content: "\e020";
}

.icon-filter-off:before {
  content: "\e021";
}

.icon-filter-list:before {
  content: "\e022";
}

.icon-chart-preload:before {
  content: "\e023";
}

.icon-filter-on:before {
  content: "\e024";
}

.icon-flag-off:before {
  content: "\e025";
}

.icon-close:before {
  content: "\e026";
}

.icon-comments:before {
  content: "\e027";
}

.icon-flag-on:before {
  content: "\e028";
}

.icon-info:before {
  content: "\e029";
}

.icon-complete-slim:before {
  content: "\e02a";
}

.icon-lens:before {
  content: "\e02b";
}

.icon-complete:before {
  content: "\e02c";
}

.icon-dashboard:before {
  content: "\e02d";
}

.icon-logout:before {
  content: "\e02e";
}

.icon-folder:before {
  content: "\e018";
}

html {
  overflow-y: visible;
}

/**
 * This mixin should be used within a container which has the
 * "position: relative;" property in order to be correctly
 * aligned.
 */

/* Animation mixins */

@keyframes show-navigator {
  from {
    opacity: 0;
    transform: translate3d(0, -5px, 0);
    visibility: hidden;
  }

  to {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
}

@keyframes hide-navigator {
  from {
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -5px, 0);
    visibility: hidden;
  }
}

/*
  Adds some qualified markup for html text added by users by using WYSIWYG
*/

/*App header*/

/*Report*/

/* $sidebar-ipad-width + $sidebar-report-ipad-width, calc() is not supported inside media queries */

/*Layout*/

/*Screen sizes*/

/*iPhone 5 portrait*/

/*iPad portrait size px - 1px */

/*Scorecard element header*/

/* Information link */

/* Media */

/* Notifications module */

/* Progress bar */

/* Logo */

/* Table */

/* Scorecard warning */

/* Element header */

.u-disable-v-scroll {
  overflow-y: hidden !important;
}

.u-bold {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;
}

.u-text-align-left {
  text-align: left !important;
}

.u-text-align-right {
  text-align: right !important;
}

.u-text-align-center {
  text-align: center !important;
}

.u-flex-end {
  -ms-flex-pack: end !important;
      justify-content: flex-end !important;
}

.u-flex-center {
  -ms-flex-pack: center !important;
      justify-content: center !important;
}

.u-cursor-pointer {
  cursor: pointer !important;
}

.u-cursor-wait, .u-cursor-wait * {
  cursor: wait !important;
}

.u-cursor-default {
  cursor: default !important;
}

.u-display-none {
  display: none !important;
}

.u-visibility-hidden {
  visibility: hidden !important;
}

.u-positive-color {
  color: #46d46a !important;
}

.u-negative-color {
  color: #ec5830 !important;
}

.u-white-space-nowrap {
  white-space: nowrap;
}

.u-only-print-visible {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  .u-mobile-display-none {
    display: none !important;
  }
}

@media only screen and (min-width: 767px), print {
  .u-not-mobile-display-none {
    display: none !important;
  }
}

@media print {
  .u-print-hidden {
    display: none !important;
  }

  .u-only-print-visible {
    display: block !important;
  }
}

.datepicker {
  font-family: 'Lato-Regular', sans-serif;

  min-width: 250px;
  width: 100%;

  border: 0;
}

.datepicker--pointer {
  display: none;
}

.datepicker--nav-title {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  color: #303234;
}

.datepicker--nav-action path {
  stroke: #c0c0c0;
}

.datepicker--cell,
.datepicker--cell.-current-:not(.-disabled-):not(.-selected-):not(.-other-month-) {
  color: #505254;
}

.datepicker--cell.-current-:not(.-selected-):not(.-other-month-) {
  border: 5px double #e0e0e0;
}

.datepicker--cell.-disabled- {
  color: #c0c0c0;
}

.datepicker--day-name {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  color: #909090;
  letter-spacing: 1px;
}

.datepicker--nav-title i {
  color: inherit;
}

.datepicker--button,
.desktop .datepicker--button:hover {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  color: #505254;
}

.datepicker--button[data-action=today]:before {
  content: "";
  display: inline-block;
  height: 20px;
  margin-right: 5px;
  width: 20px;

  background-image: url('../images/back_to_today.svg');
  background-size: 20px;
}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .datepicker--cell-day {
    max-width: 15%;
  }
}

.desktop .datepicker--cell.-other-month-.-selected-:hover {
  color: #fff;
}

.loader-inner.ball-pulse {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

.medium-editor-toolbar {
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
  border: solid 1px #e0e2e4;
}

.medium-editor-toolbar::after,
.medium-editor-toolbar::before {
  display: none;
}

.medium-editor-toolbar .medium-editor-toolbar-actions {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.medium-editor-toolbar .medium-editor-action > * {
  margin: 0 auto;
}

.medium-editor-toolbar .medium-editor-action {
  font-family: 'Lato-Regular', sans-serif;

  -ms-flex-align: center;

      align-items: center;
  border: 0;
  display: -ms-flexbox;
  display: flex;
  height: 30px;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0;
  width: 30px;

  background-color: transparent;
  color: #909294;
}

.medium-editor-toolbar .medium-editor-action .icon-title polyline,
    .medium-editor-toolbar .medium-editor-action .icon-title line {
  fill: transparent;
  stroke: #909294;
  stroke-width: 2.5px; }

.medium-editor-toolbar .medium-editor-action .icon-chain clipPath,
    .medium-editor-toolbar .medium-editor-action .icon-chain g {
  fill: #909294; }

.medium-editor-toolbar .medium-editor-action .icon-chain clipPath {
  clip-rule: evenodd; }

.medium-editor-toolbar .medium-editor-action .icon-chain g {
  -webkit-clip-path: url(#clip-path-chain);
          clip-path: url(#clip-path-chain);
  fill: transparent; }

.medium-editor-toolbar .medium-editor-action .icon-chain path {
  fill: none;
  stroke: #909294;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px; }

.desktop .medium-editor-toolbar .medium-editor-action:hover,
.medium-editor-toolbar .medium-editor-button-active {

  color: #303234;
}

.desktop .medium-editor-toolbar .medium-editor-action:hover .icon-title polyline,
    .desktop .medium-editor-toolbar .medium-editor-action:hover .icon-title line,
    .medium-editor-toolbar .medium-editor-button-active .icon-title polyline,
    .medium-editor-toolbar .medium-editor-button-active .icon-title line {
  fill: transparent;
  stroke: #303234;
  stroke-width: 2.5px; }

.desktop .medium-editor-toolbar .medium-editor-action:hover .icon-chain clipPath,
    .desktop .medium-editor-toolbar .medium-editor-action:hover .icon-chain g,
    .medium-editor-toolbar .medium-editor-button-active .icon-chain clipPath,
    .medium-editor-toolbar .medium-editor-button-active .icon-chain g {
  fill: #303234; }

.desktop .medium-editor-toolbar .medium-editor-action:hover .icon-chain clipPath, .medium-editor-toolbar .medium-editor-button-active .icon-chain clipPath {
  clip-rule: evenodd; }

.desktop .medium-editor-toolbar .medium-editor-action:hover .icon-chain g, .medium-editor-toolbar .medium-editor-button-active .icon-chain g {
  -webkit-clip-path: url(#clip-path-chain);
          clip-path: url(#clip-path-chain);
  fill: transparent; }

.desktop .medium-editor-toolbar .medium-editor-action:hover .icon-chain path, .medium-editor-toolbar .medium-editor-button-active .icon-chain path {
  fill: none;
  stroke: #303234;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px; }

.medium-editor-toolbar .medium-editor-action .icon {
  height: 1em;
  width: 1em;
}

.medium-editor-toolbar .medium-editor-action .icon-chain {
  height: 1.3em;
  width: 1.3em;
}

.medium-editor-toolbar .medium-editor-action b {
  font-weight: normal;
}

.medium-editor-toolbar .medium-editor-action-bold {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;
}

.medium-editor-toolbar .medium-editor-action-italic {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic;
}

.medium-editor-toolbar-form-active {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  padding-top: 1px;
}

.medium-editor-toolbar-form .medium-editor-toolbar-input {
  font-family: 'Lato-Regular', sans-serif;

  width: 220px;

  -ms-flex-positive: 1;

      flex-grow: 1;
}

.medium-editor-toolbar-form .medium-editor-toolbar-save,
.medium-editor-toolbar-form .medium-editor-toolbar-close {
  -ms-flex-positive: 0;
      flex-grow: 0;

  opacity: 0.6;
  color: transparent;
}

.medium-editor-toolbar-form .medium-editor-toolbar-save {
  margin: 0;

  background: transparent url('/images/medium-editor-overrides/ok.svg') no-repeat center center;
}

.medium-editor-toolbar-form .medium-editor-toolbar-close {
  margin: 0 8px;

  background: transparent url('/images/medium-editor-overrides/cancel.svg') no-repeat center center;
}

.desktop .medium-editor-toolbar-save:hover,
.desktop .medium-editor-toolbar-close:hover {
  opacity: 1;
}

.medium-toolbar-arrow-over::after,
.medium-toolbar-arrow-over::before {
  display: none;
}

.medium-editor-toolbar-anchor-preview {
  font-family: 'Lato-Regular', sans-serif;

  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
  border: solid 1px #e0e2e4;
}

.medium-editor-toolbar-anchor-preview a {
  color: #303234;
}

.mentioner__composer__mention {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;
}

.mentioner__dropdown__item__name {
  width: calc(100% - 40px);
}

.ui-pnotify {
  font-family: 'Lato-Regular', sans-serif;

  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
  min-height: 66px;
  min-width: 281px;
  right: 10px;
}

.ui-pnotify .ui-pnotify-shadow {
  box-shadow: none;
}

.ui-pnotify .ui-pnotify-title {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  line-height: 18px;

  color: #505254;
}

.ui-pnotify .ui-pnotify-title .icon-cancel line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 2.5px; }

.ui-pnotify .ui-pnotify-title path, .ui-pnotify .ui-pnotify-title rect {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px; }

.ui-pnotify .icon {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}

.ui-pnotify .ui-pnotify-text {
  font-size: 13px;
  line-height: 17px;

  color: #909294;
}

.ui-pnotify .ui-pnotify-closer {
  height: 13px;
  width: 13px;

  background-image: url('../images/exports/cancel.svg');
  background-size: 13px;
}

.ui-pnotify-title .icon-cancel {
  height: 14px;
  width: 14px;
}

/*! 
 * medium-editor-insert-plugin v2.4.0 - jQuery insert plugin for MediumEditor
 *
 * http://linkesch.com/medium-editor-insert-plugin
 * 
 * Copyright (c) 2014 Pavel Linkesch (http://linkesch.com)
 * Released under the MIT license
 */

.medium-insert-images, .mediumInsert {
  text-align: center; }

.medium-insert-images figure, .mediumInsert figure {
    margin: 0;
    display: block; }

.medium-insert-images figure img, .mediumInsert figure img {
      max-width: 100%;
      margin-top: 1em;
      vertical-align: top; }

.medium-insert-images figure:first-child img, .mediumInsert figure:first-child img {
      margin-top: 0; }

.medium-insert-images.medium-insert-images-left, .medium-insert-images-left.mediumInsert, .mediumInsert.small {
    max-width: 33.33%;
    float: left;
    margin: 0 30px 20px 0; }

.medium-insert-images.medium-insert-images-right, .medium-insert-images-right.mediumInsert {
    max-width: 33.33%;
    float: right;
    margin: 0 0 20px 30px; }

.medium-insert-images.medium-insert-images-grid, .medium-insert-images-grid.mediumInsert {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0.5em -0.5em; }

.medium-insert-images.medium-insert-images-grid figure, .medium-insert-images-grid.mediumInsert figure {
      width: 33.33%;
      display: inline-block; }

.medium-insert-images.medium-insert-images-grid figure img, .medium-insert-images-grid.mediumInsert figure img {
        max-width: calc(100% - 1em);
        margin: 0.5em; }

.medium-insert-embeds, .mediumInsert-embeds {
  text-align: center;
  margin: 1em 0;
  position: relative; }

.medium-insert-embeds iframe, .mediumInsert-embeds iframe {
    margin: 0 auto !important; }

.medium-insert-embeds div, .mediumInsert-embeds div {
    margin: 0 auto !important; }

.medium-insert-embeds.medium-insert-embeds-left, .medium-insert-embeds-left.mediumInsert-embeds {
    width: 33.33%;
    float: left;
    margin: 0 30px 20px 0; }

.medium-insert-embeds.medium-insert-embeds-right, .medium-insert-embeds-right.mediumInsert-embeds {
    width: 33.33%;
    float: right;
    margin: 0 0 20px 30px; }

.medium-insert-images figure, .mediumInsert figure, .medium-insert-embeds figure, .mediumInsert-embeds figure {
  position: relative; }

.medium-insert-images figure figcaption, .mediumInsert figure figcaption, .medium-insert-embeds figure figcaption, .mediumInsert-embeds figure figcaption {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    margin: 10px 0;
    color: #ccc;
    font-size: 0.8em;
    font-style: italic;
    outline: 0 solid transparent; }

.medium-insert-images figure figcaption:focus, .mediumInsert figure figcaption:focus, .medium-insert-embeds figure figcaption:focus, .mediumInsert-embeds figure figcaption:focus {
      outline: 0 solid transparent; }

.medium-editor-insert-plugin {
  outline: 0 solid transparent; }

.medium-editor-insert-plugin:focus {
    outline: 0 solid transparent; }

.medium-editor-insert-plugin .clearfix:before, .medium-editor-insert-plugin:before, .medium-editor-insert-plugin .clearfix:after, .medium-editor-insert-plugin:after {
    content: " ";
    display: table;
    clear: both; }

.medium-editor-insert-plugin p {
    margin: 1em 0; }

.medium-editor-insert-plugin progress {
    display: block;
    margin: 1em auto; }

.medium-editor-insert-plugin .hide {
    display: none; }

.medium-editor-insert-plugin.medium-editor-placeholder:after {
    padding: 1em 0; }

.medium-editor-insert-plugin .medium-insert-buttons {
    position: absolute;
    color: #ddd;
    font-size: 0.9em; }

.medium-editor-insert-plugin .medium-insert-buttons button {
      display: block;
      cursor: pointer;
      color: #ddd;
      background: #fff;
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      border-radius: 20px;
      border: 1px solid #ddd;
      line-height: 30px;
      text-align: center;
      padding: 0; }

.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-show {
      font-size: 25px;
      transform: rotate(0);
      transition: transform 100ms; }

.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-show span {
        display: block;
        margin-top: -4px; }

.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-show.medium-insert-buttons-rotate {
        transition: transform 250ms;
        transform: rotate(45deg); }

.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons {
      margin: 0;
      padding: 0;
      list-style: none;
      display: none;
      position: relative;
      z-index: 2;
      left: 55px;
      top: -32px; }

.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons li {
        display: inline-block;
        margin: 0 5px; }

.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons li .fa {
          font-size: 15px; }

.medium-insert-caption-placeholder {
  position: relative; }

.medium-insert-caption-placeholder:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    content: attr(data-placeholder); }

.dragging {
  cursor: move; }

.medium-insert-image-active {
  outline: 2px solid #000; }

.medium-insert-images-toolbar {
  display: none; }

.medium-insert-images, .mediumInsert {
  margin: 1em 0; }

.medium-insert-images .dragged, .mediumInsert .dragged {
    position: absolute;
    top: 0;
    opacity: .5;
    z-index: 2000; }

.medium-insert-images .placeholder, .mediumInsert .placeholder {
    position: relative;
    margin: 0;
    padding: 0;
    border: none; }

.medium-insert-images .medium-insert-images-progress, .mediumInsert .medium-insert-images-progress {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.4); }

.medium-insert-embeds-input {
  position: relative;
  color: #ccc;
  z-index: 1;
  text-align: left; }

.medium-insert-embeds-placeholder {
  position: relative; }

.medium-insert-embeds-placeholder:after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-placeholder);
    color: #ccc; }

.medium-insert-embeds-selected .medium-insert-embed {
  outline: 2px solid #000; }

.medium-insert-embeds-toolbar {
  display: none; }

.medium-insert-embeds .medium-insert-embeds-overlay, .mediumInsert-embeds .medium-insert-embeds-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

/* Components */

/*
@styleguide

@title Action

This component styles the action button.

Please find below a couple of examples of use, the first one for add an action button and the second one for attach files:

<button class="action">
  <svg class="icon icon-action" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
    <path class="cls-1" d="M14.15,18.5a0.48,0.48,0,0,0,.7,0,2.5,2.5,0,0,0,.72-1.76A2.47,2.47,0,0,0,15,15.12L19.8,9.29a1.68,1.68,0,0,0,.84.23A1.7,1.7,0,0,0,21.88,9a0.54,0.54,0,0,0,0-.75L16.53,2.65a0.49,0.49,0,0,0-.7,0,1.86,1.86,0,0,0-.31,2.18l-5.62,5a2.28,2.28,0,0,0-3.22.1,0.54,0.54,0,0,0,0,.76l2.81,3L3.08,21.64a0.53,0.53,0,0,0,0,.7,0.49,0.49,0,0,0,.35.15,0.49,0.49,0,0,0,.33-0.13l7.55-6.69Z"/>
  </svg>
</button>
<button class="action">
  <svg class="icon icon-attachment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
    <path d="M7.57,14.89l5-5a2.37,2.37,0,1,1,3.35,3.35L8.62,20.53a3.49,3.49,0,0,1-4.94-4.94l10.8-10.8A4.61,4.61,0,1,1,21,11.31l-8.5,8.5"/>
  </svg>
</button>

*/

.action {

  border: 0;
  box-sizing: content-box;
  height: 20px;
  min-width: 20px;
  padding: 5px;
  width: 20px;

  background-color: transparent;
  cursor: pointer;
  outline: 0;

  -moz-appearance: none;
  -webkit-appearance: none;
}

.action .icon-action path {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #909294; }

.action .icon-attachment path {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #909294; }

.action .icon-copy polyline,
    .action .icon-copy line {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #909294; }

.action .icon-mention path {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #909294; }

.action .icon-edit path,
    .action .icon-edit polygon,
    .action .icon-edit polyline {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #909294; }

.desktop .action:hover,
.action--is-active {

  background-color: #f0f2f4;
  border-radius: 4px;
}

.desktop .action:hover .icon-action path, .action--is-active .icon-action path {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #303234; }

.desktop .action:hover .icon-attachment path, .action--is-active .icon-attachment path {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #303234; }

.desktop .action:hover .icon-copy polyline,
    .desktop .action:hover .icon-copy line,
    .action--is-active .icon-copy polyline,
    .action--is-active .icon-copy line {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #303234; }

.desktop .action:hover .icon-mention path, .action--is-active .icon-mention path {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #303234; }

.desktop .action--is-darker:hover,
.action--is-active.action--is-darker {

  background-color: #dfe1e3;
}

.desktop .action--is-darker:hover .icon-edit path,
    .desktop .action--is-darker:hover .icon-edit polygon,
    .desktop .action--is-darker:hover .icon-edit polyline,
    .action--is-active.action--is-darker .icon-edit path,
    .action--is-active.action--is-darker .icon-edit polygon,
    .action--is-active.action--is-darker .icon-edit polyline {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #505254; }

.additional-info {
  letter-spacing: 1px;

  font-size: 10px;
  line-height: 15px;
  padding: 0;

  color: #909090;
  text-transform: uppercase;
}

.advice {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  padding: 50px;
}

.advice--is-smaller {
  padding: 10px;
}

.advice--has-icon{
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-pack: center;
      justify-content: center;
}

.advice__title {
  font-size: 14px;

  color: #505254;
  text-align: center;
}

.advice__icon {

  height: 1.5em;
  width: 2em;
}

.advice__icon .icon-alert path,
    .advice__icon .icon-alert line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.advice__explanation {
  font-size: 12px;
  margin-top: 10px;

  color: #909294;
  text-align: center;
}

.app {
  position: relative;

  background-color: #f0f0f0;
}

.app__shadow--hidden {
  display: none;
}

.app-header {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  min-height: 70px;
  position: relative;
}

.app-header__logo {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  margin-right: auto;
  max-height: 45px;
  -ms-flex-positive: 0;
      flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-right: 10px;

  /*
   * Fix a weird behaviour on iOS WebView where the image takes the 100% width without respecting proportions.
   * See: BUG#9096
   */
  overflow: hidden;
}

.app-header__logo[src*=".svg"] {
  height: 45px 
}

.app-header__button {

  -ms-flex-item-align: center;

      -ms-grid-row-align: center;

      align-self: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 20px;


  cursor: pointer;
}

.app-header__button .icon-menu-dashboard {
  stroke-width: 2px; }

.app-header__button .icon-menu-dashboard line {
  fill: none;
  stroke: #283541; }

.app-header__button > .icon {
  height: 30px;
  width: 30px;
}

.desktop .app-header__button:hover .icon-menu-dashboard, .app-header__button--is-active .icon-menu-dashboard {
  stroke-width: 2px; }

.desktop .app-header__button:hover .icon-menu-dashboard line, .app-header__button--is-active .icon-menu-dashboard line {
  fill: none;
  stroke: #303234; }

.desktop .app-header__button:hover .icon-export path, .desktop .app-header__button:hover .icon-export polyline, .desktop .app-header__button:hover .icon-export line, .app-header__button--is-active .icon-export path, .app-header__button--is-active .icon-export polyline, .app-header__button--is-active .icon-export line {
  fill: transparent;
  stroke: #303234;
  stroke-linecap: round;
  stroke-linejoin: round; }

.js-navbar-notifications{
  margin-left: auto;
}

.app-header__button--auto-pointer {
  cursor: auto;
}

@media only screen and (max-width: 767px) {
  .app-header {
    height: 50px;
  }

  .app-header__logo {
    max-height: 50px;
    max-width: 150px;
  }
}

@media only screen and (max-width: 320px) {
  .app-header__logo {
    max-width: 110px;
  }
}

/*
@styleguide
@title Attachment

Represents an attachment. It should be an element with the `attachment` class.

<div class="attachment">
  The file
</div>

        <div class="attachment">
          The file
        </div>

If a representative extension icon is needed it is possible to add a `data-filename` attribute to
the element and the proper icon will show.

<div class="attachment" data-filename="file.pdf">
  A pdf
</div>

        <div class="attachment" data-filename="file.pdf">
          A pdf
        </div>

<div class="attachment" data-filename="file.docx">
  A docx
</div>

        <div class="attachment" data-filename="file.docx">
          A docx
        </div>

<div class="attachment" data-filename="file.jpg">
  A jpg
</div>

        <div class="attachment" data-filename="file.jpg">
          A jpg
        </div>


If the  attachment can be downloaded --is-downloadable modifier may be used

<a class="media__additional-info attachment attachment--is-downloadable" target="_blank" href="#" data-filename="file.jpg">
  A JPG
</a>

        <a class="media__additional-info attachment attachment--is-downloadable" target="_blank" href="#" data-filename="file.jpg">
          A JPG
        </a>

If the  attachment can be deleted --is-deletable modifier may be used

<div class="attachment attachment--is-deletable" data-filename="file.jpg">
  A jpg
  <div class="attachment__action">
    <svg class="icon icon-cancel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
      <line x1="2.54" y1="2.58" x2="22.46" y2="22.42"/>
      <line x1="22.46" y1="2.58" x2="2.54" y2="22.42"/>
    </svg>
  </div>
</div>

        <div class="attachment attachment--is-deletable" data-filename="file.jpg">
          A jpg
          <div class="attachment__action">
            <svg class="icon icon-cancel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
              <line x1="2.54" y1="2.58" x2="22.46" y2="22.42"/>
              <line x1="22.46" y1="2.58" x2="2.54" y2="22.42"/>
            </svg>
          </div>
        </div>
*/

.attachment {
  border: 1px solid #e0e2e4;
  display: block;
  overflow: hidden;
  padding: 0.8em 2.5em 0.8em 40px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;

  background: url("../images/attachments/attach_other.svg") 2.5% 50% no-repeat;
  background-size: 23px;
  border-radius: 3px;
  color: #303234;
}

.attachment--is-deletable {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 16px;
  padding-right: 1em;
}

.attachment__title {
  -ms-flex: 1;
      flex: 1;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment__action {

  height: 14px;
  width: 14px;
}

.attachment__action .icon-cancel line {
  fill: transparent;
  stroke: #909294;
  stroke-width: 2px; }

.attachment__spinner .loader-inner.ball-pulse > div {
  height: 8px;
  width: 8px;
  background-color: #909294; }

.attachment__spinner,
.attachment__action:not(:last-of-type) {
  margin-right: 5px;
}

.attachment__action--is-clickable {
  cursor: pointer;
}

.attachment--is-downloadable {
  cursor: pointer;
}

.desktop .attachment--is-downloadable:hover {
  background-color: #fafafa;
}

.desktop .attachment--is-downloadable:hover:after {
  content: '';
  display: block;
  float: right;
  height: 15px;
  position: absolute;
  right: 10px;
  top: calc((100% - 15px) / 2);
  width: 15px;

  background: url("../images/download.svg") center right no-repeat;
  background-size: 15px;
}

.attachment[data-filename$="doc"],
.attachment[data-filename$="docx"] {
  background-image: url("../images/attachments/attach_doc.svg");
}

.attachment[data-filename$="xls"],
.attachment[data-filename$="xlsx"] {
  background-image: url("../images/attachments/attach_excel.svg");
}

.attachment[data-filename$="jpg"],
.attachment[data-filename$="jpeg"],
.attachment[data-filename$="png"] {
  background-image: url("../images/attachments/attach_img.svg");
}

.attachment[data-filename$="zip"],
.attachment[data-filename$="rar"] {
  background-image: url("../images/attachments/attach_zip.svg");
}

.attachment[data-filename$="ppt"],
.attachment[data-filename$="pptx"] {
  background-image: url("../images/attachments/attach_ppt.svg");
}

.attachment[data-filename$="pdf"] {
  background-image: url("../images/attachments/attach_pdf.svg");
}

.attachment[data-filename$="zip"] {
  background-image: url("../images/attachments/attach_zip.svg");
}

/*
@styleguide
@title Avatar

Creates an avatar with image or initials inside a colored circle. To make it work it's needed an `.avatar` wrapper,
and inside it the image with `avatar__image` class and the fallback text with `avatar__fallback-text`.

The text's background color is customizable using a `data-assigned-background-id` attribute in the same element with
a number between 0 and 7

NOTE: Limit its width and height

<div style="width:40px; height: 40px">
  <div class="avatar">
    <img src="https://s.gravatar.com/avatar/c35cd5ae280f5872e492ca8650536cf6?d=blank" class="avatar avatar__image" />
    <div class="avatar avatar__fallback-text" data-assigned-background-id="1"><span class="avatar__initials">PRC</span></div>
  </div>
</div>

        <div class="avatar">
          <img src="https://s.gravatar.com/avatar/c35cd5ae280f5872e492ca8650536cf6?d=blank" class="avatar avatar__image" />
          <div class="avatar avatar__fallback-text" data-assigned-background-id="1"><span class="avatar__initials">PRC</span></div>
        </div>

<div style="width:40px; height: 40px">
  <div class="avatar">
    <img src="https://s.gravatar.com/avatar/aaa5ae280f5872e492ca8650536cf6?d=blank" class="avatar avatar__image" />
    <div class="avatar avatar__fallback-text" data-assigned-background-id="1"><span class="avatar__initials">PRC</span></div>
  </div>
</div>

        <div class="avatar">
          <img src="https://s.gravatar.com/avatar/aaa5ae280f5872e492ca8650536cf6?d=blank" class="avatar avatar__image" />
          <div class="avatar avatar__fallback-text" data-assigned-background-id="1"><span class="avatar__initials">PRC</span></div>
        </div>

<div style="width:40px; height: 40px">
  <div class="avatar">
    <img src="https://s.gravatar.com/avatar/aaa5ae280f5872e492ca8650536cf6?d=blank" class="avatar avatar__image" />
    <div class="avatar avatar__fallback-text" data-assigned-background-id="5"><span class="avatar__initials">PRC</span></div>
  </div>
</div>

        <div class="avatar">
          <img src="https://s.gravatar.com/avatar/aaa5ae280f5872e492ca8650536cf6?d=blank" class="avatar avatar__image" />
          <div class="avatar avatar__fallback-text" data-assigned-background-id="5"><span class="avatar__initials">PRC</span></div>
        </div>
*/

.avatar {
  display: table;
  height: 100%;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;

  border-radius: 99999px;
}

.avatar__fallback-text {
  font-family: 'Lato-Regular', sans-serif;

  display: table-cell;
  height: 100%;
  left: 0;
  overflow: hidden;
  top: 0;

  background-color: #179e99;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  z-index: 98;
}

.avatar__initials {
  display: inline-block;
  padding-top: 0.1em;
  padding-left: 0.05em;
}

.avatar__image {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 99;
}

.avatar__fallback-text[data-assigned-background-id="0"] {
  background-color: #179e99;
}

.avatar__fallback-text[data-assigned-background-id="1"] {
  background-color: #1dadee;
}

.avatar__fallback-text[data-assigned-background-id="2"] {
  background-color: #7f4196;
}

.avatar__fallback-text[data-assigned-background-id="3"] {
  background-color: #29dfd7;
}

.avatar__fallback-text[data-assigned-background-id="4"] {
  background-color: #afd634;
}

.avatar__fallback-text[data-assigned-background-id="5"] {
  background-color: #fecb30;
}

.avatar__fallback-text[data-assigned-background-id="6"] {
  background-color: #df5290;
}

.avatar__fallback-text[data-assigned-background-id="7"] {
  background-color: #fd7430;
}

/* FIXME: Personalized, using primary colors, ...? */

.badge {
  position:relative;
  display: inline-block;
}

.badge::after {
  font-family: 'Lato-Light', sans-serif;

  border: 1px solid white;
  border-radius: 50%;
  content: attr(data-badge);
  font-size: .6em;
  height: 16px;
  line-height: 16px;
  position: absolute;
  right: -5px;
  text-align: center;
  top: 0;
  width: 16px;

  background-color: #c0c2c4;
  color: white;
}

.badge--highlighted::after {
  border: 1px solid white;

  background-color: #db0046;
}

/*
@styleguide

@title bicon - button with icon

Special buttons to close the sidebar. User `.bicon`.

        <div class="bicon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
            <circle class="cls-1" cx="20.82" cy="12.75" r="1.65"/>
          </svg>
        </div>

<div class="bicon" style="box-sizing: content-box;">
  <svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
    <polyline points="22.56 7.57 12.56 17.56 2.44 7.44"/>
  </svg>
</div>
*/

.bicon {

  height: 17px;
  padding: 5px;
  width: 25px;

  background-color: #f0f2f4;
  border-radius: 4px;
  cursor: pointer;
}

.bicon .icon-cancel line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 2px; }

.bicon .icon-comments path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #505254; }

.bicon .icon-details circle,
    .bicon .icon-details line,
    .bicon .icon-details polyline {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #505254; }

.bicon--is-normalized {
  height: 13px;
  padding: 7px;
  width: 21px;
}

.breadcrumbs {
  display: -ms-flexbox;
  display: flex;
  min-width: 0; /* Hack to make the breadcrumbs shrink*/
  position: relative;
}

.breadcrumbs__breadcrumb {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 100;
      flex-shrink: 100;
  margin-left: 10px;
  min-width: 78px; /* Trick for flex to automatically
                                                                                          shrink the breadcrumbs and prevent
                                                                                          the overflow. */
  position: relative;
  white-space: nowrap;
}

.breadcrumbs__breadcrumb:first-of-type {
  margin-left: 0;
  min-width: 54px; /* Trick for flex to
                                                                                         automatically shrink the
                                                                                         breadcrumbs and prevent the
                                                                                         overflow. */
}

.breadcrumbs__breadcrumb:last-of-type {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}

.breadcrumbs__breadcrumb:first-of-type .breadcrumbs__breadcrumb__arrow {
  display: none; }

.breadcrumbs__breadcrumb__arrow {

  margin-right: 10px;
}

.breadcrumbs__breadcrumb__arrow .icon-nested {
  height: auto;
  width: 11px; }

.breadcrumbs__breadcrumb__arrow .icon-nested path {
  fill: #c0c2c4; }

.breadcrumbs__breadcrumb__navigation {
  left: -6px;
  top: 2.5em;
  width: 400px;
}

.breadcrumbs__breadcrumb:not(:first-of-type) .breadcrumbs__breadcrumb__navigation {
  left: 18px; }

.breadcrumbs__breadcrumb:not(:first-of-type) .breadcrumbs__breadcrumb__navigation--is-reversed {
  left: -328px; }

.breadcrumbs__button {

  display: -ms-flexbox;

  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 30px;
  -ms-flex-pack: center;
      justify-content: center;
  min-height: 30px;
  min-width: 30px;
  padding: 4px;
  width: 30px;

  border-radius: 5px;
  cursor: pointer;

  transition: all 0.1s ease-out;
  margin-right: 20px;
}

.breadcrumbs__button .icon-menu-navigator {
  height: 100%;
  width: 100%; }

.breadcrumbs__button .icon-menu-navigator ellipse {
  fill: #283541; }

.desktop .breadcrumbs__button:hover .icon-arrow polyline, .breadcrumbs__button--selected .icon-arrow polyline {
  stroke-width: 4px;
  fill: transparent;
  stroke: #db0046; }

.breadcrumbs__breadcrumb__label {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  font-size: 16px;
  line-height: 1.2em;
  margin-left: 10px;
  overflow: hidden;
  white-space: nowrap;

  color: #153258;
  text-overflow: ellipsis;
  text-transform:uppercase;
}

.breadcrumbs__breadcrumb__label--is-disabled {
  color: #153258;

  pointer-events: none;
}

.breadcrumbs__breadcrumb__label:not(.breadcrumbs__breadcrumb__label--is-disabled) {
  cursor: pointer;
}

.breadcrumbs__breadcrumb:only-child .breadcrumbs__breadcrumb__label--is-placeholder {
  display: none;
}

/*
@styleguide

@title Button

There are three kinds of buttons: the *primary*, *secondary* and *large* button. All of them can be represented
by using modifiers over the root `button` class:

        <button class="button button--is-primary">Submit</button>
        <button class="button button--is-secondary">Cancel</button>
        <button class="button button--is-large">Big button</button>

<button class="button button--is-primary">Submit</button>
<button class="button button--is-secondary">Cancel</button>
<button class="button button--is-large">Big button</button>

It is possible to combine some of them to achieve the desired result. This example shows a multitype button. It is a large primary button:

        <button class="button button--is-primary button--is-large">
          Combined types
        </button>

<button class="button button--is-primary button--is-large">Combined types</button>

By default, all the `button` components have a minimum width but they will extend as long as needed for fitting their content:

<button class="button button--is-primary">Lorem ipsum dolor sit amet</button>

*/

.button {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  border: 1px solid #e0e2e4;
  box-sizing: border-box;
  min-height: 30px;
  min-width: 95px;
  padding: 0 10px;

  background-color: #fafafa;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  text-align: center;
}

.desktop .button:hover {
  opacity: 0.9;
}

.button--is-primary {
  border: 0;

  background-color: #db0046;
  color: #fff;
}

.button--is-secondary {
  border: 0;

  background-color: transparent;
  color: #505254;
}

.button--is-success {
  background-color: #46d46a;
  cursor: default;
}

.desktop .button--is-success:hover {
  opacity: 1;
}

.button--is-large {
  font-size: 18px;
  min-height: 40px;
  min-width: 120px;
}

.button--is-good {
  border: 0;

  background-color: #46d46a;
  color: #fff;
}

/*
 * There's an override for primary-color of dashboards that causes disabled buttons
 * to not change color, forcing specificity to fix
 */

.button--is-disabled,
.button--is-primary.button--is-disabled.button--is-disabled {
  background-color: #dfe1e3;
  pointer-events: none;

}

/*
 * NOTE: this modifier will break the <button> layout in some browsers: https://stackoverflow.com/a/35466231
 *
 * It should be only applied when using the .buttom component over elements other than <button>. For instance:
 * <a>, <div> or <span>
 */

.button--is-link {
  height: 1em; /*IE11 hack*/
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

.button--is-loading {
  pointer-events: none;
}

.button .button__spinner {
  display: none;
}

.button--is-loading .button__spinner {
  display: inherit;
}

.button--is-loading .button__text {
  display: none;
}

.button--with-icon {
  height: 1em; /*IE11 hack*/
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;

  cursor: pointer;
}

.button__spinner .loader-inner.ball-pulse > div {
  height: 8px;
  width: 8px;
  background-color: #fff; }

@media only screen and (max-width: 767px) {
  .button--is-large {
    width: inherit;
  }
}

/*
@styleguide
@title Button group

Sets a group of radio buttons as a group of buttons. State is managed by the <input type="radio"> elements Please keep in mind that the input/label pair must be used in the same way as the example describes

<div class="button-group">
  <input type="radio" name="button-group-example" id="radio1" class="button-group__radio" checked="checked"></input>
  <label for="radio1" class="button-group__button">Value</label>
  <input type="radio" name="button-group-example" id="radio2" class="button-group__radio"></input>
  <label for="radio2" class="button-group__button">%</label>
  <input type="radio" name="button-group-example" id="radio3" class="button-group__radio"></input>
  <label for="radio3" class="button-group__button">Another</label>
</div>

        <div class="button-group">
          <input type="radio" name="button-group-example" id="radio1" class="button-group__radio" checked="checked"></input>
          <label for="radio1" class="button-group__button">Value</label>
          <input type="radio" name="button-group-example" id="radio2" class="button-group__radio"></input>
          <label for="radio2" class="button-group__button">%</label>
          <input type="radio" name="button-group-example" id="radio3" class="button-group__radio"></input>
          <label for="radio3" class="button-group__button">Another</label>
        </div>
*/

.button-group {
  border: 0;
  display: -ms-flexbox;
  display: flex;
  height: 30px;
  min-width: 139px;
  margin-top: 10px;
  width: initial;
}

.button-group__button {
  font-family: 'Lato-Regular', sans-serif;

  -ms-flex-align: center;

      align-items: center;
  border-top: 1px solid #e0e2e4;
  border-left: 1px solid #e0e2e4;
  border-bottom: 1px solid #e0e2e4;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  padding: 3px 7px;

  color: #c0c2c4;
  text-align: center;
}

.button-group__button:first-of-type {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.button-group__button:last-of-type {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  border-right: 1px solid #e0e2e4;
}

.button-group__radio {
  display: none;
}

.button-group__radio:checked + .button-group__button {
  border-color: #505254;
  border-right-style: solid;
  border-right-width: 1px;

  color: #505254;
}

.button-group__radio:checked + .button-group__button + .button-group__radio + .button-group__button {
  border-left-style: none; /* The inmediately next button after a selected must not have left border */
}

.button-group__radio:disabled + .button-group__button {
  cursor: default;
}

.chart-report {
  background-color: #fafafa;
  border-radius: 4px;
}

.chart-report--needs-lateral-space {
  padding: 0 10px;
}

.chart-report .legend {
  padding: 20px 20px 40px;
}

.chart-report .legend--is-gradient {
  padding: 12px 5px 20px;
}

.check {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}

.check + .check {
  margin-top: 10px;
}

.check__bullet {
  margin-right: 9px;
  max-height: 16px;
  max-width: 16px;
  min-height: 16px;
  min-width: 16px;
  height: 16px;
}

.check__bullet--is-selected path, .check__bullet--is-selected rect {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.check__bullet--is-not-selected path, .check__bullet--is-not-selected rect {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.check__bullet,
.check__label {
  cursor: pointer;
}

.check__label {
  font-family: 'Lato-Regular', sans-serif;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  display: inline-block;
  font-size: 14px;
  height: 1.2em;        /* This prevents issues with wrong vertical alignment for texts by giving it a solid height */
  line-height: 1.2em;   /* http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align */

  color: #505254;
}

.desktop .check:not(.check--is-disabled):hover .check__bullet path, .desktop .check:not(.check--is-disabled):hover .check__bullet rect {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.check--only-check .check__bullet {
  margin-right: 0;
  position: relative;
}

@media (pointer: coarse) {
  /* Instead of applying a padding to the .check__bullet we use a pseudo element. This is to avoid changes in the layout
  due to that padding */
  .check--only-check .check__bullet:before {
    content: ' ';
    height: 26px;
    left: -5px;
    position: absolute;
    top: -5px;
    width: 26px;
  }
}

.column-selector {
  width: 200px;

  cursor: default;
  text-align: left;

}

.column-selector__help-text {
  padding-left: 12px;
  padding-top: 12px;
}

.column-selector__toggles {
  padding: 12px;

  max-height: 225px;
}

.icon-in_app path {
  fill: transparent;
  stroke: $m-app-header-button-icon-color;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  transition: all 0.1s ease-out; }

.icon-in_app--failed > .icon-in_app__failed_icon {
  fill: #FF5576;
  transition: all 0.1s ease-out; }

.icon-in_app--completed > .icon-in_app__completed_icon {
  fill: #2ECC71;
  transition: all 0.1s ease-out; }

.icon-in_app--in_progress > .icon-in_app__in_progress_icon {
  fill: #3498DB;
  transition: all 0.1s ease-out; }

.icon-calendar path,
    .icon-calendar circle,
    .icon-calendar line {
  fill: none;
  stroke: #505254;
  stroke-width: 1.5px; }

/* Picker status styles */

.picker_status{
  padding: 0px 0px 0px 10px
}

.picker_status_failed {
  color: #FF5576;
  transition: all 0.1s ease-out;
}

.picker_status_in_progress {
  color: #3498DB;
  transition: all 0.1s ease-out;
}

.picker_status_completed {
  color: #2ECC71;
  transition: all 0.1s ease-out;
}

.date-selector-with-inapp > .picker__value {
  width: 100% !important;
}

.date-selector-with-inapp {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  border-left: solid 1px #e0e2e4;
  border-right: solid 1px #e0e2e4;
  padding: 0px 20px 0px 20px;
  
}

/* Date Selector styles */

.date-selector-with-inapp > .picker{
  background: none;
}

.date-selector-with-inapp > .picker--has-label{
  padding: 0px;
  margin: 0px;
  min-height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  width: auto;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: center;
      align-items: center;
}

.date-selector-with-inapp > .picker__value{
  width: 100%;
}

.js-date-selector{
  border: none !important;
  border-radius: 0px !important;
}

.date-selector {
  padding: 20px;
}

.date-selector .datepicker {
  width: 250px;
}

.date-selector__body {
  display: -ms-flexbox;
  display: flex;
}

.date-selector__form {
  border: solid 1px #e0e2e4;
  min-width: 300px;
  padding: 20px;

  border-radius: 4px;
}

.date-selector__subform + .date-selector__subform {
  margin-top: 20px;
}

.date-selector__form__selected-dates {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-top: 10px;
}

.date-selector__form__selected-dates .input{
  width: calc(50% - 10px);
}

.date-selector__form__selected-dates .input + .input{
  margin-top: 0;
}

.date-selector__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  margin-top: 20px;
}

/* In_app item styles */

.date-selector-with-inapp .icon-calendar path, 
.date-selector-with-inapp .icon-calendar circle, 
.date-selector-with-inapp .icon-calendar line {
  fill: none;
  stroke: #505254;
  stroke-width: 1px;
}

.date-selector-with-inapp .icon-calendar {
  height: 25px;
  width: 25px;
}

.date-selector-with-inapp .icon-in_app {
  height: 10px;
  width: 10px;
}

.m-in-app-current__container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
  height: 23px;

  border-radius: 45px;
  margin-left: 5px
}

.m-in-app-tooltip-current__container {
  padding: 10px;
  width: 250px;

  color: #303234;
}

.m-in-app__icon {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

@media only screen and (max-width: 767px) {
  .date-selector {
    padding: 10px;
  }

  .date-selector__form {
    border: 0;
    min-width: 80vw;
    padding: 10px;
  }

  .date-selector__footer {
    margin-top: 10px;
  }
}

.dialog {
  border: 0;
  border-radius: 4px;
  padding: 0;

  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
  overflow: visible;
}

/*
@styleguide

@title Dropdown

Represents a list of selectable items.

<style>
  .dropdown__item:hover {
    background-color: #db0046;
  }
</style>

<div class="overlay" style="position: relative;">
  <ul class="dropdown">
    <li class="dropdown__item">Copy to all panel KPIs</li>
    <li class="dropdown__item">Copy to all tab KPIs and charts</li>
    <li class="dropdown__item">Copy to all dashboard KPIs and charts</li>
  </ul>
</div>

When it is needed to add user info within a dropbox, it is possible to use this construction (using also `avatar`)

<style>
  .dropdown__item:hover {
    background-color: #db0046;
  }
</style>

<div class="overlay" style="position: relative;">
  <ul class="dropdown">
    <li class="dropdown__item">
      <div class="dropbox__item__media">
        <div class="dropbox__item__media__avatar">
          <div class="avatar">
            <img src="https://s.gravatar.com/avatar/c35cd5ae280f5872e492ca8650536cf6?d=blank" class="avatar avatar__image" />
            <div class="avatar avatar__fallback-text" data-assigned-background-id="1">PRC</div>
          </div>
        </div>
        <div class="dropbox__item__media__title">
          Communist doge
        </div>
    </li>
  </ul>
</div>
*/

.dropdown {
  margin: 5px;
  max-width: 400px;
  min-width: 135px;
  white-space: nowrap;

  text-align: left;
}

.dropdown .dropdown{
  margin: 0 0 0 18px;
}

.dropdown--has-fixed-width {
  max-width: unset;
  min-width: unset;
}

.dropdown__separator {
  border-color: #e0e2e4;
  margin: 5px 0;
}

.dropdown__item {
  font-family: 'Lato-Regular', sans-serif;

  display: block;
  font-size: 14px;
  line-height: 1.2;

  overflow: hidden;
  padding: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 2*5px);
  min-height: 16.8px; /* Makes empty options as high as no-empty options */

  border-radius: 3px;
  color: #303234;
}

.desktop .dropdown__item:not(.dropdown__item--has-no-hover):hover{
  background-color: #f0f2f4;
  color: #303234;
  cursor: pointer; /* TODO Move to .dropdown__item when the --has-no-hover disappear */
}

.desktop .dropdown__item:not(.dropdown__item--is-not-personalizable):hover {
  color: #fff;
}

.dropdown__item--is-big {
  display: -ms-flexbox;
  display: flex;
  height: 28px;
  margin: 0;
  padding: 0 11px;
  width: calc(100% - 2*11px);

  -ms-flex-align: center;

      align-items: center;
}

.dropdown__item--has-icon {

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
}

.dropdown__item--has-icon .icon-logout line,
    .dropdown__item--has-icon .icon-logout path {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.dropdown__item--has-icon .icon-help path,
    .dropdown__item--has-icon .icon-help circle,
    .dropdown__item--has-icon .icon-help line {
  fill: none;
  stroke: #505254;
  stroke-width: 1.5px; }

.dropdown__item--has-icon .icon-delete line,
    .dropdown__item--has-icon .icon-delete path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #505254; }

.dropdown__item--has-icon .icon-share polyline,
    .dropdown__item--has-icon .icon-share line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.dropdown__item--has-icon .icon-goal circle {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.dropdown__item--has-icon .icon-alert path,
    .dropdown__item--has-icon .icon-alert line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.dropdown__item--has-icon .icon-book path {
  fill: none;
  stroke: #505254;
  stroke-width: 1.5px;
  stroke-miterlimit: 10; }

.dropdown__item--has-icon .icon-bulb path {
  fill: #505254;
  stroke: none; }

.dropdown__item--has-icon .icon-calendar path,
    .dropdown__item--has-icon .icon-calendar circle,
    .dropdown__item--has-icon .icon-calendar line {
  fill: none;
  stroke: #505254;
  stroke-width: 1.5px; }

.dropdown__item--has-icon .icon-compass path,
    .dropdown__item--has-icon .icon-compass circle,
    .dropdown__item--has-icon .icon-compass polygon,
    .dropdown__item--has-icon .icon-compass line {
  stroke: #505254;
  stroke-width: 1.5px; }

.dropdown__item--has-icon .icon-compass__hand-dark {
  fill: #505254 !important; }

.dropdown__item--has-icon .icon-compass__circle {
  stroke-miterlimit: 10; }

.dropdown__item--has-icon .icon-compass__circle,
  .dropdown__item--has-icon .icon-compass__hand-light,
  .dropdown__item--has-icon {
  fill: none; }

.dropdown__item--has-icon .icon-compass__hand-dark,
  .dropdown__item--has-icon .icon-compass__hand-light,
  .dropdown__item--has-icon .icon-compass__cardinal-point {
  stroke-linecap: round;
  stroke-linejoin: round; }

.dropdown__item--has-icon path,
  .dropdown__item--has-icon rect {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.dropdown__item--has-icon path,
  .dropdown__item--has-icon rect,
  .dropdown__item--has-icon polyline,
  .dropdown__item--has-icon line {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.dropdown__item--has-icon .icon-plus {
  height: auto;
  width: 14px; }

.dropdown__item--has-icon .icon-plus line {
  fill: none;
  stroke: #505254;
  stroke-width: ; }

.dropdown__item--has-icon .icon-edit path,
    .dropdown__item--has-icon .icon-edit polygon,
    .dropdown__item--has-icon .icon-edit polyline {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #505254; }

.dropdown__item--has-icon .icon-info circle,
    .dropdown__item--has-icon .icon-info line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.dropdown__item--has-icon .icon-comments path {
  stroke-width: 1px;
  fill: transparent;
  stroke: #505254; }

.dropdown__item--has-icon .icon-details circle,
    .dropdown__item--has-icon .icon-details line,
    .dropdown__item--has-icon .icon-details polyline {
  stroke-width: 1px;
  fill: transparent;
  stroke: #505254; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-logout line,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-logout path {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-help path,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-help circle,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-help line {
  fill: none;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-delete line,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-delete path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #c0c2c4; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-share polyline,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-share line {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-goal circle {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-alert path,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-alert line {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-calendar path,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-calendar circle,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-calendar line {
  fill: none;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass path,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass circle,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass polygon,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass line {
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass__hand-dark {
  fill: #c0c2c4 !important; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass__circle {
  stroke-miterlimit: 10; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass__circle,
  .dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass__hand-light,
  .dropdown__item--has-icon.dropdown__item--is-disabled {
  fill: none; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass__hand-dark,
  .dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass__hand-light,
  .dropdown__item--has-icon.dropdown__item--is-disabled .icon-compass__cardinal-point {
  stroke-linecap: round;
  stroke-linejoin: round; }

.dropdown__item--has-icon.dropdown__item--is-disabled path,
  .dropdown__item--has-icon.dropdown__item--is-disabled rect {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled path,
  .dropdown__item--has-icon.dropdown__item--is-disabled rect,
  .dropdown__item--has-icon.dropdown__item--is-disabled polyline,
  .dropdown__item--has-icon.dropdown__item--is-disabled line {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-plus {
  height: auto;
  width: 14px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-plus line {
  fill: none;
  stroke: #c0c2c4;
  stroke-width: ; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-edit path,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-edit polygon,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-edit polyline {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #c0c2c4; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-info circle,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-info line {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-comments path {
  stroke-width: 1px;
  fill: transparent;
  stroke: #c0c2c4; }

.dropdown__item--has-icon.dropdown__item--is-disabled .icon-details circle,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-details line,
    .dropdown__item--has-icon.dropdown__item--is-disabled .icon-details polyline {
  stroke-width: 1px;
  fill: transparent;
  stroke: #c0c2c4; }

.dropdown__item--has-icon .icon {
  height: 19px;
  margin-right: 10px;
  width: 19px;
}

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-logout line,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-logout path {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-help path,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-help circle,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-help line {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-delete line,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-delete path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #fff; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-share polyline,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-share line {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-goal circle {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-alert path,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-alert line {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-book path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-miterlimit: 10; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-calendar path,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-calendar circle,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-calendar line {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass path,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass circle,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass polygon,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass line {
  stroke: #fff;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass__hand-dark {
  fill: #fff !important; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass__circle {
  stroke-miterlimit: 10; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass__circle,
  .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass__hand-light,
  .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover {
  fill: none; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass__hand-dark,
  .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass__hand-light,
  .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-compass__cardinal-point {
  stroke-linecap: round;
  stroke-linejoin: round; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover path,
  .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover rect {
  fill: transparent;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover path,
  .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover rect,
  .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover polyline,
  .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover line {
  fill: transparent;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-edit path,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-edit polygon,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-edit polyline {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #fff; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-info circle,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-info line {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5px; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-comments path {
  stroke-width: 1px;
  fill: transparent;
  stroke: #fff; }

.desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-details circle,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-details line,
    .desktop .dropdown__item--has-icon:not(.dropdown__item--has-no-hover):not(.dropdown__item--is-not-personalizable):hover .icon-details polyline {
  stroke-width: 1px;
  fill: transparent;
  stroke: #fff; }

.dropdown__item--is-disabled {
  color: #c0c2c4;
}

.dropdown__item__text {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 28px;
}

.dropdown__item__media {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  width: 250px;
}

.dropdown__item__media__avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 35px;
  width: 35px;
  margin-right: 10px;
}

.dropdown__item__media__title {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown__item__media__subtitle {
  font-family: 'Lato-Regular', sans-serif;

  display: block;
  letter-spacing: 0.2px;
  line-height: 1.5;

  color: #c0c2c4;
  font-size: 11px;
}

/*
@styleguide

@title Editor

This component builds a basic editor with support for several actions on its footer. There are some basic elements:

* `editor__composer`: provides the basic layout for the textbox
* `editor__textbox`: area for writing content
* `editor__addons`: contains the addons added to the editor.
* `editor__footer`: contains the basic actions and the buttons for _submit_ and _cancel_
* `action`: CSS component by itself, represents each one of the special actions that can be performed. Some examples could be: add an action, add a mention, make a multilevel comment and so on.

The editor's footer is hidden by default and it is only displayed when using the `--is-shown` modifier.

<div class="editor">
  <div class="editor__composer">
    <div class="editor__textbox" contenteditable="true"></div>
    <div class="editor__addons">
      <p style="font-family: 'Lato-Regular'; font-size: 13px;">Example of addon</p>
      <div class="attachment attachment--is-deletable" data-filename="file.jpg">
        A jpg
        <div class="attachment__action">
          <svg class="icon icon-cancel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
            <line x1="2.54" y1="2.58" x2="22.46" y2="22.42"/>
            <line x1="22.46" y1="2.58" x2="2.54" y2="22.42"/>
          </svg>
        </div>
      </div>
    </div>
  </div>
  <footer class="editor__footer editor__footer--is-shown">
    <div class="editor__actions">
      <button class="action">
        <svg class="icon icon-action" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
          <path class="cls-1" d="M14.15,18.5a0.48,0.48,0,0,0,.7,0,2.5,2.5,0,0,0,.72-1.76A2.47,2.47,0,0,0,15,15.12L19.8,9.29a1.68,1.68,0,0,0,.84.23A1.7,1.7,0,0,0,21.88,9a0.54,0.54,0,0,0,0-.75L16.53,2.65a0.49,0.49,0,0,0-.7,0,1.86,1.86,0,0,0-.31,2.18l-5.62,5a2.28,2.28,0,0,0-3.22.1,0.54,0.54,0,0,0,0,.76l2.81,3L3.08,21.64a0.53,0.53,0,0,0,0,.7,0.49,0.49,0,0,0,.35.15,0.49,0.49,0,0,0,.33-0.13l7.55-6.69Z"/>
        </svg>
      </button>
      <button class="action">
        <svg class="icon icon-attachment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
          <path d="M7.57,14.89l5-5a2.37,2.37,0,1,1,3.35,3.35L8.62,20.53a3.49,3.49,0,0,1-4.94-4.94l10.8-10.8A4.61,4.61,0,1,1,21,11.31l-8.5,8.5"/>
        </svg>
      </button>
    </div>
    <button class="button button--is-secondary">Cancel</button>
    <button class="button button--is-primary">Send</button>
  </footer>
</div>

*/

.editor__composer {
  border: 1px solid #e0e2e4;

  background-color: #fafafa;
  border-radius: 4px;
}

.editor__textbox {
  font-family: 'Lato-Regular', sans-serif;
  max-height: 250px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  font-size: 14px;
  line-height: normal;
  min-height: 1em;
  padding: 10px;

  background-color: transparent;
  color: #303234;
  outline: 0;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: auto; /* Fixes a bug for ios webview about contenteditables */
}

.editor__textbox p,
  .editor__textbox ul,
  .editor__textbox ol {
  padding-bottom: 0.5em; }

.editor__textbox p:last-of-type {
  padding-bottom: 0; }

.editor__textbox ul,
  .editor__textbox ol {
  list-style-position: inside; }

.editor__textbox ul {
  list-style-type: disc; }

.editor__textbox strong,
  .editor__textbox b {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold; }

.editor__textbox em {
  font-style: italic; }

.editor__textbox i {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic; }

.editor__textbox i b,
  .editor__textbox b i {
  font-family: 'Lato-BoldItalic', sans-serif;
  font-style: italic;
  font-weight: bold; }

.editor__textbox h1 {
  font-size: 1.4em; }

.editor__textbox a {
  color: inherit;
  text-decoration: underline; }

.editor__textbox--is-short {
  max-height: 150px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The editor's placeholder is displayed as an :after pseudo-element */

.editor__textbox:after {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  height: 1em;

  color: silver;
  font-style: normal;
}

/* Edge case for the Editor just containing mentions (they are represented as inputs) */

.editor__textbox:not(:empty).editor__textbox:after {
  display: none;
}

.editor__addons {
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.editor__addons__box:not(:empty) {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 0 10px 10px;
}

.editor__addons__box:not(:empty):before {
  border-top: 1px solid #e0e2e4;
  content: '';
  display: block;
  width: 100%;
}

.editor__addon {
  font-size: 13px;
  margin-top: 10px;
  -ms-flex-order: 1;
      order: 1;
}

.editor__addon--is-first {
  -ms-flex-order: 0;
      order: 0;
}

.editor__addon--is-last {
  -ms-flex-order: 2;
      order: 2;
}

.editor__footer {
  display: none;
  margin-top: 10px;
}

.editor__footer--is-shown {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.editor__actions {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.editor .avatar__fallback-text {
  font-size: 10px;
}

.editor__footer .button--is-primary {
  margin-left: 10px;
}

/*
@styleguide

@title Editor-Addon

This component represents the small addons that are shown inside the Editor component.

<div style="width: 300px; font-size: 13px;">
  <div class="editor-addon">
    <span class="editor-addon__logo">
      <svg class="icon icon-copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
        <polyline points="8.26 15.24 4.79 15.24 4.79 2.51 9.42 2.51 9.42 7.77 14.65 7.77"/>
        <line x1="9.42" y1="2.51" x2="14.66" y2="7.75"/>
        <polyline points="20.21 15.03 14.97 15.03 14.97 9.76 10.35 9.76 10.35 22.49 20.21 22.49 20.21 15 14.97 9.76"/>
      </svg>
    </span>

    <span class="editor-addon__title">Copy to all dashboard KPIs and charts</span>

    <div class="editor-addon__action">
      <svg class="icon icon-cancel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
        <line x1="2.54" y1="2.58" x2="22.46" y2="22.42"/>
        <line x1="22.46" y1="2.58" x2="2.54" y2="22.42"/>
      </svg>
    </div>
  </div>
</div>
*/

.editor-addon {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  padding-right: 1em;
  width: calc(100% - 1em);
}

.editor-addon__logo {

  height: 16px;
  margin-right: 5px;
  width: 16px;
}

.editor-addon__logo .icon-copy polyline,
    .editor-addon__logo .icon-copy line {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #505254; }

.editor-addon__logo .icon-action path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #505254; }

.editor-addon__title {
  font-family: 'Lato-Regular', sans-serif;

  -ms-flex-positive: 1;

      flex-grow: 1;

  color: #303234;
}

.editor-addon__title--is-date {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;
}

.editor-addon__action {

  height: 14px;
  width: 14px;

  cursor: pointer;
}

.editor-addon__action .icon-cancel line {
  fill: transparent;
  stroke: #909294;
  stroke-width: 2px; }

/*
@styleguide
@title Element Header

Styles the scorecard element header for all elements inside a dashboard, which are KPI panels, charts and storytelling
(both images and text). To make it work you need a `element-header` wrapper. Depending on the type of element you need
all or some of the classes.

<style>
  .element-header:not(:last-of-type) {
    margin-bottom: 30px;
  }
</style>

<div class="element-header element-header--has-border">
  <div class="element-header__title__wrapper">
    <h3 class="element-header__title__main-text" title="Storytelling image with title">Storytelling image with title</h3>
  </div>
</div>

<div class="element-header">
  <div class="element-header__title__wrapper">
    <h3 class="element-header__title__main-text" title="Storytelling text with title">Storytelling text with title</h3>
  </div>
</div>

<div class="element-header element-header--column element-header--has-border">
  <div class="element-header__title__wrapper">
    <h3 class="element-header__title__main-text" title="Dashboard panel title">Dashboard panel title</h3>
  </div>
  <div class="element-header__title__subtitle">
    <div class="temporality">
    <span class="temporality__item temporality__item--is-timestamp">Apr, 2016</span>
    <span class="temporality__item temporality__item--is-duration">Monthly</span>
    </div>
  </div>
</div>

<div class="element-header element-header--has-border">
  <div class="element-header__title">
    <div class="element-header__title__wrapper element-header__title__wrapper--is-table js-link-to-report">
      <h3 class="element-header__title__main-text" title="Dashboard table title">Dasboard table title</h3>
    </div>
    <div class="temporality">
      <span class="temporality__item temporality__item--is-timestamp">Apr, 2016</span>
      <span class="temporality__item temporality__item--is-duration">Monthly</span>
    </div>
  </div>
</div>

*/

.element-header {
  display: -ms-flexbox;
  display: flex;
  height: calc(100% - 5px);
  line-height: 23px;
  padding-bottom: 5px;
  text-align: left;
  width: 100%;
}

.element-header--column {
  -ms-flex-direction: column;
      flex-direction: column;
}

.element-header__title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-pack: end;
      justify-content: flex-end;
  min-width: 0; /* Hack for allowing text-overflow: ellipsis; within a flex container */
}

.element-header__title--vertically_centered {
  -ms-flex-pack: center;
      justify-content: center;
}

.element-header__title__subtitle {
  height: auto;
  max-height: 23px;
}

.element-header__title__subtitle .data-block-footer {
  padding: 5px 0;
}

.element-header__title__wrapper {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  min-width: 0; /* Hack for allowing text-overflow: ellipsis; within a flex container */
  width: 100%;
}

.element-header__title__main-text {
  font-family: 'Lato-Black', sans-serif;
  font-weight: 900;

  -ms-flex-positive: 1;

      flex-grow: 1;
  font-size: 16px;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #303234;
}

.element-header__title__main-text--vertically_centered {
  -ms-flex-positive: 0;
      flex-grow: 0;
}

.element-header__title__main-text:empty {
  min-height: 23px;
}

.element-header__title__wrapper .element-header__title__main-text {

  -ms-flex-positive: 0;

      flex-grow: 0;
  max-width: 100%;
}

.element-header__title__wrapper .element-header__title__main-text .icon-comments path {
  stroke-width: 1px;
  fill: transparent;
  stroke: #505254; }

.element-header__title__wrapper .element-header__title__main-text .icon-menu {
  stroke-width: 1px; }

.element-header__title__wrapper .element-header__title__main-text .icon-menu line {
  fill: none;
  stroke: #505254; }

.element-header__button {

  -ms-flex-item-align: center;

      -ms-grid-row-align: center;

      align-self: center;
  -ms-flex-positive: 0;
      flex-grow: 0;
  margin-left: auto;
  margin-bottom: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.element-header__button .icon-comments path {
  stroke-width: 1px;
  fill: transparent;
  stroke: #505254; }

.element-header__button .icon-menu {
  stroke-width: 1px; }

.element-header__button .icon-menu line {
  fill: none;
  stroke: #505254; }

.element-header__button--is-info {

  height: 1em;
  padding-left: 5px;
  width: 1em;

  color: #505254;
  cursor: pointer;
  stroke: #505254;
  fill: transparent;
}

.element-header__button--is-info .icon-info circle,
    .element-header__button--is-info .icon-info line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.element-header__button + .element-header__title {
  margin-left: 10px;
}

@media only screen and (max-width: 767px) {
  .element-header {
    padding: 0 15px 5px;
    width: calc(100% - 15px * 2);
  }

  .element-header .data-block-footer {
    padding: 0;
  }

  .element-header__button {
    margin-right: 15px
  }
}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .element-header__title__wrapper:after {  /* IE10 */
    display: none
  }

  *::-ms-backdrop, .element-header__title__wrapper:after { /* IE11 */
    display: none
  }
}

/*
@styleguide
@title Element Sub Header

Style the dashboard tables subheader. It has support for flags, search input and additional buttons.

## Normal state

<div class="element-subheader">
  <div class="js-flag element-subheader__item element-subheader__item--has-separator">
  </div>

  <div class="element-subheader__item element-subheader__item--has-fixed-width">
  <div class="search">
  <input placeholder="Search" class="js-search-input search__input" type="text">
  <div class="search__prepend">
  <svg class="icon icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <ellipse cx="11.36" cy="10.59" rx="7.94" ry="8.07"></ellipse>
  <line x1="16.21" y1="17.02" x2="21.58" y2="22.48"></line>
  </svg>
  </div>
  <div class="search__append js-search-clean">
  <svg class="icon icon-cancel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <line x1="2.54" y1="2.58" x2="22.46" y2="22.42"></line>
  <line x1="22.46" y1="2.58" x2="2.54" y2="22.42"></line>
  </svg>
  </div>
  </div>
  </div>

  <div class="element-subheader__button element-subheader__item element-subheader__item--is-right-aligned">
  <div class="element-subheader__button__icon">
  <svg class="icon icon-view-bars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <line x1="13.17" y1="5.83" x2="22.5" y2="5.83"></line>
  <line x1="2.5" y1="12.5" x2="22.5" y2="12.5"></line>
  <line x1="7.83" y1="19.17" x2="22.5" y2="19.17"></line>
  </svg>
  </div>
  <p class="element-subheader__button__text">Bars</p>
  </div>

  <div class="js-analyst-opinion-widget element-subheader__item">
  <div class="touchable-link ">
  <svg class="icon icon-comments" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <path class="cls-1" d="M12.5,3.08c-5.51,0-10,3.69-10,8.22a7.54,7.54,0,0,0,3.62,6.2l0.39,0.26,0.07,0.47a5.56,5.56,0,0,1,.06.79,4.41,4.41,0,0,1-1.15,2.89A8.25,8.25,0,0,0,10,19.57l0.37-.37,0.51,0.07a12.31,12.31,0,0,0,1.59.1c5.51,0,10-3.61,10-8.06S17.91,3.08,12.5,3.08Z"></path>
  </svg>
  </div>
  </div>
</div>

## Element Subheader button selected

<div class="element-subheader">
  <div class="js-flag element-subheader__item element-subheader__item--has-separator">
  </div>

  <div class="element-subheader__item element-subheader__item--has-fixed-width">
  <div class="search">
  <input placeholder="Search" class="js-search-input search__input" type="text">
  <div class="search__prepend">
  <svg class="icon icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <ellipse cx="11.36" cy="10.59" rx="7.94" ry="8.07"></ellipse>
  <line x1="16.21" y1="17.02" x2="21.58" y2="22.48"></line>
  </svg>
  </div>
  <div class="search__append js-search-clean">
  <svg class="icon icon-cancel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <line x1="2.54" y1="2.58" x2="22.46" y2="22.42"></line>
  <line x1="22.46" y1="2.58" x2="2.54" y2="22.42"></line>
  </svg>
  </div>
  </div>
  </div>

  <div class="element-subheader__button element-subheader__button--is-selected element-subheader__item element-subheader__item--is-right-aligned">
  <div class="element-subheader__button__icon">
  <svg class="icon icon-view-bars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <line x1="13.17" y1="5.83" x2="22.5" y2="5.83"></line>
  <line x1="2.5" y1="12.5" x2="22.5" y2="12.5"></line>
  <line x1="7.83" y1="19.17" x2="22.5" y2="19.17"></line>
  </svg>
  </div>
  <p class="element-subheader__button__text">Bars</p>
  </div>

  <div class="js-analyst-opinion-widget element-subheader__item">
  <div class="touchable-link ">
  <svg class="icon icon-comments" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <path class="cls-1" d="M12.5,3.08c-5.51,0-10,3.69-10,8.22a7.54,7.54,0,0,0,3.62,6.2l0.39,0.26,0.07,0.47a5.56,5.56,0,0,1,.06.79,4.41,4.41,0,0,1-1.15,2.89A8.25,8.25,0,0,0,10,19.57l0.37-.37,0.51,0.07a12.31,12.31,0,0,0,1.59.1c5.51,0,10-3.61,10-8.06S17.91,3.08,12.5,3.08Z"></path>
  </svg>
  </div>
  </div>
</div>

## Several items with separator

<div class="element-subheader">
  <div class="js-flag element-subheader__item element-subheader__item--has-separator">
  </div>

  <div class="element-subheader__item element-subheader__item--has-fixed-width element-subheader__item--has-separator">
  <div class="search">
  <input placeholder="Search" class="js-search-input search__input" type="text">
  <div class="search__prepend">
  <svg class="icon icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <ellipse cx="11.36" cy="10.59" rx="7.94" ry="8.07"></ellipse>
  <line x1="16.21" y1="17.02" x2="21.58" y2="22.48"></line>
  </svg>
  </div>
  <div class="search__append js-search-clean">
  <svg class="icon icon-cancel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <line x1="2.54" y1="2.58" x2="22.46" y2="22.42"></line>
  <line x1="22.46" y1="2.58" x2="2.54" y2="22.42"></line>
  </svg>
  </div>
  </div>
  </div>

  <div class="element-subheader__button element-subheader__item element-subheader__item--is-right-aligned">
  <div class="element-subheader__button__icon">
  <svg class="icon icon-view-bars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <line x1="13.17" y1="5.83" x2="22.5" y2="5.83"></line>
  <line x1="2.5" y1="12.5" x2="22.5" y2="12.5"></line>
  <line x1="7.83" y1="19.17" x2="22.5" y2="19.17"></line>
  </svg>
  </div>
  <p class="element-subheader__button__text">Bars</p>
  </div>

  <div class="js-analyst-opinion-widget element-subheader__item">
  <div class="touchable-link ">
  <svg class="icon icon-comments" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <path class="cls-1" d="M12.5,3.08c-5.51,0-10,3.69-10,8.22a7.54,7.54,0,0,0,3.62,6.2l0.39,0.26,0.07,0.47a5.56,5.56,0,0,1,.06.79,4.41,4.41,0,0,1-1.15,2.89A8.25,8.25,0,0,0,10,19.57l0.37-.37,0.51,0.07a12.31,12.31,0,0,0,1.59.1c5.51,0,10-3.61,10-8.06S17.91,3.08,12.5,3.08Z"></path>
  </svg>
  </div>
  </div>
</div>

## Without subheader buttons

<div class="element-subheader">
  <div class="js-flag element-subheader__item element-subheader__item--has-separator">
  </div>

  <div class="element-subheader__item element-subheader__item--has-fixed-width">
  <div class="search">
  <input placeholder="Search" class="js-search-input search__input" type="text">
  <div class="search__prepend">
  <svg class="icon icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <ellipse cx="11.36" cy="10.59" rx="7.94" ry="8.07"></ellipse>
  <line x1="16.21" y1="17.02" x2="21.58" y2="22.48"></line>
  </svg>
  </div>
  <div class="search__append js-search-clean">
  <svg class="icon icon-cancel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <line x1="2.54" y1="2.58" x2="22.46" y2="22.42"></line>
  <line x1="22.46" y1="2.58" x2="2.54" y2="22.42"></line>
  </svg>
  </div>
  </div>
  </div>

  <div class="js-analyst-opinion-widget element-subheader__item element-subheader__item--is-right-aligned">
  <div class="touchable-link ">
  <svg class="icon icon-comments" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
  <path class="cls-1" d="M12.5,3.08c-5.51,0-10,3.69-10,8.22a7.54,7.54,0,0,0,3.62,6.2l0.39,0.26,0.07,0.47a5.56,5.56,0,0,1,.06.79,4.41,4.41,0,0,1-1.15,2.89A8.25,8.25,0,0,0,10,19.57l0.37-.37,0.51,0.07a12.31,12.31,0,0,0,1.59.1c5.51,0,10-3.61,10-8.06S17.91,3.08,12.5,3.08Z"></path>
  </svg>
  </div>
  </div>
</div>

*/

.element-subheader {
  border-bottom: 1px solid #dfe1e3;
  border-top: 1px solid #dfe1e3;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 13px;
  padding: 5px;
  width: calc(100% - 5px * 2);
}

.element-subheader--has-additional-padding {
  padding: 10px 5px;
}

.element-subheader__item .icon-comments path {
  stroke-width: 1px;
  fill: transparent;
  stroke: #505254; }

.element-subheader__item .icon-menu {
  stroke-width: 2px; }

.element-subheader__item .icon-menu line {
  fill: none;
  stroke: #505254; }

.element-subheader__item--has-separator {
  -ms-flex-align: center;
      align-items: center;
  border-right: 1px solid #d0d2d4;
  display: -ms-flexbox;
  display: flex;
  height: 18px;
  padding-right: 10px;
  margin-right: 10px;
}

.element-subheader__item--has-fixed-width {
  -ms-flex-positive: 1;
      flex-grow: 1; /* makes the element to be responsive. it doesn't overflow */
  max-width: 300px;
}

.element-subheader__item--has-large-font {
  font-size: 16px;
}

.element-subheader__item--is-right-aligned {
  margin-left: auto;
}

.element-subheader__item--is-right-aligned + .element-subheader__item {
  margin-left: 10px;
}

.element-subheader__button {
  -ms-flex-align: center;
      align-items: center;
  box-sizing: content-box;
  display: -ms-flexbox;
  display: flex;
  height: 25px;
  padding: 0 5px;
  width: 45px;

  border-radius: 2px;
  cursor: pointer;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.element-subheader__button__icon {

  height: 1.25em;
  width: 1.25em;
}

.element-subheader__button__icon .icon-view-bars line {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.desktop .element-subheader__button:not(.element-subheader__button--is-selected):hover .element-subheader__button__icon .icon-view-bars line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.element-subheader__button__text {
  font-family: 'Lato-Regular', sans-serif;

  font-style: italic;
}

.element-subheader__button--is-selected {
  background-color: #db0046;
  color: #fff;
}

.element-subheader__button--is-selected .element-subheader__button__icon .icon-view-bars line {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5px; }

.element-subheader .legend {
  margin: auto;
}

/* Hack for IE11: annul the max-width to solve next item shift  */

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .element-subheader__item--has-fixed-width {
    max-width: none;
  }
}

@media only screen and (max-width: 767px) {
  .element-subheader {
    padding: 5px 15px;
    width: calc(100% - 15px * 2);
  }

  .element-subheader__item--has-fixed-width {
    max-width: 140px;
  }

  .element-subheader__item--is-right-aligned {
    min-width: -moz-min-content;
    min-width: min-content;
  }
}

.empty-content {
  display: table;
  text-align: center;
  width: 100%;
}

.empty-content__icon i {
  color: #e0e0e0; }

.empty-content__title {
  font-family: 'Lato-Regular', sans-serif;
}

.empty-content__subtitle {
  font-family: 'Lato-Light', sans-serif;
}

.empty-content__title,
.empty-content__subtitle {
  color: #707070;
}

.empty-content__wrapper {
  display: table-cell;
  vertical-align: middle;
}

/*
@styleguide

@title Form

The form is divided in four horizontal sections, which are, in order from top to bottom:
- Relevant information: it is some text aligned to the right.
- Labels and inputs section: email and password feedback from user.
- Options section: the options can be both right and left aligned. The options can be text, link, checkboxes, etc.
- Submit button section: the button is left aligned. It is a component by its own.

<form class="form">
  <div>
    <label class="label" for="username"> email </label>
    <input id="username" class="form__input" name="username" type="email"/>

    <label class="label" for="password"> password </label>
    <input id="password" class="form__input" name="password" type="password"/>
  </div>

  <div class="form__options">
      <div class="form__options__option">
        <div class="form__check--is-not-selected">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
          <rect x="2.5" y="2.5" width="20" height="20" rx="2.4" ry="2.4"/>
        </svg>
        </div>
        <p> Keep me logged in </p>
      </div>
      <div class="form__options__option form__options__option--is-align-right">
        <a class="login__text" href="https://app.sweetspotintelligence.com/session/new?forgot=true">Forgot your password? </a>
      </div>
  </div>

  <div class="form__submit">
    <button type="submit" class="button--is-primary button button--is-large button--is-disabled">
      Sign in
    </button>
  </div>
</form>

*/

.form {
  box-sizing: content-box;
  -ms-flex-pack: center;
      justify-content: center;
  width: 366px;

  background-color: #fff;
  border: solid 1px #e0e2e4;
  border-radius: 4px;
  padding: 37px 52px;
}

.form__input {
  font-family: 'Lato-Regular', sans-serif;

  background-color: #fff;
  border: solid 1px #e0e2e4;
  border-radius: 4px;
  color: #909294;
  font-size: 16px;
  margin: 8px 0 20px;
  padding: 12px 14px;
  width: 338px;

  -webkit-appearance: none;
}

.form__input + .form__input {
  margin-top: 10px;
}

.form__input:focus {
  border-color: #505254;

  outline: none;
}

.form__input--is-validable:invalid {
  border-color: #ec5830;

  outline: none;
}

.form__input--no-vertical-margin {
  margin-top: 0px;
  margin-bottom: 0px;
}

.form__input--is-smaller {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  height: 30px;
  margin: 0;
  padding: 0 10px;
  width: 100%; /* Its width depends on the layout around it */
}

.form__options {
  display: -ms-flexbox;
  display: flex;
  font-size: 13px;
  -ms-flex-pack: justify;
      justify-content: space-between;

  color: #909294;
}

.form__options__option {
  display: -ms-flexbox;
  display: flex;
}

.form__options__option--is-align-right {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.form__options__link {
  margin-top: 25px;
}

.form__submit {
  margin-top: 28px;
}

.form__text {
  font-family: 'Lato-Regular', sans-serif;

  display: block;
  font-size: 14px;

  color: #909294;
}

.form__help-text {
  margin-top: 8px;
}

.form__multiple-select-wrapper {
  height: 200px; /* RPT-1036: it prevents issues on IE 11 https://goo.gl/NGanXB */
  max-height: 200px;
}

@media only screen and (max-width: 767px) {
  .form {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    width: 85vw;

    background-color: transparent;
    border: none;
    padding: 0;
  }

  .form__validation {
    -ms-flex-order: 1;
        order: 1;
  }

  .form__input {
    margin: 0;
    padding: 12px 10px;
    width: calc(85vw - 10px * 2);

    font-size: 18px;
  }

  .form__input:first-of-type {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }

  .form__input:last-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 15px; }

  .form__input:focus {
    border-color: #e0e2e4;
  }

  .form__options {
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-order: 3;
        order: 3;

    font-size: 16px;
  }

  .form__options--is-align-left {
    -ms-flex-align: start;
        align-items: flex-start;
  }

  .form__options__option {
    margin-top: 30px;
  }

  .form__options__link {
    margin-top: 0;
  }

  .form__submit {
    margin: 0 0 30px;
    -ms-flex-order: 2;
        order: 2;
    width: 100%;
  }
}

.grid {
  font-family: 'Lato-Regular', sans-serif;

  display: table;
  width: 100%;
}

.grid__row {
  display: table-row;
}

.grid__row__cell {
  display: table-cell;
  width: 33%;

  text-align: center;
  vertical-align: middle;
}

.grid__row__cell--has-bottom-space {
  padding-bottom: 5px;
}

.grid__row__cell--is-separated {
  padding-top: 15px;
}

@keyframes help-text-animation {
    0% {
        color: #c0c2c4;
    }
    5% {
        color: #ec5830;
    }

    10% {
        color: #ec5830;
    }
    100% {
        color: #c0c2c4;
    }
}

.help-text {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic;

  display: block;
  line-height: 1.5;

  color: #c0c2c4;
  font-size: 12px;

  animation-duration: 900ms;
  animation-timing-function: linear;
}

.help-text--is-animated {
  animation-name: help-text-animation;
}

.icon {
  display: block;
  height: 100%;
  width: 100%;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Spinning Icons
 * -------------------------- */

.icon-spin {
  animation: icon-spin 2s infinite linear;
}

/* As soon as we get rid of the icon-font, this mixin should replace the before icon-spin */

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

.icon-spin-reverse {
  animation: spin-reverse 2s infinite linear;
}

@keyframes spin-reverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-359deg);
  }
}

.information-container {
  font-family: 'Lato-Regular', sans-serif;

  border-bottom: 1px solid #e0e2e4;
  font-size: 16px;
  height: auto;
  padding: 25px 0;

  color: #303234;
}

.information-block {
  margin-right: 1em;
}

.information-block--is_hidden {
  display: none;
}

.information-block__message {
  color: #909294;
  text-align: center;
}

.information-block__button {
  margin: 2em auto 0;
  width: 140px;
}

.information-block__text {
  max-height: 350px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  padding-left: 42px;
  padding-right: 1em;

}

.information-block__text p,
  .information-block__text ul,
  .information-block__text ol {
  padding-bottom: 0.5em; }

.information-block__text p:last-of-type {
  padding-bottom: 0; }

.information-block__text ul,
  .information-block__text ol {
  list-style-position: inside; }

.information-block__text ul {
  list-style-type: disc; }

.information-block__text strong,
  .information-block__text b {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold; }

.information-block__text em {
  font-style: italic; }

.information-block__text i {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic; }

.information-block__text i b,
  .information-block__text b i {
  font-family: 'Lato-BoldItalic', sans-serif;
  font-style: italic;
  font-weight: bold; }

.information-block__text h1 {
  font-size: 1.4em; }

.information-block__text a {
  color: inherit;
  text-decoration: underline; }

.information-block__buttons {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  padding: 1em;
  position: relative;
}

.information-admin__links {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  padding: 1em;
  position: relative;
}

.information-admin__links__header {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  display: block;
  font-size: 1.4em;
  margin-bottom: 10px;
  padding-left: 48px;

  color: #303234;
}

.information-admin__links__item {
  background-position: 27px 0;
  background-repeat: no-repeat;
  display: block;
  margin-top: 5px;
  max-width: 100%;
  overflow: hidden;
  padding-left: 48px;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #303234;
}

.information-admin__links__item a {
  text-decoration: underline;

  color: inherit;
}

.information-admin__links__item--datablock, .information-admin__links__item--panel {
  background-image: url(../images/data.svg);
}

.information-admin__links__item--folder {
  background-image: url('../images/folder.svg');
}

.information-admin__editor {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  padding: 1em;
  position: relative;
}

.information-admin__editor__wrapper {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
}

.information-admin__editor__container {
  width: 100%;
}

@information (--all-phones) {
  .information-admin__links, .information-admin__editor {
    padding: 1em 0;
  }
}

.inner-button {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  border: 1px solid #e0e2e4;
  box-sizing: border-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 14px;
  min-height:30px;
  min-width: 95px;
  padding: 7px 12px;

  background-color: #fafafa;
  border-radius: 4px;
  color: #505254;
  cursor: pointer;
  outline: none;
  text-align: center;
}

.desktop .inner-button:hover {
  opacity: 0.9;
}

.input {
  font-family: 'Lato-Regular', sans-serif;

  -ms-flex-align: center;

      align-items: center;
  box-sizing: border-box;
  color: #505254;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  height: 30px;
  margin: 0;
  padding: 0 10px;
  width: 100%; /* Its width depends on the layout around it */

  -webkit-appearance: none;
  background-color: #fff;
  border: solid 1px #e0e2e4;
  border-radius: 4px;
}

.input--is-disabled {
  padding: 0;

  border: 0;
  color: #505254;
}

.input + .input {
  margin-top: 10px;
}

.input:focus {
  border-color: #505254;

  outline: none;
}

.input--is-validable:invalid, .input--is-validable.input--invalid {
  border-color: #ec5830;

  outline: none;
}

.input__icon {
  -ms-flex-align: center;
      align-items: center;
  border: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 28px;
  padding: 0;
  width: 35px;

  background: transparent;
}

.desktop .input__icon:hover * {
  stroke: #505254;
}

.input__icon:after {
  border-right: 1px solid #e0e2e4;
  content: '';
  height: 20px;
  margin-left: 10px;
}

.input__icon:focus {
  outline: none;
}

.input[disabled]:not(.input--has-regular-style) {
  -webkit-text-fill-color: #909294;
  color: #909294;
}

.new-analyst-opinion {

  padding: 5px 0.8em;
}

.new-analyst-opinion.is-unused {

  /*
     * Magic numbers @ padding-bottom.
     * I wasn't able to make the padding top and bottom perform symmetrically.
     *
     */
  padding: 5px 0.8em 1px; }

.new-analyst-opinion.is-unused .button-rack {
  display: none; }

.new-analyst-opinion.is-unused .opinion-input {
  min-height: 1em; }

.opinion-input {
  font-family: 'Lato-Regular', sans-serif;

  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  font-size: 13px;
  max-width: 100%;
  min-height: 10em;
  min-width: 100%;
  padding: 5px;

  border-color: #cecece;
  color: #606060;

  /*
   * Not supported by Autoprefixer
   * https://github.com/postcss/autoprefixer#why-doesnt-autoprefixer-support-appearance
   */
  -webkit-appearance: none;
}

.kpi-event {
  padding-right: 2.5em;
  padding-left: 10px;
}

.kpi-event__goal-status--met {
  color: #46d46a;

}

.kpi-event__goal-status--not-met {
  color: #ec5830;
}

.label {
  font-family: 'Lato-Regular', sans-serif;

  display: block;
  height: 18px;
  margin-bottom: 8px;
  width: 100%;

  color: #909294;
  cursor: default;
  font-size: 10px;
  letter-spacing: 1.1px;
  line-height: 1.5;
  text-align: left;
  text-transform: uppercase;
}

.label--is-darker {
  color: #505254;
}

.label--is-bigger {
  font-size: 12px;
}

.label--is-small-input-alike {
  height: 30px;
}

.legend {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
}

.legend__item {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;

  color: #303234;
  font-size: 12px;
}

.legend__item:not(:last-of-type) {
  margin-right: 20px;
}

.legend__is-gradient .legend__item {
  margin-right: 10px;
}

.legend__item.legend__icon,
.legend__item.legend__text {
  margin-right: 10px;
}

.legend__item.legend__text:last-child {
  margin-right: 0;
}

.legend__item--is-disabled {
  opacity: 0.2;
}

.legend__text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend__icon {
  display: block;
  height: 1em;
  margin-right: 6px;
  width: 1em;

  border-radius: 1em;
}

.legend__icon--has-gradient:nth-of-type(2) {
  opacity: 0.8;
}

.legend__icon--has-gradient:nth-of-type(3) {
  opacity: 0.6;
}

.legend__icon--has-gradient:nth-of-type(4) {
  opacity: 0.4;
}

.legend__icon--has-gradient:nth-of-type(5) {
  opacity: 0.2;
}

/**

@styleguide

@title Link

Styles for links. Use `.link` to get it done.

Additionaly, sibling links will have a dot ( · ) between them, and they will ellipsis into one single line (ellipsis is only applied to the last one)

If the link needs to have a button feeling, adding a `.link--is-button` makes the element a bit more button-ish

NOTE: To have all the ellipsis stuff working, the links shouldn't have spaces at the start or end of the content (hover will underline that space character)
*/

.link {
  font-size: 11px;
  letter-spacing: 0.2px;
  text-overflow: ellipsis;
  white-space: nowrap;

  background: none;
  border: none;
  border-radius: 0px;
  color: #c0c2c4;
  cursor: pointer;
}

.link:last-child {
  overflow: hidden; /* Apply ellipsis only on the last element */
}

.link--is-button {
  padding: 0.5em 1em;
}

.desktop .link:hover {
  text-decoration: underline;
}

.link:focus {
  outline: 0;
}

.link + .link:before {
  display: inline-block; /* Removes the underline at before on hover. Read more at http://stackoverflow.com/questions/8820286/how-to-remove-only-underline-from-abefore */

  padding: 0 5px;
  text-decoration: none;

  content: "\000B7"; /* equals to '·' HTML Entity */
}

/*
@styleguide

@title Lightbox

Here is defined the style guide for a lightbox. It is divided in three main sections:
  - Header
  - Body
  - Footer

There are styles for the header title and the footer text.

Example snippet:

<div class="lightbox">
  <div class="lightbox__header">
    <span class="lightbox__header__title"> Goal </span>
  </div>
  <div class="lightbox__body">
    <p> Lightbox body </p>
  </div>
  <div class="lightbox__footer">
    <span class="lightbox__footer__text"> Delete goal </span>
    <div class="buttons-wrapper">
      <button class="button button--is-secondary js-cancel">Cancel</button>
      <button class="button button--is-primary js-submit">Save</button>
    </div>
  </div>
</div>

    <div class="lightbox">
      <div class="lightbox__header">
        <span class="lightbox__header__title"> Goal </span>
      </div>
      <div class="lightbox__body">
        <p> Lightbox body </p>
      </div>
      <div class="lightbox__footer">
        <span class="lightbox__footer__text"> Delete goal </span>
        <div class="buttons-wrapper">
          <button class="button button--is-secondary js-cancel">Cancel</button>
          <button class="button button--is-primary js-submit">Save</button>
        </div>
      </div>
    </div>

*/

.lightbox {
  border: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 0;

  border-radius: 4px;
}

.lightbox--has-small-fixed-width {
  width: 390px;
}

.lightbox--has-big-fixed-width {
  width: 900px;
}

.lightbox--has-fixed-width {
  width: 530px;
}

.lightbox--has-fixed-min-height {
  min-height: 485px;
}

.lightbox--has-fixed-max-height {
  max-height: 485px;
}

.lightbox--is-flexible {
  min-height: 350px;
  width: 100%;
}

.lightbox__header {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  -ms-flex-pack: center;
      justify-content: center;
  position: relative;
  width: 100%;

  border-bottom: 1px solid #e0e2e4;
}

.lightbox__header__title {
  font-family: 'Lato-Black', sans-serif;
  font-weight: 900;

  display: -ms-flexbox;

  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  font-size: 20px;
  -ms-flex-pack: center;
      justify-content: center;

  color: #303234;
}

.lightbox__header__button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
}

.lightbox__body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-pack: start;
      justify-content: flex-start;
  padding: 33px 40px;

  border: 0;
}

.lightbox__body__section--is-column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.lightbox__body__section--is-separated-from-above {
  padding-top: 10px;
}

.lightbox__body__columns {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.lightbox__body__columns__column__item+.lightbox__body__columns__column__item {
  margin-top: 22px;
}

.lightbox__body--is-centered {
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  min-height: 300px;
  min-width: 300px;
  padding: 0;
}

.lightbox__body__section {
  display: -ms-flexbox;
  display: flex;
}

.lightbox__body__section+.lightbox__body__section {
  padding-top: 25px;
}

.lightbox__body__column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.lightbox__body__section__sub {
  margin-right: 16px;
  min-width: 139px;
  max-width: 139px;
}

.lightbox__body__section__sub:last-of-type {
  margin-right: 0;
}

.lightbox__footer {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  -ms-flex-pack: end;
      justify-content: flex-end;
  padding: 10px;

  border-top: 1px solid #e0e2e4;

}

.lightbox__footer__link {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  font-size: 14px;
  line-height: 18px;

  color: #c0c2c4;
}

.lightbox__footer__left-button {
  margin-right: auto;
}

.lightbox__image {
  max-height: 60vh;
  max-width: 60vw;
}

.lightbox__body__columns__column {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  -ms-flex-positive: 0;
      flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  max-width: 50%;
}

.lightbox__master-detail {
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  max-height: 100%;
  width: 100%;
}

.lightbox__master-detail__master {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  margin-right: 30px;
  width: calc(35% -15x);

  border-right: 1px solid #e0e2e4;
}

.lightbox__master-detail__master .menu__section {
  max-height: 350px;
  margin: 0 25px 0 25px;
  padding-top: 32px;
}

.lightbox__master-detail__detail {
  margin-left: auto;
  width: 65%;
}

.lightbox--has-fixed-min-height .lightbox__master-detail__detail .lightbox__body {
  min-height: 369px;
}

.lightbox__master-detail__detail .lightbox__body {
  padding-left: 0;
}

.lightbox__master-detail__detail .lightbox__footer {
  -ms-flex-pack: start;
      justify-content: flex-start;
  padding-left: 0;
}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .lightbox__master-detail__master .menu__section--has-no-padding-bottom {
    height: 350px;
  }

}

/*
@styleguide
@title Loading placeholder

A placeholder to attach when a part of the interface is loading. The only markup needed is a wrapper with
the `.loading-placeholder` class. It is possible to add an animated spinner inside with the
`.loading-placeholder__spinner` class, and texts with `.loading-placeholder__text` class.

Also exists `.loading-placeholder-is-full-screen`. When specified the loading will take height as 100vh and width as 100%.

Note: It will take its 100% of width and a height relative to the viewport

<div class="loading-placeholder ">
  <div class="loading-placeholder__spinner icon-spin">
    <svg class="icon icon-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
      <path class="cls-1" d="M17.07,3.6A10,10,0,1,1,12.5,2.5"/>
    </svg>
  </div>
  <span class="loading-placeholder__text">This example is not loading ;)</span>
</div>

        <div class="loading-placeholder ">
          <div class="loading-placeholder__spinner icon-spin">
            <svg class="icon icon-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
              <path class="cls-1" d="M17.07,3.6A10,10,0,1,1,12.5,2.5"/>
            </svg>
          </div>
          <span class="loading-placeholder__text">This example is not loading ;)</span>
        </div>

A negative version is also possible with a `.loading-placeholder--is-negative` class on the root element.

<div class="loading-placeholder loading-placeholder--is-negative">
  <div class="loading-placeholder__spinner icon-spin">
    <svg class="icon icon-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
      <path class="cls-1" d="M17.07,3.6A10,10,0,1,1,12.5,2.5"/>
    </svg>
  </div>
  <span class="loading-placeholder__text">This example is also not loading ;)</span>
</div>

        <div class="loading-placeholder loading-placeholder--is-negative">
          <div class="loading-placeholder__spinner icon-spin">
            <svg class="icon icon-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
              <path class="cls-1" d="M17.07,3.6A10,10,0,1,1,12.5,2.5"/>
            </svg>
          </div>
          <span class="loading-placeholder__text">This example is also not loading ;)</span>
        </div>
*/

.loading-placeholder {
  display: -ms-flexbox;
  display: flex;
  height: 25vh;
  width: 100%;

  -ms-flex-align: center;

      align-items: center;
  background-color: #f0f2f4;
  border-radius: 6px;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
}

.loading-placeholder--is-negative {
  background-color: rgba(0, 0, 0, .3);
}

.loading-placeholder--is-transparent{
  background-color: transparent;
}

.loading-placeholder--is-full-screen {
  height: 100vh;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
}

.loading-placeholder__spinner .loader-inner.ball-pulse > div {
  height: 8px;
  width: 8px;
  background-color: #db0046; }

.loading-placeholder__spinner .loader-inner.ball-grid-pulse > div {
  background-color: #db0046; }

.loading-placeholder--is-negative .loading-placeholder__spinner .loader-inner.ball-grid-pulse > div {
  background-color: #000; }

.loading-placeholder__text {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 12px;
  color: #000;
}

@media only screen and (max-width: 767px) {
  .loading-placeholder {
    border-radius: 0;
  }
}

/*
@styleguide

@title Login

The login is divided in four horizontal sections, which are:
- Logo at the very top: it has a horizontally centered but non vertically centered image.
- Right beneath the logo section there is the form section: the whole form is inside this section, centered horizontally. The form is a component by its own.
- Under it, the apps section: horizontally and vertically centered set of available apps.
- Finally, the footer section is at the bottom: it has different information like links to the corporate website and other relevant information.

Basic structure of the login:

        <div class="login">
          <div class="login__logo">
          </div>

          <div class="login__form-section">
          </div>

          <div class="login__apps">
          </div>

          <div class="login__footer">
          </div>
        </div>

*/

.login {
  background-color: #f7f5f5;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 100vh;
  width: 100vw;
}

.login__logo {
  display: -ms-flexbox;
  display: flex;
  height: 25vh;
  -ms-flex-pack: center;
      justify-content: center;
  min-height: 100px;
  -ms-flex-order: 1;
      order: 1;
}

.login__logo__icon {
  background-image: url('../images/logo.svg');
  background-size: cover;
  border-radius: 12px;
  margin: auto 0 44px;
  height: 86px;
  width: 86px;
}

.login__form-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-order: 2;
      order: 2;

  font-family: 'Lato-Regular', sans-serif;
}

.login__input {
  font-family: 'Lato-Regular', sans-serif;

  background-color: #fff;
  border: solid 1px #e0e2e4;
  border-radius: 4px;
  color: #505254;
  font-size: 16px;
  margin: 8px 0 20px;
  padding: 12px 14px;
  width: 338px;

  -webkit-appearance: none;
}

.login__input:focus {
  border-color: #505254;

  outline: none;
}

/* Hack that defines the placeholder text color in all major browsers */

.login__input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #c0c2c4;
  opacity:  0;
}

.login__input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #c0c2c4;
  opacity:  0;
}

.login__input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #c0c2c4;
  opacity:  0;
}

.login__input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #c0c2c4;
}

.login__input--is-validable:invalid {
  border-color: #ec5830;

  outline: none;
}

.login__input--has-no-bottom-margin {
  margin-bottom: 0;
}

.login__text-wrapper {
  margin-bottom: 30px;
}

.login__text {
  font-family: 'Lato-Regular', sans-serif;
  color: #505254;
  font-size: 14px;
}

.login__text--is-downplayed {
  color: #909294;
}

.login__text--is-flex-centered {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}

.login__text--has-horizontal-margin {
  margin: 0 12px;
}

/* Keep the original color in links after being clicked */

.login__text:visited {
  color: #505254;
}

.login__text--has-back-icon {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}

.login__text--emphasis {
  font-weight: bolder;
}

.login__text--has-back-icon:before {
  background-image: url('../images/arrow_back.svg');
  background-size: cover;
  content: "";
  display: inline-block;
  height: 20px;
  margin: 0 7px 0 5px;
  width: 20px;
}

.login__error {
  color: #db0046;
}

.login__apps {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 10px 0;
  -ms-flex-order: 3;
      order: 3;
}

.login__apps__icon:before {
  background-image: url('../images/logo_mini.png');
  background-size: 18px 18px;
  content: '';
  display: inline-block;
  height: 18px;
  margin-right: 5px;
  width: 18px;
}

.login__footer {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 5%;
  min-height: 45px;
  -ms-flex-order: 4;
      order: 4;
  padding: 0 56px;

  background-color: #fff;
  color: #505254;
  font-size: 13px;
  font-family: 'Lato-Regular', sans-serif;
}

.login__footer__left {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-order: 1;
      order: 1;
  padding: 5px 0;
}

.login__footer__right {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-pack: end;
      justify-content: flex-end;
  -ms-flex-order: 2;
      order: 2;
}

.login__footer__left__text {
  padding-right: 48px;
  text-decoration: none;
}

.login__footer__right-separator {
  padding-left: 37px;
}

.login__hint {
  margin-bottom: 22px;

  color: #db0046;
  display: none;
  text-align: left;
}

.login__hint--is-visible {
  display: block;
}

.login__demo-option__spinner .loader-inner.ball-pulse > div {
  height: 8px;
  width: 8px;
  background-color: #505254; }

/* Hack for IE11: sticky footer and apps section centered  */

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .login__apps {
    height: calc(70vh - 358px);
  }

  .login__footer {
    bottom: 0;
    position: fixed;
    height: 5vh;
    width: 94vw;
  }
}

@media (max-width: 885px) {
  .login__footer__left {
    -ms-flex-align: center;
        align-items: center;
  }

  .login__footer__left__text {
    max-width: 90px;
    padding-right: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .login__label {
    display: none;
  }

  .login__logo {
    height: 32vh;
  }

  .login__logo__icon {
    height: 62px;
    width: 62px;
  }

  .login__input {
    margin: 0;
    padding: 12px 10px;
    width: calc(85vw - 10px * 2);

    font-size: 18px;
  }

  .login__input:first-of-type {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }

  .login__input:last-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 20px; }

  .login__input.login__input--is-single {
    border-bottom: solid 1px #e0e2e4;
    border-radius: 4px; }

  .login__input:focus {
    border-color: #e0e2e4;
  }

  .login__input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    opacity:  1;
  }

  .login__input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    opacity:  1;
  }

  .login__input::-moz-placeholder { /* Mozilla Firefox 19+ */
    opacity:  1;
  }

  .login__input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    opacity:  1;
  }

  .login__text {
    font-size: 16px;
  }

  .login__text--has-back-icon {
    -ms-flex-pack: start;
        justify-content: flex-start;
  }

  .login__apps {
    display: none;
  }

  .login__footer {
    display: none;
  }

  .login__check__label {
    font-size: 16px;
  }

  .login__check__bullet {
    max-height: 20px;
    max-width: 20px;
    min-height: 20px;
    min-width: 20px;
  }

  .login__hint {
    text-align: center;
  }

}

@media only screen and (min-width: 767px) {
  .login__demo-option {
    margin-top: 10px;
  }

}

/*
@styleguide
@title Media

Abstracts the classic media CSS component ( <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Read more</a> )

It displays a grid with space for an avatar, the user's name, datetime of the comment, the comment itself and some
additional info

The use is as follows:

- A `media` class for a wrapper
- A `media__header` wrapper with:
  - A `media__header__avatar` . Tip: You can use <a href="#Avatar">the avatar component</a> here
  - A `media__title` and `media_details` for the name and timestamp. Add them inside an additional
  media__header__details to align with the avatar
- A `media__subheader` with additional context
- A `media__body` that contains the actual comment. Inside this element it is possible to use additional html tags (like
`ul` or `li`)
  - Is it possible to add `--highlighted` to _media__body_ to hgihglight it (e.g. when it is an unread Notification)
  - _Note_: The attachment modifier plays nice with <a href="#Attachment">the attachment component</a>
- A `media__footer.


<div class="media">
  <div class="media__menu js-menu">
    <svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
      <polyline points="22.56 7.57 12.56 17.56 2.44 7.44"></polyline>
    </svg>
  </div>

  <div class="media__header">
    <div class="media__header__avatar js-avatar">
      <div class="avatar">
        <img src="https://s.gravatar.com/avatar/7f17edb8c99f061db2d28bc9640dfedc?d=blank" class="avatar avatar__image">
        <div class="avatar avatar__fallback-text" data-assigned-background-id="5">UT</div>
      </div>
    </div>
    <div class="media__header__details">
      <span class="media__title">UX Tester</span>
      <span class="media__details">· Jun 28</span>
    </div>
  </div>

  <div class="media__body"><p>Prueba de comentario!</p></div>

  <div class="js-additional-info">
      <a target="_blank" href="https://s3-eu-west-1.amazonaws.com/mediasq-client-assets/staging/paperclip/attachments/d58922d4-f7c7-412d-b596-cfe0fc7279de/original/toggles.csv?1467112200" title="toggles.csv" data-filename="toggles.csv" class="media__additional-info attachment attachment--is-downloadable">
        toggles.csv
      </a>
  </div>
</div>

<div class="media">
  <div class="media__header">
    <div class="media__header__avatar js-avatar">
      <div class="avatar">
        <img src="https://s.gravatar.com/avatar/7f17edb8c99f061db2d28bc9640dfedc?d=blank" class="avatar avatar__image">
        <div class="avatar avatar__fallback-text" data-assigned-background-id="5">UT</div>
      </div>
    </div>
    <div class="media__header__details">
      <span class="media__title">UX Tester</span>
      <span class="media__details">· Jun 24</span>
    </div>
  </div>

  <div class="media__subheader">
    <span class="media-icon media-icon--mentions"></span>
    Has mentioned you on Avg. posession
  </div>

  <div class="media__body media__body--highlighted" style="word-wrap: break-word;"><p><input id="1466764170967" data-mentionable-id="c66215f8-4aec-49ec-9579-7b52a916c911" value="@Sergio Álvarez-Suárez" class="mentioner__composer__mention js-mention" disabled="" style="width: 153px;">&nbsp;Hi man!</p></div>

  <div class="media__footer">UEFA Euro 2016</div>
</div>
*/

.media {
  font-family: 'Lato-Regular', sans-serif;

  display: block;
  font-size: 14px;
  padding: 1em;
  position: relative;
}

.media__menu {

  height: 10px;
  position: absolute;
  right: 15px;
  width: 10px;

  cursor: pointer;
}

.media__menu .icon-arrow polyline {
  stroke-width: 3px;
  fill: transparent;
  stroke: #e0e2e4; }

.desktop .media__menu:hover .icon-arrow polyline, .media__menu--is-active .icon-arrow polyline {
  stroke-width: 3px;
  fill: transparent;
  stroke: #909294; }

.media__header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-align: start;
      align-items: flex-start;
}

.media__header__avatar {
  height: 38px;
  margin-right: 10px;
  min-width: 38px;
  max-width: 38px;
  position: absolute;
}

.media__header__editor {
  width: 100%;
}

.media__header__avatar + .media__header__editor {
  padding-left: 48px;
  width: calc(100% - 48px);
}

.media__title {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  display: inline;
  font-size: 1em;

  color: #303234;
}

.media__details {
  color: #909294;
  font-size: 1em;
}

.media__body {
  padding-left: 48px;

  color: #303234;
}

.media__header__details {
  line-height: 18px;
  padding-left: 48px;
}

.media__subheader {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  line-height: 18px;
  padding-left: 48px;

  color: #909294;
}

.media__subheader__info {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media__body {
  line-height: 18px;
  overflow: hidden;
}

.media__body--highlighted {
  padding-right: 10px;
  position: relative;
}

.media__body--highlighted::after {
  content: ' \25CF';
  font-size: 100%;
  position: absolute;
  right: 0;
  top: 0;

  color: #db0046;
}

.media__footer {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic;

  line-height: 18px;
  overflow: hidden;
  padding-left: 48px;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #909294;
}

/* Styles for comments itself */

.media__body p,
  .media__body ul,
  .media__body ol {
  padding-bottom: 0.5em; }

.media__body p:last-of-type {
  padding-bottom: 0; }

.media__body ul,
  .media__body ol {
  list-style-position: inside; }

.media__body ul {
  list-style-type: disc; }

.media__body strong,
  .media__body b {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold; }

.media__body em {
  font-style: italic; }

.media__body i {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic; }

.media__body i b,
  .media__body b i {
  font-family: 'Lato-BoldItalic', sans-serif;
  font-style: italic;
  font-weight: bold; }

.media__body h1 {
  font-size: 1.4em; }

.media__body a {
  color: inherit;
  text-decoration: underline; }

.media__additional-info {
  font-size: 0.9em;

  margin-left: 48px;
  margin-top: 0.6em;
}

.media__additional-info-text {
  margin-top: 0.6em;
  overflow: hidden;
  padding-top: 0.8em;
  padding-bottom: 1em;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #fafafa;
  border-radius: 3px;
  color: #303234;
}

@media only screen and (max-width: 767px) {
  .media__header__avatar--is-removable {
    display: none;
  }

  .media__header__avatar + .media__header__editor {
    padding-left: 0;
    width: 100%;
  }
}

.media-icon {
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 14px;
  margin-right: 5px;
  vertical-align: middle;
  width: 14px;
}

.media-icon--actions {
  background-image: url('../images/media/n_actions.svg');
}

.media-icon--alerts {
  background-image: url('../images/media/n_alerts.svg');
}

.media-icon--comments {
  background-image: url('../images/media/n_comments.svg');
}

.media-icon--flags {
  background-image: url('../images/media/n_flags.svg');
}

.media-icon--goals {
  background-image: url('../images/media/n_goals.svg');
}

.media-icon--mentions {
  background-image: url('../images/media/n_mentions.svg');
}

.members-selector {
  font-family: 'Lato-Regular', sans-serif;
}

.members-selector__bar {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 25px;
}

.members-selector__textbox__icon .icon-user circle,
    .members-selector__textbox__icon .icon-user path {
  fill: none;
  stroke: #909294; }

.members-selector__textbox {
  height: auto;
  max-width: calc(100% - 110px);
}

.members-selector__textbox .mentioner {
  width: calc(100% - 25px);
}

.members-selector .avatar__fallback-text {
  font-size: 10px;
}

.members-selector__textbox__box {
  padding: 5px 10px;

  background-color: #ffffff;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: auto; /* Fixes a bug for ios webview about contenteditables */
}

.members-selector__textbox__box,
.members-selector__textbox .mentioner__composer__mention {
  line-height: 1.3;
}

.members-selector__textbox__box::after {
  color: #909294;
  font-style: normal;
}

/* Edge case for the Editor just containing mentions (they are represented as inputs) */

.members-selector__textbox__box:not(:empty).members-selector__textbox__box:after {
  display: none;
}

.members-selector__action {

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  margin-left: 15px;
  max-height: 30px;
  max-width: 95px;
  padding: 0;
}

.members-selector__action .icon-plus {
  height: auto;
  width: 14px; }

.members-selector__action .icon-plus line {
  fill: none;
  stroke: #505254;
  stroke-width: 3px; }

.members-selector__action__text {
  padding-left: 5px;
}

.members-selector__members {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 150px;
}

.members-selector__placeholder {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-pack: center;
      justify-content: center;
}

.members-selector__member {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

.members-selector__member__preview {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  max-width: calc(100% - 18px);
  width: calc(100% - 18px);
}

.members-selector__member__action {

  -ms-flex-negative: 0;

      flex-shrink: 0;
  height: 18px;
  margin: 4px 5px 0 5px;
  width: 18px;

  cursor: pointer;
}

.members-selector__member__action .icon-delete line,
    .members-selector__member__action .icon-delete path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #c0c2c4; }

.desktop .members-selector__member__action:hover .icon-delete line,
    .desktop .members-selector__member__action:hover .icon-delete path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #303234; }

.mention {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;
}

.mention::before {
  content: "@";
}

.menu {
  background-color: #fff;
}

.menu__section {
  border-top: 1px solid #e7ecef;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 0px 30px;
  padding: 25px 0;
}

.menu__section--has-no-border-top {
  border-top: 0;
}

.menu__section--has-no-padding-bottom {
  padding-bottom: 0;
}

.menu__section:first-of-type {
  border-top: 0;
}

.menu__section__column {
  overflow-y: auto;
  width: 100%;
}

.menu__section__row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
}

.menu__section__row:not(:first-of-type) {
  padding-top: 25px;
}

.menu__section__right-button {
  margin-left: auto;
  padding: 0;
}

.menu__section__right-button__button {
  min-width: 20px;
  padding: 0 0 0 5px;
}

.menu__section__label {
  padding-left: 10px;
}

.menu__text {
  display: inline-block;
  margin: 1px 0;
  max-height: 36px;
  min-height: 18px;
  padding: 5px 10px;
  width: calc(100% - 10px * 2);

  color: #505254;
  overflow: hidden;
}

.desktop .menu__text:hover,
.menu__text--is-selected {
  border-radius: 4px;
}

.menu__text--is-selected {
  background-color: #db0046;
  color: #fff;
}

.menu__text--allows-tall {
  max-height: 54px;
}

.desktop .menu__text:hover:not(.menu__text--is-selected) {
  background-color: #F0F2F4;
  color: #505254;
}

.menu__text__title {
  font-weight: bold;
}

.menu__footer {
  padding-left: 0;
  max-height: 30px;
}

.menu__icon .icon-plus {
  height: auto;
  width: 14px; }

.menu__icon .icon-plus line {
  fill: none;
  stroke: #505254;
  stroke-width: 3px; }

.desktop .menu__icon:hover {
  cursor: pointer;
}

.menu__button-text {
  padding-left: 5px;
}

.table-name {
  cursor: pointer;
}

.multiple-select {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.multiple-select__toggler {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  display: inline-block;
  font-size: 14px;
  -ms-flex-positive: 0;
      flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 10px;

  color: #505254;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.multiple-select__toggler--with-extra-space {
  padding-left: 12px;
}

.desktop .multiple-select__toggler:hover {
  opacity: 0.5;
}

.multiple-select__options {
  -ms-flex-positive: 1;
      flex-grow: 1;
  overflow-y: auto;
  width: 100%;
}

.multiple-select__options--with-extra-space {
  padding: 0 12px 12px 12px;
}

.multiple-select__search {
  border-bottom: 1px solid #e0e2e4;

  margin-bottom: 12px;
  padding-bottom: 12px;
  width: 100%
}

.multiple-select__search--with-extra-space {
  padding: 12px;
  width: calc(100% - 12px*2);
}

.navigation {
  margin: 6px 0;
  position: absolute;
  z-index: 99999;

  background-color: #fff;
  border: solid 1px #e0e2e4;
  border-radius: 4px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  visibility: hidden;

  /*
   * Hack for BUG#8899: Prevent the page to overflow when there are too many dashboards and the
   * navigation is hidden
   *
   */
  height: 0;
  overflow: hidden;
}

.navigation:before {
  border-top: solid 1px #e0e2e4;
  border-right: solid 1px #e0e2e4;
  content: '';
  height: 14px;
  left: 11px;
  position: absolute;
  top: -8px;
  width: 14px;
  background-color: #fff;
  border-top-right-radius: 20%;
  border-bottom-left-radius: 80%;
  transform: rotate(-45deg);
}

.navigation--is-reversed:before {
  border-top: solid 1px #e0e2e4;
  border-right: solid 1px #e0e2e4;
  content: '';
  height: 14px;
  left: calc(100% - 25px);
  position: absolute;
  top: -8px;
  width: 14px;
  background-color: #fff;
  border-top-right-radius: 20%;
  border-bottom-left-radius: 80%;
  transform: rotate(-45deg);
}

.navigation--is-mobile {
  visibility: visible;
  border: 0;
  height: 100vh;
  margin: 0;
  width: 100%;

  border-radius: 0;
  box-shadow: none;
}

.navigation--is-shown {
  animation-duration: 250ms;
  animation-name: show-navigator;
  visibility: visible;

  /*
   * Hack for BUG#8899: Prevent the page to overflow when there are too many dashboards and the
   * navigation is hidden
   *
   */
  height: auto;
  overflow: visible;
}

.navigation--is-hidden {
  animation-duration: 250ms;
  animation-name: hide-navigator;
  visibility: hidden;
}

.navigation--hidden {
  display: none;
}

.navigation__header {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 10px;
}

.navigation__header__title {
  font-family: 'Lato-Regular', sans-serif;

  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation__header__item {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 40px;
  -ms-flex-pack: center;
      justify-content: center;
  width: 40px;
}

.navigation__header__item--is-large {
  -ms-flex-positive: 1;
      flex-grow: 1;
  margin: 0 15px;
}

.navigation__header__icon {

  transform: rotate(90deg);
}

.navigation__header__icon .icon-arrow polyline {
  stroke-width: 2px;
  fill: transparent;
  stroke: #303234; }

.navigation__header__icon .icon-cancel line {
  fill: transparent;
  stroke: #303234;
  stroke-width: 2px; }

.navigation__header__icon .icon {
  height: 50%;
  width: 50%;
}

.navigation__search {
  border-bottom: 1px solid #e0e2e4;

  padding: 12px;
}

.navigation__search .search {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.navigation__items {
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  min-height: 285px;
}

.navigation__additional-element {
  border-top: 1px solid #e0e2e4;
}

.navigation__item {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  margin: 0 5px;
}

.navigation__item:first-of-type {
  margin-top: 5px;
}

.navigation__item:last-of-type {
  margin-bottom: 5px;
}

.navigation__item__info {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
}

.navigation__item__name {
  -ms-flex-negative: 10;
      flex-shrink: 10;
}

.navigation__item__text {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 14px;
  margin-left: 10px;
  white-space: normal;

  color: #303234;
}

.navigation__item__label {
  font-size: 11px;

  color: #909294;
}

.navigation__item__text--is-disabled,
.navigation__item__label--is-disabled {
  color: #c0c2c4;
}

.navigation__action {
  height: 17px;
  width: 17px;
}

.navigation__action--is-hidden {
  visibility: hidden;
}

.navigation__icon {

  height: 17px;
  width: 17px;
}

.navigation__icon .icon-dashboard line,
    .navigation__icon .icon-dashboard circle {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.navigation__icon .icon-delete line,
    .navigation__icon .icon-delete path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #505254; }

.navigation__icon polyline,
  .navigation__icon line,
  .navigation__icon path {
  fill: transparent;
  stroke: #505254; }

.navigation__icon .icon-folder path {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.navigation__icon .icon-nested {
  height: auto;
  width: 11px; }

.navigation__icon .icon-nested path {
  fill: #505254; }

.navigation__icon polygon,
  .navigation__icon path,
  .navigation__icon rect {
  fill: transparent;
  stroke: #505254; }

.navigation__icon--is-disabled .icon-dashboard line,
    .navigation__icon--is-disabled .icon-dashboard circle {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.navigation__icon--is-disabled .icon-delete line,
    .navigation__icon--is-disabled .icon-delete path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #c0c2c4; }

.navigation__icon--is-disabled polyline,
  .navigation__icon--is-disabled line,
  .navigation__icon--is-disabled path {
  fill: transparent;
  stroke: #c0c2c4; }

.navigation__icon--is-disabled .icon-folder path {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-width: 1.5px; }

.navigation__icon--is-disabled .icon-nested {
  height: auto;
  width: 11px; }

.navigation__icon--is-disabled .icon-nested path {
  fill: #c0c2c4; }

.navigation__icon--is-disabled polygon,
  .navigation__icon--is-disabled path,
  .navigation__icon--is-disabled rect {
  fill: transparent;
  stroke: #c0c2c4; }

.navigation__icon--is-spinner .icon {
  animation: icon-spin 2s infinite linear;
  transform-origin: 50% 50%; }

.navigation__icon .icon {
  stroke-width: 1.5px;
}

.navigation__hoverable {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  min-height: 17px;
  padding: 6.5px;

  border-radius: 3px;
  cursor: pointer;
}

.desktop .navigation__hoverable:hover {
  background-color: #f0f2f4;
}

.navigation__hoverable.navigation__item,
.navigation__hoverable.navigation__item__info {
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-pack: start;
      justify-content: flex-start;
}

.navigation__item__info--is-scorecard:not(.navigation__hoverable) { /* Prevents clicks for not available elements*/
  pointer-events: none;
}

.navigation__hoverable .navigation__hoverable {
  padding: 0;
}

@media only screen and (max-width: 767px) {
  .navigation::before {
    display: none;
  }

  .navigation__search {
    border-top: 1px solid #e0e2e4;
  }

  .navigation__items {
    min-height: auto;
  }

}

/*
@styleguide
@title Navbar

Use `navbar` to have a fancy dark translucid header. Place into it whatever you want (`breadcrumbs` maybe :).

NOTE: This bar won't be shown on mobile devices

<div class="navbar">
  <p> Some things here...</p>
</div>

        <div class="navbar">
          <p> Some things here...</p>

        </div>
*/

.navbar {
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-item-align: center;
      align-self: center;
  display: -ms-flexbox;
  display: flex;
  height: 2.5em;
  padding: 5px 20px 5px 0;
}

.navbar__link {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;

  color: $navbar-color;
}

.navbar__link .icon-nested {
  height: auto;
  width: 11px; }

.navbar__link .icon-nested path {
  fill: $navbar-color; }

.navbar__link .icon {
  display: inline-block;
  margin-right: 5px;
  transform: rotate(180deg); }

@media only screen and (max-width: 767px) {
  .navbar {
    display: none;
  }
}

.notifications-flag-icon {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.notifications-flag-icon .icon {
  height: 30px;
  width: 30px;
}

.notifications-flag-icon__bell {

  cursor: pointer;
  display: inline-block;
  margin-right: -2px;
}

.notifications-flag-icon__bell .icon-bell path {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  transition: all 0.1s ease-out; }

.desktop .notifications-flag-icon__bell:hover .icon-bell path, .notifications-flag-icon--selected .icon-bell path {
  fill: #505254;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  transition: all 0.1s ease-out; }

.notifications-flag-icon__flag {

  display: inline-block;
  position: relative;
}

.notifications-flag-icon__flag .icon-n-flag path {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  transition: all 0.1s ease-out; }

.notifications-flag-icon__flag::after {
  font-family: 'Lato-Regular', sans-serif;

  content: attr(data-badge);
  font-size: .8em;
  left: 56%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.notifications-flag-icon__flag--highlighted .icon-n-flag path {
  fill: #db0046;
  stroke: #db0046;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  transition: all 0.1s ease-out; }

.notifications-flag-icon__flag--highlighted::after {
  color: #fff;
}

.notifications-list {
  padding: 5px 0;
  width: 100%;
}

.notifications-list--empty {
  -ms-flex-align: center;
      align-items: center;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  height: calc(100% - 5px * 2);
  margin: auto;
  -ms-flex-pack: center;
      justify-content: center;
}

.notifications-list > .notifications-list__item {
  border-bottom: 1px solid #dfe1e3;
}

.notifications-list--no-separator > .notifications-list__item {
  border: none;
}

.notifications-list__item {
  border-bottom: 1px solid #dfe1e3;

  min-height: 50px;

  cursor: pointer;
}

.desktop .notifications-list__item:hover {
  border-radius: 3px;

  background-color: #F0F2F4;
}

.notifications-list__empty-icon {

  height: 110px;
}

.notifications-list__empty-icon .icon-bell path {
  fill: transparent;
  stroke: #f0f2f4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  transition: all 0.1s ease-out; }

.notifications-list__empty-message {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  padding-top: 15px;

  color: #505254;
}

.overlay {
  border: solid 1px #e0e2e4;
  position: absolute;
  top: calc(100% + 4px);

  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
  z-index: 200;
}

.overlay--is-center {
  left: 50%;
  transform: translate(-50%, 0%); /* http://stackoverflow.com/a/25776315/2234951 */
}

.overlay--is-left {
  left: 0;
}

.overlay--is-right {
  right: 0;
}

.overlay--is-over {
  top: 0;
  right: 0;
}

.overlay--has-pointer {
  top: calc(100% + 9px);
}

.overlay--has-pointer::before {
  border-top: solid 1px #e0e2e4;
  border-right: solid 1px #e0e2e4;
  content: '';
  height: 14px;
  left: calc(50% - 14px / 2);
  position: absolute;
  top: -8px;
  width: 14px;
  background-color: #fff;
  border-top-right-radius: 20%;
  border-bottom-left-radius: 80%;
  transform: rotate(-45deg);
}

.overlay--is-right.overlay--has-pointer::before {
  border-top: solid 1px #e0e2e4;
  border-right: solid 1px #e0e2e4;
  content: '';
  height: 14px;
  left: calc(100% - 14px * 1.5 );
  position: absolute;
  top: -8px;
  width: 14px;
  background-color: #fff;
  border-top-right-radius: 20%;
  border-bottom-left-radius: 80%;
  transform: rotate(-45deg);
}

.overlay--is-left.overlay--has-pointer::before {
  border-top: solid 1px #e0e2e4;
  border-right: solid 1px #e0e2e4;
  content: '';
  height: 14px;
  left: 7px;
  position: absolute;
  top: -8px;
  width: 14px;
  background-color: #fff;
  border-top-right-radius: 20%;
  border-bottom-left-radius: 80%;
  transform: rotate(-45deg);
}

.overlay--is-overlapped {
  top: -3px;
  left: -5px;
  min-width: calc(100% + 6px);
}

/* Breakpoint from which the page goes full width */

.page {
  border-top: 1px solid #e7ecef;
  min-height: calc(100vh - $app-header-height - 2.5em - 1px - 27px * 2);
  padding: 27px 0;

  background-color: #fafafa;
}

.page__main-area {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 0 auto;
  min-height: calc((100vh - $app-header-height - 2.5em - 1px - 27px * 2) - 1px * 2);
  width: 66.67%;

  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #e7ecef;
}

.page__breadcrumbs {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  font-size: 18px;
  margin-left: calc(16.665% + 20px);

  color: #303234;
}

.page__breadcrumbs__icon {

  margin: 0 5px 0 9px;
}

.page__breadcrumbs__icon .icon-nested {
  height: auto;
  width: 11px; }

.page__breadcrumbs__icon .icon-nested path {
  fill: #c0c2c4; }

.page__breadcrumb {
  color: #c0c2c4;
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip: ink;
}

.desktop .page__breadcrumb:hover {
  color: #303234;
}

.page__header {
  padding-left: 30px;
}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .page__breadcrumbs {
    height: 18px; /* Setting a height (the font size) for IE11 and flex */
  }
}

@media (max-width: 600px) {
  .page__main-area {
    width: 100%;

    border-radius: 0px;
    border-left: none;
    border-right: none;
    border-top: 1px solid #e7ecef;
    border-bottom: 1px solid #e7ecef;
  }
}

/*
 *
 * DISCLAIMER:
 *
 * Qualified selectors are needed because of the lack of support
 * from Backgrid.Paginator to be properly styled
 *
 */

.paginator ul {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center; }

.paginator li {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  -ms-flex-pack: center;
      justify-content: center; }

.paginator li:first-of-type,
  .paginator li:last-of-type {
  display: none; }

.paginator li:nth-of-type(2) {
  margin-right: 1em; }

.paginator li:nth-last-of-type(2) {
  margin-left: 1em; }

.paginator a {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  -ms-flex-pack: center;
      justify-content: center;
  text-align: center;
  width: 2em;
  color: #909294; }

.desktop .paginator a:hover,
  .paginator .active a {
  color: #303234; }

.paginator .active a {
  background-color: #f0f2f4;
  border-radius: 2px; }

.paginator li:nth-of-type(2) a,
  .paginator li:nth-last-of-type(2) a {
  width: auto;
  letter-spacing: 0.9px;
  text-transform: uppercase; }

.paginator li:nth-of-type(2) a::before,
  .paginator li:nth-last-of-type(2) a::after {
  content: '';
  height: 1em;
  width: 1em;
  background-size: 1em; }

.paginator li:nth-of-type(2) a::before {
  margin-right: 5px;
  background: url("../images/tables/prev.svg"); }

.paginator li:nth-last-of-type(2) a::after {
  margin-left: 5px;
  background-image: url("../images/tables/next.svg"); }

.desktop .paginator li:nth-of-type(2) a:hover::before {
  background-image: url("../images/tables/prev-hover.svg"); }

.desktop .paginator li:nth-last-of-type(2) a:hover::after {
  background-image: url("../images/tables/next-hover.svg"); }

.member-preview {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.member-preview__avatar{
  padding-right: 10px;
}

.member-preview__avatar .avatar{
  height: 28px;
  min-width: 28px;
  width: 28px;
}

.member-preview__text {
  max-width: calc(100% - 28px - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*

@styleguide
@title Progress bar

Defines a progress bar with an end circle. It takes the 100% of the width and could be used with red or green bars.

Use `progress-bar` class for the wrapper and `progress-bar__line` as a wrapper for the bars, with `--is-good` and `--is-bad` modifiers too
if needed. *NOTE* You should give an explicit width to the bars

<div class="progress-bar">
  <div class="progress-bar__line">
    <div class="progress-bar__line progress-bar__line--is-bad" style="width: 78%"></div>
  </div>
</div>

        <div class="progress-bar">
          <div class="progress-bar__line">
            <div class="progress-bar__line progress-bar__line--is-bad" style="width: 78%"></div>
          </div>
        </div>


<div class="progress-bar">
  <div class="progress-bar__line">
    <div class="progress-bar__line progress-bar__line--is-good" style="width: 40%"></div>
  </div>
</div>

        <div class="progress-bar">
          <div class="progress-bar__line">
            <div class="progress-bar__line progress-bar__line--is-good" style="width: 40%"></div>
          </div>
        </div>

Bars can be used together. In this case the precedence will be based in the DOM

<div class="progress-bar">
  <div class="progress-bar__line">
    <div class="progress-bar__line progress-bar__line--is-bad" style="width: 78%"></div>
    <div class="progress-bar__line progress-bar__line--is-good" style="width: 40%"></div>
  </div>
</div>

        <div class="progress-bar">
          <div class="progress-bar__line">
            <div class="progress-bar__line progress-bar__line--is-bad" style="width: 78%"></div>
            <div class="progress-bar__line progress-bar__line--is-good" style="width: 40%"></div>
          </div>
        </div>

<div class="progress-bar">
  <div class="progress-bar__line">
    <div class="progress-bar__line progress-bar__line--is-good" style="width: 51%"></div>
    <div class="progress-bar__line progress-bar__line--is-bad" style="width: 30%"></div>
  </div>
</div>

        <div class="progress-bar">
          <div class="progress-bar__line">
            <div class="progress-bar__line progress-bar__line--is-good" style="width: 51%"></div>
            <div class="progress-bar__line progress-bar__line--is-bad" style="width: 30%"></div>
          </div>
        </div>


Use `progress-bar__end` class to add a little circle to the end of the bar, the `--is-good` and `--is-bad` modifiers will define its color. By default, it's grey.


<div class="progress-bar">
  <div class="progress-bar__line">
    <div class="progress-bar__line progress-bar__line--is-bad" style="width: 78%"></div>
    <div class="progress-bar__line progress-bar__line--is-good" style="width: 40%"></div>
  </div>
  <div class="progress-bar__end  progress-bar__end--is-bad"></div>
</div>

        <div class="progress-bar">
          <div class="progress-bar__line">
            <div class="progress-bar__line progress-bar__line--is-bad" style="width: 78%"></div>
            <div class="progress-bar__line progress-bar__line--is-good" style="width: 40%"></div>
          </div>
          <div class="progress-bar__end  progress-bar__end--is-bad"></div>
        </div>


*/

.progress-bar {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

.progress-bar__line {
  height: 2px;
  overflow: hidden;
  position:relative;
  width: 75%;

  background-color: #ececec;
}

.progress-bar__line--is-bad {
  position: absolute;
  width: 0;

  background-color: #ec5830;
}

.progress-bar__line--is-good {
  position: absolute;
  width: 0;

  background-color: #46d46a;
}

.progress-bar__end {
  height: 0.4em;
  width: 0.4em;

  background-color: #ececec;
  border-radius: 14px;
}

.progress-bar__end--is-bad {
  background-color: #ec5830;
}

.progress-bar__end--is-good {
  background-color: #46d46a;
}

/*
@styleguide
@title Radio group

Sets a group of radio buttons with a label and an image. State is managed by the <input type="radio"> elements.

TEMPORARY: The images are not ready - This component will be modified once the images are available to use.

<div class="radio-group">
  <input type="radio" name="radio-group-example2" id="radio10" class="radio-group__radio" checked="checked"></input>
  <div class="radio-group__item__check"></div>
  <label for="radio10" class="radio-group__item">
    <div class="radio-group__item__icon">
      <svg class="icon icon-absolute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
        <line x1="18.91" y1="9.68" x2="6.1" y2="15.29"/>
        <circle cx="4.72" cy="16.03" r="1.43"/>
        <circle cx="20.28" cy="8.97" r="1.43"/>
        <line x1="18.66" y1="8.91" x2="3.35" y2="8.91"/>
      </svg>
    </div>
    <div class="radio-group__item__text">Amount</div>
  </label>

  <input type="radio" name="radio-group-example2" id="radio11" class="radio-group__radio" checked="checked"></input>
  <div class="radio-group__item__check"></div>
  <label for="radio11" class="radio-group__item">
    <div class="radio-group__item__icon">
      <svg class="icon icon-accumulated" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
      	<line x1="11.28" y1="13.6" x2="6.29" y2="15.55"/>
      	<circle cx="4.93" cy="16.04" r="1.43"/>
      	<circle cx="12.71" cy="13.14" r="1.43"/>
      	<line x1="19.17" y1="9.7" x2="14.11" y2="12.52"/>
      	<line x1="18.87" y1="8.9" x2="3.08" y2="8.9"/>
      	<circle cx="20.49" cy="8.96" r="1.43"/>
      </svg>
    </div>
    <div class="radio-group__item__text">Cumulative</div>
  </label>

  <input type="radio" name="radio-group-example2" id="radio12" class="radio-group__radio" checked="checked"></input>
  <div class="radio-group__item__check"></div>
  <label for="radio12" class="radio-group__item">
    <div class="radio-group__item__icon">
      <svg class="icon icon-average" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
      	<circle cx="20.27" cy="9.23" r="1.43"/>
      	<circle cx="12.5" cy="15.77" r="1.43"/>
      	<line x1="5.91" y1="10.25" x2="11.33" y2="14.94"/>
      	<line x1="13.75" y1="14.74" x2="19.05" y2="10.26"/>
      	<line x1="22.33" y1="12.68" x2="2.67" y2="12.68"/>
      	<circle cx="4.72" cy="9.24" r="1.43"/>
      </svg>
    </div>
    <div class="radio-group__item__text">Average</div>
  </label>
</div>

        <div class="radio-group">
          <input type="radio" name="radio-group-example2" id="radio10" class="radio-group__radio" checked="checked"></input>
          <div class="radio-group__item__check"></div>
          <label for="radio10" class="radio-group__item">
            <div class="radio-group__item__icon">
              <svg class="icon icon-absolute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
                <line x1="18.91" y1="9.68" x2="6.1" y2="15.29"/>
                <circle cx="4.72" cy="16.03" r="1.43"/>
                <circle cx="20.28" cy="8.97" r="1.43"/>
                <line x1="18.66" y1="8.91" x2="3.35" y2="8.91"/>
              </svg>
            </div>
            <div class="radio-group__item__text">Amount</div>
          </label>

          <input type="radio" name="radio-group-example2" id="radio11" class="radio-group__radio" checked="checked"></input>
          <div class="radio-group__item__check"></div>
          <label for="radio11" class="radio-group__item">
            <div class="radio-group__item__icon">
              <svg class="icon icon-accumulated" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
              	<line x1="11.28" y1="13.6" x2="6.29" y2="15.55"/>
              	<circle cx="4.93" cy="16.04" r="1.43"/>
              	<circle cx="12.71" cy="13.14" r="1.43"/>
              	<line x1="19.17" y1="9.7" x2="14.11" y2="12.52"/>
              	<line x1="18.87" y1="8.9" x2="3.08" y2="8.9"/>
              	<circle cx="20.49" cy="8.96" r="1.43"/>
              </svg>
            </div>
            <div class="radio-group__item__text">Cumulative</div>
          </label>

          <input type="radio" name="radio-group-example2" id="radio12" class="radio-group__radio" checked="checked"></input>
          <div class="radio-group__item__check"></div>
          <label for="radio12" class="radio-group__item">
            <div class="radio-group__item__icon">
              <svg class="icon icon-average" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
              	<circle cx="20.27" cy="9.23" r="1.43"/>
              	<circle cx="12.5" cy="15.77" r="1.43"/>
              	<line x1="5.91" y1="10.25" x2="11.33" y2="14.94"/>
              	<line x1="13.75" y1="14.74" x2="19.05" y2="10.26"/>
              	<line x1="22.33" y1="12.68" x2="2.67" y2="12.68"/>
              	<circle cx="4.72" cy="9.24" r="1.43"/>
              </svg>
            </div>
            <div class="radio-group__item__text">Average</div>
          </label>
        </div>
*/

.radio-group {
  -ms-flex-align: end;
      align-items: flex-end;
  display: -ms-flexbox;
  display: flex;
}

.radio-group__radio {
  display: none;
}

.radio-group__item {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-right: 30px;
}

.radio-group__item:last-of-type {
  margin-right: 5px;
}

.radio-group__item__text {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;

  color: #505254;
}

.radio-group__item__check {
  -ms-flex-align: center;
      align-items: center;
  border: 1px solid #dfe1e3;
  display: -ms-flexbox;
  display: flex;
  height: 15px;
  -ms-flex-pack: center;
      justify-content: center;
  margin-right: 7px;
  width: 15px;

  border-radius: 100%;
}

.radio-group__item__icon {

  max-width: 30px;
}

.radio-group__item__icon .icon-absolute circle,
    .radio-group__item__icon .icon-absolute line {
  fill: transparent;
  stroke: #505254;
  stroke-linejoin: round; }

.radio-group__item__icon .icon-absolute line:last-of-type {
  stroke-dasharray: 2.95 2.95; }

.radio-group__item__icon .icon-average path,
    .radio-group__item__icon .icon-average line,
    .radio-group__item__icon .icon-average circle {
  fill: transparent;
  stroke: #505254; }

.radio-group__item__icon .icon-average line:last-of-type {
  stroke-dasharray: 2.84 2.84; }

.radio-group__item__icon .icon-accumulated path,
    .radio-group__item__icon .icon-accumulated line,
    .radio-group__item__icon .icon-accumulated circle {
  fill: transparent;
  stroke: #505254; }

.radio-group__item__icon .icon-accumulated line:last-of-type {
  stroke-dasharray: 3.12 3.12; }

.radio-group__radio:checked + .radio-group__item__check {
  border: 1px solid #505254;
}

.radio-group__radio:checked + .radio-group__item__check:before {
  display: inline-block;
  height: 11px;
  width: 11px;

  background-color: #505254;
  border-radius: 100%;
  content: ' ';
}

.round-button {
  border: 1px solid #d9d9d9;


  border-radius: 40px;
  cursor: pointer;
  height: 36px;
  line-height: 50px;
  text-align: center;
  width: 36px;
}

.round-button .icon-spin {
  color: #181818;
  font-size: 28px;
  width: 28px;
  height: 28px;
  display: inline-block; }

.round-button .icon-spin-reverse {
  color: #181818;
  font-size: 28px;
  width: 28px;
  height: 28px;
  display: inline-block; }

.round-button--hidden {
  display: none; }

.round-button i {
  font-size: 24px;
  position: relative;
  top: -3px;
  z-index: 0;
  color: #505254; }

.round-button.selected {
  border-width: 1px;
  border-style: solid; }

.round-button.has-comments .icon-comments {
  left: 1px;
  top: -24px; }

.round-button .comments-number {
  border-radius: 20px;
  border: 2px solid #fff;
  display: inline-block;
  float: right;
  font-size: 10px;
  height: 20px;
  left: 6px;
  line-height: 20px;
  position: relative;
  top: -10px;
  width: 20px;
  color: #fff; }

/* The brand new round-buttons. Now with a 100% more of svg */

.round-button svg {
  width: 30px;
  height: 30px; }

/* Set Highcharts to be rendered in 250px */

@media only screen and (max-width: 767px) {
  .scorecard-table__representation {
    min-height: 250px; } }

/*
@styleguide

@title Scorecard tabs

Add some big tabs. Use is with the classes `scorecard-tabs`, `scorecard-tabs__tab` and `scorecard-tabs__tab--is-active` as follows:

<div class="scorecard-tabs" style="background-color: #f0f0f0">
  <div class="scorecard-tabs__tab">
    <div class="scorecard-tabs__tab__content">
      My tab
    </div>
  </div>
  <div class="scorecard-tabs__tab">
    <div class="scorecard-tabs__tab__content">
      My other tab
    </div>
  </div>
  <div class="scorecard-tabs__tab scorecard-tabs__tab--is-active" style="border-top-color: red;">
    <div class="scorecard-tabs__tab__content">
      Another tab
    </div>
  </div>
</div>

 */

.scorecard-tabs {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  background-color: white;
  width: 100%;
  border-top: 1px solid #e0e2e4;
  box-shadow: 0 8px 6px -6px gray;
  padding-left: 30px;
  padding-right: 30px;
  z-index: 300;
}

.scorecard-tabs__tab {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 165px;
      flex-basis: 165px;
  height: 30px;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 3px 0px 0 0;
  min-height: 30px;
  max-height: 30px;
  overflow: hidden;
  padding: 10px 10px;

  background-color: #fff;
  color: #909294;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;

  position: relative;
}

.scorecard-tabs__tab--is-active {
  border-bottom: 3px solid transparent;

  cursor: default;
}

.scorecard-tabs__tab:before {
  content : "";
  position: absolute;
  left    : 0;
  top  : 15%;
  width  : 1px;
  height  : 70%;  /* or 100px */
  border-left:1px solid #dfe0e6;
}

.scorecard-tabs__tab:after {
  content : "";
  position: absolute;
  right    : 0;
  top  : 15%;
  width  : 1px;
  height  : 70%;  /* or 100px */
  border-right:1px solid #dfe0e6;
}

.scorecard-tabs__tab:first-child:before,
.scorecard-tabs__tab:last-child:after {
  content : "";
  display: none;
}

.scorecard-tabs__tab:last-child {
  margin-right: 0;
}

.scorecard-tabs__tab__content {
  line-height: 15px;
  max-height: 30px;

  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media only screen and (max-width: 767px) {
  .scorecard-tabs {
    overflow-x: auto;
    padding: 0;
  }

  .scorecard-tabs__tab {
    -ms-flex-preferred-size: 100px;
        flex-basis: 100px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.ribbon {
  width: 100%;

  /* This makes the event trigger and the CSS fixing be applied faster in mobile devices by forcing GPU computation */
  transform: translate3d(0,0,0);
}

.ribbon--is-fixed {
  margin: 0;
  position: fixed;
  top: 0;
  z-index: 98;
}

/*
@styleguide

@title Scorecard Warning

Warning textbox for the Scorecard. It has support for displaying text + action.

<p class="scorecard-warning">
  You're viewing <strong class="scorecard-warning__highlight">Aug 21, 2016</strong> data
  <a href="#dashboard/ae9ced24-1d60-43d6-bccd-eef4285c893f" class="scorecard-warning__action">
    Back to today
  </a>
</p>

*/

.scorecard-warning {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  line-height: 18px;
  padding: 12px 0;
  right: 0;

  color: #fff;
  text-align: center;
}

.scorecard-warning__text {
  margin: 0 auto;
}

.scorecard-warning__highlight {
  font-family: 'Lato-BoldItalic', sans-serif;
  font-style: italic;
  font-weight: bold;
}

.scorecard-warning__action {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 14px;
  padding-left: 1em;
  position: absolute;
  right: 1.5em;

  color: inherit;
  cursor: pointer;
  font-style: normal;
}

.scorecard-warning__action:before {
  content: '';
  display: inline-block;
  height: 20px;
  margin-right: 5px;
  width: 20px;

  background-image: url('../images/time-machine/back_today_white.svg');
  background-size: 20px;
}

@media only screen and (max-width: 767px) {
  .scorecard-warning {
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
    width: calc(100% - 15px * 2);
  }

  .scorecard-warning__text {
    margin: 0;
  }

  .scorecard-warning__action {
    position: static;
  }
}

.search {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  width: 100%;

  background-color: #fff;
}

.search__prepend {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 1em;
  width: 1em;
}

.search__append {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 0.9em;
  width: 0.9em;
}

.search__prepend {

  -ms-flex-order: 0;

      order: 0;
}

.search__prepend .icon-search ellipse,
    .search__prepend .icon-search line {
  fill: transparent;
  stroke: #c0c2c4;
  stroke-width: 2px; }

.search__append {

  -ms-flex-order: 2;

      order: 2;
  visibility: hidden;

  cursor: pointer;
}

.search__append .icon-cancel line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 2px; }

.search__input {
  font-family: 'Lato-Regular', sans-serif;

  border: 0;
  -ms-flex: 1;
      flex: 1;
  font-size: 13px;
  margin: 0 5px;
  -ms-flex-order: 1;
      order: 1;

  color: #c0c2c4;
}

/*
  Placeholder related properties should be separated by browsers.
  More info: http://stackoverflow.com/a/2610741
*/

.search__input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #c0c2c4;
}

.search__input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #c0c2c4;
  opacity: 1;
}

.search__input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #c0c2c4;
  opacity: 1;
}

.search__input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #c0c2c4;
}

.search__input::-ms-clear {
  display: none;
}

.search__input:focus {
  outline: 0;
}

.search__input:focus ~ .search__append {
  visibility: visible;
}

.desktop .search:hover .search__prepend,
.search__input:focus ~ .search__append,
.search__input:focus ~ .search__prepend,
.search__input:focus {

  color: #303234;
}

.desktop .search:hover .search__prepend .icon-search ellipse,
    .desktop .search:hover .search__prepend .icon-search line,
    .search__input:focus ~ .search__append .icon-search ellipse,
    .search__input:focus ~ .search__append .icon-search line,
    .search__input:focus ~ .search__prepend .icon-search ellipse,
    .search__input:focus ~ .search__prepend .icon-search line,
    .search__input:focus .icon-search ellipse,
    .search__input:focus .icon-search line {
  fill: transparent;
  stroke: #303234;
  stroke-width: 2px; }

.desktop .search:hover .search__prepend .icon-cancel line, .search__input:focus ~ .search__append .icon-cancel line, .search__input:focus ~ .search__prepend .icon-cancel line, .search__input:focus .icon-cancel line {
  fill: transparent;
  stroke: #303234;
  stroke-width: 2px; }

@media only screen and (max-width: 767px){
  .search__input {
    margin: 0;
  }

  .search__append,
  .search__prepend {
    display: none;
  }
}

/*
@styleguide

@title Form

This component styles a container to have an arrow on the left side, letting the user
know that it is actionable and something is going to be displayed by clicking on it
(i.e. dropdown selector, datepicker, etc).

<div class="picker">
  <p class="js-selector-text">1 month</p>
</div>

    <div class="picker">
      <p class="js-selector-text">1 month</p>
    </div>

*/

.picker {
  font-family: 'Lato-Regular', sans-serif;

  -ms-flex-align: center;

      align-items: center;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;

  background: #fff url('../images/picker/arrow_down.svg') no-repeat 95% 50%;
  background-size: 9px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.picker--is-unfolded {
  background: #fff url('../images/picker/arrow_up.svg') no-repeat 95% 40%;
}

.picker__placeholder {
  color: #c0c2c4;
}

.picker__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 95%;
}

.picker__search {
  border-bottom: 1px solid #e0e2e4;

  padding: 12px;
}

.picker--has-label {
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 44px;
  padding-bottom: 3px;
  padding-top: 3px;
}

.picker__label {
  font-family: 'Lato-Regular', sans-serif;

  color: #909294;
  font-size: 11px;
  line-height: 1.8;
}

.picker--is-expanded {
  background-color: #F0F2F4;
}

.picker--is-wrong{
  border: 1px solid #db0046;
}

/* Round icons should be sightly unaligned to compensate its weight compared to the rest of elements*/

.sidebar-section {
  font-family: 'Lato-Regular', sans-serif;

  border-bottom: 1px solid #e0e2e4;
  font-size: 16px;
  -ms-flex-negative: 0;
      flex-shrink: 0;

  color: #505254;
}

.sidebar-section--is-scrollable { 
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;

  /*
   * Hack for Firefox
   * http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
   */
  min-height: 0px;
  height: 100%;

  border: 0;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar-section--is-overlayable {
  overflow-y: visible;
}

.sidebar-section--is-large {
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.sidebar-section--is-report {
  display: block; /* Hack for solve the element overlapping in Safari 9 and iOS 9  */
  height: 100%;
}

.sidebar-section--has-padding{
  padding: 0 10px;
}

.sidebar-section__items {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 0.8em 18px;
}

.sidebar-section__items__item {
  width: 264px;
}

@media only screen and (max-width: 767px) {
  .sidebar-section .sidebar-section {
    padding: 0; /* Remove padding for inner sections */
  }

  .sidebar-section__items__item {
    width: auto;
    -ms-flex-positive: 1;
        flex-grow: 1;
  }
}

.sidebar-header {
  padding-top: 4em;
  padding-bottom: 2em;
  position: relative;

  color: #303234;
  text-align: center;
}

.sidebar-header__button {
  transition: opacity 200ms linear;
}

.sidebar-header--is-in-report .sidebar-header__button--is-details {
  opacity: 0;
  visibility: hidden;
}

.sidebar-header__button--is-left,
.sidebar-header__button--is-right {
  position: absolute;
  top: 1em;
}

.sidebar-header__button--is-left {
  left: 15px;
}

.sidebar-header__button--is-right {
  right: 15px;
}

.sidebar-header__button--is-options {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}

.sidebar-header__button--is-options .icon-menu {
  stroke-width: 1.5px; }

.sidebar-header__button--is-options .icon-menu line {
  fill: none;
  stroke: #505254; }

/*
 * Title
 */

.sidebar-header__title {
  font-family: 'Lato-Black', sans-serif;
  font-weight: 900;

  display: inline-block;
  font-size: 28px;
  line-height: 1em;
  max-width: 70%;
  opacity: 1;
  text-align: center;
  word-break: break-word;

  transition: all 200ms linear;
}

.sidebar-header--is-in-report .sidebar-header__title {
  opacity: 0;
  visibility: hidden;
}

.sidebar-header__title__button {
  display: inline-block;
  vertical-align: bottom;
}

.sidebar-header__title__button--with-default-appeareance {
  
  height: 1em;
  width: 1em;

  color :#505254;
  cursor: pointer;
  stroke: #505254;
  fill: transparent;
}

.sidebar-header__title__button--with-default-appeareance .icon-info circle,
    .sidebar-header__title__button--with-default-appeareance .icon-info line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.sidebar-header__title__temporality {
  display: block;
}

/*
 * Button rack
 */

.sidebar-header__sidebar-navigation-buttons {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  right: 15px;
  top: 1em;
}

.sidebar-header__sidebar-navigation-buttons .sidebar-header__button:not(:last-child) {
  margin-right: 5px;
}

.sidebar-header__button--is-show-comments {
  opacity: 0;

  transition: opacity 200ms linear, visibility 200ms linear;
  visibility: hidden;
}

.sidebar--is-displayed ~ .sidebar .sidebar-header__button--is-show-comments {
  opacity: 0;
  visibility: hidden;
}

.sidebar-header__button--is-show-comments {
  opacity: 1;
  cursor: pointer;
  visibility: visible;
}

/* For strange resolutions bigger than a phone but smaller than an iPad */

@media only screen and (max-width: 974px) {
  .sidebar-header__button--is-details,
  .sidebar-header__button--is-show-comments {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .sidebar-header__title {
    width: 70%;
  }
}

.sidebar-tabs {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0.8em;
  -ms-flex-pack: distribute;
      justify-content: space-around;

  /* Repeats code from sidebar's mixin "separated-section", but since this component collapses a border with
  this one I prefer to place the border logic here, next to its 'hack' */
  border-bottom: 1px solid #e0e2e4;
}

.sidebar-tabs__tab {
  font-family: 'Lato-Regular', sans-serif;

  border-bottom: 2px solid transparent;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: -1px; /* A negative number to overlap the .sidebar-tabs's */
  padding: 0 0.3em calc(1em - 2px);

  color: #909294;
  cursor: pointer;
  text-transform: uppercase;
}

.storytelling--is-image{
  max-height: 580px;
  padding: 10px 0;
  text-align: center;
}

.storytelling--has-header{
  border-top: 1px solid #dfe1e3;
}

.storytelling--is-image:only-child {
  padding: 0;
}

.storytelling--is-text {
  min-height: 2.5em;
  padding-top: 12px;
  position: relative;

  border-radius: 5px;
  background-color: #f0f2f4;
}

.storytelling--with-images {
  background-color: #fff;
}

.storytelling__header {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  height: 51px;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.storytelling__header--is-columnable {
  -ms-flex-direction: column;
      flex-direction: column;
}

.storytelling__header__title {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.storytelling__header__title--has-button-menu {
  width: calc(100% - 30px);
}

.storytelling__actions {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.storytelling__actions__versions {
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.storytelling__header__button-with-icon {

  border-bottom: 1px solid #dfe1e3;
  margin: 0 15px 10px 0;
  padding: 0 0 8px;
}

.storytelling__header__button-with-icon .icon-calendar path,
    .storytelling__header__button-with-icon .icon-calendar circle,
    .storytelling__header__button-with-icon .icon-calendar line {
  fill: none;
  stroke: #505254;
  stroke-width: 1.5px; }

.storytelling__header__button-with-icon .icon {
  height: 19px;
  margin-right: 10px;
  width: 19px;

  border-radius: 0;
}

.storytelling__button {

  margin-bottom: 5px;
}

.storytelling__button .icon-more {
  height: 100%;
  width: 100%; }

.storytelling__button .icon-more ellipse {
  fill: #909294; }

.desktop .storytelling__button:hover .icon-more, .storytelling__button--is-active .icon-more {
  height: 100%;
  width: 100%; }

.desktop .storytelling__button:hover .icon-more ellipse, .storytelling__button--is-active .icon-more ellipse {
  fill: #303234; }

.storytelling__body {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
}

.storytelling__image {
  max-height: inherit;
  max-width: 100%;
}

.storytelling__icon {

  -ms-flex-align: start;

      align-items: flex-start;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-pack: center;
      justify-content: center;
  min-width: 50px;
}

.storytelling__icon .icon-quotes {
  width: 30px;
  height: auto; }

.storytelling__text {
  font-family: 'Lato-Regular', sans-serif;

  -ms-flex-positive: 1;

      flex-grow: 1;
  font-size: 16px;
  line-height: 1.5;
  max-width: calc(100% - 33px);
  padding: 6px 0 18px 18px;

  color: #303234;
  word-break: break-word;
}

.storytelling__text p,
  .storytelling__text ul,
  .storytelling__text ol {
  padding-bottom: 0.5em; }

.storytelling__text p:last-of-type {
  padding-bottom: 0; }

.storytelling__text ul,
  .storytelling__text ol {
  list-style-position: inside; }

.storytelling__text ul {
  list-style-type: disc; }

.storytelling__text strong,
  .storytelling__text b {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold; }

.storytelling__text em {
  font-style: italic; }

.storytelling__text i {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic; }

.storytelling__text i b,
  .storytelling__text b i {
  font-family: 'Lato-BoldItalic', sans-serif;
  font-style: italic;
  font-weight: bold; }

.storytelling__text h1 {
  font-size: 1.4em; }

.storytelling__text a {
  color: inherit;
  text-decoration: underline; }

.storytelling__text--with-icon {
  max-width: calc(100% - 65px);
  padding: 6px 0 18px;
}

.storytelling__text--with-images {
  max-width: initial;
}

.storytelling__input {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  border: none;
  border-bottom: 1px solid #dfe1e3;
  font-size: 16px;
  margin: 0 0 10px 15px;
  padding-bottom: 9px;
  -ms-flex-positive: 1;
      flex-grow: 1;

  background: transparent;
  color: #303234;
}

/* Hack for Firefox */

@-moz-document url-prefix() {
  .storytelling__input {
    padding-bottom: 8px;
  }
}

.storytelling__input:focus {
  box-shadow: none;
  outline: none;
}

.storytelling__input:-ms-input-placeholder {
  color: #c0c2c4;
}

.storytelling__input::placeholder {
  color: #c0c2c4;
}

.storytelling__editor {
  outline: 0;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: auto; /* Fixes a bug for ios webview about contenteditables */

}

/* The editor's placeholder is displayed as an :after pseudo-element */

.storytelling__editor:after {
  font-family: 'Lato-Light', sans-serif;

  white-space: normal;

  color: #c0c0c0;
  font-style: normal;
}

.storytelling__editor__footer {
  -ms-flex-align: center;
      align-items: center;
  border-top: 1px solid #dfe1e3;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
  padding-top: 10px;
}

.storytelling__footer__button-with-icon {

  padding-left: 24px;
  border-left: 1px solid #dfe1e3;
}

.storytelling__footer__button-with-icon .icon-image path,
    .storytelling__footer__button-with-icon .icon-image rect,
    .storytelling__footer__button-with-icon .icon-image circle,
    .storytelling__footer__button-with-icon .icon-image line {
  fill: none;
  stroke: #505254;
  stroke-width: 1px; }

.storytelling__footer__button-with-icon .icon {
  height: 19px;
  margin-right: 10px;
  width: 19px;

  border-radius: 0;
}

.storytelling__info {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic;

  display: inline-block;
  font-size: 14px;
  margin-left: auto;

  color: #909294;
  text-align: right;
}

.storytelling__action {
  position: absolute;
  right: 10px;
  top: 10px;
}

/* Medium editor insert plugin overrides */

.medium-insert-buttons {
  display: none !important;
}

.medium-insert-images-grid figure:only-child {
  width: auto;
}

.medium-insert-images-grid figure:only-child img {
  max-width: auto;
}

.medium-insert-image-active{
  outline: none;
}

.storytelling--is-image .medium-insert-images:only-child {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 1720px) {
  .storytelling--is-50 .storytelling__editor.medium-editor-placeholder {
    min-height: 3em; /* Placeholder breaks into 2 lines */
  }
}

@media (max-width: 1049px) {
  .storytelling--is-50 .storytelling__editor.medium-editor-placeholder {
    min-height: 4em; /* Placeholder breaks into 3 lines */
  }

  .storytelling--is-50 .storytelling__info {
    display: block;

    text-align: left;
  }
}

@media (max-width: 860px) {
  .storytelling--is-50 .storytelling__editor.medium-editor-placeholder {
    min-height: 6em; /* Placeholder breaks into 4 lines */
  }
}

@media (max-width: 920px) {
  .storytelling--is-100 .storytelling__editor.medium-editor-placeholder {
    min-height: 3em; /* Placeholder breaks into 2 lines */
  }
}

@media only screen and (max-width: 767px) {
  .storytelling--is-text {
    border-radius: 0;
  }

  .storytelling--with-images {
    padding: 0 15px;
  }

  .storytelling__editor__footer .button {
    min-width: 80px; /* Prevents buttons to break into 2 lines */
  }

  .storytelling__info {
    display: block;

    text-align: left;
  }

}

@media (max-width: 767px) {
  .storytelling--is-50 .storytelling__editor.medium-editor-placeholder,
  .storytelling--is-100 .storytelling__editor.medium-editor-placeholder {
    min-height: 3em; /* Placeholder breaks into 2 lines */
  }
}

@media (max-width: 502px) {
  .storytelling--is-50 .storytelling__editor.medium-editor-placeholder,
  .storytelling--is-100 .storytelling__editor.medium-editor-placeholder {
    min-height: 4em; /* Placeholder breaks into 3 lines */
  }
}

@media (max-width: 407px) {
  .storytelling--is-50 .storytelling__editor.medium-editor-placeholder,
  .storytelling--is-100 .storytelling__editor.medium-editor-placeholder {
    min-height: 6em; /* Placeholder breaks into multiple lines */
  }

  .storytelling__editor__footer .button {
    min-width: 75px; /* Prevents buttons to break into 2 lines */
  }
}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .storytelling__icon {
    height: 30px;
  }

  .storytelling__header {
    height: $storytelling-header-min-height;
  }
}

/*
@styleguide

@title Storytelling Help

It styles the text that serves as storytelling help message. It's designed for working nicely with the Overlay component.

There are 3 main elements:

* `storytelling-help__title`: Styles the title
* `storytelling-help__body`: Styles the text for the body message
* `storytelling-help__label`: Styles special pieces of text that can be accompanied by icons

<div class="js-overlay overlay" style="margin-top: 10px; position: static; display: inline-block;">
  <div class="storytelling-help" style="box-sizing: content-box">
    <h1 class="storytelling-help__title">
      Lorem ipsum dolor sit amet
    </h1>
    <p class="storytelling-help__body">
      Lorem ipsum dolor sit amet, <strong data-label-icon="time-machine" class="storytelling-help__label u-bold">commodo</strong> adipiscing elit.
    </p>
  </div>
</div>

*/

.storytelling-help {
  font-size: 12px;
  width: 280px;
  padding: 2em 1.5em;

}

.storytelling-help__title {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  font-size: 14px;
  margin-bottom: 10px;

  color: #505254;
  text-align: center;
}

.storytelling-help__body {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 12px;
  line-height: 1.4;

  color: #909294;
  text-align: center;
}

.storytelling-help__label {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: bottom;
}

.storytelling-help__label::before {
  content: '';
  display: inline-block;
  height: 16px;
  margin-right: 2px;
  width: 16px;

  background-size: 16px;
}

.storytelling-help__label[data-label-icon="time-machine"]::before {
  background-image: url('../images/time-machine/time-machine-gray.svg');
}

.storytelling-help__link {
  color: #909294;
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  .storytelling-help {
    padding: 2em 1.5em 1em;
    width: 240px;
  }
}

/*
@styleguide

@title Styled Select

Used for styling selects on dashboard tables

<div class="styled-select">
  <select>
    <option value="Queen Cersei">Queen Cersei</option>
    <option value="Walder Frey">Walder Frey</option>
    <option value="King Joffrey">King Joffrey</option>
    <option value="The Mountain">The Mountain</option>
    <option value="The Hound">The Hound</option>
    <option value="Meryn Trant">Meryn Trant</option>
  </select>
  <i class="icon-arrow-down select-arrow"></i>
</div>
 */

.styled-select {
  font-family: 'Lato-Regular', sans-serif;

  border: 1px solid #cecece;
  border-radius: 6px;
  font-size: 13px;
  width: 95%;

  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
}

.styled-select.first {
  padding: 7px 0; }

.styled-select.last {
  margin-left: 3px; }

.styled-select .select-arrow {
  position: relative;
  top: 7px;
  font-size: 15px;
  vertical-align: middle; }

.styled-select select {
  width: 75%;

  /*
     * Not supported by Autoprefixer
     * https://github.com/postcss/autoprefixer#why-doesnt-autoprefixer-support-appearance
     *
     * */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: #000; }

@media only screen and (max-width: 767px) {
  .styled-select select {
    padding-left: 3px;
    width: calc(75% - 3px); } }

.styled-select select:focus {
  outline: 0; }

.styled-select select.main {
  padding-left: 7px; }

.styled-select select.secondary {
  margin-top: 8px; }

.grid__row__cell:nth-child(2n) .summary__footer {
  min-height: 32px;

  border-left: 1px solid #e0e2e4;
  border-right: 1px solid #e0e2e4;
}

.summary__title {
  color: #909294;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.summary__title--is-acronym {
  text-transform: none;
}

.summary__title__selector {
  padding: 0 15px;
  cursor: pointer;
}

.summary__title__selector--is-folded {
  background: #fff url('../images/summary/arrow_down.svg') no-repeat 100%;
}

.summary__title__selector--is-unfolded {
  background: #fff url('../images/summary/arrow_up.svg') no-repeat 100%;
}

.summary__header {
  padding-bottom: 10px;
}

.summary__value--is-number {
  font-family: 'Lato-Light', sans-serif;

  color: #505254;
  font-size: 34px;
}

.summary__value--is-variation-chart {
  font-size: 24px;
}

.summary__value--is-progress-bar {
  margin: 0 auto;
  width: 60%;
}

.summary__value--is-context {
  color: #909294;
  font-size: 14px;
}

.summary__description {
  font-size: 12px;

  color: #909294;
}

.summary__description strong { /* Injected via internationalization files */
  font-family: 'Lato-Regular', sans-serif;

  color: #505254;
  font-weight: normal;
}

.summary__footer .summary__title {
  margin-bottom: 6px;
}

.summary__list {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

.summary__list__item {

  font-size: 12px;
}

.summary__list__item .icon-arrow polyline {
  stroke-width: 3px;
  fill: transparent;
  stroke: #505254; }

.summary__list__item:not(:first-child) {
  margin-left: 30px;
}

.summary__list__item[data-trigger=greater] .icon {
  transform: rotate(180deg);
}

.summary__list__item--is-triggered[data-trigger=greater],
.summary__list__item--is-triggered[data-trigger=less][data-downward=true] {

  color: #46d46a;
}

.summary__list__item--is-triggered[data-trigger=greater] .icon-arrow polyline, .summary__list__item--is-triggered[data-trigger=less][data-downward=true] .icon-arrow polyline {
  stroke-width: 3px;
  fill: transparent;
  stroke: #46d46a; }

.summary__list__item--is-triggered[data-trigger=less],
.summary__list__item--is-triggered[data-trigger=greater][data-downward=true] {

  color: #ec5830;
}

.summary__list__item--is-triggered[data-trigger=less] .icon-arrow polyline, .summary__list__item--is-triggered[data-trigger=greater][data-downward=true] .icon-arrow polyline {
  stroke-width: 3px;
  fill: transparent;
  stroke: #ec5830; }

.summary__list__item .icon {
  display: inline;

  width: 10px;
}

@media only screen and (max-width: 767px) {
  .summary__value--is-number {
    font-size: 6vw;
  }

  .summary__value--is-context {
    font-size: 12px;
  }

  .summary__list {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }

  .summary__list__item:not(:first-child) {
    margin-left: 0;
  }

}

.switch__container {
  display:inline-table;
}

.switch__tweaked-input__check {
  visibility: hidden;
  position: absolute;
}

.switch__tweaked-input{
  display: inline-table;
  vertical-align: middle;
  border: 1px solid #909090;
  border-radius: 15px;
  height: 10px;
  width: 10px;
}

.switch__label {
  font-size: 15px;
  padding-left: 4px;
}

.switch__tweaked-input__indicator {
  display: block;
  background-color: white;
  height: 15px;
  width: 15px;
  border: 4px solid white;
  border-radius: 15px;
}

.switch__tweaked-input__check:checked + .switch__tweaked-input__indicator {
  background-color: #38a4dd;
}

.tab-elements {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.tab-elements__element {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 30px;
  min-width: 0; /* Hack for allowing text-ellipsis inside */
}

.tab-elements__element--is-1col {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.tab-elements__element--is-2col {
  -ms-flex-preferred-size: calc(50% - 30px / 2);
      flex-basis: calc(50% - 30px / 2);
}

.tab-elements__element--is-2col:empty {
  display: none;
}

.tab-elements__element__chart {
  margin-top: 40px;
}

@media only screen and (max-width: 767px) {
  .tab-elements__element--is-2col {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.table {
  table-layout: fixed;
  width: 100%;
}

.table__row:nth-child(odd) {
  background-clip: padding-box;
  background-color: #fafafa;
}

.table__cell {
  border-bottom: 1px solid #e0e2e4;
  font-size: 13px;
  padding: 0.8em 0;
  width: 100%;
  word-wrap: break-word;
  word-break: break-word;

  color: #303234;
}

.table__cell:first-of-type {
  padding-left: 5px;
}

.table__cell--is-header {
 padding: 0.8em 0;
}

.table__cell--is-column-selector-button {
  padding: 12px 0;
  width: 60px;

  text-align: right;
  vertical-align: middle;
}

.table__cell__metric-value {
  display: block;
}

.table__cell__column-selector-button {

  border: 0 none;
  display: block;
  float: right;
  height: 27px;
  margin: -7px 0 -7px 10px;
  padding: 0 7px;
  width: 20px;

  background-color: transparent;
}

.table__cell__column-selector-button .icon-more {
  height: 100%;
  width: 100%; }

.table__cell__column-selector-button .icon-more ellipse {
  fill: #303234; }

.desktop .table__cell__column-selector-button:hover,
.table__cell__column-selector-button--is-active {
  background-color: #F0F2F4;
  border-radius: 4px;
  cursor: pointer;
  outline: 0 none transparent;
}

.table__cell:not(.table__cell--is-header) {
  padding-left: 15px;
}

.table__cell:not(.table__cell--is-header):first-of-type {
  padding-left: 20px;
}

/*
 * Table cell can be narrower, but only if it has a sibling rendered
 */

.table__cell--is-narrower {
  width: 100%;
}

.table__cell.renderable ~ .table__cell--is-narrower {
  width: 60%;
}

.table__cell__column-title {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  text-align: left;

  color: #303234;
}

.table__cell__column-title::before {
  content: '';
  height: 10px;
  margin-right: 5px;
  min-width: 10px;
  width: 10px;

  background-size: 10px;
}

.table__cell__column-title--is-ascending::before {
  background-image: url('../images/tables/asc.svg');
}

.table__cell__column-title--is-descending::before {
  background-image: url('../images/tables/desc.svg');
}

.table__cell__column-title__text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table__cell__image {
  border-radius: 2px;
  max-height: 50px;
  max-width: 50px;

  cursor: pointer;
}

.desktop .table__cell__image:hover {
  opacity: 0.75;
}

.table__cell__bar-wrapper {
  float: right;
  position: relative;
  margin-left: 30%;
  width: 70%;
}

.table:not(.table--has-bars) .table__cell__bar-wrapper__bar{
  width: 0 !important; /* !important to play along with the width set by js */
}

.table__cell__bar-wrapper__bar {
  display: block;
  position: absolute;
  right: 0;
  height: 2px;
  /* width: Defined in JS */

  transition: width 500ms ease-in-out;
}

.table__link {
  color: #303234;
}

.desktop .table__link:hover {
  text-decoration: underline;
}

.table__segmentation {
  border-bottom: 1px solid #dfe1e3;
}

.table__paginator {
  border-bottom: 1px solid #e0e2e4;
  font-size: 11px;
  padding: 0.5em 0;
}

.table .table__cell:not(.renderable) {
  display: none;
}

.sidebar .table__cell__column-selector-button {
  margin-right: 10px;
}

.tab-elements__element--is-2col .table__cell__bar-wrapper {
  margin-left: 20%;
  width: 80%;
}

@media only screen and (max-width: 767px) {
  .table__cell:last-of-type {
    padding-right: 15px;
  }

  .table__cell__bar-wrapper,
  .tab-elements__element--is-2col .table__cell__bar-wrapper {
    margin-left: 0%;
    width: 100%;
  }

  .table__segmentation {
    padding-left: 15px;
    width: calc(100% - 15px);
  }
}

/*
@styleguide
@title Temporality

TODO: choose a proper name for this component

Add a pretty line with temporality info and links to your elements. You only need a `.data-block-footer` wrapper and inside it:
  - Two `data-block-footer__temporality`, the second one with `data-block-footer__has-separator
  - Two `data-block-footer__link`, both with `data-block-footer__has-separator` amd the second one with `data-block-footer__link--is-nested`

NOTE: The `temporality__item--duration` is being personalized in the personalization styles

<div class="data-block-footer">
  <span class="data-block-footer__temporality" style="color: red"">
    Jan 3000
  </span>
  <span class="data-block-footer__temporality data-block-footer__has-separator">
    Millenial
  </span>
    <a class="data-block-footer__link data-block-footer__has-separator js-link-to-details">
      <span class="data-block-footer__link__info">Main page</span>
    </a>
    <a class="data-block-footer__link data-block-footer__link--is-nested data-block-footer__has-separator js-link-to-tab">
      <span class="data-block-footer__link__nested">Comments section</span>
    </a>
</div>

        <div class="data-block-footer">
          <span class="data-block-footer__temporality" style="color: red">
            Jan 3000
          </span>
          <span class="data-block-footer__temporality data-block-footer__has-separator">
            Millenial
          </span>
            <a class="data-block-footer__link data-block-footer__has-separator js-link-to-details">
              <span class="data-block-footer__link__info">Main page</span>
            </a>
            <a class="data-block-footer__link data-block-footer__link--is-nested data-block-footer__has-separator js-link-to-tab">
              <span class="data-block-footer__link__nested">Comments section</span>
            </a>
        </div>

*/

.data-block-footer {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0;
  width: 100%;
}

.data-block-footer:empty {
  padding: 0;
}

.data-block-footer--is-sidebar {
  -ms-flex-pack: center;
      justify-content: center;
}

.data-block-footer__temporality {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  -ms-flex-align: center;

      align-items: center;
  color: #909090;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.8;
  text-transform: uppercase;
}

.data-block-footer__has-separator:not(:first-child):before {
  padding: 0 5px;

  content: "\000B7"; /* equals to '·' HTML Entity */
}

.data-block-footer__link {
  font-family: 'Lato-Regular', sans-serif;

  -ms-flex-negative: 0;

      flex-shrink: 0;

  color: #c0c2c4;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.2px;
  line-height: 1.8;
}

.data-block-footer__link--is-nested {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

.data-block-footer__link__info {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.data-block-footer__link__nested {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}

.desktop .data-block-footer__link__info:hover,
.desktop .data-block-footer__link__nested:hover {
  text-decoration: underline;
}

.toggle-menu__title {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}

.toggle-menu__text {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 11px;
  line-height: 1.2;
  min-width: 0;
  padding: 0.8em 0;

  color: #505254;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.toggle-menu__button {

  border: 0;
  margin-top: 0.1em; /* block alignment with .toggle-menu__title */
  margin-left: 5px;
  padding: 0;

  background-color: transparent;
}

.toggle-menu__button .icon-arrow polyline {
  stroke-width: 3px;
  fill: transparent;
  stroke: #505254; }

.toggle-menu .icon {
  max-height: 10px;
  max-width: 10px;
}

.toggle-menu__button:focus {
  outline: 0;
}

.toggle-menu__block-options {
  max-height: 150px;
  overflow-y: auto;
  width: 225px;
}

.toggle-menu__inline-options {
  display: -ms-inline-flexbox;
  display: inline-flex; /* If you change this the behaviour of the JS component changes and it may only show a dropdown */
}

.toggle-menu__inline-option {
  display: -ms-inline-flexbox;
  display: inline-flex; /* If you change this the behaviour of the JS component changes and it may only show a dropdown */
}

.toggle-menu__text--is-empty {
  min-height: 13.2px; /* Makes empty options as high as no-empty options */
  min-width: 75px;
}

.toggle-menu__inline-option:not(:last-child)::after {
  content: '';
  margin: 10px 12px;
  width: 1px;
  background-color: #dfe1e3;
}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .toggle-menu__text {
    height: 11px;
  }
}

.toolbar {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  position: relative;
  width: 100%;
}

.toolbar__title {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-order: 2;
      order: 2;
  text-align: center;
  width: 100%;
}

.toolbar__title__text {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  font-size: 20px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.toolbar__actions {
  display: -ms-flexbox;
  display: flex;
  z-index: 10; /* Raise them above title */
}

.toolbar__actions .toolbar__action:not(:first-of-type) {
  margin-left: 10px;
}

.toolbar__actions--left {
  margin-left: 20px;
  -ms-flex-order: 1;
      order: 1;
}

.toolbar__actions--right {
  margin-right: 20px;
  -ms-flex-order: 3;
      order: 3;
  text-align: right;
}

.toolbar__action {
  cursor: pointer;
  display: block;
}

.toolbar__action--disabled {
  cursor: default;
  pointer-events: none;
}

.toolbar__action--icon {

  height: 30px;
  width: 30px;
}

.toolbar__action--icon .icon-gear path {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.toolbar__action--icon .icon-gear rect {
  fill: transparent; }

.toolbar__action--icon .icon-bell path {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px;
  transition: all 0.1s ease-out; }

.toolbar__action--text {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 16px;

  color: #505254;
}

.toolbar__action--text.toolbar__action--disabled {
  color: #cecece;
}

.toolbar__action--icon.toolbar__action--disabled .icon-gear path {
  fill: transparent;
  stroke: #cecece;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px; }

.toolbar__action--icon.toolbar__action--disabled .icon-gear rect {
  fill: transparent; }

.toolbar__action--icon.toolbar__action--disabled .icon-bell path {
  fill: transparent;
  stroke: #cecece;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px;
  transition: all 0.1s ease-out; }

.tooltip {
  font-size: 12px;
  padding: 10px;
  width: 130px;

  color: #909294;
  cursor: auto;
}

.tooltip__separator {
  margin: 0.5em auto;
  border-top-color: #dfe1e3;
}

.tooltip__separator:last-child {
  display: none;
}

.tooltip strong { /* Injected via internationalization files */
  font-family: 'Lato-Regular', sans-serif;

  color: #505254;
  font-weight: normal;
}

/*
@styleguide

@title Touchable link

Touchable links are the _round_button_ v2.0. They only are lacking the support to have a number in its corner.

To use a touchable link, use the class `touchable-link`. They are (right now) only prepared to work with a `svg` inside them

        <div class="touchable-link">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
            <circle class="cls-1" cx="20.82" cy="12.75" r="1.65"/>
          </svg>
        </div>

<div class="touchable-link">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
    <defs>
      <style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}</style>
    </defs>
    <line class="cls-1" x1="12.12" y1="17.57" x2="9.98" y2="14.03"/>
    <line class="cls-1" x1="16.55" y1="7.9" x2="13.81" y2="17.31"/>
    <line class="cls-1" x1="19.99" y1="11.28" x2="17.87" y2="7.54"/>
    <polyline class="cls-1" points="4.95 10.04 2.53 12.47 4.99 14.93"/>
    <line class="cls-1" x1="7.43" y1="12.47" x2="2.53" y2="12.47"/>
    <circle class="cls-1" cx="9.09" cy="12.49" r="1.65"/>
    <circle class="cls-1" cx="13.22" cy="18.88" r="1.65"/>
    <circle class="cls-1" cx="17.01" cy="6.12" r="1.65"/>
    <circle class="cls-1" cx="20.82" cy="12.75" r="1.65"/>
  </svg>
</div>
*/

.touchable-link {
  border: 1px solid #e0e2e4;
  box-sizing: content-box;
  display: block;
  height: 27px;
  padding: 4px;
  width: 27px;

  border-radius: 45px;
  cursor: pointer;
}

.touchable-link--borderless {
  border: 0;
}

.touchable-link--is-active,
.desktop .touchable-link:hover {
  background-color: #f0f2f4;
}

.touchable-link--has-smaller-icon {
  height: 23px;
  padding: 6px;
  width: 23px;
}

.tree {
  margin: 5px;

  cursor: default;
}

.tree .tree {
  margin: 0;
}

.tree__item {
  font-family: 'Lato-Regular', sans-serif;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 30px;

  border-radius: 3px;
  color: #303234;
  font-size: 14px;
}

.desktop .tree__hoverable:hover {
  background-color: #f0f2f4;
  color: #303234;
  cursor: pointer;
}

.tree__item--is-folded {
  display: none;
}

.tree__icon {

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 17px;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 6.5px;
  width: 17px;

  border-radius: 3px;
}

.tree__icon .icon-dashboard line,
    .tree__icon .icon-dashboard circle {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.tree__icon .icon-folder path {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.tree__icon .icon-nested {
  height: auto;
  width: 11px; }

.tree__icon .icon-nested path {
  fill: #505254; }

.tree__icon--is-rotated {
  transform: rotate(90deg);
}

.tree__icon--is-hidden {
  display: none;
}

.tree__icon:not(.tree__icon--is-hidden) + .tree__item__content {
  max-width: calc(100% - 30px);
}

.tree__item__content {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;

  border-radius: 3px;
}

.tree__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree__children {
  margin-left: 30px;
}

/*
@styleguide
@title Variation

Represents a variation. It should be an element with the `variation` class.
Inside of it the actual value is shown with the class variation__value


<div class="variation" data-value="+6.44">
  <span class="variation__value">6.44 %</span>
  KPI Average variation
</div>
<div class="variation" data-value="-6.44">
  <span class="variation__value">6.44 %</span>
  KPI Average variation
</div>
<div class="variation" data-value="">
  <span class="variation__value--is-unavailable">
      Data not available
  </span>
</div>

<div class="variation">
  <span class="variation__value">
      Value
  </span>
</div>

        <div class="variation">
          <span class="variation__value">
              Value
          </span>
        </div>

The color will change depending on the data-value attribute.

<div class="variation" data-value="+6.44">
  <span class="variation__value">6.44 %</span>
  KPI Average variation
</div>

        <div class="variation" data-value="+6.44">
          <span class="variation__value">6.44 %</span>
          KPI Average variation
        </div>

<div class="variation" data-value="-6.44">
  <span class="variation__value">6.44 %</span>
  KPI Average variation
</div>

        <div class="variation" data-value="-6.44">
          <span class="variation__value">6.44 %</span>
          KPI Average variation
        </div>


*/

.variation {
  padding-right: 2.5em;
  padding-left: 28px;

  background-image: url("../images/variations/equal.svg");
  background-position: 3.5% 45%;
  background-repeat: no-repeat;
  background-size: 11px;
}

.variation[data-value^="-"] {
  background-image: url("../images/variations/down.svg");
}

.variation[data-value^="-"] .variation__value {
  color: $default-bad-color; }

.variation[data-value^="+"] {
  background-image: url("../images/variations/up.svg");
}

.variation[data-value^="+"] .variation__value {
  color: $default-good-color; }

.variation__value {
  padding-right: 0.5em;
}

.variation__value--is-unavailable {
  color: #909294;
}

.variation-chart {
  display: -ms-flexbox;
  display: flex;

  -ms-flex-align: center;

      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}

.variation-chart__center-indicator {
  width: 0.5em;
  height: 0.5em;

  border-radius: 13px;
  border-width: calc(2px + 0.02em);
  border-style: solid;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  z-index: 10;
}

.variation-chart__axis {
  width: 30%;
  height: 2px;

  margin-left: -1px;
  z-index: 1;
}

.variation-chart__axis:first-child .variation-chart__bar {
  float: right;
}

.variation-chart__bar {
  height: 2px;
}

.variation-chart__axis {
  background-color: #ececec;
}

.variation-chart__center-indicator {
  background-color: #fff;
  border-color: #ececec;
}

.variation-chart--is-going-good .variation-chart__center-indicator {
  border-color: #46d46a;
}

.variation-chart--is-going-bad .variation-chart__center-indicator {
  border-color: #ec5830;
}

.variation-chart--is-going-bad .variation-chart__bar {
  background-color: #ec5830;
}

.variation-chart--is-going-good .variation-chart__bar {
  background-color: #46d46a;
}

/* Overrides for when the element is deprecated */

.deprecated-version .variation-chart__bar {
  display: none;
}

.deprecated-version .variation-chart .variation-chart__center-indicator {
  border-color: #ececec;
}

/* Icons */

/* Layouts */

.l-master-detail {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  margin: 0 auto;
  max-height: 100%;
  width: 66.67%;
}

.l-master-detail__master {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  margin-right: 30px;
  width: calc(30% - 30px);

  color: #505254;
}

.l-master-detail__detail  {
  margin-left: auto;
  width: 70%;
}

.l-master-detail__container {
  border: 1px solid #e7ecef;
  border-radius: 5px;

  background-color: #fff;
}

.l-master-detail__section {
  border-top: 1px solid #e7ecef;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 0px 30px;
  padding: 25px 0;
}

.l-master-detail__section--has-no-border-top {
  border-top: 0;
}

.l-master-detail__section--has-no-padding-bottom {
  padding-bottom: 0;
}

.l-master-detail__section:first-of-type {
  border-top: 0;
}

.l-master-detail__section__column {
  width: 100%;
}

.l-master-detail__section__column--is-half-width {
  width: calc(50% - 30px / 2);
}

.l-master-detail__section__column--is-half-width:last-of-type {
  margin-left: 15px;
}

.l-master-detail__section__column--is-half-width:first-of-type {
  margin-left: 0;
  margin-right: 15px;
}

.l-master-detail__section__column--has-no-separator {
  border-top: 0;
  padding: 5px 0 25px;
}

.l-master-detail__section__row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
}

.l-master-detail__section__row:not(:first-of-type) {
  padding-top: 25px;
}

.l-master-detail__section__right-button {
  margin-left: auto;
  padding: 0;
}

.l-master-detail__section__right-button__button {
  min-width: 20px;
  padding: 0 0 0 5px;
}

.l-master-detail__section__label {
  padding-top: 25px;
}

.l-master-detail__icon .icon-delete line,
    .l-master-detail__icon .icon-delete path {
  stroke-width: 1.5px;
  fill: transparent;
  stroke: #505254; }

.l-master-detail__icon .icon-plus {
  height: auto;
  width: 14px; }

.l-master-detail__icon .icon-plus line {
  fill: none;
  stroke: #505254;
  stroke-width: $l-master-detail-icon-stroke; }

.l-master-detail__icon:not(.l-master-detail__icon--has-custom-size) {
  width: 19px;
  height: 19px;
}

.desktop .l-master-detail__icon:hover {
  cursor: pointer;
}

.l-master-detail__button-text {
  padding-left: 5px;
}

.l-master-detail__spinner {

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%;
}

.l-master-detail__spinner .loader-inner.ball-pulse > div {
  height: 8px;
  width: 8px;
  background-color: #db0046; }

.l-master-detail__spinner--with-padding {
  padding: 30px;
}

.l-master-detail .overlay{
  max-width: 400px;
}

.l-master-detail .picker__options {
  max-height: 200px;
  min-width: 135px;
  overflow-y: auto;
}

/* Scorecard styles */

body {
  width: 100%;
}

/* Disables selection of elements by long pressing */

body:not(.desktop) {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.ribbon--is-fixed ~ .pb-content.scorecard-wrapper {
  margin-top: 42px;
}

.pb-content.scorecard-wrapper {
  min-height: calc(100vh - 10px - $app-header-height - 2.5em);

  margin-top: 140px;
}

.dashboard-tabla {
  font-family: 'Lato-Regular', sans-serif;

  padding: 86px 30px 30px;
  margin-top: 86px;
}

.hidden {
  display: none;
}

.right {
  float: right;
}

@media only screen and (max-width: 767px) {
  .dashboard-tabla {
    margin-top: 0;
    padding: 0 0 15px;
  }

  .pb-content.scorecard-wrapper {
    margin-top: 50px;
    min-height: calc(100vh - 10px - 50px - 60px);
  }
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }


  .tab-elements__element--is-2col,
  .tab-elements__element--is-1col {
    page-break-inside: avoid;
    page-break-before: auto;
    page-break-after: auto;
  }

  .tab-elements {
    display: block;
  }

  .tab-elements__element--is-2col {
    width: calc(50% - 16px);
    float: left;
  }

  .tab-elements__element--is-2col{
    margin-right: 16px;
  }

  .tab-elements__element--is-1col {
    width: 99%;
  }

  .print-layout__header {
    position: fixed;
    top: 0;
    width: 100%;
  }

  .print-layout__header-space{
    height: 70px;
  }

  .pb-content.scorecard-wrapper,
  .col-tab-content {
    padding: 0;
  }
}

/*
  @styleguide

  @title Sidebar

  Define the styles of a sidebar, allowing two sidebar to play with each other.

  To have the slide working is needed to set the `sidebar` class and toggle `sidebar--is-displayed` for the sliding
  effect

  Also is possible to get a second sidebar on the left of the first one. For that matter, the second sidebar must
  have the classes `sidebar` and `sidebar--report` applied to it, and toggle the same as the other.

  The contents inside the sidebar need to be inside a `sidebar__content`, that sets properly the height to its parent's

  With this three classes everything will work. Optional settings are:

  - `sidebar--has-another-sidebar-in-its-left` applied in the right-most sidebar when the other appears will remove
  the box-shadow between sidebars, being replaced by a regular border.
*/

/* $sidebar-width + $sidebar-report-width */

.sidebar {
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  width: 500px;
  z-index: 500;

  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;

  transition: transform .4s, right .4s, box-shadow .4s;
  transform: translate3d(100%, 0, 0);
}

.sidebar--is-displayed {
  transform: translate3d(0, 0, 0);
}

.sidebar--report {
  width: 655px;

  z-index: 499;
}

.sidebar--has-another-sidebar-in-its-left {
  border-left: 2px solid #e0e2e4;
}

.sidebar--report {
  box-shadow: 0 0 0 0 transparent;
}

.sidebar--is-displayed + .sidebar--report {
  right: 500px;
}

.sidebar--is-displayed + .sidebar--report,
.sidebar--is-displayed.sidebar--report {
  box-shadow: -10px 0 15px 0 rgba(0, 0, 0, .2);
}

.sidebar__content {
  height: 100vh;
}

.sidebar__shadow {
  height: 100vh;
  left: 0;
  top: 0;
  width: 100%;

  background-color: #000;
  opacity: 0;
  position: fixed;
  transition: opacity .4s, visibility .4s;
  visibility: hidden;
  z-index: 498;
}

.sidebar__shadow--is-active {
  visibility: visible;
  opacity: 0.3;
  overflow: hidden;
}

.sidebar .sidebar-header.sidebar-section {
  border: 0;
}

.sidebar__report-section {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.sidebar__report-section--has-bottom-space {
  margin-bottom: 40px;
}

.sidebar__report-section--has-separator {
  border-top: 1px solid #e0e2e4;
}

.sidebar__report-section:empty {
  margin: 0;
}

.sidebar__report--section:first-child {
  margin-top: 0;
}

.sidebar__report-section .table__segmentation {
  padding: 0 20px;
  width: calc(100% - 20px * 2);
}

@media only screen and (max-width: 1155px) {
  .sidebar {
    width: 374px;
  }

  .sidebar--report {
    width: 600px;
  }

  .sidebar--is-displayed + .sidebar--report {
    right: 374px;
  }
}

@media only screen and (max-width: 767px) {
  .sidebar {
    width: 100%;
  }

  .sidebar--report {
    width: 100%;
  }
}

.scorecard-tab.hidden-tab {
  display: none; }

.col-tab-content {
  min-height: calc(50vh - 30px);
  font-family: 'Lato-Regular', sans-serif;

  padding: 30px 30px 0;

  background-color: #fff;
}

@media only screen and (max-width: 320px) {
  .col-tab-content {
    min-height: calc(65vh - 30px); } }

.col-tab-content .tab-title {
  font-family: 'Lato-Light', sans-serif;
  display: inline-block;
  font-size: 26px;
  max-width: 97%;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #454545; }

.col-tab-content .tab-title::first-letter {
  text-transform: uppercase; }

.col-tab-content .empty-content {
  min-height: 50vh; }

.col-tab-content .empty-content__icon {
  font-size: 180px; }

.col-tab-content .empty-content__title {
  font-size: 20px;
  margin: -40px 0 10px; }

.col-tab-content .empty-content__subtitle {
  font-size: 18px; }

.col-tab-content--empty-scorecard .empty-content {
  min-height: calc(50vh - 30px); }

@media only screen and (max-width: 320px) {
  .col-tab-content--empty-scorecard .empty-content {
    min-height: calc(65vh - 30px); } }

@media only screen and (max-width: 767px) {
  .col-tab-content {
    padding: 30px 0 0;
  }
  .col-tab-content .tab-title {
    display: block;
    padding: 10px 0;
    text-align: center;
    width: 100%; }
}

@media only screen and (max-width: 320px) {
  .col-tab-content .empty-content {
    min-height: 40vh; }
  .col-tab-content .empty-content__icon {
    font-size: 150px; }
  .col-tab-content .empty-content__title {
    margin-top: -35px; }
}

.view-container-storytelling {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  border-radius: 5px;
  background-color: #f0f2f4;
}

.view-container-storytelling p {
  font-family: 'Lato-Light', sans-serif;
  font-size: 16px;
  word-break: break-word; }

.view-container-storytelling .view-text-container:after {
  content: '';
  display: block;
  clear: both; }

.view-text-container {
  padding: 18px 34px 18px 0;
  -ms-flex: auto;
      flex: auto;
}

.view-text {
  font-family: 'Lato-Regular', sans-serif;

  line-height: 1.5;
}

.view-text p,
  .view-text ul,
  .view-text ol {
  padding-bottom: 0.5em; }

.view-text p:last-of-type {
  padding-bottom: 0; }

.view-text ul,
  .view-text ol {
  list-style-position: inside; }

.view-text ul {
  list-style-type: disc; }

.view-text strong,
  .view-text b {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold; }

.view-text em {
  font-style: italic; }

.view-text i {
  font-family: 'Lato-Italic', sans-serif;
  font-style: italic; }

.view-text i b,
  .view-text b i {
  font-family: 'Lato-BoldItalic', sans-serif;
  font-style: italic;
  font-weight: bold; }

.view-text h1 {
  font-size: 1.4em; }

.view-text a {
  color: inherit;
  text-decoration: underline; }

.view-text a {
  text-decoration: none; }

.view-text-container__icon {

  padding: 12px 10px 0;
}

.view-text-container__icon .icon-quotes {
  width: 30px;
  height: auto; }

.panel__header__item {
  border-bottom: 1px solid #dfe1e3;
  position: relative;
  border-top: 1px solid #dfe1e3;

  padding: 4.5px 0;

  color: #909294;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
}

.panel__header__item.panel__name {
  text-align: left; }

.panel__header__item:nth-child(n+4) .header-content {
  text-align: center; }

.panel__header__item .header-content {
  text-align: center;
  vertical-align: middle; }

.panel__header__item .header-content {
  width: 70%;
  line-height: 14px; }

.panel__header__item .header-content__clarification {
  color: #303234; }

.panel__header__item .temporality__item--timestamp {
  word-spacing: normal; }

.panel__header__item--without_top_border {
  border-top: 0;
}

.panel__header__item--flag {
  stroke: #909294;
}

.desktop .panel__header__item--flag:hover {
  cursor: default;
}

.panel__header__item__abrr {
  text-transform: none;
}

.panel__header__trend-container {
  width: calc(96% + 10px);
  margin: auto;
  overflow: hidden;
}

.panel__header__trend-container text tspan {
  font-family: 'Lato-Light', sans-serif;
  color: #181818;
  text-transform: none;
}

@media only screen and (max-width: 767px) {
  .panel__request-action--hidden ~ .panel__name {
    padding-left: 15px;
  }
}

.folder-title {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;
  border-bottom: 1px solid #dfe1e3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  height: 30px;

  font-size: 11px;
  color: #303234;
  letter-spacing: 1px;
  line-height: 30px;
  text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
  .folder-title {
    padding-left: 15px;
  }
}

/**
 * Define the colors for a complete scorecard item.
 * It receives a map of $options and requires the next keys:
 *   - value    : To colorize primary elements
 *   - context  : To colorize secondary elements
 *   - drillback: To colorize elements with drillback
 *   - positive : To colorize elements that have a positive state
 *   - negative : To colorize elements that have a negative state
 */

.kpi-in-dashboard {
  position: relative;
  border-bottom: 1px solid #dfe1e3;
  vertical-align: middle;
  height: 3em;
}

.kpi-in-dashboard text {
  fill: #303234; }

.kpi-in-dashboard .name {
  color: #303234; }

.kpi-in-dashboard .custom-variation-units {
  color: #909090; }

.kpi-in-dashboard .time-left {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #909090; }

.kpi-in-dashboard .state .positive {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #46D46A; }

.kpi-in-dashboard .state .negative {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #EC5830; }

.kpi-in-dashboard .state .not-started {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #909090; }

.kpi-in-dashboard .no-variation {
  font-family: 'Lato-Light', sans-serif;
  font-size: 11px;
  color: #303234; }

.kpi-in-dashboard .numeric-value {
  font-family: 'Lato-Light', sans-serif;
  font-size: 18px;
  color: #303234; }

.kpi-in-dashboard .numeric-context {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #909090; }

.kpi-in-dashboard .column-value--has-drillback {
  cursor: pointer; }

.kpi-in-dashboard .column-value--has-drillback .numeric-value, .kpi-in-dashboard .column-value--has-drillback .numeric-context, .kpi-in-dashboard .column-value--has-drillback .icon-drillback {
  color: #153258; }

.kpi-in-dashboard .comments .icon-comments path {
  stroke-width: 1px;
  fill: transparent;
  stroke: #505254; }

/* Hack to have a pretty button while the new scorecard items are being baked */

.kpi-in-dashboard .comments .icon-menu {
  stroke-width: 1px; }

.kpi-in-dashboard .comments .icon-menu line {
  fill: none;
  stroke: #505254; }

.kpi-in-dashboard .no-variation-label,
  .kpi-in-dashboard .no-trend-label {
  font-family: 'Lato-Light', sans-serif;
  font-size: 10px; }

.kpi-in-dashboard td {
  position: relative;
  vertical-align: middle;
  height: 3em;
  text-align: center; }

.kpi-in-dashboard td:nth-child(n+5) > * {
  text-align: center;
  vertical-align: middle;
  margin-left: auto; }

.kpi-in-dashboard td.panel__state {
  padding: 0 10px;
  text-align: center; }

@media only screen and (max-width: 767px) {
  .kpi-in-dashboard td.panel__state {
    padding: 0; } }

.kpi-in-dashboard td.panel__name img {
  max-width: 100%;
  max-height: 25px;
  margin-left: 0;
  margin-top: 0;
  width: 100%; }

.kpi-in-dashboard td.panel__name.imaged {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center; }

.kpi-in-dashboard td.panel__name:not(.imaged) {
  font-size: 14px; }

.kpi-in-dashboard td .panel__kpi-name-wrapper {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex; }

.kpi-in-dashboard td .panel__kpi-name-wrapper:not(:only-child) .panel__kpi-name {
  max-height: 17px; }

.kpi-in-dashboard td .panel__kpi-name-wrapper:only-child .panel__kpi-name {
  max-height: 48px; }

.kpi-in-dashboard td .panel__kpi-link-wrapper {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%; }

.kpi-in-dashboard td .panel__kpi-button {
  height: 1em;
  padding-left: 5px;
  width: 1em;
  color: #505254;
  cursor: pointer;
  stroke: #505254;
  fill: transparent; }

.kpi-in-dashboard td .panel__kpi-button .icon-info circle,
    .kpi-in-dashboard td .panel__kpi-button .icon-info line {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1.5px; }

.kpi-in-dashboard td .variation-widget {
  width: 100%; }

.kpi-in-dashboard td .variation-widget .variation-chart {
  height: 20px;
  line-height: 20px; }

.kpi-in-dashboard td .variation-widget .custom-variation-units {
  font-size: 12px; }

.kpi-in-dashboard td .variation-widget .minivariation-wrapper-empty p {
  font-size: 11pt;
  padding-left: 15px;
  width: 100px; }

.kpi-in-dashboard td.panel__trend:not(.panel__trend--has-no-trend) {
  vertical-align: bottom; }

.kpi-in-dashboard td.panel__trend:not(.panel__trend--has-no-trend) .awesome-trend > svg {
  width: 100%; }

.kpi-in-dashboard td.panel__trend:not(.panel__trend--has-no-trend) .awesome-trend circle {
  stroke-width: 2px;
  fill: #fff; }

.kpi-in-dashboard td.panel__trend:not(.panel__trend--has-no-trend) .awesome-trend .line {
  stroke-width: 2; }

.kpi-in-dashboard td.panel__trend:not(.panel__trend--has-no-trend) .awesome-trend .area {
  stroke-width: 0; }

.kpi-in-dashboard td.panel__trend:not(.panel__trend--has-no-trend) .awesome-trend text tspan {
  font-family: 'Lato-Light', sans-serif;
  color: #181818; }

.kpi-in-dashboard td.panel__trend:not(.panel__trend--has-no-trend) .trend-chart-container {
  height: 47px;
  margin: 0 auto;
  padding-top: 3px;
  width: 96%; }

.kpi-in-dashboard td.panel__trend:not(.panel__trend--has-no-trend) .trend-chart-container--has-fake-trend {
  filter: blur(3px); }

.kpi-in-dashboard td .trend-chart__text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center; }

.kpi-in-dashboard td .trend-chart__text .numeric-context {
  margin-top: 0; }

.kpi-in-dashboard td.panel__goal .state span {
  display: inline-block;
  vertical-align: text-top; }

/*
   * Vertical alignment across several cells
   * ========================================
   */

.kpi-in-dashboard td.panel__value:not(.panel__value--has-only-value),
  .kpi-in-dashboard td.panel__variations:not(.panel__variations--has-only-value),
  .kpi-in-dashboard td.panel__goal:not(.panel__goal--has-info-message) {
  height: calc(3em - 8px);
  line-height: 1em;
  padding: 8px 0 0;
  vertical-align: top; }

.kpi-in-dashboard td .numeric-value {
  white-space: nowrap; }

.kpi-in-dashboard td .numeric-context {
  margin-top: 3px; }

.kpi-in-dashboard td .column-value--has-drillback {
  display: table-row; }

.kpi-in-dashboard td .column-value__drillback {
  display: table-cell; }

.kpi-in-dashboard td .icon-drillback {
  height: 15px;
  padding-left: 2px;
  display: table-cell; }

@media (max-width: 1200px) {
  .kpi-in-dashboard td .icon-drillback {
    display: none; } }

.kpi-in-dashboard td.panel__variations--has-only-value .numeric-context {
  margin-top: 0; }

.kpi-in-dashboard td .variation-chart,
  .kpi-in-dashboard td .progress-bar {
  font-size: 10px; }

.kpi-in-dashboard td .variation-chart {
  margin-top: 0.8em; }

.kpi-in-dashboard td .progress-bar {
  margin: 1em auto 0em; }

.kpi-in-dashboard td.panel__goal--has-info-message .numeric-context {
  margin: 0; }

.kpi-in-dashboard td .panel__goal__progress-bar {
  width: 60%; }

/* =================== */

@media only screen and (max-width: 767px) {
  .kpi-in-dashboard td:last-of-type > * {
    margin: 0 15px 0 auto; }
  .kpi-in-dashboard td .panel__kpi-link-wrapper {
    display: none; }
  .kpi-in-dashboard td .panel__kpi-button {
    display: none; } }

.kpi-in-dashboard.deprecated-version {
  position: relative;
  border-bottom: 1px solid #dfe1e3;
  vertical-align: middle;
  height: 3em; }

.kpi-in-dashboard.deprecated-version .name {
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .custom-variation-units {
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .time-left {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .state .positive {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .state .negative {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .state .not-started {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .no-variation {
  font-family: 'Lato-Light', sans-serif;
  font-size: 11px;
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .numeric-value {
  font-family: 'Lato-Light', sans-serif;
  font-size: 18px;
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .numeric-context {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 11px;
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .column-value--has-drillback {
  cursor: pointer; }

.kpi-in-dashboard.deprecated-version .column-value--has-drillback .numeric-value, .kpi-in-dashboard.deprecated-version .column-value--has-drillback .numeric-context, .kpi-in-dashboard.deprecated-version .column-value--has-drillback .icon-drillback {
  color: #b5b5b5; }

.kpi-in-dashboard.deprecated-version .comments .icon-comments path {
  stroke-width: 1px;
  fill: transparent;
  stroke: #505254; }

/* Hack to have a pretty button while the new scorecard items are being baked */

.kpi-in-dashboard.deprecated-version .comments .icon-menu {
  stroke-width: 1px; }

.kpi-in-dashboard.deprecated-version .comments .icon-menu line {
  fill: none;
  stroke: #505254; }

.kpi-in-dashboard.deprecated-version text {
  fill: #b5b5b5; }

.kpi-in-dashboard.deprecated-version img {
  opacity: 0.5; }

.kpi-in-dashboard.empty-collection {
  height: 0; }

.scorecard-panel.as2col .as1col {
  display: none; }

.scorecard-panel.as1col .as2col {
  display: none; }

.scorecard-panel.as1col .weather, .scorecard-panel.as2col .weather {
  max-width: 25px;
  vertical-align: middle;
  width: 100%; }

.scorecard-panel .table-scorecard {
  table-layout: fixed;
  width: 100%; }

.scorecard-panel .scorecard-folder.empty,
  .scorecard-panel .pie-panel.empty {
  display: none; }

.scorecard-panel .panel__value {
  text-align: left; }

.scorecard-panel .panel__name--hidden, .scorecard-panel .panel__state--hidden, .scorecard-panel .panel__goal--hidden, .scorecard-panel .panel__trend--hidden, .scorecard-panel .panel__variation--hidden, .scorecard-panel .panel__comments--hidden {
  display: none; }

.scorecard-panel__selector {
  border-bottom: 1px solid #dfe1e3;
}

@media only screen and (max-width: 767px) {
  .scorecard-panel__selector {
    padding-left: 15px;
  }
}

.table-header > th {
  position: relative;

  height: 4em;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;

  color: #909090;
  text-transform: uppercase;

  font-size: 16px;

  -webkit-appearance: none;
}

@media only screen and (max-width: 767px) {
  .table-header > th {
    width: 50%; } }

.table-header > th:nth-child(1) {
  text-align: left;
  font-size: 13px; }

.table-header > th:not(:first-child).segmented {
  border-left: 1px solid #ECECEC; }

.table-header > th.first {
  padding: 7px 0; }

.table-header > th .header-content {
  text-align: center;
  vertical-align: middle;
  display: -ms-flexbox;
  display: flex;
  line-height: 16px; }

.table-header > th .title {
  margin: auto;
  vertical-align: middle;
  width: 70%;
  font-size: 10px; }

.table-header > th .arrows {
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  display: inline-block;
  margin: auto 3px;
  min-width: 28px;
  width: 28px;
  background-image: linear-gradient(to bottom, #fff, #F7F7F7); }

.table-header > th .arrows i {
  display: inline-block;
  font-size: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  width: 16px; }

.table-header > th .arrows .is-active {
  color: #000; }

.table-header > th .finder {
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  display: -ms-flexbox;
  display: flex;
  line-height: 34px; }

.table-header > th .finder .finder-box {
  margin-left: 10px;
  width: 95%;
  border: 0; }

.table-header > th .finder .finder-box:focus {
  outline: 0; }

.table-header > th .finder .clear-finder {
  padding-right: 10px; }

/*.scorecard-table {

  .data-table,
  .tabla-scorecard,
  .header-table {
    width: 100%;
  }

  .header-table {
    th {
      vertical-align: top;
    }
  }

  .table-name {
    cursor: pointer;
  }

  tbody > tr {
    &.zebra {
      background-color: #f4f4f4;
    }

    &:not(.in-page) {
      display: none;
    }

    &:hover {
      background-color: transparent;

      .bubble-content {
        visibility: visible;
        z-index: 3;
      }

      .bubble {
        opacity: 0.8;
        z-index: 2;
      }
    }
  }

  tbody > tr td {
    @include scorecard-table-row-basics();

    border-bottom: 1px solid $border_color;
  }

  tfoot > tr  td {
    @include scorecard-table-row-basics();

    border-bottom: 1px solid $border_color;
    border-top: 1px solid #909090;
    font-weight: bold;
  }
}

.scorecard-table__pagination {
  float: right;
  margin-top: 8px;

  @media (--all-phones) {
    float: none;
    width: 100%;
  }*/

/* The following classes are defined by the plugin which
   * perform the pagination: https://github.com/gbirke/jquery_pagination
   * |
   * |
   * V
   */

/*.pagination {
    display: flex;
    justify-content: center;

    span,
    a {
      border-radius: 5px;
      border: 1px solid #d9d9d9;
      margin-left: 8px;
      padding: 10px;

      color: black;
    }

    .current.prev,
    .current.next {
      color: #d9d9d9;
    }

    .prev,
    .next {
      background-image: linear-gradient(to bottom, $white, #f7f7f7);
    }

    .prev {
      margin-left: 0;
    }

    i {
      position:relative;
      top: 3px;

      color: inherit;
    }

    .prev i {
      padding-right: 15px;
    }

    .next i {
      padding-left: 15px;
    }
  } /* End the block of classes defined by jquery_pagination */

/*}*/

.jqvmap-container {
  height: 300px;
  margin: auto;
  max-width: 620px;
  z-index: 1;
}

.chart-preview .jqvmap-container {
  height: 260px;
  padding-bottom: 0;
}

.chart-preview .jqvmap-scale {
  display: none;
}

.lightbox-content div#chart-preview-box.jvector-box {
  min-height: 280px;
}

.jqvmap-label,
.jqvmap-zoomin,
.jqvmap-zoomout {
  font-size: 9pt;
  position: absolute;
}

.jqvmap-label {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 12px;
  padding: 3px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #fff;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  display: none;
  font-size: 12px;
  padding: 5px;
  z-index: 1102;
}

.jqvmap-zoomin,
.jqvmap-zoomout {
  display: none;
}

.app-content .irrecoverable-error {
  overflow-y: auto;
  position: absolute;

  /* Fixed position breaks input caret location when the iOS soft keyboard appears */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Lato-Light', sans-serif;
  border-radius: 12px;
  border: 0;
  margin: 0 auto;
  vertical-align: middle;
  max-height: 95%;
  max-width: 95%;
  min-width: 600px;
  width: 60%;
  background-color: #fff;
  opacity: 0.95; }

.app-content .irrecoverable-error .round-button {
  border-radius: 60px;
  height: 60px;
  line-height: 70px;
  width: 60px; }

.app-content .irrecoverable-error .icon-download,
    .app-content .irrecoverable-error .icon-preload,
    .app-content .irrecoverable-error .icon-dashboard {
  font-size: 40px;
  position: relative;
  top: 0;
  z-index: 0; }

.app-content .irrecoverable-error .icon-download {
  color: #fff; }

.app-content .irrecoverable-error .preload-wrapper-icon {
  margin: 5px auto;
  text-align: center;
  border: 1px transparent; }

.app-content .irrecoverable-error .complete-wrapper-icon {
  margin: 0 auto;
  text-align: center;
  border: 1px transparent; }

.app-content .irrecoverable-error .complete-wrapper-icon .icon-complete {
  font-size: 40px;
  position: relative;
  top: 0px;
  z-index: 0;
  color: #38a4dd; }

@media only screen and (max-width: 767px) {
  .app-content .irrecoverable-error {
    max-width: 90%;
    min-width: 0;
    width: 90%; } }

.app-content .irrecoverable-error .icon-negative {
  font-size: 200px;
  height: 1em;
  color: #38a4dd; }

.app-content .is-primary-action {
  float: right;
  padding: 10px 60px; }

@media only screen and (max-width: 767px) {
  .app-content .is-primary-action {
    float: none; } }

.irrecoverable-error__wrapper {
  background-color: #f7f5f5;
  width: 100%;
  height: 100vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}

/* Modules */

.m-aidmep-logo {
  background-image: url('../images/logo-aidmep.png');
  height: 60px;
  width: 250px;
}

.m-aidmep-form-section {
  margin-top: 40px;
}

.m-aidmep-button {
  border: 0;

  background-color: #507fcb;
  color: #fff;
}

@media only screen and (max-width: 767px) {
  .m-aidmep-logo {
    height: 55px;
    width: 230px;
  }

  .m-aidmep-form-section {
    margin-top: 25px;
  }

}

.m-app-header {
  font-family: 'Lato-Regular', sans-serif;

  display: -ms-flexbox;

  display: flex;
  -ms-flex-align: center;
      align-items: center;

  padding-left: 30px;
  padding-right: 30px;

  background-color: #fff;
}

.m-app-header__picker--with-border{
  position: relative;
}

.m-app-header__button {

  -ms-flex-item-align: center;

      -ms-grid-row-align: center;

      align-self: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 12.5px;

  background-color: #fff;
}

.m-app-header__button .icon-edit path,
    .m-app-header__button .icon-edit polygon,
    .m-app-header__button .icon-edit polyline {
  stroke-width: 1px;
  fill: transparent;
  stroke: #505254; }

.m-app-header__button .icon-past path,
    .m-app-header__button .icon-past circle,
    .m-app-header__button .icon-past line,
    .m-app-header__button .icon-past polyline {
  fill: transparent;
  stroke: #505254;
  stroke-width: 1px; }

.m-app-header__button .icon-export path, .m-app-header__button .icon-export polyline, .m-app-header__button .icon-export line {
  fill: transparent;
  stroke: #505254;
  stroke-linecap: round;
  stroke-linejoin: round; }

.m-app-header__button .icon-logout line,
    .m-app-header__button .icon-logout path {
  fill: transparent;
  stroke: #303234;
  stroke-width: 1.5px; }

.m-app-header__button .loader-inner.ball-pulse > div {
  height: 8px;
  width: 8px;
  background-color: #db0046; }

.m-app-header__picker-container {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  margin-bottom: 12.5px;
}

.m-app-header__picker {
  min-width: 200px;
}

.m-app-header__picker .overlay--is-right {
  right: -240px;
}

.m-app-header__picker--is-centered {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.m-app-header__picker--with-border {
  border-left: 3px solid transparent;
  border-bottom-left-radius: 7px;
  border-top-left-radius: 7px;

  margin-right: 12.5px;
  margin-top: 12.5px;
}

.m-app-header__picker--with-border:last-child {
  margin-right: 0;
}

.m-app-header__picker--with-border .picker__label,
.m-app-header__picker--with-border .picker__name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-app-header__picker--with-border .input {
  border-left: none;
}

.m-app-header__combined-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;

  background-color: #f0f0f0;
}

.m-app-header__combined-container__content {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .m-app-header__picker--with-border .picker__label,
  .m-app-header__picker--with-border .picker__name {
    width: inherit;
  }
}

@media only screen and (min-width: 767px) {
  .m-app-header__picker-container {
    /* MS Edge wtf */
    min-width: 1px;
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-negative:1;
        flex-shrink:1;
  }

  .m-app-header__picker--with-border {
    -ms-flex-preferred-size: 197px;
        flex-basis: 197px;
  }
  
  .m-app-header__picker-container--scrollable {
    -ms-flex-pack: start;
        justify-content: flex-start;
  }

  .m-app-header__picker-container--scrollable .m-value-selector__picker {
    height: 4px;
    min-height: auto;
  }

  .m-app-header__picker-container--scrollable .picker--is-unfolded {
    visibility: hidden;
  }

  .m-app-header__picker-container--scrollable .picker {
    -ms-flex-pack: center;
        justify-content: center;
  }

  .m-app-header__picker-container--scrollable .input + .input {
    margin-top: 0;
  }

  .m-app-header__picker-container--scrollable .m-value-selector {
    max-width: 550px;
    width: auto;
  }

  .m-app-header__picker-container .overlay--is-center {
    margin-top: 5px;
    top: auto;
  }

  .m-app-header .breadcrumbs__breadcrumb__label {
    padding-top: 4px;
  }
}

@media only screen and (max-width: 767px) {
  .m-app-header {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: auto;
    min-height: 30px;
    padding: 10px 15px;
  }

  .m-app-header__button {

    height: 30px;
    width: 30px;
  }

  .m-app-header__button .icon-bell path {
    fill: transparent;
    stroke: #303234;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5px;
    transition: all 0.1s ease-out; }

  .m-app-header__button .icon-menu-navigator {
    height: 100%;
    width: 100%; }

  .m-app-header__button .icon-menu-navigator ellipse {
    fill: #303234; }

  .m-app-header__button .icon-past path,
    .m-app-header__button .icon-past circle,
    .m-app-header__button .icon-past line,
    .m-app-header__button .icon-past polyline {
    fill: transparent;
    stroke: #303234;
    stroke-width: 1.5px; }

  .m-app-header__picker {
    margin: 0 auto;
    -ms-flex-order: 5;
        order: 5;
    width: 100%;
  }

  .m-app-header__picker-container {
    -ms-flex-pack: start;
        justify-content: flex-start;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    margin-bottom: 0;
    -ms-flex-order: 6;
        order: 6;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12.5px;
    width: 100%;
  }

  .m-app-header__picker--with-border {
    -ms-flex-positive: 1;
        flex-grow: 1;
  }

  .m-app-header__picker--with-border:last-child {
    margin-right: auto;
  }

  .m-app-header__picker--with-border .picker__name {
    max-height: 15px;

    overflow: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .m-app-header__picker-container .picker {
    background-image: none;
  }


  .m-app-header__picker-container .input + .input {
    margin-top: 0;
  }

  .m-app-header__picker-container .overlay--is-center {
    margin-top: 5px;
    top: auto;
  }


}

.m-automated-insights {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 16px;
  margin: 20px;
  margin-top: 25px;
  padding: 20px 10px;
  background-color: #f0f2f4;
  border-radius: 5px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.m-automated-insights__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 5px;
}

.m-automated-insights__icon .icon-dazzle {
  width: 35px;
  height: auto; }

.m-automated-insights__insight {
  color: #505254;
  margin-left: 12px;
}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .m-automated-insights__icon {
    height: 35px;
  }
}

.m-dl-scorecard-tab-element-title {
  height: 46px;

}

.m-goal-selector {
  font-family: 'Lato-Regular', sans-serif;

  display: -ms-flexbox;

  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-size: 14px;
  padding: 5px;
  width: 190px;

  letter-spacing: 0;
}

.m-goal-selector .menu__text {
  text-align: left;
  text-transform: none;
}

.m-goal .datepicker {
  width: 290px;
}

.multiple-goal-detail {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 100%;
}

.m-header-container {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 400;
}

.m-homepage {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.m-homepage__title {
  font-family: 'Lato-Regular', sans-serif;

  -ms-flex-align: baseline;

      align-items: baseline;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-bottom: 1em;
  padding-top: 3em;

  color: #db0046;
}

.m-homepage__main-title {
  font-size: 32px;
}

.m-homepage__dashboards {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
  padding-bottom: 2em;
}

.m-homepage__dashboard {
  -ms-flex-align: center;
      align-items: center;
  display: block;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 180px;
  margin: 10px;
  padding: 10px;
  width: 140px;

  background-color: #f1f5f7;
  border-radius: 5px;
}

.desktop .m-homepage__dashboard:hover {
  border-width: 3px;
  border-style: solid;
  padding: 7px;
  
  border-color: #db0046;  
}

.m-homepage__dashboard__icon_containter {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  margin-left:auto;
  margin-right:auto;
  margin-top: 15px;
  height: 90px;
  width: 90px;

  background-color: #fff;
  border-radius: 50%;
}

.m-homepage__dashboard__icon {  
  
  font-size: 18px;
  -ms-flex-pack: center;
      justify-content: center;
  height: 60px;
  width: 60px;

  background-color: #fff;
  border-radius: 50%;
}

.m-homepage__dashboard__icon .icon-dashboard line,
    .m-homepage__dashboard__icon .icon-dashboard circle {
  fill: transparent;
  stroke: #3287c8;
  stroke-width: 1.5px; }

.m-homepage__dashboard__name {
  display: -ms-flexbox;
  display: flex;  
  -ms-flex-direction: column;  
      flex-direction: column;
  font-size: 14px;
  -ms-flex-pack: center;
      justify-content: center;
  height: 50px;
  margin-top: 20px;
  max-height: 50px;
  text-align: center;

  color: #db0046;
  overflow: hidden; 
}

.m-homepage__error {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 50px 0;
}

.m-homepage__error__title {
  font-family: 'Lato-Black', sans-serif;
  font-weight: 900; 

  font-size: 20px;
  padding: 20px;

  text-align: center;
}

.m-homepage__error__icon {
  font-size: 200px;
  height: 1em;

  color: #38a4dd;
}

.m-homepage__error__explanation {
  font-family: 'Lato-Light', sans-serif; 

  font-size: 16px;
  padding: 0 20px;

  text-align: center;
}

@media only screen and (max-width: 1155px) {
  .m-homepage__title {
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .m-homepage__dashboards {
    padding-top: 2em;
  }
}

@media only screen and (max-width: 850px) {
  .m-homepage__title {
    display: none;
  }  

  .m-homepage__error__icon {
    font-size: 150px;
  }   
}

.m-notifications {
  font-family: 'Lato-Regular', sans-serif;

  display: -ms-flexbox;

  display: flex;
  -ms-flex-flow: column wrap;
      flex-flow: column wrap;
}

.m-notifications .media__body {
  max-height: 36px; }

.m-notifications__header {
  border-bottom: 1px solid #dfe1e3;

  background-color: white;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
}

.m-notifications__content-wrapper {
  -ms-flex-positive: 1;
      flex-grow: 1;
  height: calc(100vh - 50px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.m-notifications-overlay {

  width: 440px;
}

.m-notifications-overlay .media__body {
  max-height: 36px; }

.m-notifications-overlay__header {
  border-bottom: 1px solid #e7ecef;

  display: -ms-flexbox;

  display: flex;
  padding: 15px;
}

.m-notifications-overlay__header__title {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  font-size: 14px;

  color: #303234;
}

.m-notifications-overlay__header__items {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  font-size: 14px;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.m-notifications-overlay__header__item {
  font-family: 'Lato-Regular', sans-serif;

  margin-left: 5px;

  color: #909294;
}

.desktop .m-notifications-overlay__header__item--action:hover {
  text-decoration: underline;
  cursor: pointer;
}

.m-notifications-overlay__header__item--separator::after {
  content: '·'
}

.m-notifications-overlay__content {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  max-width: calc(100% - 10px * 2);
  min-height: 40vh;
  overflow-y: auto;
  padding: 0 10px;
}

.m-notifications-settings {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 14px;
}

.m-notifications-settings__header {
  border-bottom: 1px solid #dfe1e3;

  background-color: white;
}

.m-notifications-settings__form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 0 30px;
  padding: 25px 0 0 0;
}

.m-notifications-settings__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-pack: end;
      justify-content: flex-end;
  margin: 0 30px;
  padding: 0 0 25px 0;
}

.m-notifications-settings__form .notification-group {
  padding-bottom: 30px;
}

.m-notifications-settings__form .notification-group__header {
  border-bottom: 1px solid #dfe1e3;

  display: -ms-flexbox;

  display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
}

.m-notifications-settings__form .notification-group__header__title {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 2 1 auto;
      flex: 2 1 auto;
  padding: 0 0 7.5px 0;
}

.m-notifications-settings__form .notification-group__header__name {
  font-family: 'Lato-Bold', sans-serif;
  font-weight: bold;

  margin-left: 3px;
  text-align: center;
}

.m-notifications-settings__form .notification-group__header__targets {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-pack: end;
      justify-content: flex-end;
  padding: $m-notifications-settings-group-targets-padding;
}

.m-notifications-settings__form .notification-group__header__target {
  text-align: center;
  width: 90px;
}

.m-notifications-settings__form .notification-group__notification-types__item {
  border-bottom: 1px solid #dfe1e3;

  display: -ms-flexbox;

  display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  margin: 8px 0 8px;
  padding: 0 0 7.5px 0;
}

.m-notifications-settings__form .notification-group__notification-types__item__targets {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.m-notifications-settings__form .notification-group__notification-types__item__title {
  -ms-flex: 2 1 auto;
      flex: 2 1 auto;
}

.m-notifications-settings__form .notification-group__notification-types__item__target {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  width: 90px;
}

@media only screen and (max-width: 767px) {
  .m-notifications-settings__form {
    margin: 0 20px;
  }

  .m-notifications-settings__footer {
    margin: 0 20px;
  }
}

.m-profile {
  font-family: 'Lato-Regular', sans-serif;
  font-size: 14px;
}

.m-profile__form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 0 70px;
  padding: 30px 0 30px 0;
}

.m-profile__columns {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.m-profile__columns__column__item + .m-profile__columns__column__item {
  margin-top: 22px;
}

.m-profile__column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.m-profile__columns__column {
  -ms-flex-positive: 0;
      flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.m-profile__columns__column:last-of-type {
  -ms-flex-preferred-size: 66%;
      flex-basis: 66%;
  -ms-flex-positive: 0;
      flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  max-width: 66%;
}

.m-profile__columns__column__item--with-borders {
  border-bottom: 1px solid #909294;
  border-top: 1px solid #909294;

  padding: 25px 0;
}

.m-profile__avatar {
  border: 1px solid #DFE1E3;
  height: 148px;
  width: 148px;

  border-radius: 100%;
  box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);
}

.m-profile__avatar > .avatar {
  border: 5px solid white;
  height: 138px;
  width: 138px;
}

.m-profile__avatar .avatar__fallback-text {
  font-size: 64px;
}

.m-profile__block {
  padding-bottom: 20px;
  width: 250px;
}

.m-profile__error {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 13px;

  color: #EC5830;
}

.m-profile__check {
  margin-top: 10px;
}

.m-profile__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-pack: end;
      justify-content: flex-end;
  margin: 0 70px;
  padding: 0 0 30px 0;
}

.m-profile .picker__options {
  max-height: 200px;
  min-width: 135px;
  overflow-y: auto;
}

.m-profile .input {
  max-width: 300px;
}

@media only screen and (max-width: 767px) {
  
  .m-profile__form {
    margin: 0 20px;
  }
  
  .m-profile__columns__column:first-of-type {
    display: none;
  }
  
  .m-profile__columns__column:last-of-type {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }

}

.m-pull-to-refresh__icon .loader-inner.ball-pulse > div {
  height: 8px;
  width: 8px;
  background-color: #909090; }

.m-pull-to-refresh__ptr.m-pull-to-refresh__ptr {
  box-shadow: none;
}

.m-scheduled-deliverables {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.m-scheduled-deliverables__table .table__cell {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  vertical-align: middle;
}

.m-scheduled-deliverables .table__cell__name-header.renderable,
.m-scheduled-deliverables .table__cell__dashboard-header.renderable,
.m-scheduled-deliverables .table__cell__scheduled-by-header.renderable {
  width: 22%;
}

.m-scheduled-deliverables .table__cell__recipients-header.renderable,
.m-scheduled-deliverables .table__cell__next-export-header.renderable {
  width: calc(17% - 65px);
}

/* Hack for Safari */

.m-scheduled-deliverables .table__cell__recipients-header.renderable:not(:root:root),
.m-scheduled-deliverables .table__cell__next-export-header.renderable:not(:root:root) {
  width: 17%;
}

.m-scheduled-deliverables .table__cell__actions-header.renderable {
  width: 65px;
}

.m-scheduled-deliverables__table .table__cell.renderable ~ .table__cell--is-narrower {
  padding-right: 30px;
}

.m-scheduled-deliverables__table .table__cell.renderable ~ .table__cell--is-narrower:last-of-type {
  padding-right: 15px;
}

.m-scheduled-deliverables__table--is-extended .table__row:last-of-type .table__cell {
  border: 0;
}

.m-scheduled-deliverables__subheader {
  border-bottom: 1px solid #dfe1e3;

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 15px 15px;
  width: calc(100% - 15px * 2);
}

.m-scheduled-deliverables__filter {
  width: 300px;
  font-size: 16px;
}

.m-scheduled-deliverables__button__icon .icon-plus {
  height: auto;
  width: 14px; }

.m-scheduled-deliverables__button__icon .icon-plus line {
  fill: none;
  stroke: #fff;
  stroke-width: 3px; }

.m-scheduled-deliverables__button__text {
  padding-left: 4px;

  color: #fff;
}

.m-scheduled-deliverables__actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}

.m-scheduled-deliverables__action {

  -ms-flex-negative: 0;

      flex-shrink: 0;
  height: 20px;
  width: 20px;

  cursor:pointer;
}

.m-scheduled-deliverables__action .icon-delete line,
    .m-scheduled-deliverables__action .icon-delete path {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #C0C2C4; }

.m-scheduled-deliverables__action .icon-edit path,
    .m-scheduled-deliverables__action .icon-edit polygon,
    .m-scheduled-deliverables__action .icon-edit polyline {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #C0C2C4; }

.m-scheduled-deliverables__action .icon-unsubscribe circle,
    .m-scheduled-deliverables__action .icon-unsubscribe line,
    .m-scheduled-deliverables__action .icon-unsubscribe path,
    .m-scheduled-deliverables__action .icon-unsubscribe rect {
  stroke-width: 1.3px;
  fill: none;
  stroke: #C0C2C4; }

.desktop .m-scheduled-deliverables__action:hover .icon-delete line,
    .desktop .m-scheduled-deliverables__action:hover .icon-delete path {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #303234; }

.desktop .m-scheduled-deliverables__action:hover .icon-edit path,
    .desktop .m-scheduled-deliverables__action:hover .icon-edit polygon,
    .desktop .m-scheduled-deliverables__action:hover .icon-edit polyline {
  stroke-width: 1.3px;
  fill: transparent;
  stroke: #303234; }

.desktop .m-scheduled-deliverables__action:hover .icon-unsubscribe circle,
    .desktop .m-scheduled-deliverables__action:hover .icon-unsubscribe line,
    .desktop .m-scheduled-deliverables__action:hover .icon-unsubscribe path,
    .desktop .m-scheduled-deliverables__action:hover .icon-unsubscribe rect {
  stroke-width: 1.3px;
  fill: none;
  stroke: #303234; }

.m-scheduled-deliverables__action .icon,
.desktop .m-scheduled-deliverables__action:hover .icon {
  height: 100%;
  margin-left: 10px;
  width: 100%;
}

.m-scheduled-deliverables__text {
  max-height: 2.5em;
}

.m-scheduled-deliverables__placeholder {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-positive: 1;
      flex-grow: 1;
  width: 100%;

  background: transparent;
}

.m-scheduled-deliverables__placeholder__icon {

  margin-top: 20vh;
  max-height: 100px;
  max-width: 100px;
}

.m-scheduled-deliverables__placeholder__icon .icon-calendar path,
    .m-scheduled-deliverables__placeholder__icon .icon-calendar circle,
    .m-scheduled-deliverables__placeholder__icon .icon-calendar line {
  fill: none;
  stroke: #f0f2f4;
  stroke-width: 1px; }

.m-scheduled-deliverables__placeholder__text {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 14px;
  margin: 20px 0;
  max-width: 250px;

  color: #303234;
  text-align: center;
}

.m-scheduled-deliverables__placeholder__button {
  margin-bottom: 20vh;
}

@media (max-width: 1330px) {
  .m-scheduled-deliverables .table__cell__name-header.renderable,
  .m-scheduled-deliverables .table__cell__dashboard-header.renderable,
  .m-scheduled-deliverables .table__cell__scheduled-by-header.renderable,
  .m-scheduled-deliverables .table__cell__recipients-header.renderable,
  .m-scheduled-deliverables .table__cell__next-export-header.renderable {
    width: calc(20% - 65px);
  }

  /* Hack for Safari */
  .m-scheduled-deliverables .table__cell__name-header.renderable:not(:root:root),
  .m-scheduled-deliverables .table__cell__dashboard-header.renderable:not(:root:root),
  .m-scheduled-deliverables .table__cell__scheduled-by-header.renderable:not(:root:root),
  .m-scheduled-deliverables .table__cell__recipients-header.renderable:not(:root:root),
  .m-scheduled-deliverables .table__cell__next-export-header.renderable:not(:root:root) {
    width: 20%;
  }
}

/* Hack for IE11: set min-height to center the spinner in the m-scheduled-deliverables area */

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
  .m-scheduled-deliverables {
    min-height: inherit;
  }
}

.m-scorecard-header-with-button {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.m-scorecard-header-with-button > div {
  max-width: calc(100% - 37px);
}

.m-scorecard-header-with-button > div:nth-of-type(1) {
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.m-scorecard-export-members_selector {
}

.m-scorecard-export-members_selector .members-selector__members > div {
  max-height: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.m-storytelling-dialog {
  width: 450px;
}

.m-storytelling-dialog__body {
  padding: 70px;
}

.m-storytelling-dialog__body__section {
  -ms-flex-pack: center;
      justify-content: center;
}

.m-storytelling-dialog__text {
  font-family: 'Lato-Regular', sans-serif;

  font-size: 12px;
  line-height: 1.4;

  color: #909294;
  text-align: left;
}

.m-storytelling-dialog .datepicker {
  width: 290px;
}

.m-value-selector {
  width: 210px;
}

.m-value-selector__picker {
  font-family: 'Lato-Regular', sans-serif;

  border-radius: 4px;
  color: #505254;

  display: -ms-flexbox;

  display: flex;
  font-size: 14px;
  height: 30px;
  margin: 0;
  padding-left: 14px;
  padding-right: 10px;
}

.m-value-selector__multiple-select-wrapper {
  max-height: 300px;
  min-height: 150px;
}

.m-value-selector__multiple-select-wrapper .multiple-select__search,
.m-value-selector__multiple-select-wrapper .multiple-select__toggler,
.m-value-selector__multiple-select-wrapper .multiple-select__options {
  padding-left: 14px;
  padding-right: 10px;
  width: calc(100% - 24px);
}

.m-value-selector__spinner {

  -ms-flex-align: center;

      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 150px;
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%;
}

.m-value-selector__spinner .loader-inner.ball-pulse > div {
  height: 8px;
  width: 8px;
  background-color: #db0046; }

.m-value-selector__placeholder {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-positive: 1;
      flex-grow: 1;
  width: 100%;

  background: transparent;
}

.m-value-selector__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  padding: 20px;
}

@media only screen and (max-width: 767px) {

  .m-value-selector {
    width: 92vw;
  }

  .m-value-selector__picker {
    height: 4px;
    min-height: auto;
  }

}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {

  /* Fixes padding issue with flex */
  .m-value-selector__footer > * {
    max-width: 84px;
  }

  .m-value-selector__multiple-select-wrapper .multiple-select__options {
    height: 250px;
  }
}

/*# sourceMappingURL=global.css.map */