.headernav {
  display: none;
}

.terminal {
  display: flex;
  flex-direction: column;
  height: 100%;
  outline: none;
}
.terminal__header {
  height: 25px;
}
.terminal__main {
  display: flex;
  flex: 1;
}
.terminal__footer {
  height: 30px;
}

.workspace {
  overflow: hidden;
  width: 100%;
}

.contentwrapper {
  overflow: scroll;
  padding: 15px 30px;
}

.row {
  display: flex;
  margin: 0 -5px;
}
.row + .row {
  margin-top: 10px;
}
.row--vcenter {
  align-items: center;
}
.row--vbottom {
  align-items: flex-end;
}
.row--hspace {
  justify-content: space-between;
}

.col {
  box-sizing: border-box;
  padding: 0 5px;
}
.col__100 {
  width: 100%;
}
.col__90 {
  width: 90%;
}
.col__85 {
  width: 85%;
}
.col__80 {
  width: 80%;
}
.col__70 {
  width: 70%;
}
.col__66 {
  width: 66.666%;
}
.col__60 {
  width: 60%;
}
.col__50 {
  width: 50%;
}
.col__45 {
  width: 45%;
}
.col__40 {
  width: 40%;
}
.col__33 {
  width: 33.333%;
}
.col__30 {
  width: 30%;
}
.col__20 {
  width: 20%;
}
.col__15 {
  width: 15%;
}
.col__10 {
  width: 10%;
}

.is-hidden {
  display: none;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.clear:after {
  clear: both;
  content: "";
  display: table;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  margin: 0;
  padding: 0;
}

.push--top {
  margin-top: 15px !important;
}

.push-top--double {
  margin-top: 30px !important;
}

.push--right {
  margin-right: 15px !important;
}

.push--bottom {
  margin-bottom: 15px !important;
}

.push-bottom--double {
  margin-bottom: 30px !important;
}

.push--2--top {
  margin-top: 10px !important;
}

.alert {
  background-color: var(--c-alert-bg);
  width: 50%;
  margin: 50px auto;
  border-radius: 3px;
  color: var(--c-alert-color);
  text-align: center;
  padding: 5px 0;
}
.alert--error {
  background-color: var(--c-alert-error-bg);
  color: var(--c-alert-error-color);
}

.ctxmenu {
  background-color: var(--c-ctx-bg);
  box-shadow: 0px 2px 0px var(--c-ctx-shadow);
  border-radius: 3px;
  display: none;
  min-width: 200px;
  position: absolute;
  right: 0;
  text-align: left;
  top: 10px;
  outline: none;
}
.ctxmenu::before {
  border-bottom: 10px solid var(--c-ctx-bg);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  right: 30px;
  top: -8px;
  width: 0;
}
.ctxmenu--left {
  left: 0;
  right: auto;
}
.ctxmenu--left::before {
  border-bottom: 10px solid var(--c-ctx-bg);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  content: "";
  height: 0;
  left: 30px;
  position: absolute;
  top: -8px;
  width: 0;
}
.ctxmenu.is-open {
  display: block;
}

.ctxgroup {
  position: relative;
  z-index: 10;
}
.ctxgroup__table {
  margin-bottom: 20px;
}
.ctxgroup__ctxmenu {
  box-sizing: border-box;
  padding: 15px 0;
  min-width: 230px;
}
.ctxgroup__ctxmenu h4 {
  color: var(--c-ctx-copy-headline);
  font-family: var(--f-bold);
  font-size: 13px;
  margin-bottom: 10px;
  padding: 0 15px;
}
.ctxgroup__ctxmenu hr {
  margin-bottom: 10px;
  margin-top: 10px;
}
.ctxgroup__button {
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ctxgroup__ctxmenu__copyheadline {
  color: var(--c-ctx-copy-headline);
  font-family: var(--f-bold);
  font-size: 13px;
  margin-bottom: 10px;
}
.ctxgroup__ctxmenu-link {
  color: var(--c-ctx-link);
  display: block;
  font-size: 13px;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 0 15px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctxgroup__ctxmenu-link .svg {
  fill: var(--c-ctx-link);
  float: left;
  height: 12px;
  margin-right: 7px;
  margin-top: 2px;
  width: 12px;
}
.ctxgroup__ctxmenu-link:last-of-type {
  margin-bottom: 0;
}
.ctxgroup__ctxmenu-link:hover {
  color: var(--c-ctx-link-hover);
  cursor: pointer;
}
.ctxgroup__ctxmenu-link:hover .svg {
  fill: var(--c-ctx-link-hover);
}
.ctxgroup__ctxmenu-link.is-disabled {
  color: var(--c-ctx-copy-headline);
}
.ctxgroup__ctxmenu-link.is-disabled .svg {
  fill: var(--c-ctx-copy-headline);
}
.ctxgroup__ctxmenu-link.is-disabled:hover {
  color: var(--c-ctx-copy-headline);
  cursor: default;
}

.ctx-wrapper {
  display: inline-block;
  text-align: right;
}

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

.dropdown__toggle {
  align-items: center;
  display: flex;
  flex-flow: row;
}
.dropdown__toggle .svg {
  width: 0.8em;
  height: 0.8em;
  padding-left: 0.3em;
  margin-left: auto;
  fill: currentColor;
}

.dropdown__menu {
  position: absolute;
  box-sizing: border-box;
  background-color: var(--c-dropdown-menu-bg);
  box-shadow: 0 2px 3px #00000080;
  border-radius: 0 0 3px 3px;
  padding: 10px;
  z-index: 100;
  min-width: 100%;
}

.dropdown--open .svg {
  transform: rotateX(180deg);
}

.dropdown-select__placeholder {
  color: var(--c-gray-100);
}

.dropdown-select .dropdown__menu {
  padding-left: 0;
  padding-right: 0;
}

.dropdown-select__item {
  font-size: 15px;
  cursor: default;
  line-height: 1.5;
  user-select: none;
  padding-left: 15px;
  padding-right: 15px;
}

.dropdown-select__item:hover {
  color: var(--c-hightlight);
}

.dropdown-select__item--active {
  color: var(--c-hightlight);
}

.dropdown--right .dropdown__menu {
  right: 0;
}

.ddlgroup {
  position: relative;
  outline: none;
}
.ddlgroup--labelonly {
  display: inline-block;
}
.ddlgroup--labelonly .ddlgroup__button {
  color: #999;
}
.ddlgroup--labelonly .ddlgroup__button:hover {
  color: var(--c-link-hover);
}
.ddlgroup__table {
  margin-bottom: 20px;
}
.ddlgroup__ddlmenu {
  background-color: var(--c-ddl-bg);
  box-shadow: 0px 2px 0px var(--c-ddl-shadow);
  box-sizing: border-box;
  border-radius: 3px;
  display: none;
  position: absolute;
  right: 0;
  text-align: left;
  top: 35px;
  outline: none;
  z-index: 10;
  padding: 15px 0;
}
.ddlgroup__ddlmenu::before {
  border-bottom: 10px solid var(--c-ddl-bg);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  right: 10px;
  top: -8px;
  width: 0;
}
.ddlgroup__ddlmenu--reverse {
  top: auto;
  bottom: 35px;
}
.ddlgroup__ddlmenu--reverse::before {
  border-bottom: none;
  border-top: 10px solid var(--c-ddl-bg);
  top: auto;
  bottom: -8px;
}
.ddlgroup__ddlmenu--isopen {
  display: block;
}
.ddlgroup__ddlmenu h4 {
  color: var(--c-ddl-copy-headline);
  font-family: var(--f-bold);
  font-size: 13px;
  margin-bottom: 10px;
  padding: 0 15px;
}
.ddlgroup__ddlmenu hr {
  margin-bottom: 10px;
  margin-top: 10px;
}
.ddlgroup__button {
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  background-color: transparent;
  cursor: pointer;
}
.ddlgroup__button-icon {
  -webkit-mask-image: url(c93cac9eb4f64c5158dd.svg);
  mask-image: url(c93cac9eb4f64c5158dd.svg);
  width: 10px;
  height: 8px;
}
.ddlgroup__ddlmenu-link {
  color: var(--c-ddl-link);
  display: block;
  font-size: 13px;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 0 15px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ddlgroup__ddlmenu-link .svg {
  fill: var(--c-ddl-link);
  float: left;
  height: 12px;
  margin-right: 7px;
  margin-top: 2px;
  width: 12px;
}
.ddlgroup__ddlmenu-link:last-of-type {
  margin-bottom: 0;
}
.ddlgroup__ddlmenu-link:hover {
  color: var(--c-ddl-link-hover);
  cursor: pointer;
}
.ddlgroup__ddlmenu-link:hover .svg {
  fill: var(--c-ddl-link-hover);
}
.ddlgroup__ddlmenu-link.is-disabled {
  color: var(--c-ddl-copy-headline);
}
.ddlgroup__ddlmenu-link.is-disabled .svg {
  fill: var(--c-ddl-copy-headline);
}
.ddlgroup__ddlmenu-link.is-disabled:hover {
  color: var(--c-ddl-copy-headline);
  cursor: default;
}

.flatpickr-calendar {
  background: var(--c-flatpickr-background);
  border-radius: 3px;
  box-shadow: none;
}
.flatpickr-calendar.arrowTop::after, .flatpickr-calendar.arrowTop::before {
  border-bottom-color: var(--c-flatpickr-background);
}

.flatpickr-month {
  color: var(--c-flatpickr-txt-month);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--c-flatpickr-arrows);
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--c-flatpickr-arrows-hover);
}

span.flatpickr-weekday {
  color: var(--c-flatpickr-weekday);
}

.flatpickr-day {
  border: 0;
  color: var(--c-flatpickr-day);
}
.flatpickr-day:hover {
  background: var(--c-flatpickr-day-hover);
}
.flatpickr-day.today {
  background: var(--c-flatpickr-day-today-bg);
  border: 1px solid var(--c-flatpickr-day-today-border);
}
.flatpickr-day.today:hover {
  background: var(--c-flatpickr-day-hover);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--c-flatpickr-othermonthday);
}
.flatpickr-day.selected {
  background: var(--c-flatpickr-day-selected-bg);
  color: var(--c-flatpickr-day-selected);
}
.flatpickr-day.selected:hover {
  background: var(--c-flatpickr-day-selected-bg);
  color: var(--c-flatpickr-day-selected);
}

/*
 * Headline Styling
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

h1 {
  color: var(--c-headline-h1-default);
  font-size: 18px;
  margin-bottom: 20px;
}

h2 {
  font-size: 16px;
}

.headline-subinfo {
  font-size: 13px;
  color: #999;
  margin: 0 10px 0 6px;
}

.hr {
  border: 0;
  height: 1px;
}
.hr--black {
  background-color: var(--c-hr-black);
}
.hr--darkgrey {
  background-color: var(--c-hr-darkgrey);
}
.hr--lightgrey {
  background-color: var(--c-hr-lightgrey);
}

.label {
  background-color: var(--c-label-bg);
  border: 1px solid var(--c-label-border);
  border-radius: 3px;
  color: var(--c-label-color);
  display: inline-block;
  font-size: 11px;
  margin-bottom: 10px;
  margin-right: 5px;
  padding: 5px;
  white-space: nowrap;
  /*
    &:last-of-type {
      margin-bottom: 0;
      margin-right: 0;
    } */
}
.label--block {
  display: block;
}

a.button {
  color: var(--c-hightlight);
  outline: 0;
}

a.button:hover {
  background-color: var(--c-hightlight);
  color: var(--c-hightlight-fontcolor);
}

.link {
  color: var(--c-hightlight);
  cursor: pointer;
  outline: 0;
  text-decoration: none;
}
.link--title {
  font-size: 13px;
  text-decoration: none;
}
.link--white {
  color: var(--c-link);
}
.link--white .link__icon {
  background-color: var(--c-link);
}
.link__icon {
  display: inline-block;
  margin-left: 4px;
  margin-bottom: 3px;
  background-color: var(--c-hightlight);
  transition: -webkit-mask-image 0.5s, background-color 0.5s;
  transition: mask-image 0.5s, background-color 0.5s;
  vertical-align: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.link__icon--collapse, .link__icon--expand {
  width: 10px;
  height: 6px;
}
.link__icon--expand {
  -webkit-mask-image: url(6081e59e97291bca93c0.svg);
  mask-image: url(6081e59e97291bca93c0.svg);
}
.link__icon--collapse {
  -webkit-mask-image: url(9be94273ceacd9aee44b.svg);
  mask-image: url(9be94273ceacd9aee44b.svg);
}
.link__icon--dropdown {
  -webkit-mask-image: url(c93cac9eb4f64c5158dd.svg);
  mask-image: url(c93cac9eb4f64c5158dd.svg);
  width: 10px;
  height: 8px;
  margin-bottom: 5px;
}
.link__icon--add {
  -webkit-mask-image: url(f26b64df8bb1d06a4076.svg);
  mask-image: url(f26b64df8bb1d06a4076.svg);
  width: 10px;
  height: 10px;
}
.link__icon--fullsize {
  width: 12px;
  height: 12px;
  margin-bottom: 1px;
  -webkit-mask-image: url(72bd9be796bcd7572c99.svg);
  mask-image: url(72bd9be796bcd7572c99.svg);
}
.link__icon--external {
  width: 8px;
  height: 8px;
  -webkit-mask-size: 8px;
  -webkit-mask-image: url(6aee6973a6d2b853aa06.svg);
  mask-size: 8px;
  mask-image: url(6aee6973a6d2b853aa06.svg);
}
.link--external {
  text-decoration: none;
}

.iconlink {
  cursor: pointer;
}
.iconlink .svg--iconlink {
  fill: #ffad1f;
  width: 1em;
}
.iconlink .svg--iconlink.disabled {
  fill: #888;
}
.iconlink .svg--iconlink.disabled:hover {
  fill: #ffad1f;
}

/* .link {
  font-size: 13px;
  text-decoration: none;
} */

.loader {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 200;
}
.loader__bg {
  background-color: var(--c-loader-bg);
  height: 100%;
  opacity: 0.7;
  width: 100%;
}
.loader__spinner {
  animation: spin 1s infinite linear;
  fill: var(--c-loader-fill);
  left: 50%;
  margin-left: -20px;
  position: absolute;
  top: 275px;
  width: 55px;
  height: 55px;
}
.loader__spinner--back {
  animation: spin-back 1s infinite linear;
  fill: var(--c-loader-back-fill);
}
.loader .navigation__logo {
  position: absolute;
  left: calc(50% - 25px);
  top: 270px;
  width: 40px;
  -webkit-mask-size: 40px 30px;
  mask-size: 40px 30px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin-back {
  0% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(630deg);
  }
}

.modal__content {
  left: 50%;
  min-width: 340px;
  outline: none;
  position: absolute;
  top: 200px;
  transform: translate(-50%);
  z-index: 101;
}
.modal__content-header {
  background-color: var(--c-modal-header-bg);
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
  height: 45px;
  padding: 14px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
.modal__content-body {
  background-color: var(--c-modal-body-bg);
  border-radius: 0 0 4px 4px;
  padding: 20px;
}
.modal__content-body .modal__hr {
  background-color: var(--c-modal-hr);
}
.modal__content-buttonwrapper {
  text-align: right;
}
.modal__overlay {
  background-color: rgba(var(--c-modal-overlay-bg), 0.6);
  bottom: 0;
  height: calc(100% - 55px);
  left: 75px;
  position: fixed;
  top: 25px;
  width: calc(100% - 75px);
  z-index: 100;
}
.modal__error {
  background-color: var(--c-modal-error-bg);
  border-radius: 3px;
  border: 1px solid transparent;
  color: var(--c-modal-error-color);
  font-style: italic;
  margin-top: 15px;
  text-align: center;
}
.modal__error p {
  margin: 3px 0;
}

.popover {
  position: relative;
}

.popover__content {
  background-color: var(--c-gray-500);
  border-radius: 5px;
  box-shadow: var(--c-tooltip-shadow) 0px 1px 2px 0px;
  color: var(--c-tooltip-text);
  display: inline-block;
  font-size: 13px;
  line-height: 20px;
  left: 50%;
  margin-bottom: 15px;
  max-width: 200px;
  padding: 13px 16px;
  position: absolute;
  text-align: left;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  transition: all 0.5s;
  white-space: normal;
  width: max-content;
  z-index: 100;
}

.popover__content--right-overflow {
  transform: translateX(10px);
  left: auto;
  right: 0;
}

.popover__content--left-overflow {
  transform: translateX(-10px);
  left: 0;
  right: auto;
}

.popover__trigger {
  position: relative;
}
.popover__trigger::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--c-gray-500);
  height: 0;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translate(-50%, 5px);
  width: 0;
  z-index: 101;
}

.popover--open .popover__content {
  transition: none;
}
.popover--open .popover__trigger::after {
  content: "";
}

::-webkit-scrollbar {
  height: 12px;
  opacity: 0.5;
  width: 12px;
}

::-webkit-scrollbar:hover {
  opacity: 1;
}

::-webkit-scrollbar-track {
  background-color: var(--c-scrollbar-track-bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--c-scrollbar-thumb-bg);
  border-radius: 15px;
  border: 3px solid transparent;
  border-right-width: 1px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--c-scrollbar-thumb-hover-bg);
}

::-webkit-scrollbar-corner {
  display: none;
}

.spinner {
  margin-right: 5px;
  width: 10px;
  display: inline-block;
}
.spinner svg {
  fill: currentColor;
}

.tag-input {
  background-color: var(--c-input-bg);
  display: flex;
  align-items: center;
  padding: 3px;
  box-sizing: border-box;
}

.tag-input__input {
  background-color: transparent;
  border: 0;
  color: var(--c-input-color);
  padding: 0;
  height: 100%;
  flex: 1 0;
}

.tag-input__input:focus {
  outline: none;
  box-shadow: none;
}

.tag-input__tag {
  display: flex;
  background-color: var(--tag-input__tag-bg, #333333);
  border-radius: 2px;
  color: var(--tag-input__tag-bg, #999999);
  padding: 3px 5px;
  flex-flow: row nowrap;
  align-items: center;
}

.tag-input__tag + .tag-input__tag {
  margin-left: 5px;
}

.tag-input__tag + .tag-input__input {
  margin-left: 5px;
}

.tag-input__tag-remove {
  background-color: transparent;
  color: var(--tag-input__tag-remove-color, #999999);
  padding: 0;
  margin-left: 5px;
  border: 0;
}

.tag-input__tag-remove:hover {
  color: var(--tag-input__tag-remove--hover-color, white);
}

.tag-input__tag-remove .icon > svg {
  width: 0.9em;
  height: 0.9em;
  fill: currentColor;
}

.tooltip {
  --tick-left: calc(50% - 5px);
  --tick-right: auto;
  position: relative;
  display: inline-block;
}

.tooltip__content {
  background-color: var(--c-tooltip-bg);
  border-radius: 5px;
  box-shadow: var(--c-tooltip-shadow) 0px 1px 2px 0px;
  color: var(--c-tooltip-text);
  font-size: 13px;
  line-height: 20px;
  left: 50%;
  max-width: 200px;
  padding: 13px 16px;
  position: absolute;
  text-align: left;
  bottom: 100%;
  visibility: hidden;
  white-space: normal;
  width: max-content;
  z-index: 150;
  opacity: 0;
}
.tooltip__content::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--c-tooltip-bg);
  content: "";
  height: 0;
  position: absolute;
  bottom: -5px;
  z-index: 110;
  width: 0;
  left: var(--tick-left);
  right: var(--tick-right);
}

.tooltip--left {
  --tick-left: auto;
  --tick-right: var(--tick-x);
}
.tooltip--left .tooltip__content {
  left: auto;
  right: 0;
}

.tooltip--right {
  --tick-left: var(--tick-x);
  --tick-right: auto;
}
.tooltip--right .tooltip__content {
  left: 0;
  right: auto;
}

.tooltip--bottom .tooltip__content {
  bottom: auto;
  top: 100%;
}
.tooltip--bottom .tooltip__content::after {
  border-top: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--c-tooltip-bg);
  height: 0;
  bottom: calc(100%);
  z-index: 110;
  width: 0;
}

.icon--inline {
  display: inline-block;
  height: 1em;
  width: 1em;
}

.icon--current-color svg {
  fill: currentColor;
}

.resize-observed {
  width: 100%;
  height: 100%;
}

.button {
  transition: -webkit-mask-image 0.2s, background-color 0.2s;
  transition: mask-image 0.2s, background-color 0.2s;
  font-family: "LatoRegular", sans-serif;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 5px;
  outline: none;
}
.button:last-of-type {
  margin-right: 0;
}
.button--small {
  font-size: 11px;
  height: 20px;
  min-width: 40px;
  padding: 3px 5px;
  line-height: 10px;
  margin-left: 5px;
}
.button--medium {
  font-size: 16px;
  height: 32px;
  padding: 3px 15px 6px 15px;
}
.button--large {
  font-size: 13px;
  padding: 4px 12px;
}
.button--xlarge {
  font-size: 18px;
  height: 40px;
  padding: 3px 18px;
}
.button--default {
  background-color: var(--c-button-default-bg);
  color: var(--c-button-default-font);
  box-shadow: 0px 2px 0px var(--c-button-default-shadow);
}
.button--default:hover, .button--default.is-active {
  background-color: var(--c-button-default-hover-bg);
}
.button--inline {
  margin: 0;
}
.button--with-icon {
  display: inline-flex;
  align-items: center;
  flex-flow: row nowrap;
}
.button--with-icon div.icon {
  margin-right: 0.33em;
}
.button--with-icon svg {
  height: 1.25em;
  width: 1.25em;
  fill: currentColor;
}
.button--reset {
  background-color: var(--c-button-reset-bg);
  color: var(--c-button-reset-font);
  box-shadow: 0px 2px 0px var(--c-button-reset-shadow);
}
.button--reset:hover:not([disabled]), .button--reset.is-active:not([disabled]) {
  background-color: var(--c-button-default-hover-bg);
  color: var(--c-button-default-font);
}
.button--ghost {
  background-color: var(--c-button-ghost-bg);
  border: 1px solid var(--c-button-ghost-border);
  color: var(--c-button-ghost-font);
  padding: 3px 9px;
}
.button--ghost:hover, .button--ghost.is-active {
  background-color: var(--c-button-ghost-hover-bg);
  border: 1px solid var(--c-button-ghost-hover-border);
  color: var(--c-button-ghost-hover-font);
}
.button--link {
  background-color: var(--c-button-link-set-bg);
  border-color: var(--c-button-link-set-border);
  color: var(--c-button-link-set-color);
  border-width: 1px;
  border-style: solid;
  padding: 3px 9px;
}
.button--link:hover, .button--link.is-active {
  background-color: var(--c-button-link-set-hover-bg);
  border-color: var(--c-button-link-set-hover-border);
  color: var(--c-button-link-set-hover-color);
}

.button-icon {
  background-color: var(--c-button-icon-set-bg);
  border-color: var(--c-button-icon-set-border);
  color: var(--c-button-icon-set-color);
  border-radius: 50%;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.button-icon:hover, .button-icon.is-active {
  background-color: var(--c-button-icon-set-hover-bg);
  border-color: var(--c-button-icon-set-hover-border);
  color: var(--c-button-icon-set-hover-color);
}
.button-icon--small {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}
.button-icon svg {
  height: 1em;
  width: 1em;
  fill: currentColor;
}

.checkbox.disabled {
  opacity: 0.2;
}
.checkbox__wrapper {
  display: block;
  position: relative;
}
.checkbox__wrapper--inline {
  display: inline-block;
  vertical-align: top;
}
.checkbox input[type=checkbox] {
  height: 12px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 12px;
  z-index: 2;
}
.checkbox input[type=checkbox]:hover {
  cursor: pointer;
}
.checkbox input[type=checkbox] + label::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  content: "";
  display: inline-block;
  height: 12px;
  left: 3px;
  padding: 0;
  position: absolute;
  top: 3px;
  width: 12px;
  z-index: 1;
}
.checkbox input[type=checkbox] + label::before {
  -webkit-mask-image: url(a0701a18b0554cba3a11.svg);
  mask-image: url(a0701a18b0554cba3a11.svg);
  background-color: var(--c-checkbox-unchecked-bg);
}
.checkbox input[type=checkbox]:checked + label::before {
  -webkit-mask-image: url(9cd4927a22127229c9f8.svg);
  mask-image: url(9cd4927a22127229c9f8.svg);
  background-color: var(--c-checkbox-checked-bg);
}
.checkbox input[type=checkbox].is-preselected:checked + label {
  color: var(--c-checkbox-unchecked-bg);
}
.checkbox input[type=checkbox].is-preselected:checked + label::before {
  -webkit-mask-image: url(9cd4927a22127229c9f8.svg);
  mask-image: url(9cd4927a22127229c9f8.svg);
  background-color: var(--c-checkbox-unchecked-bg);
}
.checkbox__label {
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  height: 17px;
  padding-left: 25px;
  padding-top: 1px;
}

.checkbox__wrapper--inline + .checkbox__wrapper--inline {
  margin-left: 20px;
}

.radiobutton__wrapper {
  display: block;
  position: relative;
}
.radiobutton__wrapper--inline {
  display: inline-block;
  margin-right: 15px;
}
.radiobutton__wrapper--inline:last-of-type {
  margin-right: 0;
}
.radiobutton input[type=radio] {
  height: 14px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 14px;
  z-index: 2;
}
.radiobutton input[type=radio]:hover {
  cursor: pointer;
}
.radiobutton input[type=radio] + label::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  content: "";
  display: inline-block;
  height: 14px;
  padding: 0;
  width: 14px;
  margin-right: 8px;
}
.radiobutton input[type=radio]:disabled + label,
.radiobutton input[type=radio]:disabled + label::before {
  opacity: 0.5;
}
.radiobutton input[type=radio] + label::before {
  -webkit-mask-image: url(cc272afb20622230bab1.svg);
  mask-image: url(cc272afb20622230bab1.svg);
  background-color: var(--c-checkbox-unchecked-bg);
}
.radiobutton input[type=radio]:checked + label::before {
  -webkit-mask-image: url(5e05707bfc044c13f297.svg);
  mask-image: url(5e05707bfc044c13f297.svg);
  background-color: var(--c-checkbox-checked-bg);
}
.radiobutton__label {
  display: inline-flex;
  flex-flow: row;
  font-size: 13px;
  height: 17px;
}

.rangeslider {
  width: 100%;
}
.rangeslider::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.rangeslider input[type=range] {
  -webkit-appearance: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  width: 100%;
}
.rangeslider input[type=range]::-webkit-slider-runnable-track {
  background: var(--c-rangeslider-track-bg);
  border: 0;
  border-radius: 2px;
  height: 4px;
  width: auto;
}
.rangeslider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--c-rangeslider-thumb-bg);
  border: 0;
  border-radius: 50%;
  height: 12px;
  margin-top: -4px;
  width: 12px;
}
.rangeslider input[type=range]:focus {
  outline: none;
}
.rangeslider__label {
  color: var(--c-rangeslider-label);
  font-family: var(--f-bold);
  font-size: 11px;
  margin-top: 5px;
}
.rangeslider__label--min {
  float: left;
}
.rangeslider__label--max {
  float: right;
}

.input,
input[type=password] {
  background-color: var(--c-input-bg);
  border: 0;
  border-radius: 3px;
  color: var(--c-input-color);
  font-family: var(--f-regular);
  font-size: 16px;
  height: 40px;
  padding-left: 10px;
  width: 100%;
}
.input.input--textarea,
input[type=password].input--textarea {
  height: 150px;
}
.input::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder {
  color: var(--c-input-placeholder-color);
}
.input:not(:focus)::-webkit-selection, .input:not(:focus)::selection,
input[type=password]:not(:focus)::-webkit-selection,
input[type=password]:not(:focus)::selection {
  text-shadow: none;
  background: none;
  color: var(--c-input-color);
}
.input:focus,
input[type=password]:focus {
  background-color: var(--c-input-focus-bg);
  border-color: var(--c-input-active-glow);
  font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: var(--c-input-focus-color);
  outline: none;
}
.input:focus::-webkit-input-placeholder,
input[type=password]:focus::-webkit-input-placeholder {
  color: var(--c-input-focus-placeholder-color);
}
.input.input--medium,
input[type=password].input--medium {
  border-radius: 2px;
  font-size: 15px;
  height: 30px;
}
.input.input--small,
input[type=password].input--small {
  font-size: 13px;
  height: 25px;
}
.input.input--tiny,
input[type=password].input--tiny {
  font-size: 12px;
  height: 20px;
}
.input.input--dark,
input[type=password].input--dark {
  background-color: var(--c-input-dark-bg);
  color: var(--c-input-dark-color);
}
.input.input--dark:focus,
input[type=password].input--dark:focus {
  background-color: var(--c-input-dark-bg);
  border-color: var(--c-input-active-glow);
  box-shadow: inset 0 0 2px 1px var(--c-input-active-glow);
  color: var(--c-input-dark-color);
}
.input.input--dark:focus::-webkit-input-placeholder,
input[type=password].input--dark:focus::-webkit-input-placeholder {
  color: var(--c-input-focus-placeholder-color);
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input--error {
  background-color: var(--c-input-error-bg);
}

.switch-base {
  display: inline-block;
}

.switch {
  display: inline-block;
  height: 8px;
  position: relative;
  width: 35px;
}
.switch input {
  display: none;
}
.switch__slider {
  background-color: var(--c-switch-track-bg);
  border-radius: 20px;
  bottom: 0;
  cursor: pointer;
  left: -2px;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}
.switch__slider:before {
  background-color: var(--c-switch-thumb-bg);
  border-radius: 50%;
  content: "";
  height: 19px;
  left: 0;
  position: absolute;
  top: -6px;
  transition: 0.4s;
  width: 19px;
}
input:checked + .switch__slider {
  background-color: var(--c-switch-track-bg);
}
input:checked + .switch__slider::before {
  background-color: var(--c-switch-thumb-active-bg);
  transform: translateX(20px);
}
input:focus + .switch__slider {
  box-shadow: 0 0 1px var(--c-switch-track-bg);
}
.switch.switch--variant {
  height: 14px;
  width: 26px;
}
.switch.switch--variant .switch__slider {
  background-color: var(--c-switch-variant-track-bg);
  border-radius: 34px;
}
.switch.switch--variant .switch__slider:before {
  background-color: var(--c-switch-variant-thumb-bg);
  height: 12px;
  left: 1px;
  top: 1px;
  width: 12px;
}
.switch.switch--variant input:checked + .switch__slider {
  background-color: var(--c-switch-variant-track-active-bg);
}
.switch.switch--variant input:checked + .switch__slider::before {
  transform: translateX(12px);
}

.switch__label {
  color: var(--c-switch-variant-label);
  display: inline-block;
  font-size: 13px;
  margin-left: 8px;
}
.switch__label.is-active {
  color: var(--c-switch-variant-label-active);
}

.select {
  background-color: var(--c-input-bg);
  border: 0;
  border-radius: 3px;
  color: var(--c-input-color);
  font-family: var(--f-regular);
  font-size: 18px;
  height: 40px;
  padding-left: 10px;
  width: 100%;
}
.select:focus {
  outline: none;
}
.select:disabled {
  cursor: not-allowed;
}
.select.select--medium {
  border-radius: 2px;
  font-size: 15px;
  height: 30px;
}
.select.select--small {
  font-size: 13px;
  height: 25px;
}
.select.select--tiny {
  font-size: 12px;
  height: 20px;
}
.select.select--dark {
  background-color: var(--c-input-dark-bg);
  color: var(--c-input-dark-color);
}
.select.select--dark:disabled {
  background-color: var(--c-input-dark-disabled-bg);
  cursor: not-allowed;
}
.select--error {
  background-color: var(--c-input-error-bg);
}

.area-chart {
  background-color: var(--c-profiles-col-bg);
  position: relative;
  overflow: hidden;
}
.area-chart--fullheight {
  flex: 1 0;
}
.area-chart__nodata {
  padding: 15px;
}
.area-chart .react-stockcharts-y-axis .tick line,
.area-chart .react-stockcharts-x-axis .tick line {
  stroke: var(--c-profiles-chart-tick-stroke);
}
.area-chart .react-stockcharts-y-axis .tick text,
.area-chart .react-stockcharts-x-axis .tick text {
  fill: var(--c-profiles-chart-tick-text);
  white-space: pre;
}
.area-chart .react-stockcharts-axis-domain {
  stroke: var(--c-profiles-chart-domain-stroke);
}
.area-chart__timerange {
  align-items: center;
  color: var(--c-profiles-timerange-text);
}
.area-chart__timerange-selector {
  display: inline-block;
  cursor: pointer;
  width: 25px;
  background-color: var(--c-profiles-timerange-selector-bg);
  margin: 3px 5px;
  border-radius: 2px;
  padding-bottom: 2px;
  text-align: center;
  font-size: 11px;
}
.area-chart__timerange-selector:hover, .area-chart__timerange-selector--selected {
  background-color: var(--c-profiles-timerange-selector-hover-bg);
  color: var(--c-profiles-timerange-hover-text);
}
.area-chart__score-switch {
  position: absolute;
  z-index: 9;
  left: 70px;
  top: 5px;
}

.area-chart__container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.insider-chart {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 0;
}
.insider-chart__fullchart {
  flex: 1 0;
  display: flex;
  flex-flow: column nowrap;
}
.insider-chart__fullchart .widget {
  height: 100%;
}

.react-stockcharts-marker-arrow {
  fill-opacity: 1;
  stroke-width: 1;
  stroke-opacity: 0.5;
  stroke: var(--c-chart-marker-outline);
}

.react-stockcharts-marker-arrow.buy {
  fill: var(--c-chart-marker-buy);
}

.react-stockcharts-marker-arrow.sell {
  fill: var(--c-chart-marker-sell);
}

.chart-legend {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
.chart-legend__switch {
  color: var(--c-chart-legend-text);
  flex: 0 0 auto;
  font-size: 12px;
  margin: 0 5px;
  cursor: pointer;
}
.chart-legend__switch:hover {
  color: var(--c-chart-legend-text-hover);
}
.chart-legend__switch--active {
  color: var(--c-chart-legend-text-active);
}
.chart-legend__switch-icon {
  display: inline-block;
  background-color: #fff;
  height: 8px;
  width: 8px;
  -webkit-mask-size: 8px 8px;
  -webkit-mask-repeat: no-repeat;
  mask-size: 8px 8px;
  mask-repeat: no-repeat;
  margin-right: 3px;
  text-decoration: none;
  -webkit-mask-image: url(bb9d6f9cb3fb1b4d62e2.svg);
  mask-image: url(bb9d6f9cb3fb1b4d62e2.svg);
}
.chart-legend__switch-icon--buy {
  background-color: var(--c-chart-legend-buy);
}
.chart-legend__switch:hover .chart-legend__switch-icon--buy, .chart-legend__switch--active .chart-legend__switch-icon--buy {
  background-color: var(--c-chart-legend-buy-active);
}
.chart-legend__switch-icon--sell {
  background-color: var(--c-chart-legend-sell);
  transform: rotate(180deg);
}
.chart-legend__switch:hover .chart-legend__switch-icon--sell, .chart-legend__switch--active .chart-legend__switch-icon--sell {
  background-color: var(--c-chart-legend-sell-active);
}
.chart-legend__switch-icon--exercise {
  background-color: var(--c-chart-legend-exercise);
  -webkit-mask-image: url(9f0854192d4fb4b6471a.svg);
  mask-image: url(9f0854192d4fb4b6471a.svg);
}
.chart-legend__switch:hover .chart-legend__switch-icon--exercise, .chart-legend__switch--active .chart-legend__switch-icon--exercise {
  background-color: var(--c-chart-legend-exercise-active);
}
.chart-legend__switch-icon--ex-buy {
  background-color: var(--c-chart-legend-ex-buy);
}
.chart-legend__switch:hover .chart-legend__switch-icon--ex-buy, .chart-legend__switch--active .chart-legend__switch-icon--ex-buy {
  background-color: var(--c-chart-legend-ex-buy-active);
}
.chart-legend__switch-icon--ex-sell {
  background-color: var(--c-chart-legend-ex-sell);
  transform: rotate(180deg);
}
.chart-legend__switch:hover .chart-legend__switch-icon--ex-sell, .chart-legend__switch--active .chart-legend__switch-icon--ex-sell {
  background-color: var(--c-chart-legend-ex-sell-active);
}
.chart-legend__switch-icon--split {
  background-color: var(--c-chart-legend-split);
  -webkit-mask-image: url(4471f3ac89e243b1fb89.svg);
  mask-image: url(4471f3ac89e243b1fb89.svg);
  height: 10px;
  width: 16px;
  -webkit-mask-size: 16px 10px;
  mask-size: 16px 10px;
}
.chart-legend__switch:hover .chart-legend__switch-icon--split, .chart-legend__switch--active .chart-legend__switch-icon--split {
  background-color: var(--c-chart-legend-split-active);
}
.chart-legend__switch-icon--subscribe {
  background-color: var(--c-chart-legend-subscribe);
  -webkit-mask-image: url(6d62bb2ae75a8764c118.svg);
  mask-image: url(6d62bb2ae75a8764c118.svg);
}
.chart-legend__switch:hover .chart-legend__switch-icon--subscribe, .chart-legend__switch--active .chart-legend__switch-icon--subscribe {
  background-color: var(--c-chart-legend-subscribe-active);
}

.context-menu {
  position: relative;
}

.context-menu__toggle {
  background-color: var(--context-menu-toggle-bg, transparent);
  color: var(--context-menu-toggle-color, #7a7a7a);
  border: 0;
  display: flex;
  padding: 10px;
  border-radius: 100%;
}

.context-menu__toggle:hover {
  background-color: var(--context-menu-toggle-bg-hover, #474747);
  color: var(--context-menu-toggle-color-hover, white);
}

.context-menu__toggle .icon svg {
  height: 1em;
  width: 1em;
  fill: currentColor;
}

.context-menu__menu {
  background-color: var(--context-menu__menu-bg, #2e2e2e);
  color: var(--context-menu__menu-color, white);
  box-shadow: rgba(0, 0, 0, 0.8) 0 1px 4px 0px;
  display: flex;
  flex-flow: column;
  margin-top: 10px;
  padding: 15px 10px;
  position: absolute;
}

.context-menu__menu-item {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  border: 0;
  background-color: transparent;
  white-space: nowrap;
  color: inherit;
  padding: 5px 0;
}

.context-menu__menu-item + .context-menu__menu-item {
  margin-top: 5px;
}

.context-menu__menu-item:hover {
  color: var(--context-menu__menu-item--hover__color, var(--c-hightlight));
  background-color: var(--context-menu__menu-item--hover__bg);
}

.context-menu__menu-item .icon {
  margin-right: 10px;
}

.context-menu__menu-item .icon > svg {
  height: 1em;
  width: 1em;
  fill: currentColor;
}

.context-menu--right .context-menu__menu {
  right: 0;
}

.columnfilter {
  padding: 15px;
}
.columnfilter__default {
  width: 200px;
}
.columnfilter__date {
  width: 280px;
}
.columnfilter__date--calendar {
  background-color: var(--c-columnfilter-dateicon-wrapper);
  border-radius: 2px;
  cursor: pointer;
  padding: 5px;
  padding-left: 6px;
  padding-right: 1px;
}
.columnfilter__date--calendar .svg {
  margin-right: 5px;
  width: 20px;
  color: var(--c-columnfilter-dateicon);
  fill: currentColor;
}
.columnfilter__date--calendar:hover .svg, .columnfilter__date--calendar.is-active .svg {
  color: var(--c-columnfilter-dateicon-active);
}
.columnfilter__hr {
  background-color: var(--c-columnfilter-hr);
}
.columnfilter h3 {
  color: var(--c-columnfilter-headline);
  margin-bottom: 10px;
}
.columnfilter__filter {
  clear: both;
  color: var(--c-columnfilter-filter-color);
  cursor: pointer;
  margin-bottom: 10px;
}
.columnfilter__filter .svg {
  float: left;
  margin-right: 5px;
  width: 16px;
  fill: var(--c-columnfilter-filter-color);
}
.columnfilter__filter .svg--is-active {
  fill: var(--c-columnfilter-filter-color-hover);
}
.columnfilter__inputwrapper {
  position: relative;
}
.columnfilter__inputwrapper .input {
  padding-right: 30px;
}
.columnfilter__inputwrapper .svg {
  position: absolute;
  right: 12px;
  top: 7px;
  width: 16px;
  fill: var(--c-columnfilter-searchicon);
}

.columnfilter__flatpickr .columnfilter__flatpickr-input {
  background-color: var(--c-columnfilter-flatpickr-background);
  border-radius: 0 0 2px 2px;
  padding: 10px;
}
.columnfilter__flatpickr .columnfilter__flatpickr-input .columnfilter__flatpickr-buttons {
  text-align: right;
}
.columnfilter__flatpickr .flatpickr-input {
  display: none;
}
.columnfilter__flatpickr .flatpickr-calendar {
  background: var(--c-columnfilter-flatpickr-background);
  border-radius: 2px;
  max-width: 280px;
}
.columnfilter__flatpickr .flatpickr-calendar.arrowTop::after, .columnfilter__flatpickr .flatpickr-calendar.arrowTop::before {
  border-bottom-color: var(--c-columnfilter-flatpickr-background);
  border-width: 8px;
  left: auto;
  right: 14px;
}
.columnfilter__flatpickr .dayContainer {
  max-width: 280px;
  min-width: 280px;
  width: 280px;
}
.columnfilter__flatpickr .flatpickr-current-month {
  font-size: 14px;
}
.columnfilter__flatpickr span.flatpickr-weekday {
  color: var(--c-columnfilter-flatpickr-weekday-color);
}
.columnfilter__flatpickr .flatpickr-weekday,
.columnfilter__flatpickr .flatpickr-day {
  max-width: 39px;
}
.columnfilter__flatpickr .flatpickr-day {
  border-radius: 0;
  font-size: 11px;
  height: 20px;
  line-height: 20px;
}
.columnfilter__flatpickr .flatpickr-day.selected.startRange,
.columnfilter__flatpickr .flatpickr-day.startRange.startRange,
.columnfilter__flatpickr .flatpickr-day.endRange.startRange,
.columnfilter__flatpickr .flatpickr-day.selected.endRange,
.columnfilter__flatpickr .flatpickr-day.startRange.endRange,
.columnfilter__flatpickr .flatpickr-day.endRange.endRange {
  border-radius: 0;
}
.columnfilter__flatpickr .flatpickr-day.selected,
.columnfilter__flatpickr .flatpickr-day.startRange,
.columnfilter__flatpickr .flatpickr-day.endRange,
.columnfilter__flatpickr .flatpickr-day.selected.inRange,
.columnfilter__flatpickr .flatpickr-day.startRange.inRange,
.columnfilter__flatpickr .flatpickr-day.endRange.inRange,
.columnfilter__flatpickr .flatpickr-day.selected:focus,
.columnfilter__flatpickr .flatpickr-day.startRange:focus,
.columnfilter__flatpickr .flatpickr-day.endRange:focus,
.columnfilter__flatpickr .flatpickr-day.selected:hover,
.columnfilter__flatpickr .flatpickr-day.startRange:hover,
.columnfilter__flatpickr .flatpickr-day.endRange:hover,
.columnfilter__flatpickr .flatpickr-day.selected.prevMonthDay,
.columnfilter__flatpickr .flatpickr-day.startRange.prevMonthDay,
.columnfilter__flatpickr .flatpickr-day.endRange.prevMonthDay,
.columnfilter__flatpickr .flatpickr-day.selected.nextMonthDay,
.columnfilter__flatpickr .flatpickr-day.startRange.nextMonthDay,
.columnfilter__flatpickr .flatpickr-day.endRange.nextMonthDay {
  background: var(--c-columnfilter-flatpickr-rangebg);
  border-color: var(--c-columnfilter-flatpickr-rangebg);
}
.columnfilter__flatpickr .flatpickr-day.inRange,
.columnfilter__flatpickr .flatpickr-day.endRange {
  background: var(--c-columnfilter-flatpickr-rangebg);
  box-shadow: none;
  color: var(--c-columnfilter-flatpickr-dayinrange);
}
.columnfilter__flatpickr .flatpickr-day.selected.startRange + .endRange,
.columnfilter__flatpickr .flatpickr-day.startRange.startRange + .endRange,
.columnfilter__flatpickr .flatpickr-day.endRange.startRange + .endRange {
  box-shadow: none;
}

.meta-col-heading .popover__content {
  width: 250px;
}

.meta-table__heading--number,
.meta-table__heading--date {
  text-align: right;
}

.meta-filter__sort {
  border-bottom: 1px solid var(--c-gray-200);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.meta-filter__order {
  align-items: center;
  display: flex;
  padding: 3px 0;
  font-size: 1.2em;
}
.meta-filter__order .svg {
  display: inline-block;
  fill: currentColor;
  margin-right: 5px;
  height: 0.9em;
  width: 0.9em;
}
.meta-filter__order:hover {
  color: var(--c-hightlight);
}

.meta-filter__order--active .svg {
  fill: var(--c-hightlight);
}

.meta-filter__filter-heading {
  color: var(--c-gray-200);
  font-weight: 400;
  font-size: 1.1em;
  margin-bottom: 5px;
}

.meta-filter__filter .input {
  background-color: var(--c-gray-600);
  padding-top: 5px;
  padding-bottom: 5px;
  height: auto;
}
.meta-filter__filter .select {
  background-color: var(--c-gray-600);
  padding-top: 5px;
  padding-bottom: 5px;
  height: auto;
}

.meta-filter__footer {
  margin-top: 10px;
  margin-left: -5px;
}

.meta-filter__form {
  margin-bottom: 0;
}

.meta-filter-number {
  margin-bottom: 0;
  display: flex;
  flex-flow: row nowrap;
}

.meta-filter-number__operation {
  width: 60px;
  margin-right: 5px;
}

.meta-col-heading .popover__content {
  max-width: none;
}

.meta-filter-enum {
  margin-bottom: 0;
}

.meta-filter-date {
  margin-bottom: 0;
}

.meta-filter-date__bar {
  display: flex;
  flex-flow: row nowrap;
  height: 30px;
}

.meta-filter-date__range {
  height: auto;
  margin-right: 5px;
  font-size: 1.1em;
  line-height: 1.1em;
}

.meta-filter-date__toggle {
  background-color: var(--c-gray-600);
  box-shadow: none;
  color: var(--c-gray-200);
  flex-basis: 30px;
  height: auto;
  margin-left: 0;
  min-width: auto;
  padding: 5px;
  transition: none;
}
.meta-filter-date__toggle:hover {
  background-color: var(--c-hightlight);
  color: var(--c-app-fontcolor);
  transition: color 0.2s, background-color 0.2s;
}
.meta-filter-date__toggle .svg {
  fill: currentColor;
}

.meta-filter-date__calendar {
  position: relative;
  background-color: var(--c-gray-900);
  margin-top: 8px;
  padding: 5px;
  border-radius: 3px;
  --c-flatpickr-bg: transparent;
  --c-flatpickr-month-color: var(--c-app-fontcolor);
  --c-flatpickr-weekday-color: var(--c-gray-400);
  --c-flatpickr-day-disabled-color: var(--c-gray-600);
  --c-flatpickr-day-inrange-bg: var(--c-gray-400);
  --c-flatpickr-day-inrange-color: #fff;
  --c-flatpickr-day-edgerange-bg: #fff;
  --c-flatpickr-day-edgerange-color: var(--c-gray-900);
}
.meta-filter-date__calendar::before {
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--c-gray-900);
  height: 0;
  right: 3px;
  position: absolute;
  top: 0;
  transform: translate(-50%, -5px);
  width: 0;
  z-index: 101;
}
.meta-filter-date__calendar .flatpickr-input {
  display: none;
}
.meta-filter-date__calendar .flatpickr-calendar {
  background-color: var(--c-flatpickr-bg);
  top: 0;
  width: auto;
  max-height: none;
}
.meta-filter-date__calendar .dayContainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-flow: row dense;
  grid-auto-rows: 1fr;
  place-content: center center;
  max-width: none;
  min-width: 0;
  width: 100%;
}
.meta-filter-date__calendar .flatpickr-months .flatpickr-month {
  font-size: 0.7em;
  color: var(--c-flatpickr-month-color);
}
.meta-filter-date__calendar .flatpickr-months .flatpickr-prev-month svg,
.meta-filter-date__calendar .flatpickr-months .flatpickr-next-month svg {
  width: 10px;
  height: 10px;
}
.meta-filter-date__calendar .flatpickr-days {
  width: 100%;
}
.meta-filter-date__calendar .flatpickr-innerContainer {
  width: 100%;
}
.meta-filter-date__calendar .flatpickr-rContainer {
  width: 100%;
}
.meta-filter-date__calendar span.flatpickr-weekday {
  color: var(--c-flatpickr-weekday-color);
  font-weight: 400;
  font-size: 0.8em;
}
.meta-filter-date__calendar .flatpickr-day {
  display: flex;
  align-items: center;
  width: auto;
  height: 25px;
  max-width: none;
  max-height: none;
  line-height: 1;
  font-size: 0.8em;
}
.meta-filter-date__calendar .flatpickr-day.inRange {
  background-color: var(--c-flatpickr-day-inrange-bg);
  box-shadow: none;
}
.meta-filter-date__calendar .flatpickr-day.disabled {
  color: var(--c-flatpickr-day-disabled-color);
}
.meta-filter-date__calendar .flatpickr-day.today {
  background-color: var(--c-flatpickr-day-today-bg);
  color: var(--c-flatpickr-day-today-color);
}
.meta-filter-date__calendar .flatpickr-day.startRange, .meta-filter-date__calendar .flatpickr-day.endRange {
  background-color: var(--c-flatpickr-day-edgerange-bg);
  color: var(--c-flatpickr-day-edgerange-color);
}

.meta-filter-date__calendar-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--c-gray-600);
  padding-top: 0.5em;
  margin-top: 0.5em;
}

.company-profile .row + .row, .insider-profile .row + .row {
  margin-top: 15px;
}
.company-profile .col + .col, .insider-profile .col + .col {
  margin-left: 5px;
}
.company-profile .col h1, .insider-profile .col h1 {
  font-family: var(--f-bold);
  font-size: 16px;
  margin-bottom: 0;
}

.company-profile__score {
  width: 45%;
}
.company-profile__facts {
  width: 100%;
  min-height: 159px;
}
.company-profile__scoressl {
  width: 100%;
}
.company-profile__roster {
  width: 65%;
}
.company-profile__summary {
  width: calc(35% - 5px);
  margin-left: 5px;
  min-width: 330px;
}
.company-profile__transactions {
  min-width: 100%;
}
.company-profile__chart {
  margin-left: 5px;
  width: calc(55% - 5px);
}
.company-profile__chart .area-chart--nodata {
  min-height: 262px;
  padding: 20px;
  font-size: 20px;
}

.insider-profile__score {
  width: 45%;
}
.insider-profile__details {
  display: flex;
  flex-direction: column;
  width: calc(60% - 5px);
}
.insider-profile__tradingiq {
  width: 100%;
}
.insider-profile__tradingiq .row {
  background-color: var(--c-company-profile-tradingiq-bg);
  justify-content: space-around;
  padding: 13px 17px;
  margin: 0;
}
.insider-profile__tradingiq .row .col {
  min-height: 95px;
  width: 100px;
  flex-grow: 1;
}
.insider-profile__education, .insider-profile__outperformance {
  width: 100%;
}
.insider-profile__education {
  display: flex;
  flex-direction: column;
  width: 40%;
}
.insider-profile__roster {
  width: 65%;
}
.insider-profile__summary {
  width: calc(35% - 5px);
  margin-left: 5px;
  min-width: 330px;
}
.insider-profile__chart {
  margin-left: 5px;
  width: calc(55% - 5px);
}
.insider-profile__chart .area-chart--nodata {
  min-height: 303px;
  font-size: 20px;
  text-align: center;
  padding: 20px;
}
.insider-profile__transactions {
  min-width: 100%;
}
.insider-profile__col-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.insider-profile__col-header h1 {
  margin-bottom: 0;
}

.company-results-wrapper {
  height: auto;
}
.company-results-wrapper__header {
  display: flex;
  height: 35px;
  justify-content: flex-start;
  align-items: center;
  background-color: transparent;
  border-bottom: none;
}
.company-results-wrapper__header h1 {
  margin-bottom: 0;
}



.result {
  display: flex;
  flex-flow: column;
}
.result__header {
  padding: 15px 30px;
}
.result__header h3 {
  color: var(--c-result-headline);
  font-family: var(--f-bold);
  font-size: 13px;
  text-transform: uppercase;
}
.result__container {
  box-sizing: border-box;
  padding: 5px 30px;
}
.result__container-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}
.result__container-header h1 {
  font-family: var(--f-bold);
  font-size: 16px;
  margin-bottom: 0;
}
.result__container__compensation {
  margin: 0px -30px;
}
.result__table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  width: 100%;
}
.result__table th,
.result__table td {
  padding: 7px 0 7px 15px;
}
.result__table th:last-child,
.result__table td:last-child {
  padding-right: 15px;
}
.result__table th.is-number,
.result__table td.is-number {
  text-align: right;
  white-space: nowrap;
}
.result__table th.nowrap,
.result__table td.nowrap {
  white-space: nowrap;
}
.result__table th.has-contextmenu,
.result__table td.has-contextmenu {
  position: relative;
}
.result__table th.has-contextmenu .tableheader__has-contextmenu,
.result__table td.has-contextmenu .tableheader__has-contextmenu {
  border-bottom: 1px dotted var(--c-result-th-hascontext);
  cursor: pointer;
}
.result__tableheading {
  background-color: var(--c-result-tableheading-bg);
  font-family: var(--f-bold);
  text-align: left;
}
.result__tableheading th {
  white-space: nowrap;
}
.result__tablerow {
  transition: mask-image 0.3s, background-color 0.3s;
  transition: -webkit-mask-image 0.3s, background-color 0.3s;
}
.result__tablerow:nth-of-type(even) {
  background-color: var(--c-result-row-even);
}
.result__tablerow:nth-of-type(odd) {
  background-color: var(--c-result-row-odd);
}
.result__tablerow:hover {
  background-color: var(--c-result-row-highlight);
}
.result__tablerow.is-selected {
  background-color: var(--c-result-row-selection);
}
.result .result__table .table-border {
  border: 1px solid var(--c-company-profile-table-border);
}
.result .result__table .result__tablecol-nodata-content {
  height: 44px;
  font-size: 20px;
}
.result .result__table .result__tablecol-empty-content {
  height: 15px;
}
.result .result__table .result__tablecol-ticker {
  width: 60px;
}
.result .result__table .result__tablecol-link {
  text-decoration: none;
  color: var(--c-result-link);
}
.result .result__table .result__tablecol-link--text {
  border-bottom: 1px var(--c-result-link-dash) dashed;
}
.result .result__table .result__tablecol-link--text:hover, .result .result__table .result__tablecol-link--text.is-selected {
  border-bottom-color: var(--c-result-link-hover);
}
.result .result__table .result__tablecol-link:hover, .result .result__table .result__tablecol-link.is-selected {
  color: var(--c-result-link-hover);
  cursor: pointer;
}
.result .result__table .result__tablecol-ttype .result__tablecol-ttype-label {
  color: var(--c-result-sup-label);
  font-size: 9px;
}
.result .result__table .result__tablecol-ttype-label {
  color: var(--c-result-sup-label);
  font-size: 9px;
  margin-left: 4px;
}
.result .result__table .result__tablecol-tdate {
  width: 60px;
}
.result .result__table .result__tablecol-iq5y20dAll, .result .result__table .result__tablecol-iq5y240dAll, .result .result__table .result__tablecol-tradeCount2yBuy, .result .result__table .result__tablecol-tradeCount2ySell {
  text-align: center;
  width: 35px;
}
.result .result__table .result__tablecol-symbol {
  width: 100px;
}
.result .result__table .result__tablecol-type {
  width: 100px;
}
.result .result__table .result__tablecol-action {
  padding: 0 10px;
  width: 50px;
}
.result .result__table .result__tablecol-transactions-significance .svg,
.result .result__table .result__tablecol-trade-significance .svg {
  display: inline-block;
  margin-right: 5px;
  width: 10px;
  fill: var(--c-company-profile-insider-significance);
}
.result .result__table .result__tablecol-transactions-significance .svg:last-of-type,
.result .result__table .result__tablecol-trade-significance .svg:last-of-type {
  margin-right: 0;
}
.result .result__table .result__tablecol-valueUSD, .result .result__table .result__tablecol-value, .result .result__table .result__tablecol-holdings,
.result .result__table .result__tablecol-shares, .result .result__table .result__tablecol-price,
.result .result__table .result__tablecol-BUY, .result .result__table .result__tablecol-SELL, .result .result__table .result__tablecol-EXERCISE,
.result .result__table .result__tablecol-holdingspercentage, .result .result__table .result__tablecol-nettrading, .result .result__table .result__tablecol-netcashflow {
  text-align: right;
}
.result .result__table .result__tablecol-icon {
  display: inline-block;
  background-color: var(--c-label-color);
  height: 12px;
  width: 8px;
  -webkit-mask-size: 8px 12px;
  -webkit-mask-repeat: no-repeat;
  mask-size: 8px 12px;
  mask-repeat: no-repeat;
  margin-right: 5px;
  text-decoration: none;
  flex: 0 0 auto;
}
.result .result__table .result__tablecol-icon-wrapper {
  display: inline-flex;
}
.result .result__table .result__tablecol-icon--male {
  -webkit-mask-image: url(d8ace32584157ce00a70.svg);
  mask-image: url(d8ace32584157ce00a70.svg);
  width: 12px;
  height: 9px;
  -webkit-mask-size: auto 9px;
  mask-size: auto 9px;
  margin-top: 3px;
}
.result .result__table .result__tablecol-icon--female {
  -webkit-mask-image: url(73f88e7d6d517c244f43.svg);
  mask-image: url(73f88e7d6d517c244f43.svg);
  width: 12px;
  height: 12px;
  -webkit-mask-size: auto 12px;
  mask-size: auto 12px;
  margin-top: 3px;
}
.result .result__table .result__tablecol-icon--buy {
  background-color: var(--c-chart-marker-buy);
  -webkit-mask-image: url(c3cdcc3090a1c87afe4f.svg);
  mask-image: url(c3cdcc3090a1c87afe4f.svg);
}
.result .result__table .result__tablecol-icon--sell {
  background-color: var(--c-chart-marker-sell);
  -webkit-mask-image: url(901e1fad6b102479a7aa.svg);
  mask-image: url(901e1fad6b102479a7aa.svg);
}
.result .result__table .result__tablecol-icon--exercise {
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(9f0854192d4fb4b6471a.svg);
  background-repeat: no-repeat;
  background-size: 8px;
  height: 8px;
}
.result .result__table .result__tablecol-icon--subscribe {
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(6d62bb2ae75a8764c118.svg);
  background-repeat: no-repeat;
  background-size: 8px;
  height: 8px;
}
.result .result__table .result__tablecol-icon--award {
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(a1d135f60d84808f2d2e.svg);
  background-repeat: no-repeat;
  background-size: 8px;
  height: 8px;
}
.result .result__table .result__tablecol-text--wrap {
  white-space: normal;
  display: inline-block;
  text-align: right;
}

.result__tableheading-col-text {
  cursor: pointer;
}
.result__tableheading-col-text:hover {
  color: var(--c-result-sort-arrow-active);
}
.result__tableheading-col-text--wrap {
  white-space: normal;
  display: inline-block;
  text-align: right;
}

.result__tableheading--sorticon {
  cursor: pointer;
}
.result__tableheading--sorticon .svg {
  display: inline-block;
  margin-left: 5px;
  width: 11px;
  fill: var(--c-result-sort-arrow);
}
.result__tableheading--sorticon .svg.svg--is-active {
  fill: var(--c-result-sort-arrow-active);
}

.table-footer {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  align-items: center;
}
.table-footer__info {
  color: var(--c-table-footer-info);
}

.pagination {
  display: inline-flex;
  align-items: center;
  color: var(--c-pagination);
}
.pagination__arrow {
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  width: 10px;
}
.pagination__arrow .svg {
  fill: var(--c-pagination-arrow);
}
.pagination__arrow .svg--reverse {
  transform: rotate(180deg);
}
.pagination__arrow .svg:hover {
  fill: var(--c-pagination-arrow-hover);
}
.pagination__arrow--disabled .svg {
  fill: var(--c-pagination-arrow-disabled);
}
.pagination__arrow--disabled .svg:hover {
  fill: var(--c-pagination-arrow-disabled);
}
.pagination__input {
  width: 35px;
  height: 30px;
  font-size: 16px;
  padding-left: 0;
  text-align: center;
}

.insider-roster {
  width: 100%;
}

.search-box {
  background-color: var(--c-search-box-bg);
  border-radius: 5px;
  padding: 20px 50px;
}
.search-box__headline {
  color: var(--c-search-box-headline);
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
}
.search-box__control {
  align-items: stretch;
  background-color: var(--c-search-box-control-bg);
  border-radius: 3px;
  display: flex;
  flex-flow: row nowrap;
  padding: 3px;
}
.search-box__submit {
  flex: 0 0 auto;
  font-weight: 700;
  min-width: 50px;
}
.search-box__input,
.search-box .input {
  background-color: transparent;
  flex: 1 0;
  height: 35px;
  padding-left: 5px;
}
.search-box__input:focus,
.search-box .input:focus {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.start {
  padding-top: 30px;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}
.start__headline {
  color: var(--c-startscreen-headline);
  font-size: 36px;
  font-weight: 300;
  text-align: center;
  margin-bottom: -15px;
}
.start__teaser {
  color: var(--c-startscreen-teaser);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 40px;
  text-align: center;
}
.start__intro {
  display: flex;
  flex: 1 0 500px;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}
.start__section {
  display: flex;
  flex-flow: column nowrap;
  border-top: 1px solid var(--c-statrscreen-section-border);
  padding-top: 20px;
  box-sizing: border-box;
  flex: 0 0 300px;
}
.start__section-headline {
  color: var(--c-startscreen-section-headline);
  font-size: 20px;
  margin-bottom: 15px;
}
.start__section-content {
  color: var(--c-startscreen-section-headline);
  font-size: 20px;
  flex: 1 0;
}
.start__chart {
  display: flex;
  flex-flow: column nowrap;
}
.start__chart .widget {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.start__chart .widget__header-title h1 {
  font-size: 13px;
}
.start__chart .react-stockcharts-crosshair-cursor {
  cursor: default;
}
.start .suggestions__table th,
.start .suggestions__table td {
  padding-left: 0;
}
.start .suggestions__tableheading {
  margin-left: 0;
}

.init-welcome {
  background-image: url(8054a0658f38eeeb0472.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.nav__list {
  display: flex;
}
.nav__item {
  margin: 0 20px;
}
.nav__item:first-child {
  margin-left: 0;
}
.nav__link {
  cursor: pointer;
  text-decoration: none !important;
}
.nav__link--active {
  text-decoration: underline !important;
}

.view-header {
  padding: 0 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.view-header__headline {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0;
  margin-right: 30px;
}

.view-header__subtile {
  color: var(--c-welcomescreen-teaser);
  font-size: 13px;
}

.view-header__nav {
  text-transform: uppercase;
}

.watchlist__headerwrapper {
  min-width: 40%;
}
.watchlist__headerwrapper h1 {
  color: var(--c-watchlist-headline);
  font-family: var(--f-bold);
  font-size: 16px;
  height: 30px;
  line-height: 34px;
  margin-bottom: 10px;
}
.watchlist__headerwrapper h1 span {
  color: var(--c-watchlist-headline-counter);
}
.watchlist__headerwrapper .watchlist__editinput {
  margin-bottom: 15px;
}
.watchlist__table {
  margin-bottom: 10px;
}
.watchlist__ctxmenu {
  box-sizing: border-box;
  padding: 15px 0;
  width: 230px;
}
.watchlist__ctxmenu h4 {
  color: var(--c-ctx-copy-headline);
  font-family: var(--f-bold);
  font-size: 13px;
  margin-bottom: 10px;
  padding: 0 15px;
}
.watchlist__ctxmenu hr {
  margin-bottom: 10px;
  margin-top: 10px;
}
.watchlist__ctxmenu__copyheadline {
  color: var(--c-ctx-copy-headline);
  font-family: var(--f-bold);
  font-size: 13px;
  margin-bottom: 10px;
}
.watchlist__ctxmenu__link {
  color: var(--c-ctx-link);
  cursor: pointer;
  display: block;
  font-size: 13px;
  margin-bottom: 10px;
  max-width: 200px;
  overflow: hidden;
  padding: 0 15px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watchlist__ctxmenu__link .svg {
  fill: var(--c-ctx-link);
  float: left;
  height: 12px;
  margin-right: 7px;
  margin-top: 2px;
  width: 12px;
}
.watchlist__ctxmenu__link:last-of-type {
  margin-bottom: 0;
}
.watchlist__ctxmenu__link:hover {
  color: var(--c-ctx-link-hover);
  cursor: pointer;
}
.watchlist__ctxmenu__link:hover .svg {
  fill: var(--c-ctx-link-hover);
}
.watchlist__ctxmenu__link.is-disabled {
  color: var(--c-ctx-copy-headline);
}
.watchlist__ctxmenu__link.is-disabled .svg {
  fill: var(--c-ctx-copy-headline);
}
.watchlist__ctxmenu__link.is-disabled:hover {
  color: var(--c-ctx-copy-headline);
  cursor: default;
}
.watchlist__copy-headline {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 15px;
  max-width: 500px;
}
.watchlist__copy-headline-name {
  color: var(--c-watchlist-headline);
}
.watchlist__copy-headline-length {
  color: var(--c-watchlist-headline-counter);
}
.watchlist__copy-success {
  margin-top: 150px;
  text-align: center;
}
.watchlist__copy-success-buttons {
  margin-top: 50px;
}

.watchlist-edit__headline {
  font-size: 14px;
  margin-bottom: 15px;
}
.watchlist-edit__headline-name {
  color: var(--c-watchlist-headline);
}
.watchlist-edit__headline-length {
  color: var(--c-watchlist-headline-counter);
}
.watchlist-edit__success {
  margin-top: 150px;
  text-align: center;
}
.watchlist-edit__success-buttons {
  margin-top: 50px;
}

.watchlist-add {
  clear: both;
}
.watchlist-add .input {
  margin-bottom: 20px;
}
.watchlist-add__horizontal-wrapper {
  display: flex;
  margin-bottom: 20px;
}
.watchlist-add__input-wrapper {
  flex: 2 1 auto;
}
.watchlist-add__help-wrapper {
  flex: 1 1 100px;
}
.watchlist-add__help-wrapper h4 {
  color: var(--c-watchlist-headline-counter);
  padding-left: 25px;
}
.watchlist-add__help-wrapper ul {
  list-style-type: disc;
  padding-left: 25px;
}
.watchlist-add__controlls-wrapper {
  clear: both;
  height: 24px;
}
.watchlist-add__controlls-switch {
  float: left;
}
.watchlist-add__controlls-buttons {
  float: right;
}
.watchlist-add__controlls-buttons .button:first-of-type {
  margin-right: 20px;
}

.watchlist-copy__headline {
  color: var(--c-watchlist-copy-fontcolor);
  font-size: 14px;
  margin-bottom: 15px;
}
.watchlist-copy__list .checkbox {
  margin-bottom: 5px;
}
.watchlist-copy__wlname {
  color: var(--c-watchlist-copy-fontcolor);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.welcome {
  padding-top: 30px;
}
.welcome__headline {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: -15px;
}
.welcome__teaser {
  color: var(--c-welcomescreen-teaser);
  font-size: 18px;
  margin-bottom: 40px;
}
.welcome__appversion {
  color: var(--c-welcomescreen-teaser);
  font-size: 12px;
  text-align: right;
}
.welcome__header {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.welcome__notification-message {
  margin-left: auto;
}
.welcome__section {
  display: flex;
  flex-flow: column;
}
.welcome__section-headline {
  color: var(--c-welcomescreen-section-headline);
  font-size: 20px;
  margin-bottom: 15px;
}
.welcome__section-content {
  color: var(--c-welcomescreen-section-headline);
  display: flex;
  flex: 1 0;
  flex-flow: column;
  font-size: 20px;
}
.welcome__section-content > .row {
  flex: 1;
}
.welcome__watchlist {
  display: flex;
  flex-flow: column;
}
.welcome__watchlist .widget {
  display: flex;
  flex: 1;
  flex-flow: column;
}
.welcome__watchlist .widget__content {
  flex: 1 0;
}
.welcome__chart {
  height: 30%;
}
.welcome__chart .widget__header-title h1 {
  font-size: 13px;
}
.welcome__chart .react-stockcharts-crosshair-cursor {
  cursor: default;
}
.welcome__overlay {
  position: absolute;
  top: 70px;
  left: 75px;
  right: 0;
  bottom: 30px;
  background-color: var(--c-welcomescreen-learn-bg);
  opacity: 0.9;
  z-index: 999;
}
.welcome__overlay-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 990;
}
.welcome__overlay-desc {
  position: absolute;
  cursor: default;
}
.welcome__overlay-desc--start {
  top: -25px;
  left: -5px;
}
.welcome__overlay-desc--fav {
  top: 35px;
  left: -10px;
}
.welcome__overlay-desc--scr {
  top: 90px;
  left: -10px;
}
.welcome__overlay-desc--wl {
  top: 150px;
  left: -10px;
}
.welcome__overlay-desc--hist {
  top: 205px;
  left: -10px;
}
.welcome__overlay-desc--fdc {
  top: 265px;
  left: -10px;
}
.welcome__overlay-desc--cli {
  top: -15px;
  right: 50%;
  text-align: center;
}
.welcome__overlay-desc--add-fav {
  top: -15px;
  right: 45px;
  text-align: right;
}
.welcome__overlay-desc--set {
  bottom: 23px;
  left: -15px;
}
.welcome__overlay-desc--app-stat {
  bottom: -5px;
  right: 50%;
  text-align: center;
}
.welcome__overlay-arrow {
  display: inline-block;
  -webkit-mask-image: url(a8e12920a11f0557d105.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 30px 25px;
  mask-image: url(a8e12920a11f0557d105.svg);
  mask-repeat: no-repeat;
  mask-size: 30px 25px;
  width: 35px;
  height: 18px;
  margin-right: 5px;
  background-color: var(--c-hightlight);
}
.welcome__overlay-arrow--long {
  height: 30px;
  -webkit-mask-image: url(c56aba06297d9a481b29.svg);
  mask-image: url(c56aba06297d9a481b29.svg);
}
.welcome__overlay-arrow--top {
  -webkit-mask-position: 50%;
  mask-position: 50%;
  margin-right: 0;
  margin-bottom: 10px;
  transform: rotate(90deg);
}
.welcome__overlay-arrow--bottom {
  -webkit-mask-position: 50%;
  mask-position: 50%;
  margin-right: 0;
  margin-top: 10px;
  transform: rotate(270deg);
}
.welcome__overlay-label {
  color: var(--c-hightlight);
  font-size: 16px;
}
.welcome__overlay-label--block {
  font-size: 16px;
  display: block;
}
.welcome .suggestions__table th,
.welcome .suggestions__table td {
  padding-left: 0;
}
.welcome .suggestions__tableheading {
  margin-left: 0;
}

.welcome__learn {
  display: flex;
  flex: 1 0;
  flex-flow: column;
  justify-content: space-between;
}

.welcome__learn-item {
  transition: -webkit-mask-image 0.2s, background-color 0.2s;
  transition: mask-image 0.2s, background-color 0.2s;
  background-color: var(--c-welcomescreen-learn-bg);
  padding: 15px;
}
.welcome__learn-item:hover {
  background-color: var(--c-welcomescreen-learn-bg-hover);
  cursor: pointer;
}
.welcome__learn-item + .welcome__learn-item {
  margin-top: 10px;
}

.welcome__learn-headline {
  margin-bottom: 0;
}

.welcome__learn-teaser {
  font-size: 14px;
  margin: 5px 0;
}

.watchlist__table {
  margin-bottom: 0;
}

.init-welcome {
  background-image: url(8054a0658f38eeeb0472.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.notification-message {
  align-items: center;
  color: var(--c-welcome-notification-color);
  display: flex;
  flex-flow: row nowrap;
  cursor: pointer;
}
.notification-message svg {
  margin-left: 5px;
  height: 1em;
  width: auto;
  fill: currentColor;
}

.company-profile .row + .row, .insider-profile .row + .row {
  margin-top: 15px;
}
.company-profile .col + .col, .insider-profile .col + .col {
  margin-left: 5px;
}
.company-profile .col h1, .insider-profile .col h1 {
  font-family: var(--f-bold);
  font-size: 16px;
  margin-bottom: 0;
}

.company-profile__score {
  width: 45%;
}
.company-profile__facts {
  width: 100%;
  min-height: 159px;
}
.company-profile__scoressl {
  width: 100%;
}
.company-profile__roster {
  width: 65%;
}
.company-profile__summary {
  width: calc(35% - 5px);
  margin-left: 5px;
  min-width: 330px;
}
.company-profile__transactions {
  min-width: 100%;
}
.company-profile__chart {
  margin-left: 5px;
  width: calc(55% - 5px);
}
.company-profile__chart .area-chart--nodata {
  min-height: 262px;
  padding: 20px;
  font-size: 20px;
}

.insider-profile__score {
  width: 45%;
}
.insider-profile__details {
  display: flex;
  flex-direction: column;
  width: calc(60% - 5px);
}
.insider-profile__tradingiq {
  width: 100%;
}
.insider-profile__tradingiq .row {
  background-color: var(--c-company-profile-tradingiq-bg);
  justify-content: space-around;
  padding: 13px 17px;
  margin: 0;
}
.insider-profile__tradingiq .row .col {
  min-height: 95px;
  width: 100px;
  flex-grow: 1;
}
.insider-profile__education, .insider-profile__outperformance {
  width: 100%;
}
.insider-profile__education {
  display: flex;
  flex-direction: column;
  width: 40%;
}
.insider-profile__roster {
  width: 65%;
}
.insider-profile__summary {
  width: calc(35% - 5px);
  margin-left: 5px;
  min-width: 330px;
}
.insider-profile__chart {
  margin-left: 5px;
  width: calc(55% - 5px);
}
.insider-profile__chart .area-chart--nodata {
  min-height: 303px;
  font-size: 20px;
  text-align: center;
  padding: 20px;
}
.insider-profile__transactions {
  min-width: 100%;
}
.insider-profile__col-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.insider-profile__col-header h1 {
  margin-bottom: 0;
}

.company-results-wrapper {
  height: auto;
}
.company-results-wrapper__header {
  display: flex;
  height: 35px;
  justify-content: flex-start;
  align-items: center;
  background-color: transparent;
  border-bottom: none;
}
.company-results-wrapper__header h1 {
  margin-bottom: 0;
}

.widget {
  display: flex;
  flex-flow: column;
  --widget-header-height: 35px;
}
.widget__header {
  display: flex;
  justify-content: space-between;
  background-color: var(--c-widget-header-bg);
  border-bottom: solid 1px var(--c-widget-header-border);
  padding: 0 15px;
  align-items: center;
  margin: 0;
  white-space: nowrap;
  flex: 0 0 var(--widget-header-height);
}
.widget__header h1 {
  font-size: 16px;
  margin-bottom: -2px;
}
.widget__header-title {
  display: flex;
  align-items: center;
}
.widget__content {
  flex: 1 0;
  position: relative;
}
.widget__content--gapped {
  background-color: var(--c-widget-content-bg);
  padding: 13px 17px;
}
.widget__content--fullheight {
  display: flex;
}

.widget__action {
  align-items: baseline;
  display: inline-flex;
  flex-flow: row;
  margin-left: auto;
}
.widget__action .svg {
  align-self: center;
  fill: var(--c-hightlight);
  margin-left: 0.5em;
  height: 0.7em;
  width: 0.7em;
}

.widget--gapped .widget__content {
  background-color: var(--c-widget-content-bg);
  padding: 13px 17px;
}

.widget--with-ribbon {
  position: relative;
}

.widget__ribbon {
  overflow: hidden;
  width: 75px;
  height: 75px;
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 1;
  text-align: center;
}

.widget__ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: var(--c-ribbon-textcolor);
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: var(--c-ribbon);
  box-shadow: 0 3px 10px -5px black;
  position: absolute;
  top: 19px;
  right: -21px;
}

.widget__ribbon span::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid var(--c-ribbon);
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid var(--c-ribbon);
}

.widget__ribbon span::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid var(--c-ribbon);
  border-bottom: 3px solid transparent;
  border-top: 3px solid var(--c-ribbon);
}

.details-table {
  border-spacing: 0;
  font-size: 12px;
  width: 100%;
}
.details-table thead td,
.details-table tbody td {
  padding-bottom: 5px;
  padding-top: 5px;
}
.details-table thead td.details-table__content--tall,
.details-table tbody td.details-table__content--tall {
  font-size: 12px;
  padding: 8px 0;
}
.details-table thead td.details-table__content--nopaddingtop,
.details-table tbody td.details-table__content--nopaddingtop {
  padding-top: 0;
}
.details-table thead td {
  border-bottom: 1px solid var(--c-company-profile-details-separator);
  font-weight: bold;
}
.details-table tbody td {
  border-top: 1px solid var(--c-company-profile-details-separator);
}
.details-table tbody td.details-table__content--noborder {
  border-top: none;
}

.tradingiq--tradingiq {
  width: 100%;
}
.tradingiq__circle {
  display: inline-block;
  background-color: var(--c-insider-profile-circle-bg);
  border-radius: 50%;
  height: 90px;
  text-align: center;
  width: 90px;
}
.tradingiq__circle-number {
  font-size: 30px;
  font-weight: bold;
  margin-top: 15px;
  text-align: center;
}
.tradingiq__circle-label {
  color: var(--c-insider-profile-circle-label);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.tradingiq__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.tradingiq__labels .label {
  white-space: nowrap;
}
.tradingiq__nodata {
  min-height: 115px;
  color: white;
  font-size: 20px;
  padding-top: 20px !important;
}
.tradingiq .widget__content {
  background-color: var(--c-company-profile-tradingiq-bg);
  justify-content: space-around;
  padding: 13px 17px;
  margin: 0;
}
.tradingiq .widget__content .col {
  min-height: 95px;
  width: 100px;
  flex-grow: 1;
}

.score-color--color1 {
  color: var(--c-score1);
}
.score-color--color2 {
  color: var(--c-score2);
}
.score-color--color3 {
  color: var(--c-score3);
}
.score-color--color4 {
  color: var(--c-score4);
}
.score-color--color5 {
  color: var(--c-score5);
}
.score-color--color6 {
  color: var(--c-score6);
}
.score-color--nodata {
  color: var(--c-app-fontcolor);
  font-size: 20px !important;
  margin-top: 12px;
}

.scoressl {
  display: flex;
  justify-content: space-around;
  background: black;
  padding: 18px 15px;
}
.scoressl__chart--bar {
  position: relative;
  margin: 0;
  flex: 1 1 auto;
  width: 62px;
}
.scoressl__chart-overlay {
  background: rgba(255, 255, 255, 0.3);
  height: 50px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  border: var(--c-profiles-sparkline-outline) solid 1px;
}
.scoressl__score {
  flex: 1 1 auto;
  width: 50px;
}
.scoressl__score--right {
  text-align: right;
}
.scoressl__score-content {
  display: inline-block;
}
.scoressl__score-number {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
.scoressl__score-label {
  color: var(--c-insider-profile-circle-label);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.scoressl--nodata {
  min-height: 82px;
  color: white;
  background-color: #222;
  padding: 12px 15px !important;
  justify-content: start;
}
.scoressl .react-stockcharts-crosshair-cursor {
  cursor: default;
}

.embed-code {
  margin-top: 0.5em;
  display: flex;
  align-items: center;
  column-gap: 0.5em;
}

.component-view-container {
  display: flex;
  flex-flow: column;
  flex: 1 0;
  min-height: 100%;
}

.component-view {
  display: grid;
  flex: 1 0;
  grid-template-columns: 1fr;
  grid-gap: 15px;
}

.component-view-header {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  padding: 5px 0 10px;
}

.component-view-header__title {
  margin: 0;
  text-transform: uppercase;
  font-size: 16px;
  font-family: "LatoBold", sans-serif;
  margin-right: 20px;
}

.component-view-header__nav {
  text-transform: uppercase;
}
.component-view-header__nav .nav__item--active .link {
  text-decoration: underline;
}

.component-view-header .ddlgroup {
  margin-left: auto;
}

.component {
  position: relative;
  display: grid;
}

.widget__content--loading {
  background-color: var(--c-widget-content-bg);
  position: relative;
  min-height: 150px;
}
.widget__content--loading .loader__spinner {
  top: 50%;
  margin-top: -20px;
}

.widget-section {
  display: flex;
  flex-flow: column;
}

.widget-section__title {
  margin-bottom: 10px;
  margin-top: 15px;
  flex: 0 0 auto;
}

.widget-section__body {
  display: grid;
  flex: 1 0;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-gap: 15px;
}

.widget-title {
  color: #888;
  font-size: 18px;
  padding: 20px 0 0;
}

.widget-title__headline {
  color: #ffad1f;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: -15px;
}

.widget-title__teaser {
  margin-bottom: 0;
}

.component-shortinterest-disclosures-chart .highcharts-container,
.component-shortinterest-chart2 .highcharts-container,
.component-qchart .highcharts-container {
  width: 100% !important;
  background-color: #2f2e2e;
}
.component-shortinterest-disclosures-chart .highcharts-root,
.component-shortinterest-chart2 .highcharts-root,
.component-qchart .highcharts-root {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.subscription__clear {
  background-color: var(--c-alert-bg);
  width: 50%;
  margin: 50px auto;
  border-radius: 3px;
  color: var(--c-alert-color);
  text-align: center;
  padding: 5px;
}

.component-view--des {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas: "fac fac fac fac fac fac chr chr chr chr chr chr" "cos cos cos sis sis sis chr chr chr chr chr chr" "inh inh inh inh inh inh inh inh qus qus qus qus" "trd trd trd trd trd trd trd trd trd trd trd trd";
}
.component-view--des .component-company-facts {
  grid-area: fac;
}
.component-view--des .component-score-sl--company-score {
  grid-area: cos;
}
.component-view--des .component-score-sl--short-interest {
  grid-area: sis;
}
.component-view--des .component-company-chart {
  grid-area: chr;
}
.component-view--des .component-data-grid--insider-holdings {
  grid-area: inh;
}
.component-view--des .component-data-grid--quarterly-summary {
  grid-area: qus;
}
.component-view--des .component-data-grid--trades {
  grid-area: trd;
}

.component-view--profile {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas: "iiq iiq iiq iiq iiq iiq chr chr chr chr chr chr" "sta sta sta sta sta sta chr chr chr chr chr chr" "edu edu edu edu edu pro pro pro pro pro pro pro" "inh inh inh inh inh inh inh inh sum sum sum sum" "trd trd trd trd trd trd trd trd trd trd trd trd";
}
.component-view--profile .component-insider-iq {
  grid-area: iiq;
}
.component-view--profile .component-insider-statistics {
  grid-area: sta;
}
.component-view--profile .component-company-chart {
  grid-area: chr;
}
.component-view--profile .component-table--education-details {
  grid-area: edu;
}
.component-view--profile .component-table--professional-details {
  grid-area: pro;
}
.component-view--profile .component-data-grid--holdings {
  grid-area: inh;
}
.component-view--profile .component-data-grid--summary {
  grid-area: sum;
}
.component-view--profile .component-data-grid--trades {
  grid-area: trd;
}

.component-view--shortinterest {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "sum sum" "ssm bor" "ssm shr" "sic sic" "sic sic";
}
.component-view--shortinterest .component-shortinterest-summary {
  grid-area: sum;
  font-size: 150%;
}
.component-view--shortinterest .component-shortside-market {
  grid-area: ssm;
}
.component-view--shortinterest .component-borrowing-activity {
  grid-area: bor;
}
.component-view--shortinterest .component-shortinterest-chart,
.component-view--shortinterest .component-shortinterest-chart2,
.component-view--shortinterest .component-qchart {
  grid-area: sic;
}
.component-view--shortinterest .component-new-shares {
  grid-area: shr;
}
.component-view--shortinterest .result__tablecol-icon--up {
  background-color: #2ce346;
  display: inline-block;
  height: 8px;
  width: 8px;
  -webkit-mask-size: 8px 8px;
  -webkit-mask-repeat: no-repeat;
  mask-size: 8px 8px;
  mask-repeat: no-repeat;
  margin-right: 3px;
  text-decoration: none;
  -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxMXB4IiBoZWlnaHQ9IjdweCIgdmlld0JveD0iMCAwIDExIDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExIDciIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlsaW5lIGZpbGw9IiMyMzFGMjAiIHBvaW50cz0iMCw3IDUuNSwwIDExLDcgIi8+DQo8L3N2Zz4NCg==);
  mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxMXB4IiBoZWlnaHQ9IjdweCIgdmlld0JveD0iMCAwIDExIDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExIDciIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlsaW5lIGZpbGw9IiMyMzFGMjAiIHBvaW50cz0iMCw3IDUuNSwwIDExLDcgIi8+DQo8L3N2Zz4NCg==);
}
.component-view--shortinterest .result__tablecol-icon--down {
  background-color: #cc0303;
  display: inline-block;
  height: 8px;
  width: 8px;
  -webkit-mask-size: 8px 8px;
  -webkit-mask-repeat: no-repeat;
  mask-size: 8px 8px;
  mask-repeat: no-repeat;
  margin-right: 3px;
  text-decoration: none;
  transform: rotate(180deg);
  -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxMXB4IiBoZWlnaHQ9IjdweCIgdmlld0JveD0iMCAwIDExIDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExIDciIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlsaW5lIGZpbGw9IiMyMzFGMjAiIHBvaW50cz0iMCw3IDUuNSwwIDExLDcgIi8+DQo8L3N2Zz4NCg==);
  mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxMXB4IiBoZWlnaHQ9IjdweCIgdmlld0JveD0iMCAwIDExIDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExIDciIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlsaW5lIGZpbGw9IiMyMzFGMjAiIHBvaW50cz0iMCw3IDUuNSwwIDExLDcgIi8+DQo8L3N2Zz4NCg==);
}
.component-view--shortinterest .details-table__content--indented {
  padding-left: 20px !important;
}
.component-view--shortinterest .details-table__content--green {
  color: #2ce346;
}
.component-view--shortinterest .details-table__content--red {
  color: #cc0303;
}
.component-view--shortinterest .details-table__content--grey {
  color: #999999;
}
.component-view--shortinterest .component-borrowing-activity .bar-container {
  padding: 20px;
  max-width: 300px;
  margin: 0 auto;
}
.component-view--shortinterest .component-borrowing-activity .bar-body {
  --cursor-position: 0%;
  border: 1px solid #fff;
  background-image: linear-gradient(to right, #0000ff, #ff0000);
  height: 32px;
}
.component-view--shortinterest .component-borrowing-activity .bar-body::after {
  content: " ";
  position: relative;
  display: block;
  background-color: #fff;
  width: 5px;
  height: 36px;
  top: -2px;
  left: var(--cursor-position);
}
.component-view--shortinterest .component-borrowing-activity .bar-title {
  text-align: center;
  font-size: 16;
}
.component-view--shortinterest .component-borrowing-activity .bar-scale {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 10px;
}
.component-view--shortinterest .component-borrowing-activity .bar-min {
  text-align: left;
}
.component-view--shortinterest .component-borrowing-activity .bar-label {
  text-align: center;
}
.component-view--shortinterest .component-borrowing-activity .bar-max {
  text-align: right;
}

.component-view--welcome {
  flex: 0 0;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: "title     title     title     title     title     title" "learn     learn     watchlist watchlist watchlist watchlist" "chart     chart     chart     chart     chart     chart";
}
.component-view--welcome .component-title {
  grid-area: title;
}
.component-view--welcome .component-section--learn {
  grid-area: learn;
  max-height: 300px;
}
.component-view--welcome .component-section--watchlist {
  grid-area: watchlist;
}
.component-view--welcome .component-section--chart {
  grid-area: chart;
}
.component-view--welcome .component-section--chart .component-company-chart {
  height: 15vw;
}

.component-view--whoami {
  margin: 0 30px;
}
.component-view--whoami  p {
  margin: 0;
}
.component-view--whoami hr {
  margin-block-start: 1em;
  margin-block-end: 1.2em;
  border: none;
  border-bottom: 1px solid var(--c-gray-100);
}

.component-view--whoami .user-widget {
  margin: auto;
  height: fit-content;
  width: fit-content;
}
.component-view--whoami .user-widget .widget__content {
  padding: 20px;
}

.component-view--whoami .user-widget .widget__content div {
  display: flex;
}

.component-view--whoami .user-widget .licence-details {
  display: flex;
  justify-content: space-between;
}
.component-view--whoami .user-widget .licence-details :first-child {
  margin-right: 30px;
}

.component-view--whoami .user-widget .licence-details :nth-child(2) {
  color: var(--c-gray-100);
}
.component-view--whoami .user-widget .licence-details .licence-details--expiry {
  display: flex;
}
.component-view--whoami .user-widget .licence-details .licence-details--expiry :first-child {
  margin-right: 3px;
}

.component-view--whoami .user-widget .user-details-logout {
  align-items: center;
  color: var(--c-gray-100);
  display: inline-flex;
  flex-flow: row;
  margin: auto;
  border: 1px solid var(--c-gray-100);
  border-radius: 5px;
  padding: 5px 10px;
}
.component-view--whoami .user-widget .user-details-logout .svg {
  margin-right: 5px;
}
.component-view--whoami .user-widget .user-details-logout svg {
  fill: currentColor;
  width: 1em;
  height: 1em;;
}
.component-view--whoami .user-widget .user-details-logout:hover {
  color: var(--c-statusbar-highlight-color);
}
.component-view--whoami .user-widget .user-details-logout:hover svg {
  fill: var(--c-statusbar-highlight-color);
}

.styleguide__block {
  border: 1px solid #fff;
  margin-bottom: 15px;
  min-height: 100px;
  padding: 10px;
  position: relative;
}
.styleguide__block:last-of-type {
  margin-bottom: 0;
}
.styleguide__block pre {
  border-bottom: 1px solid #696969;
  border-top: 1px solid #696969;
  color: var(--c-app-fontcolor);
  font-size: 14px;
  margin: 20px 0;
  padding: 10px 0;
  white-space: pre-wrap;
}
.styleguide__block pre strong {
  display: block;
}
.styleguide__block--loader {
  height: 400px;
}

.color-sample {
  width: 140px;
  height: 60px;
  border: 1px solid #555;
  border-radius: 2px;
  margin: 5px;
  display: inline-block;
}

.color-sample--dark {
  border-color: #555;
  color: #fff;
  padding: 10px;
}

.color-sample--light {
  border-color: #000;
  color: #000;
  padding: 10px;
}


/* Page Elements */

/* Form Elements */

/* Components */

/* Views */

/* Styleguide */

:root {
  /* General Settings */
  --c-gray-100: #999;
  --c-gray-200: #888;
  --c-gray-300: #777;
  --c-gray-400: #555;
  --c-gray-500: #444;
  --c-gray-600: #333;
  --c-gray-700: #2d2d2d;
  --c-gray-900: #1e1e1e;

  --c-app-background: #2d2d2d;
  --c-app-fontcolor: #fff;
  --c-app-footerbg: #000;

  --c-hightlight: #ffad1f;
  --c-hightlight-fontcolor: #000;

  --c-ribbon: #ffad1f;
  --c-ribbon-textcolor: #222;

  --c-shadow: #000;
  --c-shadow-color: rgba(0; 0; 0; .8);

  --c-header-control: #777;
  --c-header-control-hover: #ffad1f;

  --c-headline-h1-default: #ffad1f;

  --c-error-bg: #cc0303;
  --c-error-color: #fff;

  /* Scrollbar */

  --c-scrollbar-track-bg: transparent;
  --c-scrollbar-thumb-bg: #696969;
  --c-scrollbar-thumb-hover-bg: #999;


  /* Result Table */

  --c-result-row-even: #171717;
  --c-result-row-odd: #222;
  --c-result-row-highlight: #443d2d;
  --c-result-row-selection: #4c4432;
  --c-result-headline: #ccc;
  --c-result-tableheading-bg: #000;
  --c-result-sup-label: #ffad1f;
  --c-result-sort-arrow: #777;
  --c-result-sort-arrow-active: #ffad1f;
  --c-result-th-hascontext: #777;
  --c-result-link: #fff;
  --c-result-link-hover: #ffad1f;
  --c-result-link-dash: #777;


  /* Column Filter */

  --c-columnfilter-filter-color: #fff;
  --c-columnfilter-filter-color-hover: #ffad1f;
  --c-columnfilter-headline: #888;
  --c-columnfilter-hr: #888;
  --c-columnfilter-searchicon: #888;
  --c-columnfilter-dateicon-wrapper: #222;
  --c-columnfilter-dateicon: #888;
  --c-columnfilter-dateicon-active: #fff;


  /* Flatpickr */

  --c-columnfilter-flatpickr-background: #222;
  --c-columnfilter-flatpickr-weekday-color: #999;
  --c-columnfilter-flatpickr-rangebg: #999;
  --c-columnfilter-flatpickr-dayinrange: #222;


  /* Statusbar */

  --c-statusbar-bg: var(--c-gray-500);
  --c-statusbar-font-color: #aaa;
  --c-statusbar-highlight-color: var(--c-hightlight);


  /* Form Input */

  --c-input-color: #888;
  --c-input-focus-color: #fff;
  --c-input-bg: #444;
  --c-input-placeholder-color: #888;
  --c-input-active-glow: #ffad1f;
  --c-input-focus-bg: #555;
  --c-input-focus-placeholder-color: #aaa;
  --c-input-error-bg: #cc0303;

  --c-input-dark-color: #888;
  --c-input-dark-bg: #222;
  --c-input-dark-disabled-bg: #333;

  /* Alert */

  --c-alert-bg: #999;
  --c-alert-color: #222;
  --c-alert-error-bg: #cc0303;
  --c-alert-error-color: #fff;

  /* Buttons */

  --c-button-default-bg: #ffad1f;
  --c-button-default-font: #2d2d2d;
  --c-button-default-hover-bg: #fff;
  --c-button-default-shadow: rgba(0; 0; 0; .3);

  --c-button-reset-bg: #666;
  --c-button-reset-font: #fff;
  --c-button-reset-hover-bg: #999;
  --c-button-reset-hover-font: #fff;
  --c-button-reset-shadow: rgba(0; 0; 0; .3);

  --c-button-ghost-bg: transparent;
  --c-button-ghost-font: #999;
  --c-button-ghost-border: #999;
  --c-button-ghost-hover-bg: #fff;
  --c-button-ghost-hover-font: #333;
  --c-button-ghost-hover-border: #fff;

  --c-button-link-set-bg: transparent;
  --c-button-link-set-border: transparent;
  --c-button-link-set-color: var(--c-hightlight);
  --c-button-link-set-hover-bg: var(--c-hightlight);
  --c-button-link-set-hover-color: var(--c-hightlight-fontcolor);
  --c-button-link-set-hover-border: transparent;

  --c-button-icon-set-bg: transparent;
  --c-button-icon-set-border: transparent;
  --c-button-icon-set-color: var(--c-gray-300);
  --c-button-icon-set-hover-bg: transparent;
  --c-button-icon-set-hover-color: var(--c-hightlight);
  --c-button-icon-set-hover-border: transparent;

  /* Checkbox */

  --c-checkbox-unchecked-bg: #666;
  --c-checkbox-checked-bg: #ffad1f;


  /* Range Slider */

  --c-rangeslider-track-bg: #888;
  --c-rangeslider-thumb-bg: #ffad1f;
  --c-rangeslider-label: #888;


  /* Switch */

  --c-switch-track-bg: #888;
  --c-switch-thumb-active-bg: #ffad1f;
  --c-switch-thumb-bg: #aaa;
  --c-switch-variant-track-bg: #888;
  --c-switch-variant-track-active-bg: #ffad1f;
  --c-switch-variant-thumb-bg: #000;
  --c-switch-variant-label: #888;
  --c-switch-variant-label-active: #fff;

  /* Tooltips */

  --c-tooltip-bg: #555;
  --c-tooltip-shadow: #000;
  --c-tooltip-text: #fff;


  /* Context Menu */

  --c-ctx-bg: #444;
  --c-ctx-link: #fff;
  --c-ctx-link-hover: #ffad1f;
  --c-ctx-copy-headline: #999;
  --c-ctx-shadow: rgba(0; 0; 0; .8);

  /* Dropdown List */

  --c-ddl-bg: #444;
  --c-ddl-link: #fff;
  --c-ddl-link-hover: #ffad1f;
  --c-ddl-copy-headline: #999;
  --c-ddl-shadow: rgba(0; 0; 0; .8);


  /* Horizontal Rule */

  --c-hr-lightgrey: #666;
  --c-hr-darkgrey: #333;
  --c-hr-darkergrey: #252525;
  --c-hr-black: #000;


  /* Welcome Screen */

  --c-welcomescreen-headline: #ffad1f;
  --c-welcomescreen-teaser: #888;
  --c-welcomescreen-section-headline: #fff;
  --c-welcomescreen-learn-bg: #181818;
  --c-welcomescreen-learn-bg-hover: #555;

  --c-welcome-notification-color: var(--c-hightlight);


  /* Start Screen */

  --c-startscreen-headline: var(--c-app-fontcolor);
  --c-startscreen-teaser: #888;
  --c-startscreen-section-headline: var(--c-app-fontcolor);
  --c-statrscreen-section-border: #555;

  /* Watchlist Screen */

  --c-watchlist-headline: #ffad1f;
  --c-watchlist-headline-counter: #888;
  --c-watchlist-trashcan: #7a7a7a;
  --c-watchlist-trashcan-hover: #ffad1f;
  --c-watchlist-copy-fontcolor: #888;


  /* Loader */

  --c-loader-bg: #2d2d2d;
  --c-loader-fill: #ffad1f;
  --c-loader-back-fill: #56472c;


  /* Flatpickr */

  --c-flatpickr-background: #555;
  --c-flatpickr-txt-month: #fff;
  --c-flatpickr-arrows: #fff;
  --c-flatpickr-arrows-hover: #ffad1f;
  --c-flatpickr-weekday: #000;
  --c-flatpickr-day: #fff;
  --c-flatpickr-day-today-bg: #555;
  --c-flatpickr-day-today-border: #fff;
  --c-flatpickr-othermonthday: #888;
  --c-flatpickr-day-hover: #999;
  --c-flatpickr-day-selected-bg: #fff;
  --c-flatpickr-day-selected: #000;


  /* Company Profile */

  --c-company-profile-col-bg: #222;
  --c-company-profile-detail-odd: #222;
  --c-company-profile-detail-even: #2d2d2d;
  --c-company-profile-table-border: #222;
  --c-company-profile-details-separator: #555;

  --c-company-profile-chart-domain-stroke: #888;
  --c-company-profile-chart-tick-stroke: #888;
  --c-company-profile-chart-tick-text: #fff;

  --c-company-profile-insider-significance: #fff;

  --c-company-profile-tradingiq-bg: #000;

  --c-insider-profile-circle-bg: #222;
  --c-insider-profile-circle-label: #999;

  --c-score1: #cc0303;
  --c-score2: #ff9b73;
  --c-score3: #cc73ff;
  --c-score4: #60c1c5;
  --c-score5: #4b9df9;
  --c-score6: #41c754;

  /* Profile */

  --c-profiles-col-bg: #222;
  --c-profiles-detail-odd: #222;
  --c-profiles-detail-even: #2d2d2d;
  --c-profiles-table-border: #222;
  --c-profiles-details-separator: #555;

  --c-profiles-chart-domain-stroke: #888;
  --c-profiles-chart-tick-stroke: #888;
  --c-profiles-chart-tick-text: #fff;

  --c-profiles-sparkline-outline: #777;

  --c-profiles-insider-significance: #fff;

  --c-profiles-tradingiq-bg: #000;

  --c-profiles-timerange-selector-bg: #333;
  --c-profiles-timerange-text: #999999;
  --c-profiles-timerange-selector-hover-bg: #666;
  --c-profiles-timerange-hover-text: #ffad1f;

  /* Modal */

  --c-modal-overlay-bg: #000;
  --c-modal-header-bg: #252525;
  --c-modal-header-color: #fff;
  --c-modal-body-bg: #333;
  --c-modal-error-bg: var(--c-error-bg);
  --c-modal-error-color: var(--c-error-color);
  --c-modal-hr: #252525;


  /* Label */

  --c-label-bg: #222;
  --c-label-color: #fff;
  --c-label-border: #2d2d2d;

  /* Links */

  --c-link: #fff;
  --c-link-hover: #ffad1f;
  --c-link-dash: #777;

  /* Charts */
  --c-chart-marker-outline: #222;
  --c-chart-marker-buy: #2ce346;
  --c-chart-marker-sell: #cc0303;
  --c-chart-marker-exercise: #2f6592;
  --c-chart-marker-subscribe: #1f8592;
  --c-chart-outline: #4cb8ff;

  /* Widget */
  --c-widget-header-bg: #181818;
  --c-widget-header-border: #252525;
  --c-widget-content-bg: #222;

  /* Table Footer */
  --c-table-footer-info: #999;

  /* Pagination */
  --c-pagination: #999;
  --c-pagination-arrow: #999;
  --c-pagination-arrow-hover: #ffad1f;
  --c-pagination-arrow-disabled: #555;

  /* Chart Legend */
  --c-chart-legend-buy: #268746;
  --c-chart-legend-buy-active: #61d291;
  --c-chart-legend-sell: #5e0f15;
  --c-chart-legend-sell-active: #b81a2a;
  --c-chart-legend-exercise: #2f6592;
  --c-chart-legend-exercise-active: #4ba8f5;
  --c-chart-legend-subscribe: #1f8592;
  --c-chart-legend-subscribe-active: #3bc8f5;
  --c-chart-legend-ex-buy: #139b27;
  --c-chart-legend-ex-buy-active: #54ff00;
  --c-chart-legend-ex-sell: #a02b2f;
  --c-chart-legend-ex-sell-active: #f83434;
  --c-chart-legend-split: #1da19b;
  --c-chart-legend-split-active: #29fff4;
  --c-chart-legend-text: #555;
  --c-chart-legend-text-active: #fff;
  --c-chart-legend-text-hover: #ffad1f;

  /* Search Box */
  --c-search-box-bg: #181818;
  --c-search-box-headline: var(--c-hightlight);
  --c-search-box-control-bg: #555;
  --c-search-box-input: #bfbfbf;

  /* Drop Down */
  --c-dropdown-menu-bg: var(--c-gray-600);

  /* Font Variables */

  --f-regular: 'LatoRegular', sans-serif;
  --f-bold: 'LatoBold', sans-serif;
  --f-black: 'LatoBlack', sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;
}

@font-face {
  font-family: "LatoRegular";
  src: url(75614cfcfedd509b1f7a.woff2) format("woff2");
}
@font-face {
  font-family: "LatoBold";
  src: url(21b3848a32fce5b0f501.woff2) format("woff2");
}
@font-face {
  font-family: "LatoWeb";
  font-weight: 100;
  src: url(73d2c04510d153b6da52.woff2) format("woff2");
}
@font-face {
  font-family: "LatoWeb";
  font-weight: 200;
  src: url(6ae7abff1b20614e4a70.woff2) format("woff2");
}
@font-face {
  font-family: "LatoWeb";
  font-weight: 300;
  src: url(e244488c8cc2f5337153.woff2) format("woff2");
}
@font-face {
  font-family: "LatoWeb";
  font-weight: 400;
  src: url(75614cfcfedd509b1f7a.woff2) format("woff2");
}
@font-face {
  font-family: "LatoWeb";
  font-weight: 700;
  src: url(21b3848a32fce5b0f501.woff2) format("woff2");
}
@font-face {
  font-family: "LatoWeb";
  font-weight: 900;
  src: url(6d20cff5b3255dd0078f.woff2) format("woff2");
}

body {
  background-color: var(--c-app-background);
  color: var(--c-app-fontcolor);
  font-family: var(--f-regular);
  font-size: 14px;
  height: 100vh;
  margin: 0;
  padding: 0;
  width: 100vw;
}

.terminal {
  display: flex;
  flex-flow: row nowrap;
  outline: none;
}

.workspace {
  display: flex;
  flex-flow: column nowrap;
}
.workspace__header {
  flex: 0 0;
}
.workspace__body {
  flex: 1 0;
  overflow: auto;
}

.contentwrapper {
  height: calc(100% - 184px);
  overflow: scroll;
  padding: 15px 30px;
}

.row {
  display: flex;
  margin: 0 -5px;
}
.row + .row {
  margin-top: 10px;
}
.row--vcenter {
  align-items: center;
}
.row--vbottom {
  align-items: flex-end;
}
.row--hspace {
  justify-content: space-between;
}

.col {
  box-sizing: border-box;
  padding: 0 5px;
}
.col__100 {
  width: 100%;
}
.col__90 {
  width: 90%;
}
.col__85 {
  width: 85%;
}
.col__80 {
  width: 80%;
}
.col__70 {
  width: 70%;
}
.col__66 {
  width: 66.666%;
}
.col__60 {
  width: 60%;
}
.col__50 {
  width: 50%;
}
.col__45 {
  width: 45%;
}
.col__40 {
  width: 40%;
}
.col__33 {
  width: 33.333%;
}
.col__30 {
  width: 30%;
}
.col__20 {
  width: 20%;
}
.col__15 {
  width: 15%;
}
.col__10 {
  width: 10%;
}

.is-hidden {
  display: none;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.clear:after {
  clear: both;
  content: "";
  display: table;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  margin: 0;
  padding: 0;
}

.push--top {
  margin-top: 15px !important;
}

.push-top--double {
  margin-top: 30px !important;
}

.push--right {
  margin-right: 15px !important;
}

.push--bottom {
  margin-bottom: 15px !important;
}

.push-bottom--double {
  margin-bottom: 30px !important;
}

.push--2--top {
  margin-top: 10px !important;
}

.header {
  -webkit-app-region: drag;
  background-color: var(--c-header-bg);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  line-height: 26px;
}
.header.is-mac .header__buttons {
  display: none;
}
.header__icon {
  margin: 0 5px;
}
.header__icon img {
  width: auto;
  height: 20px;
}
.header__title {
  color: var(--c-header-title-color);
  flex: 2;
  font-size: 13px;
  align-self: flex-end;
  user-select: none;
}
.header__buttons {
  -webkit-app-region: no-drag;
}
.header__button {
  display: inline-block;
  fill: var(--c-header-control);
  height: 12px;
  width: 12px;
  padding: 8px 15px;
}
.header__button:last-of-type {
  margin-right: 0;
}
.header__button:hover {
  fill: #fff;
  background-color: #000;
}
.header__button--active {
  fill: var(--c-hightlight);
  background-color: #000;
}
.header__button--active:hover {
  fill: #fff;
}
.header__button--close:hover {
  background-color: #f00;
}
.header--focus .header__title {
  color: var(--c-header-focus-title-color);
}

.window {
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  width: 100vw;
  outline: none;
}
.window__header {
  flex: 0 0;
}
.window__body {
  flex: 1 0;
  overflow-x: auto;
  overflow-y: auto;
}
.window__footer {
  flex: 0 0;
}

.navigation__wrapper {
  display: flex;
}

.navigation {
  background-color: var(--c-nav-background);
  font-family: var(--f-bold);
  font-size: 13px;
  width: 75px;
  z-index: 1;
  display: flex;
  flex-flow: column;
}
.navigation__logo {
  display: inline-block;
  -webkit-mask-image: url(2caaff823623708a2f75.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 50px 30px;
  mask-image: url(2caaff823623708a2f75.svg);
  mask-repeat: no-repeat;
  mask-size: 50px 30px;
  width: 50px;
  height: 30px;
  margin: 20px 12px;
  transition: background-color 0.2s;
  vertical-align: bottom;
  background-color: var(--c-nav-button-icon-inactive);
  cursor: pointer;
}
.navigation__logo:hover {
  background-color: var(--c-nav-icon-highlight);
}
.navigation__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.navigation__list--bottom {
  margin-top: auto;
  position: relative;
}
.navigation__item {
  padding: 15px 23px;
}
.navigation__item.is-active {
  background-color: var(--c-nav-active);
}
.navigation__item.is-active .navigation__link {
  fill: var(--c-nav-icon-active);
}
.navigation__link {
  cursor: pointer;
  fill: var(--c-nav-icon);
  transition: all 0.2s ease-in;
}
.navigation__link:hover {
  fill: var(--c-nav-icon-active);
}

.sidebar {
  background-color: var(--c-nav-active);
  margin-left: -225px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px 15px 15px;
  transition-duration: 0.2s;
  transition-property: margin-left;
  width: 195px;
}
.sidebar.is-open {
  margin-left: 0;
}
.sidebar .sidebar__title,
.sidebar h2 {
  color: var(--c-subnav-selecteditem);
  font-family: var(--f-bold);
  font-size: 13px;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.sidebar .sidebar__section-title {
  color: var(--c-subnav-title);
  margin-bottom: 12px;
  text-transform: uppercase;
  font-size: 13px;
}
.sidebar .subnavlist {
  font-size: 13px;
}
.sidebar .subnavlist__title {
  color: var(--c-subnav-title);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.sidebar .subnavlist__add {
  -webkit-mask-image: url(508b849ff1bb80c4066d.svg);
  mask-image: url(508b849ff1bb80c4066d.svg);
  background-color: var(--c-nav-icon);
  cursor: pointer;
  float: right;
  height: 13px;
  transition: background-color 0.2s;
  width: 13px;
}
.sidebar .subnavlist__add:hover {
  -webkit-mask-image: url(c75b081a974a6bd3ca66.svg);
  mask-image: url(c75b081a974a6bd3ca66.svg);
  background-color: var(--c-nav-icon-active);
}
.sidebar .subnavlist__action {
  color: var(--c-nav-icon);
  cursor: pointer;
  float: right;
  height: 12px;
  transition: color 0.2s;
  width: 12px;
}
.sidebar .subnavlist__action:hover {
  color: var(--c-nav-icon-active);
}
.sidebar .subnavlist__action .icon {
  fill: currentColor;
}
.sidebar .subnavlist__item {
  margin-bottom: 12px;
}
.sidebar .subnavlist__item--deleted {
  animation: fade_out_item 0.5s linear forwards;
}
.sidebar .subnavlist__item--active {
  color: var(--c-hightlight);
}
.sidebar .subnavlist__item .link {
  color: inherit;
}
@keyframes fade_out_item {
  0% {
    opacity: 1;
  }
  99% {
    height: auto;
    margin-bottom: 12px;
  }
  100% {
    opacity: 0;
    height: 0;
    margin-bottom: 0;
  }
}
.sidebar .subnavlist__itemdelete {
  -webkit-mask-image: url(5aa105cf7b5f0119651b.svg);
  mask-image: url(5aa105cf7b5f0119651b.svg);
  background-color: var(--c-nav-icon);
  float: right;
  height: 13px;
  transition: background-color 0.5s;
  width: 13px;
}
.sidebar .subnavlist__itemdelete:hover {
  -webkit-mask-image: url(5aa105cf7b5f0119651b.svg);
  mask-image: url(5aa105cf7b5f0119651b.svg);
  background-color: var(--c-nav-icon-active);
}
.sidebar .subnavlist__name {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  /*white-space: nowrap;*/
}
.sidebar .subnavlist__list {
  display: inline-block;
  color: var(--c-subnav-link);
  cursor: pointer;
  text-decoration: none;
}
.sidebar .subnavlist__list:hover, .sidebar .subnavlist__list.is-selected {
  color: var(--c-subnav-selecteditem);
}
.sidebar .subnavlist__count {
  color: var(--c-subnav-counter);
  margin-left: 8px;
}
.sidebar .subnavlist__count:hover {
  color: var(--c-subnav-counter);
}
.sidebar .subnavlist + .subnavlist {
  margin-top: 35px;
}

.historybutton {
  display: inline-block;
  vertical-align: top;
  width: 30px;
}
.historybutton .svg--historybutton {
  fill: var(--c-history-button-enabled);
  height: 29px;
  padding: 11px 0 0 5px;
  vertical-align: top;
  width: 28px;
}
.historybutton .svg--historybutton svg {
  height: 18px;
  width: 18px;
}
.historybutton .svg--historybutton:hover {
  fill: var(--c-history-button-hover);
}
.historybutton .svg--historybutton.disabled, .historybutton .svg--historybutton:disabled {
  fill: var(--c-history-button-disabled);
}
.historybutton .svg--historybutton:active {
  fill: var(--c-history-button-active);
}

.commandline {
  box-shadow: 0 0 3px var(--c-shadow-color);
  height: 40px;
  padding: 15px 30px;
  outline: none;
}

.commandline .input {
  text-transform: uppercase;
}

.commandline .input--no-uppercase {
  text-transform: none;
}

.commandline__backbuttonwrapper {
  display: inline-block;
}

.commandline__inputwrapper {
  display: inline-block;
  position: relative;
  width: calc(100% - 82px);
  padding-left: 10px;
}

.commandline__clear {
  cursor: pointer;
  fill: var(--c-cl-clear);
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
}

.commandline__star {
  cursor: pointer;
  display: inline-block;
  fill: var(--c-cl-star-inactive);
  width: 20px;
}

.commandline__star:hover,
.commandline__star .svg--is-active {
  fill: var(--c-cl-star-active);
}

.commandline__action {
  align-items: center;
  bottom: 5px;
  display: flex;
  flex-flow: row;
  justify-content: end;
  position: absolute;
  right: 10px;
  top: 5px;
}

.commandline__dropdown {
  margin-right: 10px;
}

.commandline__dropdown .dropdown__toggle {
  background-color: var(--c-cl-dropdown-toggle-bg);
  border: 0;
  border-radius: 3px;
  color: var(--c-cl-dropdown-toggle);
  cursor: pointer;
  font-weight: 300;
  padding: 5px 8px;
}

.commandline__dropdown .dropdown__toggle:hover {
  color: var(--c-cl-dropdown-toggle-hover);
}

.commandline__dropdown .dropdown__toggle__text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.commandline__dropdown .dropdown__menu {
  right: 0;
  padding: 10px 15px;
  margin-top: 3px;
}

.commandline__dropdown .dropdown-list {
  display: table;
}

.commandline__dropdown .dropdown-list__link {
  color: var(--c-cl-dropdown-link);
  cursor: pointer;
  display: table-row;
  white-space: nowrap;
}

.commandline__dropdown .dropdown-list__link:hover {
  color: var(--c-cl-dropdown-link-hover);
}

.commandline__dropdown .dropdown-list__item {
  display: table-row-group;
}

.commandline__dropdown .dropdown-list__item:first-child .dropdown-list__title,
.commandline__dropdown .dropdown-list__item:first-child .dropdown-list__detail {
  padding-top: 0;
}

.commandline__dropdown .dropdown-list__title,
.commandline__dropdown .dropdown-list__detail {
  display: table-cell;
  padding-top: 5px;
}

.commandline__dropdown .dropdown-list__title {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.commandline__dropdown .dropdown-list__title:only-child {
  max-width: 310px;
}

.commandline__dropdown .dropdown-list__detail {
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
  padding-left: 20px;
}

.commandline__dropdown .dropdown-list__nodata {
  font-style: italic;
}

.recent-command .dropdown__toggle,
.recent-command .dropdown-list__title {
  text-transform: uppercase;
}

.commandline__dropdown-title {
  white-space: nowrap;
  color: var(--c-cl-dropdown-title);
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 0.95em;
}

.commandline .ctxmenu {
  background-color: var(--c-cl-ctxmenu-bg);
  top: 5px;
  z-index: 100;
}

.commandline .ctxmenu:before {
  border-bottom: 10px solid var(--c-cl-ctxmenu-bg);
  right: 11px;
}

.commandline__ctxmenu {
  padding: 20px;
}

.commandline__btngroup {
  text-align: right;
}

.suggestions {
  background-color: var(--c-suggestion-bg);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 0 0 var(--c-shadow-color);
  font-family: var(--f-regular);
  font-size: 14px;
  /*margin-top: 2px;*/
  max-width: 860px;
  padding: 20px 10px;
  position: relative;
  left: 70px;
  z-index: 99;
  outline: none;
}
.suggestions__block + .suggestions__block {
  border-top: 1px solid var(--c-suggestion-separator);
  margin-top: 20px;
  padding-top: 15px;
}
.suggestions__table {
  border-collapse: separate;
  border-spacing: 0 4px;
  table-layout: fixed;
  width: 100%;
}
.suggestions__table th,
.suggestions__table td {
  font-size: 14px;
  padding: 5px 10px;
}
.suggestions__table td {
  cursor: pointer;
}
.suggestions__contentrow:hover, .suggestions__contentrow.is-selected {
  background-color: var(--c-hightlight);
  color: var(--c-hightlight-fontcolor);
  padding: 0;
}
.suggestions__contentrow:hover .suggestions__label, .suggestions__contentrow.is-selected .suggestions__label {
  box-shadow: none;
}
.suggestions__tableheading {
  color: var(--c-suggestion-tableheading);
  font-family: var(--f-bold);
  font-size: 14px;
  margin-bottom: 5px;
  margin-left: 10px;
  text-transform: uppercase;
}
.suggestions__command, .suggestions__command * {
  text-transform: uppercase;
}
.suggestions__command-options-mark {
  display: inline;
  font-size-adjust: 0.3;
}
.suggestions__command-options-full {
  display: none;
  font-size-adjust: 0.3;
}
.suggestions__name {
  max-width: 120px;
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestions__desc {
  min-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestions__keyboard {
  font-size: 13px;
  width: 70px;
}
.suggestions__label {
  background-color: var(--c-suggestion-label-bg);
  border-radius: 2px;
  box-shadow: 0 2px 0 0 var(--c-shadow-color);
  color: var(--c-suggestion-label-fontcolor);
  font-size: 13px;
  padding: 3px 8px;
}

.token-screen {
  position: relative;
  width: 100%;
}
.token-screen__wrapper {
  left: 50%;
  position: absolute;
  text-align: center;
  top: 200px;
  transform: translateX(-50%);
  width: 450px;
}
.token-screen__wrapper .input {
  margin-bottom: 20px;
  padding-right: 10px;
  text-align: center;
  width: 385px;
}
.token-screen__headline {
  color: var(--c-tokenscreen-headline);
  font-size: 20px;
  margin-bottom: 20px;
}

.settings__section h1 {
  color: var(--c-settings-h1);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.settings__subsection {
  border-bottom: 1px solid var(--c-settings-subsection-border);
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.settings__subsection h2 {
  font-size: 16px;
  margin-bottom: 10px;
}
.settings__input-group {
  clear: both;
  height: 40px;
  width: 430px;
}
.settings__input-group .input {
  float: left;
  width: 73%;
}
.settings__input-group .button {
  float: right;
  padding: 7px 15px;
}
.settings__editinput {
  display: inline-block;
  opacity: 0;
  position: relative;
}
.settings__editinput.is-visible {
  opacity: 1;
}
.settings__editinput .flatpickr-input,
.settings__editinput .flatpickr-input:focus {
  background-color: var(--c-settings-dateinput-bg);
  color: var(--c-settings-dateinput-txt);
  width: 135px;
}
.settings__editinput--pencil {
  cursor: pointer;
  fill: var(--c-settings-dateinput-txt);
  position: absolute;
  right: 10px;
  top: 13px;
  width: 15px;
}
.settings__editinput--pencil:hover {
  fill: var(--c-settings-dateinput-hover);
}
.settings__edit-fields-wrapper {
  display: flex;
}
.settings__tableheading {
  background-color: var(--c-result-tableheading-bg);
  box-sizing: border-box;
  font-family: var(--f-bold);
  padding: 10px;
  text-align: left;
}
.settings__available-fields {
  width: 300px;
}
.settings__available-fields-container, .settings__selected-fields-container {
  background-color: var(--c-settings-fieldcontainer-bg);
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.settings__available-fields-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.settings__available-fields-list li {
  padding: 6px 10px;
}
.settings__available-fields-list li:nth-of-type(even) {
  background-color: var(--c-result-row-even);
}
.settings__available-fields-list li:nth-of-type(odd) {
  background-color: var(--c-result-row-odd);
}
.settings__available-fields-list li:hover, .settings__available-fields-list li.is-selected {
  background-color: var(--c-result-row-highlight);
}
.settings__edit-fields-arrow {
  box-sizing: border-box;
  padding: 15px;
  width: 70px;
}
.settings__edit-fields-arrow .svg {
  fill: var(--c-settings-arrow);
  margin-top: 100px;
}
.settings__edit-fields-arrow .svg.is-selected {
  fill: var(--c-settings-arrow-active);
  cursor: pointer;
}
.settings__selected-fields {
  max-width: 580px;
  min-width: 450px;
  width: 100%;
}
.settings__table th {
  padding: 10px 0 10px 10px;
}
.settings__table td {
  padding: 7px 0 7px 10px;
}
.settings__selected-fields-controls {
  margin-top: 15px;
  text-align: right;
}
.settings__field-currentformat, .settings__field-changeformat, .settings__field-currentlabel, .settings__field-changelabel {
  cursor: pointer;
  display: none;
}
.settings__field-currentformat.is-visible, .settings__field-changeformat.is-visible, .settings__field-currentlabel.is-visible, .settings__field-changelabel.is-visible {
  display: block;
}
.settings__field-currentformat, .settings__field-currentlabel {
  border: 1px solid transparent;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 12px;
  height: 20px;
  padding-bottom: 3px;
  padding-left: 7px;
  padding-top: 1px;
  width: 100%;
}
.settings__field-currentformat:hover, .settings__field-currentlabel:hover {
  border-color: var(--c-settings-arrow);
}

.settings__tablerow[draggable] {
  user-select: none;
}

.result__tablecol-fieldid {
  width: 145px;
}

.result__tablecol-display {
  width: 145px;
}

.result__tablecol-format {
  width: 80px;
}

.result__tablecol-actions .svg {
  cursor: pointer;
  display: inline-block;
  fill: var(--c-settings-fieldcontainer-action-icon);
}
.result__tablecol-actions .svg:hover {
  fill: var(--c-settings-fieldcontainer-action-icon-hover);
}
.result__tablecol-actions .svg--trashcan {
  width: 15px;
}
.result__tablecol-actions .svg--drag {
  cursor: move;
  margin-left: 15px;
  width: 10px;
}

/* replace the default focus highlight style */
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.button--ghost:focus {
  border: solid 1px rgba(255, 255, 255, 0.5);
}

a:focus {
  outline: solid 1px rgba(255, 255, 255, 0.5);
}

.history {
  margin-top: 0;
  padding-top: 0;
}
.history__hr {
  background-color: var(--c-history-item-border);
}
.history__bar {
  height: 77px;
}
.history__bar-arrow {
  box-sizing: border-box;
  cursor: pointer;
  float: left;
  padding: 22px 0;
  width: 25px;
}
.history__bar-arrow .svg {
  fill: var(--c-history-arrow);
}
.history__bar-arrow--left {
  margin-left: -5px;
  transform: rotate(180deg);
}
.history__bar-arrow--right {
  margin-right: -5px;
}
.history__bar-arrow:hover .svg {
  fill: var(--c-history-hover-arrow);
}
.history__bar-items {
  box-sizing: border-box;
  float: left;
  overflow: hidden;
  padding: 10px 7px;
  padding-left: 4px;
  width: calc(100% - 40px);
}
.history__bar-track {
  width: 5000px;
}
.history__list {
  margin-left: -10px;
  margin-right: -10px;
  width: calc(100% + 20px);
}
.history__list-item {
  cursor: pointer;
}
.history__list-item:last-of-type .history__list-itemcontainer {
  border-bottom: 1px solid var(--c-history-item-border);
}
.history__list-item:hover {
  background-color: var(--c-history-item-hoverbg);
}
.history__list-item:hover .history__list-itemname {
  color: var(--c-history-item-hover-name);
}
.history__list-itemcontainer {
  border-top: 1px solid var(--c-history-item-border);
  padding: 10px 5px;
}
.history__list-itemtime, .history__list-itemname, .history__list-itemcommand {
  margin: 0;
}
.history__list-itemtime {
  color: var(--c-history-item-command);
  font-size: 11px;
}
.history__list-itemcommand {
  color: var(--c-history-item-command);
  font-size: 13px;
  text-transform: uppercase;
}
.history__list-itemname {
  margin-bottom: 5px;
}

.history__bar-item {
  background-color: var(--c-history-bar-item-bg);
  border: 1px solid transparent;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  height: 50px;
  margin-right: 8px;
  padding: 8px;
  text-align: center;
  min-width: 90px !important;
  margin: 0 5px;
}
.history__bar-item:last-of-type {
  margin-right: 0;
}

.history__bar-item--active {
  background-color: var(--c-history-bar-item-active-bg);
}
.history__bar-item--active .history__bar-item--date {
  color: var(--c-history-bar-item-active-date);
}

.history__bar-item--disabled {
  border: 1px dashed var(--c-history-bar-item-active-bg);
  background-color: transparent;
  cursor: default;
}

.history__bar-item--dayname,
.history__bar-item--date {
  font-size: 13px;
  margin: 0;
}

.history__bar-item--date {
  color: var(--c-history-bar-item-date);
}

.screener {
  margin-top: 0;
  padding-top: 0;
}
.screener__collapsible {
  background-color: var(--c-screener-collapsible-bg);
  padding: 15px;
}
.screener__collapsible__fields-controls {
  margin-top: 15px;
  text-align: right;
}
.screener__collapsible__selection-header {
  color: var(--c-screener-collapsible-selection-header);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.screener__selection-list {
  display: flex;
  flex-direction: column;
  height: 200px;
  flex-wrap: wrap;
}
.screener__selection-list--wide {
  width: 500px;
}
.screener__selection-list--ultrawide {
  width: 750px;
}
.screener__selection-item {
  margin: 0 5px 8px 0;
}
.screener__add-filter {
  color: var(--c-screener-add-filter);
  cursor: pointer;
  margin-top: 10px;
}
.screener__add-filter .svg {
  display: inline-block;
  fill: var(--c-screener-add-filter);
  width: 11px;
}
.screener__tab {
  display: inline-flex;
}
.screener__tab-item {
  color: var(--c-screener-text-inactive);
  background-color: black;
  cursor: pointer;
  flex-grow: 1;
  margin-right: 2px;
  padding: 12px;
  text-align: center;
  width: 125px;
}
.screener__tab-item--active {
  color: var(--c-screener-text-active);
  background-color: var(--c-screener-collapsible-bg);
}
.screener__tab-item:hover {
  color: var(--c-screener-text-active);
}
.screener__tab-link {
  font-size: 16px;
  font-weight: bold;
}
.screener .Collapsible {
  background-color: var(--c-screener-collapsible-panel-bg);
  margin-bottom: 15px;
  padding: 10px 20px;
}
.screener .Collapsible:last-of-type {
  margin-bottom: 0;
}
.screener .Collapsible__trigger {
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  padding-left: 30px;
  position: relative;
  width: 100%;
}
.screener .Collapsible__trigger:before {
  -webkit-mask-image: url(25d59f618f344fd58bc0.svg);
  mask-image: url(25d59f618f344fd58bc0.svg);
  background-color: var(--c-screener-collapsible-arrow);
  content: "";
  height: 17px;
  left: 0;
  position: absolute;
  width: 17px;
}
.screener .Collapsible__trigger.is-open::before {
  transform: rotate(90deg);
}
.screener .Collapsible__trigger--counter {
  color: var(--c-screener-collapsible-trigger-counter);
  margin-left: 5px;
}
.screener .Collapsible__contentInner {
  padding: 15px 8px;
}
.screener__slider-row {
  border-bottom: 1px solid var(--c-screener-slider-col-border);
  padding-bottom: 15px;
  padding-top: 15px;
}
.screener__slider-row:first-of-type {
  border-top: 1px solid var(--c-screener-slider-col-border);
}
.screener__slider-title {
  padding-top: 5px;
}
.screener__slider-col {
  position: relative;
}
.screener .slider {
  border: 1px solid var(--c-screener-slider-border);
  border-radius: 0;
  height: 28px;
  position: relative;
  z-index: 2;
}
.screener .slider .handle-0 .drag-handle {
  margin-left: -5px;
  margin-top: 6px;
  width: 9px;
}
.screener .slider .handle-1 .drag-handle {
  margin-right: -5px;
  margin-top: 6px;
  width: 9px;
}
.screener .slider .bar-0 {
  background-color: transparent;
  height: 100%;
}
.screener .slider .bar-1 {
  background-color: var(--c-screener-slider-track-bg-highlight);
  height: 100%;
  opacity: 0.1;
}
.screener__slider-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  right: 5px;
}
.screener__slider-bg .screener__area-chart {
  z-index: 1;
}
.screener__slider-bg .screener__area-chart .react-stockcharts-area g:nth-of-type(1) {
  stroke: var(--c-screener-chart-line);
}
.screener__slider-bg .screener__area-chart .react-stockcharts-area g:nth-of-type(2) {
  fill: var(--c-screener-chart-area);
}

.statusbar {
  background-color: var(--c-statusbar-bg);
  color: var(--c-statusbar-font-color);
  display: flex;
  font-size: 13px;
  padding: 7px;
  padding-left: 15px;
}

.statusbar__message {
  margin-right: auto;
}

.statusbar--error {
  background-color: darkred;
  color: red;
}

.statusbar__section {
  align-items: center;
  display: flex;
  flex-flow: row;
  margin: 0 5px;
}

.statusbar-item {
  display: flex;
  flex-flow: column nowrap;
  padding: 0 3px;
}
.statusbar-item + .statusbar-item {
  margin-left: 0;
}
.statusbar-item + .statusbar__message {
  margin-left: auto;
}
.statusbar-item .svg svg {
  height: 1em;
}

.statusbar-logout {
  align-items: center;
  color: var(--c-statusbar-font-color);
  display: inline-flex;
  flex-flow: row;
  margin-left: 30px;
}
.statusbar-logout .svg {
  margin-right: 5px;
}
.statusbar-logout .svg svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
}
.statusbar-logout:hover {
  color: var(--c-statusbar-highlight-color);
}
.statusbar-logout:hover svg {
  fill: var(--c-statusbar-highlight-color);
}

.notification-status {
  align-self: center;
  background-color: transparent;
  border: 0;
  color: var(--c-statusbar-font-color);
  cursor: pointer;
  display: flex;
  outline: none;
  padding: 0;
}
.notification-status svg {
  fill: var(--c-statusbar-font-color);
  height: 1em;
  width: auto;
  margin-right: 3px;
}
.notification-status__number {
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #444;
  padding: 2px;
  margin-left: 5px;
  background: var(--c-statusbar-font-color);
}
.notification-status__number:hover {
  background: var(--c-statusbar-highlight-color);
}
.notification-status:hover {
  color: var(--c-statusbar-highlight-color);
}
.notification-status:hover svg {
  fill: var(--c-statusbar-highlight-color);
}
.notification-status:hover .notification-status__number {
  background: var(--c-statusbar-highlight-color);
}

.favourite-list__item {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  padding: 3px 0;
}
.favourite-list__item .svg {
  fill: var(--c-favourite-icon);
  margin-left: 5px;
}
.favourite-list__item .svg:hover, .favourite-list__item .svg :active {
  fill: var(--c-favourite-icon-hover);
}
.favourite-list__item:hover {
  background-color: var(--c-favourite-hover);
}
.favourite-list__item--dragged {
  background-color: var(--c-favourite-dragged);
}
.favourite-list__item--dragged .svg--drag {
  fill: var(--c-favourite-icon-hover);
}
.favourite-list__link {
  color: var(--c-favourite-link);
  cursor: pointer;
  text-decoration: none;
}
.favourite-list__link:hover {
  color: var(--c-favourite-link-hover);
}
.favourite-list__action {
  display: flex;
  flex-flow: row nowrap;
  margin-left: auto;
}
.favourite-list__action svg {
  height: 16px;
  width: 16px;
}

.search-result__headline {
  color: var(--c-search-h1);
  margin: 0;
}
.search-result__table {
  margin: 10px 0 30px;
}
.search-result__command-name {
  text-transform: uppercase;
}
.search-result__command-link {
  border-bottom: 1px #777 dashed;
  color: var(--c-search-link);
  cursor: pointer;
}
.search-result__command-link:hover {
  border-bottom-color: var(--c-search-link-hover);
  color: var(--c-search-link-hover);
}

.signup-view {
  display: flex;
  height: 100%;
  width: 100%;
  flex-flow: column;
}

.signup-view__form {
  display: block;
  border: 0;
  flex: 0 0 100%;
  width: 100%;
}

.login-screen {
  font-family: "LatoWeb";
  background-color: #1e1e1e;
  display: flex;
  justify-content: center;
  padding-top: 30px;
  flex: 1 0;
}

.login-screen__container {
  width: 550px;
  margin: 0 30px;
}

.login-splash {
  padding: 0 100px 20px;
  border-radius: 4px;
  display: flex;
  flex-flow: column;
  background-color: #2d2d2d;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 5px;
}
.login-splash .alert {
  border-radius: 0;
  padding: 15px 0;
}
.login-splash a {
  color: #ffad1f;
}
.login-splash strong {
  color: white;
}

.login-splash-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.login-splash__header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 45px 0 30px;
}

.login-intro {
  text-align: center;
}
.login-intro h1 {
  font-size: 22px;
}
.login-intro p {
  font-size: 16px;
  line-height: 28px;
  margin: 0;
}

.login-splash__icon svg {
  height: 75px;
  width: auto;
}

.login-splash__body {
  font-weight: 300;
  text-align: center;
  line-height: 1.8;
}

.login-splash__footer {
  display: flex;
  justify-content: center;
  margin-top: 35px;
}

.login-form__form {
  display: flex;
  flex-flow: column;
  margin-top: 15px;
}
.login-form__form .form-control {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin-bottom: 20px;
  width: 100%;
}
.login-form__form .button {
  font-size: 1em;
  font-weight: 700;
}

.login-with-oauth .icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  width: 1em;
  margin-right: 5px;
}
.login-with-oauth .icon svg {
  height: 1em;
  width: 1em;
}

@media screen and (max-width: 590px) {
  .login-splash {
    padding: 0 40px 0;
  }
}

.notification-item {
  background-color: var(--c-notification-bg);
  border: 1px solid var(--c-notification-border);
  color: var(--c-notification-color);
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 8px 15px;
}
.notification-item__header {
  display: flex;
  flex-flow: row nowrap;
}
.notification-item__header h1 {
  font-size: 14px;
}
.notification-item__header .button-icon {
  margin-left: 5px;
  align-self: flex-start;
}
.notification-item__body {
  font-family: "LatoWeb", sans-serif;
}
.notification-item__body p {
  margin: 0.5rem 0;
  font-size: 13px;
  font-weight: 300;
}
.notification-item__headline {
  color: var(--c-notification-headline-color);
  margin-right: auto;
  margin-bottom: 0;
}
.notification-item__commands {
  display: flex;
  flex-flow: row nowrap;
}
.notification-item--new {
  background-color: var(--c-notification-new-bg);
  box-shadow: 0px 0px 2px var(--c-notification-new-border);
}

.notification-command {
  color: var(--c-app-fontcolor);
  font-size: 12px;
  border-bottom: 1px var(--c-gray-300) dashed;
  margin-right: 5px;
  padding: 0;
  cursor: pointer;
}
.notification-command:hover {
  color: var(--c-hightlight);
  border-bottom-color: var(--c-hightlight);
}

.notification-list {
  display: flex;
  flex-flow: column nowrap;
  padding: 10px 10px 0;
}

/* Colors */
:root {
  --c-white: #fff;
  --c-black: #000;

  --c-gray-100: #999;
  --c-gray-200: #888;
  --c-gray-300: #777;
  --c-gray-400: #555;
  --c-gray-500: #444;
  --c-gray-600: #333;
  --c-gray-700: #2d2d2d;
  --c-gray-900: #1e1e1e;


  /* Result Table */

  --c-result-row-even: #171717;
  --c-result-row-odd: #222;
  --c-result-row-highlight: #443d2d;
  --c-result-headline: #ccc;
  --c-result-tableheading-bg: #000;
  --c-result-sup-label: #ffad1f;
  --c-result-sort-arrow: #777;
  --c-result-sort-arrow-active: #ffad1f;
  --c-result-th-hascontext: #777;
  --c-result-link: #fff;
  --c-result-link-hover: #ffad1f;
  --c-result-link-dash: #777;

  /* General Settings */

  --c-app-background: #2d2d2d;
  --c-app-fontcolor: #fff;
  --c-app-footerbg: #000;

  --c-hightlight: #ffad1f;
  --c-hightlight-fontcolor: #000;
  --c-hightlight-bg: #443d2d;

  --c-shadow: #000;
  --c-shadow-color: rgba(0, 0, 0, .8);

  --c-header-control: #777;
  --c-header-control-hover: #ffad1f;

  --c-headline-h1-default: #ffad1f;


  /* Scrollbar */

  --c-scrollbar-track-bg: transparent;
  --c-scrollbar-thumb-bg: #696969;
  --c-scrollbar-thumb-hover-bg: #999;


  /* Commandline */

  --c-cl-clear: #888;
  --c-cl-star-inactive: #888;
  --c-cl-star-active: #ffad1f;
  --c-cl-ctxmenu-bg: #333;

  --c-cl-dropdown-toggle: var(--c-gray-300);
  --c-cl-dropdown-toggle-hover: var(--c-white);
  --c-cl-dropdown-toggle-bg: var(--c-gray-600);

  --c-cl-dropdown-title: var(--c-gray-300);
  --c-cl-dropdown-link: var(--c-white);
  --c-cl-dropdown-link-hover: #ffad1f;



  --c-history-button-hover: #ffad1f;
  --c-history-button-enabled: #777;
  --c-history-button-disabled: #444;
  --c-history-button-active: #fff;


  /* Navigation */

  --c-nav-background: #1e1e1e;
  --c-nav-active: #000;
  --c-nav-icon: #666;
  --c-nav-icon-highlight: #fff;
  --c-nav-icon-active: #ffad1f;

  --c-subnav-item: #fff;
  --c-subnav-selecteditem: #ffad1f;

  --c-subnav-title: #888;
  --c-subnav-counter: #888;
  --c-subnav-link: #fff;
  --c-subnav-link-hover: #ffad1f;


  /* Navbutton */

  --c-nav-button-bg-inactive: #555;
  --c-nav-button-icon-inactive: #ffad1f;
  --c-nav-button-bg-hover: #666;
  --c-nav-button-icon-hover: #888;
  --c-nav-button-bg-disabled: #333;
  --c-nav-button-icon-disabled: #555;
  --c-nav-button-border: #2d2d2d;


  /* Suggestion Layer */

  --c-suggestion-bg: #333;
  --c-suggestion-tableheading: #999;
  --c-suggestion-label-bg: #555555;
  --c-suggestion-label-fontcolor: #fff;
  --c-suggestion-separator: #2d2d2d;


  /* Statusbar */

  --c-statusbar-bg: var(--c-gray-500);
  --c-statusbar-font-color: #aaa;
  --c-statusbar-highlight-color: var(--c-hightlight);


  /* Token Screen */

  --c-tokenscreen-headline: #ffad1f;


  /* Settings Screen */

  --c-settings-h1: #ffa200;
  --c-settings-subsection-border: #333;
  --c-settings-arrow: #888;
  --c-settings-arrow-active: #ffad1f;
  --c-settings-tableheading-bg: #000;
  --c-settings-fieldcontainer-bg: #222;
  --c-settings-fieldcontainer-action-icon: #888;
  --c-settings-fieldcontainer-action-icon-hover: #ffad1f;
  --c-settings-dateinput-bg: var(--c-app-background);
  --c-settings-dateinput-txt: #888;
  --c-settings-dateinput-hover: #fff;


  /* History Screen */

  --c-history-arrow: #555;
  --c-history-hover-arrow: #fff;
  --c-history-bar-item-bg: #232323;
  --c-history-bar-item-date: #666;
  --c-history-bar-item-active-date: #232323;
  --c-history-bar-item-active-bg: #666;
  --c-history-item-hoverbg: #333;
  --c-history-item-border: #333;
  --c-history-item-hover-name: #ffad1f;
  --c-history-item-command: #888;


  /* Screener Screen */

  --c-screener-collapsible-bg: #1e1e1e;
  --c-screener-collapsible-panel-bg: #2d2d2d;
  --c-screener-collapsible-arrow: #666;
  --c-screener-collapsible-trigger-counter: #666;
  --c-screener-collapsible-selection-header: #666;
  --c-screener-add-filter: #ffad1f;

  --c-screener-slider-col-border: #333;
  --c-screener-slider-border: #727272;
  --c-screener-slider-track-bg: #282828;
  --c-screener-slider-track-bg-highlight: #fff;
  --c-screener-slider-handle-fill: #474747;
  --c-screener-slider-handle-stroke: #b2b2b2;

  --c-screener-chart-line: #ffad1f;
  --c-screener-chart-area: #807460;

  --c-screener-text-active: #FFF;
  --c-screener-text-inactive: #888;


  /* Header */

  --c-header-bg: #191919;
  --c-header-title-color: #888;
  --c-header-focus-title-color: #fff;



  /* Favourite */

  --c-favourite-hover: var(--c-hightlight-bg);
  --c-favourite-dragged: var(--c-hightlight-bg);
  --c-favourite-link: var(--c-app-fontcolor);
  --c-favourite-link-hover: var(--c-hightlight);
  --c-favourite-icon: rgba(255, 255, 255, .1);
  --c-favourite-icon-hover: var(--c-hightlight);


  /* Search Result */

  --c-search-h1: var(--c-hightlight);
  --c-search-link: var(--c-app-fontcolor);
  --c-search-link-hover: var(--c-hightlight);


  /* Login Form */

  --c-login-bg: var(--c-gray-900);
  --c-login-info-link: var(--c-hightlight);


  /* Notification */

  --c-notification-border: transparent;
  --c-notification-bg: var(--c-gray-900);
  --c-notification-color: var(--c-app-fontcolor);
  --c-notification-headline-color: var(--c-hightlight);

  --c-notification-new-bg: var(--c-gray-500);
  --c-notification-new-border: var(--c-hightlight);

  --c-notification-command-color: var(--c-hightlight);


  --f-regular: 'LatoRegular', sans-serif;
  --f-bold: 'LatoBold', sans-serif;
  --f-black: 'LatoBlack', sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;
}

.channel-selector {
  margin-bottom: 15px;
}

.command-selector .radiobutton,
.channel-selector .radiobutton {
  margin-bottom: .25em;
}

/* old file: /modules/core-openfin-component/skin/fdc3-channel.css */

:root {
  --color-channel-red: #ef3838;
  --color-channel-blue: #51a7fb;
  --color-channel-orange: #ff802e;
  --color-channel-yellow: #f9f941;
  --color-channel-green: #51dc67;
  --color-channel-purple: #d96bff;
}

.fdc3-channel {
  --color-channel-name: hsl(0, 0%, 100%);
  color: var(--color-channel-name);
  display: inline-flex;
  flex-flow: row;
}

.fdc3-channel__icon { margin-right: .25em; }

.fdc3-channel--blue { --color-channel-name: var(--color-channel-blue); }
.fdc3-channel--green { --color-channel-name: var(--color-channel-green); }
.fdc3-channel--orange { --color-channel-name: var(--color-channel-orange); }
.fdc3-channel--purple { --color-channel-name: var(--color-channel-purple); }
.fdc3-channel--red { --color-channel-name: var(--color-channel-red); }
.fdc3-channel--yellow { --color-channel-name: var(--color-channel-yellow); }
.fdc3-channel--disabled { color: hsl(0, 0%, 67%); }



/* old file: /modules/core-openfin-component/skin/fdc3-channel-selector.css */

.fdc3-channel-selector { padding: 5px 0; }

.fdc3-channel-selector__header {
  align-items: center;
  display: flex;
  margin-bottom: 10px;
}

.fdc3-channel-selector__title {
  color: hsl(0, 0%, 70%);
  font-size: 1.1em;
  margin-right: 1em;
  text-transform: uppercase;
}

.fdc3-channel-selector__item { display: block; }
.fdc3-channel-selector__item + .fdc3-channel-selector__item { margin-top: 10px; }
.fdc3-channel-selector__item__name { color: var(--color-channel-name); }

.channel-selector .radiobutton__wrapper {
  margin-bottom: .25em;
}


/* /modules/core-openfin-component/skin/fdc3-statusbar.css */

.fdc3-statusbar {
  --channel-color: hsl(0, 0%, 100%);
  color: var(--channel-color);
  margin-left: 0;
  margin-right: auto;
}

.fdc3-statusbar .popover__trigger {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  white-space: nowrap;
}

.fdc3-statusbar .popover__trigger::after {
  border-bottom: transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #444;
  height: 0;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -15px);
  width: 0;
  z-index: 101;
}

.fdc3-statusbar .popover__content {
  bottom: 18px;
  top: auto;
}

.fdc3-statusbar .svg {
  display: inline-block;
  fill: currentColor;
  height: 1em;
}



.screener {
  background-color: var(--color-gray-400);
  max-width: 700px;
  margin: 60px auto 0;
}

.screener__header {
  margin-left: 30px;
  margin-right: 30px;
  padding: 15px 0;
  /* border-bottom: 1px solid var(--color-gray-300); */
}

.screener__body {
  padding: 10px 0 0 0;
  margin-left: 30px;
  margin-right: 30px;
}

.screener__footer {
  border-top: 1px solid var(--color-gray-300);
  display: flex;
  flex-flow: row;
  margin-left: 30px;
  margin-right: 30px;
  padding: 20px 0;
}

.screener-header {
  display: flex;
  flex-flow: row;
  align-items: center;
}

.screener-header__action {
  display: flex;
  flex-flow: row;
  margin-left: auto;
}

.screener-header__button {
  background-color: transparent;
  border: 0;
  color: #666;
  padding: 5px 10px;
  margin-right: -8px;
  transition: color 0.2s ease-out;
}

.screener-header__button:hover {
  color: var(--color-accent-400);
}

.screener-header__button:active {
  outline: none;
}

.screener-header__button svg {
  fill: currentColor;
  height: 1.1em;
  width: 1.1em;
}

.screener-header__mute {
  color: var(--color-accent-400);
}

.screener-header__mute svg {
  height: 1.2em;
  width: 1.3em;
}

.screener-header__mute--muted {
  color: var(--color-gray-100);
}

.screener-label {
  flex: 1 0;
}

.screener-label__output {
  align-items: baseline;
  color: var(--color-accent-400);
  display: flex;
  flex-flow: row;
  font-weight: 700;
  line-height: 20px;
}

.screener-label__output .icon {
  display: none;
  color: var(--color-gray-100);
  height: .8em;
  width: .8em;
  margin-left: .5em;
}

.screener-label__output:hover .icon {
  display: block;
}

.screener-label__control {
  display: grid;
  grid-template-columns: 500px 30px;
  margin: -5px 0;
}

.screener-label__control__input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 30px;
}

.screener-title__control__invalid {
  padding: 5px;
  color: red;
}

.screener-title__control__button {
  border-radius: 0 3px 3px 0;
  border: 0;
  background-color: var(--color-accent-400);
}


.screener-title__control__button svg{
  width: 1.2em;
  height: 1.2em;
}

.screener-title__control__button--submit {
  border-bottom: 1px solid hsla(0, 0%, 0%, .5);
}

.filter-manager {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 50px;
}

.filter-header {
  border-bottom: 2px solid var(--color-gray-200);
  color: var(--color-gray-100);
  column-gap: 15px;
  display: grid;
  font-weight: 700;
  grid-template-columns: 200px 2fr auto;
  padding-bottom: 10px;
}

.filter-header__mute-switch .switch-base {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.filter-header__mute-switch .switch__label {
  order: -1;
  color: var(--color-gray-100);
  margin-left: 0;
  margin-right: 8px;
}

.filter-manager .input,
.filter-manager .select {
  color: #fff;
  height: 30px;
  font-size: 15px;
}

.filter-manager .dropdown {
  height: 30px;
}

.filter-manager .dropdown__toggle {
  background-color: #444;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #fff;
  font-size: 15px;
  height: 100%;
  padding-left: 10px;
  width: 100%;
}

.filter-manager__item {
  align-items: center;
  border-bottom: 1px solid var(--color-gray-300);
  column-gap: 15px;
  display: grid;
  grid-template-columns: 200px 2fr auto;
}

.filter-manager__item:last-child {
  border-bottom: 0;
}

.filter-manager--readonly .filter-manager__item {
}

.filter-manager__remove .icon {
  fill: currentColor;
  height: 1em;
  width: 1em;
}

.filter-manager__remove:hover {
  background-color: transparent;
  color: var(--color-accent-400);
}

.filter-manager__remove:active {
  border-color: #ffad1f;
}

.filter-manager__property {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  grid-column: 1;
}

.filter-manager__filter {
  grid-column: 2;
}

.filter-manager__remove {
  align-self: center;
  border: 0;
  background-color: transparent;
  color: var(--color-gray-200);
  cursor: pointer;
  font-size: 18px;
  grid-column: 3;
  padding: 0;
  transition: color 0.2s ease-out;
}

.filter-manager__no-filter {
  grid-column: 1 / 4;
}

.filter-manager__remove .icon svg {
  height: 1em;
  width: 1em;
}

.filter-manager__value .dropdown {
  width: 100%;
  height: 100%;
}

.filter-manager__value .dropdown__toggle .icon {
  margin-left: auto;
  font-size: .5em;
}

.filter-manager__value .dropdown__menu {
  box-sizing: border-box;
  width: 100%;
}

.filter-manager__add {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-flow: row nowrap;
}

.filter-manager__add .icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  width: 1em;
  margin-right: 5px;
}

.screener-filter-daterange .dropdown,
.screener-filter-enum .dropdown {
  width: 100%;
}

.screener-filter-number {
  display: grid;
  grid-template-columns: 50px 1fr;
  column-gap: 15px;
}

.screener-footer {
  display: flex;
  width: 100%;
}

.screener-footer__delete {
  margin-left: auto;
}

.screener-footer__delete .acknowledge-button {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid var(--color-gray-100);
  border-radius: 3px;
  padding: 4px 12px;
  background-color: transparent;
  color: var(--color-gray-100);
  font-weight: 700;
}

.screener-footer__delete .acknowledge-button .icon {
  display: inline-block;
  height: 1em;
  width: 1em;
  fill: currentColor;
  margin-right: 5px;
  vertical-align: baseline;
}

.screener-footer__delete .acknowledge-button:hover {
  color: var(--color-danger-400);
  border-color: var(--color-danger-400);
}

.screener-footer__delete .acknowledge-button--acknowledge {
  text-transform: uppercase;
  color: var(--color-danger-400);
}

.screener-footer__delete .acknowledge-button--acknowledge:hover {
  color: var(--color-danger-600);
}

.screener-footer__delete .acknowledge-button--acknowledge:disabled {
  color: var(--color-gray-100);
}

:root {
  --color-alert-bg: hsl(0, 0%, 12%);
  --color-alert-border: transparent;
  --color-alert-color: hsl(0, 0%, 75%);
  --color-alert-headline-color: hsl(0, 0%, 100%);
  --color-alert-category: hsl(0, 0%, 48%);
  --color-alert-new-bg: hsl(0, 0%, 0%);
  --color-alert-new-border: var(--color-accent-400);
  --color-alert-date: hsl(0, 0%, 48%);
}

.alert-view {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr;
  grid-template-rows:
    auto
    1fr
    ;
  grid-template-areas:
    "filter"
    "body"
    ;
}

.alert-view__body {
  grid-area: body;
  overflow-x: auto;
}

.alert-filter {
  display: flex;
  flex-flow: row;
  grid-area: filter;
  background-color: rgba(0,0,0,0.8);
  padding: 8px 15px;
}

.alert-filter__input {
  flex: 1 0;
  height: 35px;
}

.alert-filter .context-menu {
  margin-left: 10px;
}

.alert-filter .dropdown__toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(0, 0%, 18%);
  border: 0;
  border-radius: 100%;
  height: 35px;
  width: 35px;
  padding: 0;
}

.alert-filter .dropdown__toggle .icon {
  fill: hsl(0, 0%, 48%);
  width: auto;
  height: 18px;
  margin-left: auto;
  margin-right: auto;
}

.alert-filter .dropdown__toggle svg {
  width: auto;
  height: 18px;
}

.alert-item {
  display: grid;
  background-color: var(--color-alert-bg);
  border-left: 3px solid transparent;
  color: var(--color-alert-color);
  margin-bottom: 10px;
  padding: 10px;
  grid-template-rows: 1fr auto auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "ai-header"
    "ai-body"
    "ai-footer"
  ;
}

.alert-item__header {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  grid-area: 'ai-header';
}

.alert-item__header {
  font-size: 14px;
}

.alert-item__header .button-icon {
  margin-left: 5px;
  align-self: flex-start;
}

.alert-item__date {
  color: var(--color-alert-date);
  font-size: 10px;
  margin-right: auto;
  text-transform: uppercase;
}

.alert-item__body {
  font-family: "LatoWeb", sans-serif;
  font-size: 13px;
  grid-area: 'ai-body';
}

.alert-item__body p {
  margin: .5rem 0;
  font-weight: 300;
}

.alert-item__footer {
  grid-area: 'ai-footer';
}

.alert-item__headline {
  color: var(--color-alert-headline-color);
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 5px;
  margin-top: 15px;
  margin-right: auto;
}

.alert-item--new {
  background-color: var(--color-alert-new-bg);
  border-left-color: var(--color-alert-new-border);
}

.alert-list {
  display: flex;
  flex-flow: column nowrap;
  padding: 0 15px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.alert-list__category__header {
  align-items: center;
}

.alert-list__category {
  display: flex;
  flex-flow: column nowrap;
}

.alert-list__category__title {
  color: var(--color-alert-category);
  margin: 10px 0;
}

.alert-list__category__header {
  display: flex;
  flex-flow: row nowrap;
}

.alert-list__category__mark-all {
  margin-left: auto;
}

.alert-label__action {
  display: none;
  cursor: default;
}

.alert-label__action:hover {
  text-decoration: underline;
}
.alert-label__text::before {
  content: '•';
  font-size: 13px;
  margin-right: 3px;
}

.alert-item__body a {
  color: #ffad1f;
  font-weight: 700;
}

.alert-item__body button {
  background-color: transparent;
  border: 0;
  color: #ffad1f;
  cursor: pointer;
  display: inline;
  font-style: normal;
  font-weight: inherit;
  padding: 0;
}

.alert-item__body button:hover {
  text-decoration: underline;
}

.alert-item:hover .alert-label__action {
  display: inline-block;
}

.alert-item:hover .alert-label__text {
  display: none;
}

.alert-scroller {
  display: block;
  position: relative;
}

.alert-scroller__loader {
  height: 100px;
  position: relative;
}

.alert-scroller__loader .loader__spinner {
  top: 10px;
}

.subscription__clear .acknowledge-button {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid var(--color-gray-100);
  border-radius: 3px;
  padding: 4px 12px;
  background-color: transparent;
  color: var(--color-gray-100);
  font-weight: 700;
}

.subscription__clear .acknowledge-button .icon {
  display: inline-block;
  height: 1em;
  width: 1em;
  fill: currentColor;
  margin-right: 5px;
  vertical-align: baseline;
}

.subscription__clear .acknowledge-button:hover {
  color: var(--color-danger-400);
  border-color: var(--color-danger-400);
}

.subscription__clear .acknowledge-button--acknowledge {
  text-transform: uppercase;
  color: var(--color-danger-400);
}

.subscription__clear .acknowledge-button--acknowledge:hover {
  color: var(--color-danger-600);
}

.subscription__clear .acknowledge-button--acknowledge:disabled {
  color: var(--color-gray-100);
}

.startup-option-field {
  display: flex;
  flex-flow: column;
  text-align: left;
}

.startup-option-field__default {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  width: 100%;
  margin-top: 10px;
}

.startup-option-field__recent .radiobutton__label {
  margin-top: 15px;
  margin-bottom: 7.5px;
  display: flex;
  align-items: center;
}

.startup-option-field__recent__scenario {
  position: relative;
  overflow: hidden;
}

/*
.startup-option-field__recent__scenario .startup-scenario {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
*/

.startup-scenario {
  --canvas-color: transparent;
  --window-bg: var(--color-gray-200);
  --window-border: none;
  --window-bg-hidden: none;
  --window-border-hidden: var(--color-gray-200);
  --screen-border: none;
  background-color: var(--color-gray-500);
  border: 1px solid var(--color-gray-200);
  border-radius: 5px;
  display: flex;
  flex-flow: column;
  font-size: .75rem;
  line-height: 1.2;
  padding: 10px;
  text-align: center;
}

.startup-scenario__input {
  display: none;
}

.startup-scenario__label {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}

.startup-scenario__label::before {
  align-self: center;
  margin-top: auto;
  order: 3;
}

.startup-scenario__canvas > .resize-observed {
  display: flex;
  overflow: hidden;
}

.startup-scenario__canvas canvas {
  width: 100%;
  height: 100%;
}

.startup-option-field__recent .startup-scenario__canvas canvas {
  width: auto;
  max-height: 80px;
  margin: 0 auto;
}

.fdc3-channel-field .channel-selector {
  display: flex;
  flex-flow: row;
  gap: 15px;
}

.chart--styled {

  --bg-lightness: 0%;
  --fg-lightness: 100%;

  /* Colors for data series and points */
  --color-data-01: rgb(255, 173, 31);
  --color-data-02: rgb(144, 238, 126);
  --color-data-03: rgb(244, 91, 91);
  --color-data-04: rgb(119, 152, 191);
  --color-data-05: rgb(170, 238, 238);
  --color-data-06: rgb(255, 0, 102);
  --color-data-07: rgb(238, 170, 238);
  --color-data-08: rgb(85, 191, 59);
  --color-data-09: rgb(223, 83, 83);
  --color-data-10: rgb(119, 152, 191);
  --color-data-11: rgb(170, 238, 238);

  --color-buy: rgba(0, 184, 148, 1.0);
  --color-buy-50: rgba(0, 184, 148, 0.5);
  --color-sell: rgba(214, 48, 49, 1.0);
  --color-sell-50: rgba(214, 48, 49, 0.5);

  --color-brand-light: rgb(255, 85, 255);
  --color-brand-dark: rgb(153, 0, 153);

  /* Foreground colors (text, lines, strokes) */
  --fg-100: hsla(0, 0%, var(--fg-lightness), 1.0);
  --fg-90: hsla(0, 0%,  var(--fg-lightness), 0.9);
  --fg-80: hsla(0, 0%,  var(--fg-lightness), 0.8);
  --fg-70: hsla(0, 0%,  var(--fg-lightness), 0.7);
  --fg-60: hsla(0, 0%,  var(--fg-lightness), 0.6);
  --fg-50: hsla(0, 0%,  var(--fg-lightness), 0.5);
  --fg-40: hsla(0, 0%,  var(--fg-lightness), 0.4);
  --fg-30: hsla(0, 0%,  var(--fg-lightness), 0.3);
  --fg-20: hsla(0, 0%,  var(--fg-lightness), 0.2);
  --fg-10: hsla(0, 0%,  var(--fg-lightness), 0.1);

  --bg-100: hsla(0, 0%, var(--bg-lightness), 1.0);
  --bg-90: hsla(0, 0%,  var(--bg-lightness), 0.9);
  --bg-80: hsla(0, 0%,  var(--bg-lightness), 0.8);
  --bg-70: hsla(0, 0%,  var(--bg-lightness), 0.7);
  --bg-60: hsla(0, 0%,  var(--bg-lightness), 0.6);
  --bg-50: hsla(0, 0%,  var(--bg-lightness), 0.5);
  --bg-40: hsla(0, 0%,  var(--bg-lightness), 0.4);
  --bg-30: hsla(0, 0%,  var(--bg-lightness), 0.3);
  --bg-20: hsla(0, 0%,  var(--bg-lightness), 0.2);
  --bg-10: hsla(0, 0%,  var(--bg-lightness), 0.1);
}

/* applies to both vertical and horizontal gradients */
.chart--styled [id|='gradient'] stop[offset='0'] { stop-opacity: 0.0; }
.chart--styled [id|='gradient'] stop[offset='1'] { stop-opacity: 1.0; }

.chart--styled .highcharts-color-00 { fill: var(--color-data-01); stroke: var(--color-data-01); }
.chart--styled .highcharts-color-01 { fill: var(--color-data-02); stroke: var(--color-data-02); }
.chart--styled .highcharts-color-02 { fill: var(--color-data-03); stroke: var(--color-data-03); }
.chart--styled .highcharts-color-03 { fill: var(--color-data-04); stroke: var(--color-data-04); }
.chart--styled .highcharts-color-04 { fill: var(--color-data-05); stroke: var(--color-data-05); }
.chart--styled .highcharts-color-05 { fill: var(--color-data-06); stroke: var(--color-data-06); }
.chart--styled .highcharts-color-06 { fill: var(--color-data-07); stroke: var(--color-data-07); }
.chart--styled .highcharts-color-07 { fill: var(--color-data-08); stroke: var(--color-data-08); }
.chart--styled .highcharts-color-08 { fill: var(--color-data-09); stroke: var(--color-data-09); }
.chart--styled .highcharts-color-09 { fill: var(--color-data-10); stroke: var(--color-data-10); }
.chart--styled .highcharts-color-10 { fill: var(--color-data-11); stroke: var(--color-data-11); }

/*
  div.highcharts-container
    svg.highcharts-root[width height viewBox]
      rect.highcharts-background[x y width height rx ry]
      rect.highcharts-plot-background[x y width height]
      rect.highcharts-plot-border
*/

.chart--styled .highcharts-container {
  --chart-sidebar-width: 200px;
  height: 600px;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  width: 100%;
  z-index: 0;
}

.chart--styled .highcharts-container::after,
.chart--styled .highcharts-container::before {
  background-color: transparent;
  background-repeat: no-repeat;
  content: '';
  display: block;
  filter: grayscale();
  mix-blend-mode: screen;
  opacity: 0.1;
  pointer-events: none;
  position: absolute;
}

/* 2iQ logo */
.chart--styled .highcharts-container::after {
  --size: 50px;
  background-image: url(ce8b3d1746dfa62b1f32.svg);
  height: var(--size);
  right: 20px;
  top: 20px;
  width: var(--size);
}

/* 2iQ watermark */
.chart--styled .highcharts-container::before {
  --size: 350px;
  background-image: url(96fb0fad10a20fa457b5.svg);
  height: var(--size);
  left: calc(50% - (var(--chart-sidebar-width) / 2 + var(--size) / 2));
  top: calc(50% - var(--size) / 2);
  width: var(--size);
}

.chart--styled .highcharts-background { fill: var(--bg-70); }
.chart--styled .highcharts-plot-background { fill: transparent; }

/* very important - without the plot-border element overlays the grid lines */
.chart--styled .highcharts-plot-border { fill: none; }

.chart--styled .highcharts-graph {
  fill: transparent;
  stroke: var(--fg-70);
  stroke-width: 1;
}

/*
.highcharts-tracker-area {}

.highcharts-tracker-line {
  fill: none;
  stroke: transparent;
  stroke-linejoin: round;
}

#gradient-background stop { stop-color: rgb(52, 169, 186); }
.highcharts-background { fill: url(#gradient-background); }
.highcharts-anchor  { cursor: pointer; }
.highcharts-markers {}
.highcharts-plot-band {}
.highcharts-plot-line {}
.highcharts-point {}
.highcharts-point-inactive {}
.highcharts-state-hover .highcharts-graph {}
.highcharts-state-hover path {}
.highcharts-state-normal path {}
*/

@font-face /* latin */ {
  font-family: '2iq-plain';
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(d9506f36795a08de33aa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face /* latin-ext */ {
  font-family: '2iq-plain';
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(70e10c2e654b8963a5aa.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face /* latin */ {
  font-family: '2iq-plain';
  font-weight: 600;
  src: local('Fira Sans Medium'), local('FiraSans-Medium'), url(5b5e9b66c7d7a36666ba.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face /* latin-ext */ {
  font-family: '2iq-plain';
  font-weight: 600;
  src: local('Fira Sans Medium'), local('FiraSans-Medium'), url(1b8eca534edd4b506a95.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face /* numerals */ {
  font-family: '2iq-plain';
  font-weight: 400;
  src: url(f10a2b4bb53e91daa1b9.woff2) format('woff2');
  unicode-range: U+30-39; /* 0-9 */
}

@font-face /* numerals */ {
  font-family: '2iq-plain';
  font-weight: 600;
  src: url(f46d4f6b1e8bb8a1fe26.woff2) format('woff2');
  unicode-range: U+30-39; /* 0-9 */
}

.chart--styled {
  font-family: '2iq-plain', sans-serif;
  font-size: 12px;
  line-height: normal;
  text-rendering: optimizeLegibility;
}

.chart--styled text { stroke-width: 0; }
.chart--styled .highcharts-strong { font-weight: 600; }
.chart--styled .highcharts-emphasized { font-style: italic; }

.chart--styled .highcharts-title,
.chart--styled .highcharts-subtitle,
.chart--styled .highcharts-caption { fill: var(--fg-70); }
.chart--styled .highcharts-title { display: none; font-size: 2.0em; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.chart--styled .highcharts-subtitle { font-size: 1.5em; font-style: italic; }
.chart--styled .highcharts-caption { font-size: 1.2em; font-style: italic; }

.chart--styled .highcharts-credits { cursor: pointer; display: none; fill: var(--fg-50); font-size: 0.9em; }
.chart--styled .highcharts-credits:hover { fill: var(--fg-90); }

.chart--styled .highcharts-flags-series .highcharts-point text { fill: var(--fg-100); font-size: 0.9em; }

.chart--styled .highcharts-axis-labels { font-size: 0.9em; }
.chart--styled .highcharts-data-label { font-size: 0.9em; font-weight: 600; }
.chart--styled .highcharts-data-label text { fill: var(--fg-70); }

.chart--styled .highcharts-crosshair-label text { fill: var(--fg-90); }
.chart--styled .highcharts-button text { fill: var(--fg-100); font-weight: bold; }

/*

  g.highcharts-grid.highcharts-xaxis-grid
    path.highcharts-grid-line+

  g.highcharts-grid.highcharts-yaxis-grid+
    path.highcharts-grid-line+

  g.highcharts-axis.highcharts-xaxis
    path.highcharts-axis-line
    path.highcharts-tick+

  g.highcharts-axis.highcharts-yaxis+
    path.highcharts-axis-line
    path.highcharts-tick+

*/

.chart--styled .highcharts-axis-labels { fill: var(--fg-70); }
.chart--styled .highcharts-axis-title { fill: var(--fg-70); }

.chart--styled .highcharts-grid { stroke: var(--fg-20); stroke-width: 0.5; }
.command--ichart4 .chart--styled .highcharts-alternate-grid { fill: var(--bg-50); }

/* .highcharts-grid-line { } */
/* .highcharts-xaxis-grid { } */
/* .highcharts-yaxis-grid  { } */
.chart--styled .highcharts-minor-grid-line { stroke: var(--fg-10); stroke-width: 0.5; }

.chart--styled .highcharts-axis-line { stroke: var(--fg-50); stroke-width: 0; }
/* .highcharts-xaxis .highcharts-axis-line { } */
/* .highcharts-yaxis .highcharts-axis-line { } */

.chart--styled .highcharts-tick { stroke: var(--fg-50); stroke-width: 1; }
.chart--styled .highcharts-yaxis .highcharts-tick { stroke-width: 1; }


.axis-tiered-amount .highcharts-grid-line { stroke-width: 1; stroke-dasharray: 3,3; }
.axis-tiered-amount .highcharts-grid { stroke: var(--fg-20); stroke-width: 0; }
.axis-price .highcharts-grid-line { stroke-width: 0; }
/*
  div.legend-box
    h4.legend-title
      button.legend-item.buy.{visible}
        span
      button.legend-item.sell.{visible}
        span
*/

.chart--styled .legend-box {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 40px;
  top: 40px;
  width: 230px;
}

.chart--styled .legend-title {
  color: var(--fg-90);
  font-size: 1.2em;
}

/* 1 HACK: remove box-shadow based focus-ring here.
   the focus-ring has been defined too broadly in the past, we should refactor that soon.
*/
.chart--styled .legend-item {
  background-color: transparent;
  border: none;
  box-shadow: none; /*1*/
  color: var(--fg-80);
  display: flex;
  margin-top: 10px;
  padding: 0;
  transition: color 100ms ease-in;
}

.chart--styled .legend-item:hover {
  color: var(--fg-100);
  transition-duration: 150ms;
}

.chart--styled .legend-item::before {
  border-radius: 100%;
  box-shadow: 0 0 0 1px var(--fg-70);
  content: '';
  display: block;
  height: 14px;
  margin-right: 6px;
  transition: box-shadow 100ms ease-out;
  width: 14px;
}

.chart--styled .legend-item:hover::before {
  box-shadow: 0 0 0 1px var(--fg-90);
  transition-duration: 150ms;
}

.chart--styled .legend-item.buy::before { background-color: var(--color-buy); }
.chart--styled .legend-item.sell::before { background-color: var(--color-sell); }

.chart--styled .legend-item:not(.visible) {
  filter: grayscale();
  opacity: 0.5;
}

.chart--styled .legend-item:not(.visible):hover {
  filter: none;
  opacity: 0.6;
}

.chart--styled .legend-item:not(.visible) {
  filter: grayscale();
  opacity: 0.5;
}

.chart--styled .legend-item:not(.visible):hover {
  filter: none;
  opacity: 0.6;
}

.chart--styled .highcharts-area-series { pointer-events: none; stroke-width: 0; }
.chart--styled #gradient-area stop:first-child { stop-color: var(--color-brand-light); stop-opacity: 0.4; }
.chart--styled #gradient-area stop:last-child { stop-color: var(--color-brand-dark); stop-opacity: 0.05; }
.chart--styled .highcharts-area { fill: url(#gradient-area); }

.chart--styled .highcharts-column-series .highcharts-point { fill-opacity: 0.6; stroke-width: 1; }
.chart--styled .buy-volume .highcharts-point { fill: var(--color-buy); stroke: var(--color-buy); }
.chart--styled .sell-volume .highcharts-point { fill: var(--color-sell); stroke: var(--color-sell); }


/*
These are the "native" flag-shapes which are part of the SVG:

g.sell-flags.highcharts-marker.highcharts-flags-series.highcharts-tracker
  g.highcharts-label highcharts-point
    g.highcharts-label-box
*/

.chart--styled g.buy-flags .highcharts-label-box { fill: none; stroke: none; }
.chart--styled g.sell-flags .highcharts-label-box { fill: none; stroke: none; }

/*
Since we specify `useHTML`, HC also generats this markup:

div.highcharts-flags-series[sell-flags | buy-flags]
  div.highcharts-label.highcharts-point
    span {position: absolute; white-space: nowrap; margin: 0; left: 11px; top: 3px;}
      div.trade-flag.[sell-flag|buy-flag][result="*"]
*/

.chart--styled div.highcharts-flags-series {
  --flag-size-unit: 24px;
  --flag-scale-factor: 1.5;
}

.chart--styled div.highcharts-flags-series .highcharts-point span { all: unset !important; }
.chart--styled div.highcharts-flags-series .highcharts-point span div {
  background-size: contain;
  border-radius: 100%;
  height: var(--flag-size-unit);
  opacity: 1;
  transition: box-shadow, transform 50ms ease-out;
  width: var(--flag-size-unit);
}

.chart--styled div.highcharts-flags-series .highcharts-point-select,
.chart--styled div.highcharts-flags-series .highcharts-point:hover {
  transform: scale(var(--flag-scale-factor));
  transition-duration: 150ms;
  z-index: 100;
}

.chart--styled div.highcharts-flags-series .highcharts-point-select:hover,
.chart--styled div.highcharts-flags-series .highcharts-point-select {
  transform: scale(calc(var(--flag-scale-factor) * 1.5));
}

.chart--styled div.highcharts-flags-series div.trade-flag { box-shadow: 0 0 0 1px var(--fg-70); }

.chart--styled div.trade-flag.buy-flag { background-color: var(--color-buy); }
.chart--styled div.trade-flag.sell-flag { background-color: var(--color-sell); }

.chart--styled div.trade-flag.buy-flag[result='1'] { background-image: url(5b5baad8e66c89d70f59.svg); }
.chart--styled div.trade-flag.buy-flag[result='2'] { background-image: url(6d2c653701e60b7575c9.svg); }
.chart--styled div.trade-flag.buy-flag[result='3'] { background-image: url(15b81e184adfc4009bde.svg); }

.chart--styled div.trade-flag.sell-flag[result='1'] { background-image: url(1703524813773cd9f62f.svg); }
.chart--styled div.trade-flag.sell-flag[result='2'] { background-image: url(3992954401fbe68c84fb.svg); }
.chart--styled div.trade-flag.sell-flag[result='3'] { background-image: url(1f2804e81e105fc4286e.svg); }

.chart--styled div.trade-flag:not([result='1'],[result='2'],[result='3'])::before {
  align-items: center;
  color: #000;
  content: attr(result);
  display: flex;
  font-size: 1.3em;
  font-weight: bold;
  height: var(--flag-size-unit);
  justify-content: center;
  width: var(--flag-size-unit);
}

.event-circle {
  fill-opacity: 0.25;
  stroke-opacity: 0.25;
  stroke-width: 2;
  transition: all 200ms ease-out;
}

.event-circle.buy { fill: var(--color-buy); stroke: var(--color-buy); }
.event-circle.sell { fill: var(--color-sell); stroke: var(--color-sell); }

.event-circle-group:hover .event-circle:not(.active) {
  fill-opacity: 0.5;
  stroke-opacity: 0.5;
}

.event-circle-group text { fill: #fff; font-size: 20px; font-weight: bold; pointer-events: none; }

.event-circle.active { fill-opacity: 0.5; stroke-opacity: 1; stroke-width: 4px; }

.event-insider { pointer-events: none; }

/*
.highcharts-empty-series {}

.highcharts-point-select,
.highcharts-markers .highcharts-point-select { stroke: #f00; stroke-width: 2; }

.highcharts-series-inactive {}
.highcharts-column-series .highcharts-point-hover {}


.highcharts-flags-series .highcharts-point-select .highcharts-label-box { opacity: 0.3; }
.highcharts-lollipop-stem {}

.highcharts-pie-series .highcharts-point {}
.highcharts-pie-series .highcharts-point-hover {}

.highcharts-treemap-series .highcharts-above-level {}
.highcharts-treemap-series .highcharts-internal-node {}
.highcharts-treemap-series .highcharts-internal-node-interactive {}
.highcharts-treemap-series .highcharts-internal-node-interactive:hover {}
.highcharts-treemap-series .highcharts-point {}
.highcharts-treemap-series .highcharts-point-hover {}
*/

/*
  <div class="qchart-tooltip tt-event sell-event"
       id="tooltip-box"
       style="visibility: visible; position: absolute; left: 880px; top: 120px;">
    <div class="tt-event sell-event">
      <div class="tt-header">
        <h4>Sells 2021-Q2</h4>
        <menu>
          <button id="tt-menu-drilldown"></button>
          <button id="tt-menu-previous"></button>
          <button id="tt-menu-next"></button>
          <button id="tt-menu-close"></button>
        </menu>
      </div>
      <dl>
        <dt>Trades</dt>
        <dd>1,136</dd>
        <dt>Shares Traded</dt>
        <dd>4,317,108</dd>
        <dt>Total Value</dt>
        <dd>1,387,725,612.18</dd>
      </dl>
      <ul>
        <li id="5PXH1KB6">Zuckerberg, Mark Elliot</li>
        <li id="B57H1KF3">Taylor, Susan J S</li>
        <li id="SQVH1K07">Wehner, David M</li>
        <li id="JCXH1KP4">Newstead, Jennifer Gillian</li>
        <li id="F5BH1KC5">Fischer, David B</li></ul>
    </div>
  </div>
*/


.qchart-tooltip {
  position: absolute;
  right: 18px;
  top: 130px;
}

.qchart-tooltip .tt-event {
  border-radius: 5px 0 0 5px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.9);
  font-weight: normal;
  max-height: 455px;
  overflow: auto;
  padding: 15px;
  width: 250px;
}

.qchart-tooltip .buy-event {
  background: linear-gradient(135deg, var(--color-buy) 0%, var(--color-buy-50) 75%);
}
.qchart-tooltip .sell-event {
  background: linear-gradient(135deg, var(--color-sell) 0%, var(--color-sell-50) 75%);
}

.qchart-tooltip .tt-header { position: relative; }

.qchart-tooltip li.highlighted { text-decoration: underline; }

.qchart-tooltip .tt-header h4 { font-size: 1.2em; }

.qchart-tooltip menu {
  position: absolute;
  right: 5px;
  top: -5px;
  margin: 0;
  --button-size: 20px;
}

.qchart-tooltip menu button {
  background-color: rgba(0,0,0,0.1);
  border: none;
  border-radius: 50%;
  height: var(--button-size);
  position: relative;
  width: var(--button-size);
}

.qchart-tooltip menu button + button { margin-left: 5px; }

.qchart-tooltip menu button::after {
  background-color: #eee;
  display: block;
  content: '';
  height: 14px;
  left: 3px;
  mask-origin: fill-box;
  -webkit-mask-origin: fill-box;
  -webkit-mask-position: center center;
  mask-position: center center;
  outline: 1px solid #fff;
  position: absolute;
  top: 3px;
  width: 14px;
}

.qchart-tooltip menu button:hover {
  background-color: rgba(0,0,0,0.2);
}

.qchart-tooltip menu button:hover::after {
  background-color: #fff;
}

.qchart-tooltip .tt-header #tt-menu-close:after {
  -webkit-mask-image: url(2cbb7adffb52aa187507.svg);
  mask-image: url(2cbb7adffb52aa187507.svg);
}

.qchart-tooltip .tt-header #tt-menu-drilldown:after {
  -webkit-mask-image: url(508b849ff1bb80c4066d.svg);
  mask-image: url(508b849ff1bb80c4066d.svg);
}

.qchart-tooltip .tt-header #tt-menu-next:after,
.qchart-tooltip .tt-header #tt-menu-previous:after {
  mask-image: url(25d59f618f344fd58bc0.svg);
  -webkit-mask-image: url(25d59f618f344fd58bc0.svg);
}

.qchart-tooltip .tt-header #tt-menu-previous {
  transform: rotate(180deg);
}


.qchart-tooltip dl {
  display: grid;
  grid-template-columns: 40px auto;
  line-height: 1.8;
}

.qchart-tooltip dl { display: grid; grid-template-columns: 40px auto; }
.qchart-tooltip dt { grid-column-start: 1; white-space: nowrap; }
.qchart-tooltip dd { grid-column-start: 2; text-align: right; }

.qchart-tooltip ul { list-style-type: disc; margin-top: 20px; }
.qchart-tooltip li { line-height: 1.5; margin: 0 0 5px 15px; }

.chart--styled .highcharts-axis-resizer {
  cursor: ns-resize;
  stroke: var(--fg-50);
  stroke-width: 1;
}

.chart--styled .highcharts-halo {
  fill: var(--color-brand-light);
  fill-opacity: 0.25;
  stroke: var(--color-brand-light);
  stroke-opacity: 0.1;
  stroke-width: 5;
}

.chart--styled .highcharts-selection-marker {
  fill: var(--color-brand-dark);
  fill-opacity: 0.25;
}

.chart--styled .highcharts-crosshair-thin {
  stroke: var(--color-brand-light);
  stroke-dasharray: 2 2;
  stroke-opacity: .5;
  stroke-width: 1;
  pointer-events: none;
}

.chart--styled .highcharts-crosshair-label .highcharts-label-box {
  fill: var(--color-brand-dark);
  fill-opacity: .8;
  stroke: var(--color-brand-light);
  stroke-opacity: .8;
}

.chart--styled .highcharts-button {
  fill: var(--color-brand-dark);
  fill-opacity: .8;
  stroke: var(--fg-50);
  transition: fill-opacity 50ms ease-in;
}

.chart--styled .highcharts-button:hover {
  fill-opacity: 1;
  transition-duration: 150ms;
}

/*

.highcharts-button-box {}
.highcharts-crosshair {}

.highcharts-scrollbar-arrow  { fill: var(--fg-60); }
.highcharts-scrollbar-button { fill: var(--bg-10); stroke: var(--fg-20); stroke-width: 1; }
.highcharts-scrollbar-rifles { stroke: var(--fg-60); stroke-width: 1; }
.highcharts-scrollbar-thumb  { fill: var(--bg-20); stroke: var(--fg-20); stroke-width: 1; }
.highcharts-scrollbar-track  { fill: var(--bg-80); stroke: var(--fg-80); stroke-width: 1; }

.highcharts-navigator-handle { cursor: ew-resize; fill: var(--bg-10); stroke: var(--fg-20); }
.highcharts-navigator-mask-inside { cursor: ew-resize; fill: var(--bg-60); fill-opacity: 0.25; }
.highcharts-navigator-mask-outside { fill-opacity: 0; }
.highcharts-navigator-outline { fill: none; stroke: var(--fg-20); }
.highcharts-navigator-series .highcharts-area { fill-opacity: 0.05; }
.highcharts-navigator-series .highcharts-graph { stroke-width: 1; }
.highcharts-navigator-series { fill: var(--bg-50); stroke: var(--fg-50); }
.highcharts-navigator-xaxis .highcharts-axis-labels { fill: var(--bg-40); }
.highcharts-navigator-xaxis .highcharts-axis-line { stroke-width: 0; }
.highcharts-navigator-xaxis .highcharts-grid-line { stroke: var(--fg-10); stroke-width: 1; }
.highcharts-navigator-yaxis .highcharts-grid-line { stroke-width: 0; }
*/

.chart--styled .zoom-button {
  background-color: rgb(153, 0, 153, 0.7);
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 0 1px var(--fg-70);
  color: var(--fg-70);
  left: 30px;
  line-height: 2.2;
  padding: 0 10px 1px;
  position: absolute;
  top: 30px;
  transition: all 50ms ease-in;
  visibility: hidden;
}

.chart--styled .zoom-button:hover {
  box-shadow: 0 0 0 1px var(--fg-90);
  color: var(--fg-90);
  transition-duration: 150ms;
}

.chart--styled .zoom-button:active {
  padding: 1px 10px 0;
}

.qchart-options {
  font-size: 0.8em;
  opacity: 0.1;
  position: absolute;
  right: 40px;
  top: 540px;
  user-select: none;
}

.qchart-options:hover { opacity: 1; }

.axis-options > h4 { width: 40px; }

.axis-options {
  align-items: center;
  display: flex;
}

.axis-options > * + * { margin-left: 5px; }

.axis-options input { vertical-align: middle; }

.axis-options + .axis-options {
  display: flex;
  margin-top: 5px;
}



:root {
  --color-gray-500: hsl(0, 0%, 9%);
  --color-gray-400: hsl(0, 0%, 13%);
  --color-gray-300: hsl(0, 0%, 18%);
  --color-gray-200: hsl(0, 0%, 25%);
  --color-gray-100: hsl(0, 0%, 40%);

  --color-accent-500: hsl(38, 100%, 26%);
  --color-accent-400: hsl(38, 100%, 56%);

  --color-green: hsl(128, 76%, 53%);
  --color-red: hsl(0, 79%, 54%);

  --color-danger-600: hsl(0, 79%, 34%);
  --color-danger-500: hsl(0, 79%, 44%);
  --color-danger-400: hsl(0, 79%, 54%);

  --color-text: #fff;

  --color-trade-label: var(--color-gray-100);

  --color-bg-trade-header: var(--color-gray-400);
  --color-bg-trade-body: var(--color-gray-500);
}