/* Fonts */
@import url('https://rsms.me/inter/inter.css?v=3.12');
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&display=swap');



/* Icon Font */
@font-face {
  font-family: 'SL-Icons';
  src: url('../fonts/SL-Icons.eot');
  src: url('../fonts/SL-Icons.eot') format('embedded-opentype'), url('../fonts/SL-Icons.woff2') format('woff2'), url('../fonts/SL-Icons.woff') format('woff'), url('../fonts/SL-Icons.ttf') format('truetype'), url('../fonts/SL-Icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icon {
  display: inline-block;
  font: normal normal normal 1em/1 'SL-Icons';
  speak: none;
  text-transform: none;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-sm {
  font-size: 0.8em;
}
.icon-lg {
  font-size: 1.2em;
}
/* absolute units */
.icon-16 {
  font-size: 16px;
}
.icon-32 {
  font-size: 32px;
}
.icon-bg-square,
.icon-bg-circle {
  padding: 0.35em;
  background-color: #eee;
}
.icon-bg-circle {
  border-radius: 50%;
}
.icon-ul {
  padding-left: 0;
  list-style-type: none;
}
.icon-ul > li {
  display: flex;
  align-items: flex-start;
  line-height: 1.4;
}
.icon-ul > li > .icon {
  margin-right: 0.4em;
  line-height: inherit;
}
.icon-is-spinning {
  -webkit-animation: icon-spin 2s infinite linear;
  -moz-animation: icon-spin 2s infinite linear;
  animation: icon-spin 2s infinite linear;
}
@-webkit-keyframes icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes icon-spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.icon-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.icon-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.icon-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.icon-flip-y {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.icon-flip-x {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -moz-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  transform: scale(1, -1);
}

.icon-add::before {
  content: "\ea03";
}

.icon-edit::before {
  content: "\ea5b";
}

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

.icon-alert::before {
  content: "\ea1a";
}

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

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

.icon-save::before {
  content: "\ea1e";
}

.icon-export::before {
  content: "\ea77";
}

.icon-freeze::before {
  content: "\ea1f";
}


*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:focus {
    outline: none;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

html {
	font-size: 13px;
	background: #000;
	color: #fff;
}

html, input {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

input {
	color: #fff;
}

canvas {
  display: block;
  vertical-align: bottom;
}

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

a {
	text-decoration: none;
	color: #008aff;
	cursor: pointer;
}

a:hover {
	color: #1377cb;
}

h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: normal;
}

.bold {
	font-weight: bold;
}

p {
	margin: 0;
	padding: 0;
}

.hidden {
	display: none !important;
}

/*
* Load placeholder
*/
@keyframes loadPlaceholder {
  0% { background-color: rgba(255,255,255,0.1); }
  50% { background-color: rgba(255,255,255,0.2); }
  100% { background-color: rgba(255,255,255,0.1); }
}

@keyframes loadPlaceholderOpacity {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/*
* Scrollbar
*/
* {
  scrollbar-color: rgba(255,255,255,0.25) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-track {
	border-radius: 2px;
}

::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.1);
	border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(255,255,255,0.2);
}


/*
* App
*/
.app {
	height: 100%;
	position: relative;
	overflow-y: scroll;
}

.app.init {
	display: flex;
	flex-direction: column;
	background: #14141a;
	overflow: hidden;
}


/*
* Global Positive / Negative highlight
*/
.positive {
	color: #45be4e;
}

.sign-change {
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	display: inline-block;
	border-radius: 3px;
	font-weight: bold;
}

.positive.sign-change {
	background: rgba(69,190,78,0.1);
}

.negative {
	color: #fa2c2c;
}

.negative.sign-change {
	background: rgba(250,44,44,0.1);
}

.neutral {
	color: rgba(255,255,255,0.5);
}

.na {
	color: rgba(255,255,255,0.3);
}


/*
* Empty Avatar
*/
.empty-avatar {
	position: relative;
	background-color: #4e5054;
	overflow: hidden;
}

.empty-avatar:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	display: block;
	background-image: url('../img/avatar.svg');
	background-position: 50% 200%;
	background-size: auto 90%;
	background-repeat: no-repeat;
	opacity: 0.15;
}

/*
* App load
*/
@keyframes logoAnimationFirstBar {
	0%,
	100% {
		height: 26px;
	}
	50% {
		height: 12px;
	}
}

@keyframes logoAnimationSecondBar {
	0%,
	100% {
		height: 40px;
	}
	50% {
		height: 26px;
	}
}

@keyframes logoAnimationThirdBar {
	0%,
	100% {
		height: 25px;
	}
	50% {
		height: 12px;
	}
}

.app__load {
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	height: 40px;
	opacity: 0.4;
	animation: logoAnimationSecondBar 600ms infinite ease-in-out;
}

.app__load,
.app__load:before,
.app__load:after {
	width: 8px;
	background: #fff;
	border-radius: 4px;
	position: absolute;
	display: block;
}

.app__load:before,
.app__load:after {
	content: '';
	transform: translateY(-50%);
	top: 50%;
}

.app__load:before {
	height: 26px;
	left: -14px;
	animation: logoAnimationFirstBar 600ms infinite ease-in-out;
	animation-delay: -60ms;
}

.app__load:after {
	height: 25px;
	right: -14px;
	animation: logoAnimationThirdBar 600ms infinite ease-in-out;
	animation-delay: 60ms;
}

/*
* Number Change
*/
@keyframes numberChangeUp {
    from {
        background: rgba(69,246,12,0.2);
    }
    to {
        background: rgba(69,246,12,0);
    }
}

@keyframes numberChangeDown {
    from {
        background: rgba(250,8,30,0.2);
    }
    to {
        background: rgba(250,8,30,0);
    }
}

.number-change--up {
	animation: numberChangeUp 150ms normal forwards ease-in-out;
}

.number-change--down {
	animation: numberChangeDown 150ms normal forwards ease-in-out;
}


/*
* Top Header
*/
.top-header {
	height: 61px;
	border-bottom: 1px rgba(255,255,255,0.075) solid;
	background: #090909;
	display: none;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
	align-items: center;
}

.top-header .logo {
	flex: 0 0 110px;
	margin-left: 15px;
	display: block;
}

.top-header .logo img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.top-header .menu-control {
	margin-left: auto;
	font-size: 18px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: rgba(255,255,255,0.8);
	cursor: pointer;
}

.top-header .menu-control:active {
	color: rgba(255,255,255,0.6);
}

.top-header .menu-control:before {
	content: '\ea81';
	transform: rotate(-180deg);
	font-family: 'SL-Icons';
	display: inline-block;
}

.app.mobile .top-header {
	display: flex;
}


/*
* Top Banner
*/
.top-banner {
	flex: 0 0 44px;
	background: #164bf7;
	position: relative;
}

.top-banner .text {
	line-height: 30px;
	padding: 7px;
	text-align: center;
	font-weight: 500;
}

.top-banner .close {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	font-size: 18px;
	cursor: pointer;
	color: rgba(255,255,255,0.95);
}

.top-banner .close:hover {
	color: rgba(255,255,255,1);
}

.top-banner .close:active {
	color: rgba(255,255,255,0.8);
}

.top-banner .close:before {
	content: '\ea19';
	font-family: 'SL-Icons';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: block;
}

.top-banner .subscribe {
	height: 30px;
	line-height: 26px;
	border: 2px solid #fff;
	color: #fff;
	display: inline-block;
	margin-left: 10px;
	font-weight: 500;
	padding: 0 10px;
	border-radius: 4px;
	vertical-align: top;
	cursor: pointer;
	user-select: none;
	position: relative;
	font-weight: bold;
}

.top-banner .subscribe:active {
	border-color: rgba(255,255,255,0.75);
}


/*
* Auth
*/
.auth-container {
	width: 440px;
	margin: 40px auto;
	transition: opacity 250ms ease-in-out;
	opacity: 0;
	background: rgba(255,255,255,0.06);
	border: 1px rgba(255,255,255,0.03) solid;
	border-radius: 6px;
	padding: 45px 35px;
}

.app.mobile .auth-container {
	width: auto;
	margin: 50px auto;
	padding: 25px 25px;
	background: transparent;
	border: 0;
	max-width: 500px;
}

.auth-container.auth-container--init {
	opacity: 1;
}

.auth-container .auth-container__logo {
	width: 128px;
	height: 23px;
	background-image: url('../img/auth-logo.png');
	background-size: 128px 23px;
	display: block;
	margin: 0 auto;
	margin-bottom: 30px;
}

.auth-container .auth-container__title {
	font-size: 1.74rem;
	font-weight: 600;
	margin-bottom: 30px;
	text-align: center;
}

.auth-container .auth-container__form {
	transition: opacity 100ms ease-in-out;
}

.auth-container .auth-container__form.auth-container__form--loading {
	opacity: 0.4;
}

.auth-container .auth-container__form .auth-container__field {
	margin-bottom: 20px;
}

.auth-container .auth-container__form .auth-container__field:last-child {
	margin-bottom: 0;
}

.auth-container .auth-container__form .auth-container__field .field__label {
	font-weight: 500;
	margin-bottom: 6px;
	color: rgba(255,255,255,0.6);
}

.auth-container .auth-container__forgotpw {
	font-size: 0.923076923rem;
	color: rgba(255,255,255,0.4);
	display: block;
	margin-top: 40px;
	text-align: center;
}

.auth-container .auth-container__forgotpw:hover {
	color: rgba(255,255,255,0.75);
}

.auth-container .auth-container__signup {
	margin-top: 10px;
	display: block;
	color: rgba(255,255,255,0.4);
	font-size: 0.923076923rem;
	text-align: center;
}

.auth-container .auth-container__signup span,
.auth-container .auth-container__forgotpw span {
	position: relative;
}

.auth-container .auth-container__signup span:after,
.auth-container .auth-container__forgotpw span:after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255,255,255,0.2);
	margin-top: 1px;
}

.auth-container .auth-container__signup:hover {
	color: rgba(255,255,255,0.75);
}

.auth-container .auth-container__submit {
	margin-top: 40px;
}

.auth-container .auth-container__submit button {
	width: 100%;
}


/*
* Header bar
*/
.header-bar {
	display: none;
	height: 60px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

.header-bar a.top-logo {
	width: 20px;
	height: 20px;
	background-size: 106px 20px;
	background-image: url('../img/top-main-logo.png?6');
	display: block;
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 1;
}

/*
* Checkbox/Radio inputs
*/
label.checkbox {
	display: block;
	position: relative;
	height: 18px;
	user-select: none;
}

label.checkbox input[type=checkbox] {
	display: none;
}

label.checkbox div {
	cursor: pointer;
	padding-left: 25px;
	line-height: 18px;
}

label.checkbox div:before {
	content: '';
	width: 18px;
	height: 18px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	border: 2px solid rgba(255,255,255,0.3);
	transition: border 0.1s;
	box-sizing: border-box;
    border-radius: 2px;
}

label.checkbox:hover div:before {
	border-color: rgba(255,255,255,0.6);
}

.checkbox input[type=checkbox]:checked + div:before {
	text-align: center;
    line-height: 18px;
    border-color: #247afb;
    border-width: 9px;
}

.checkbox input[type=checkbox]:checked + div:after {
	font-family: 'SL-Icons';
	content: '\ea1d';
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size: 0.769230769rem;
}

.radio input[type=radio] {
	display: none;
}

.radio {
	margin: 20px 2px;
	user-select: none;
}

.radio label {
	cursor: pointer;
	font-size: 13px;
	padding-left: 26px;
	position: relative;
	display: inline-block;
	color: rgba(255,255,255,0.6);
	font-weight: bold;
	min-width: 150px;
}

.radio label:before {
	content: '';
	width: 17px;
	height: 17px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	border: 2px solid rgba(255,255,255,0.4);
	transition: border 0.1s;
	box-sizing: border-box;
	border-radius: 50%;
	background: transparent;
}

.radio label:after {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
	background: #1ca8fc;
	transition: opacity 0.1s;
	opacity: 0;
}

.radio label:hover:before {
	border-color: rgba(255,255,255,0.6);
}

.radio input[type=radio]:checked + label:before {
    border-color: #1ca8fc;
}

.radio input[type=radio]:checked + label:after {
    opacity: 1;
}

.radio input[type=radio]:checked + label {
    color: rgba(255,255,255,0.9);
}

/*
* Switch Slider
*/
.switch {
	cursor: pointer;
	display: block;
	user-select: none;
}

.switch > div {
  display: inline-block;
  vertical-align: top;
}

.switch .wrapper {
  position: relative;
  width: 38px;
  height: 20px;
}

.switch .wrapper input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .wrapper .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px rgba(255,255,255,0.3) solid;
  -webkit-transition: .4s;
  transition: 200ms;
  border-radius: 10px;
}

.switch .wrapper .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 1px;
  bottom: 1px;
  background-color: rgba(255,255,255,0.6);
  -webkit-transition: .4s;
  transition: 200ms;
  border-radius: 50%;
}

.switch .wrapper .slider:hover:before {
	background: rgba(255,255,255,0.8);
}

.switch .wrapper input:checked + .slider {
  background-color: #0d42fb;
  border-color: transparent;
}

.switch .wrapper input:focus + .slider {

}

.switch .wrapper input:checked + .slider:before {
  transform: translateX(18px);
  background-color: rgba(255,255,255,1);
}

.switch .label {
	font-weight: 600;
	line-height: 20px;
	margin-left: 7px;
	color: rgba(255,255,255,0.7);
	font-size: 0.923076923rem;
}

.switch:hover .label {
	color: rgba(255,255,255,0.8);
}


/*
* Attachment Overlay
*/
.image-preview {
	position: fixed;
	z-index: 999999;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 300ms ease;
	user-select: none;
	padding: 50px;
}

.app.mobile .image-preview {
	padding: 30px;
}

.image-preview.active {
	background: rgba(0,0,0,0.85);
}

.image-preview img {
	object-fit: cover;
	border-radius: 4px;
	transform: scale(0.85);
	opacity: 0;
	transition: transform 200ms ease, opacity 200ms ease;
	max-width: 100%;
}

.image-preview.active img {
	transform: scale(1);
	opacity: 1;


}


.image-preview .close {
	font-family: 'SL-Icons';
	position: absolute;
	right: 0;
	top: 0;
	font-size: 22px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	color: rgba(255,255,255,0.75);
	cursor: pointer;
}

.image-preview .close:hover {
	color: rgba(255,255,255,0.9);
}

.image-preview .close:active {
	color: rgba(255,255,255,0.8);
}

.image-preview .close:before {
	content: '\ea19';
}


/*
* Score Meter
*/
.score-meter {
	width: 100%;
	max-width: 190px;
}

.score-meter:before {
	content: '0.00';
	font-size: 36px;
	line-height: 40px;
	font-weight: bold;
	text-align: center;
	color: rgba(255,255,255,0.5);
	display: block;
}

.score-meter:after {
	content: '';
	height: 8px;
	border-radius: 2px;
	display: block;
	background: rgba(255,255,255,0.2);
	margin: 20px 20px 16px 20px;
}

.score-meter.init:before,
.score-meter.init:after {
	display: none;
}

.score-meter .score,
.score-meter:before {
	font-family: 'Arimo', sans-serif;
}

.score-meter .score {
	font-size: 36px;
	line-height: 40px;
	height: 40px;
	font-weight: bold;
	text-align: center;
}

.score-meter .box {
	margin-top: 10px;
	padding: 10px 20px 16px 20px;
	position: relative;
	user-select: none;
}

.score-meter .meter {
	height: 10px;
	border-radius: 2px;
	display: block;
	background: #6d6d6d;
	position: relative;
}

.score-meter .meter .line {
	display: block;
	position: absolute;
	width: 1px;
	height: 4px;
	top: -7px;
	background: rgba(255,255,255,0.15);
}

.score-meter .meter .pointer {
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-top-right-radius: 1px;
	border-top-left-radius: 1px;
	background: #c6c6c6;
	display: block;
	position: absolute;
	top: -10px;
	z-index: 9999;
}

.score-meter .meter .pointer .value {
	left: 100%;
	top: 0;
	position: absolute;
	font-size: 10px;
	margin-left: 3px;
	color: #e0e0e0;
}

.score-meter .meter .pointer .value.left {
	left: auto;
	right: 100%;
	margin: 0;
	margin-right: 3px;
}

.score-meter .meter .pointer:before {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #c6c6c6;
}

.score-meter .meter:before,
.score-meter .meter:after {
	content: '';
	font-family: 'SL-Icons';
	position: absolute;
	font-size: 12px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	display: none;
	margin-top: -4px;
}

.score-meter.has-thresholds .meter:before,
.score-meter.has-thresholds .meter:after {
	display: block;
}

.score-meter .meter:before {
	content: '\ea1f';
	color: #0084ff;
	left: -20px;
}

.score-meter .meter:after {
	content: '\ea7d';
	color: #ff2a00;
	right: -20px;
}

.score-meter .meter .meter-os {
	position: absolute;
	background: #0084ff;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	left: 0;
	top: 0;
	bottom: 0;
}

.score-meter .meter .meter-ob {
	position: absolute;
	background: #ff2a00;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	right: 0;
	top: 0;
	bottom: 0;
}

.score-meter .meter .threshold {
	font-size: 8px;
	line-height: 12px;
	height: 12px;
	margin-top: 4px;
	border-radius: 1px;
	padding: 0 3px;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.8);
	background: #4f4f4f;
	font-weight: 500;
}

.score-meter .meter .threshold:before {
	content: '';
	position: absolute;
	left: 50%;
	top: -3px;
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #4f4f4f;
	transform: translateX(-50%);
}


/*
* Users List
*/
.users-list {
	margin-bottom: 10px;
}

.users-list .item {
	display: flex;
	align-items: center;
	border-radius: 6px;
	padding: 6px 8px;
	cursor: pointer;
	position: relative;
}

.users-list .item.hover {
	background: rgba(255,255,255,0.05);
}

.users-list .item.hover:after {
	font-family: 'SL-Icons';
	content: '\ea20';
	display: block;
	width: 20px;
	font-size: 14px;
	line-height: 20px;
	height: 20px;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.5);
}

.users-list .item .avatar {
	flex: 0 0 30px;
	height: 30px;
	background: rgba(255,255,255,0.1);
	margin-right: 10px;
	border-radius: 50%;
	overflow: hidden;
}

.users-list .item .avatar img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.users-list .item .username {
	font-weight: 500;
}


/*
* Modal
*/
@keyframes modal-box-open {
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.modal {
	background: rgba(0,0,0,0.75);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	overflow: hidden;
	overflow-y: auto;
	padding: 40px;
}

.app.mobile .modal {
	padding: 0;
}

.modal .modal__box {
	width: 750px;
	background: #222429;
	border-radius: 4px;
	box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.2);
	margin: 0 auto;
	position: relative;
	transform: scale(0.95);
	opacity: 0.3;
	display: none;
}

.app.mobile .modal .modal__box {
	width: auto;
	border-radius: 0;
	height: 100%;
}

.modal .modal__box.scroll {
	height: 100%;
	overflow: hidden;
}

.modal .modal__box.active {
	display: flex;
	flex-direction: column;
	animation: modal-box-open 50ms ease-out forwards;
}

.modal .modal__box .box__close {
	font-size: 20px;
	color: rgba(255,255,255,0.5);
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	right: 22px;
	top: 22px;
	position: absolute;
	cursor: pointer;
	z-index: 9999;
}

.modal .modal__box .box__close:hover {
	color: rgba(255,255,255,0.75);
}

.modal .modal__box .box__close:active {
	color: rgba(255,255,255,0.6);
}

.modal .modal__box .box__close:before {
	content: '\ea19';
	font-family: 'SL-Icons';
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.modal .modal__box.modal__box--size-full {
	width: 90%;
}

.modal .modal__box.modal__box--size-large {
	width: 900px;
}

.modal .modal__box.modal__box--size-medium {
	width: 750px;
}

.modal .modal__box.modal__box--size-normal {
	width: 650px;
}

.modal .modal__box.modal__box--size-small {
	width: 450px;
}

.modal .modal__box .box__head {
	display: flex;
	padding: 20px 60px 20px 30px;
	flex: 0 0 77px;
	border-bottom: 1px rgba(255,255,255,0.1) solid;
}

.modal .modal__box .box__title {
	font-weight: bold;
	font-size: 1.53846154rem;
	color: rgba(255,255,255,1);
	height: 36px;
	line-height: 30px;
	padding: 3px 0;
}

.modal .modal__box .box__search {
	height: 36px;
	width: 300px;
	background: rgba(255,255,255,0.04);
	border: 1px transparent solid;
	border-radius: 4px;
	position: relative;
	margin-left: 30px;
	padding-left: 38px;
	padding-right: 51px;
}

.modal .modal__box .box__search.box__search--active {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.1);
}

.modal .modal__box .box__search:before {
	content: '\ea04';
	font-family: 'SL-Icons';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: rgba(255,255,255,0.4);
}

.modal .modal__box .box__search input {
	background: transparent;
	border: 0;
	width: 100%;
	height: 34px;
}

.modal .modal__box .box__search .clear-search {
	position: absolute;
	right: 0;
	top: 0;
	height: 36px;
	width: 40px;
	cursor: pointer;
	display: none;
}

.modal .modal__box .box__search .clear-search:before {
	content: '\ea19';
	font-family: 'SL-Icons';
	font-size: 1.07692308rem;
	color: rgba(255,255,255,0.4);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.modal .modal__box .box__search .clear-search:hover:before {
	color: rgba(255,255,255,0.6);
}

.modal .modal__box .box__search .clear-search:active:before {
	color: rgba(255,255,255,0.4);
}

.modal .modal__box .box__search.box__search--filled .clear-search  {
	display: block;
}

.modal .modal__box .box__content {
	padding: 30px;
	position: relative;
	flex: 1 0;
}

.modal .modal__box.loading-state {
	min-height: 350px;
}

.modal .modal__box.scroll .box__content {
	overflow-y: auto;
}

.modal .modal__box .box__content > p {
	line-height: 20px;
}

.modal .modal__box .box__content .pagination {
	padding-top: 20px;
}

.modal .modal__box div.box__content.box__content--menu {
	display: flex;
	padding: 0;
}

.modal .modal__box.scroll div.box__content.box__content--menu {
	overflow: hidden;
}

.modal .modal__box div.box__content.box__content--menu > * {
	overflow: hidden;
	overflow-y: auto;
}

.modal .modal__box .box__content.box__content--menu .box-menu {
	flex: 0 0 250px;
	padding: 15px;
	border-right: 1px rgba(255,255,255,0.1) solid;
}

.modal .modal__box .box__content.box__content--menu .box-menu > div {
	padding: 12px 15px;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
	color: rgba(255,255,255,0.6);
	margin-bottom: 1px;
	user-select: none;
}

.modal .modal__box .box__content.box__content--menu .box-menu > div:hover {
	color: rgba(255,255,255,0.9);
	background: rgba(255,255,255,0.04);
}

.modal .modal__box .box__content.box__content--menu .box-menu > div:active {
	background: rgba(255,255,255,0.03);
}

.modal .modal__box .box__content.box__content--menu .box-menu > div.selected {
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,1);
}

.modal .modal__box .box__content.box__content--menu .box-body {
	flex: 1 0;
	position: relative;
}

.modal .modal__box .box__content .empty-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	align-items: center;
	justify-content: center;
	display: none;
}

.modal .modal__box .box__content .empty-content.empty-content--active {
	display: flex;
}

.modal .modal__box .box__content .empty-content > div {
	color: rgba(255,255,255,0.5);
	font-weight: bold;
	font-size: 1.07692308rem;
}

/*.modal .modal__box .box__content.box__content--scroll {
	height: 450px;
	overflow-y: auto;
}*/

.modal .modal__box .box__controls {
	border-top: 1px rgba(255,255,255,0.1) solid;
	padding: 15px 30px;
	display: flex;
}

.modal .modal__box .box__controls .controls__right {
	text-align: right;
	margin-left: auto;
}

.modal .modal__box .box__controls .button {
	margin-right: 10px;
}

.modal .modal__box .box__controls .button:last-child {
	margin-right: 0;
}

.modal .modal__box .list-table {
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 3px;
}

.modal .modal__box .list-table .list-table__head > div > div {
	background: rgba(255,255,255,0.05);
}

.modal .modal__box .list-table .list-table__body > div:nth-child(2n+2) > div {
	background: rgba(0,0,0,0.05);
}


/*
* Modal Tab Menu
*/
.modal .modal__box .box__tabs {
	border-bottom: 2px rgba(255,255,255,0.1) solid;
	padding: 0 28px;
	margin-top: 5px;
	user-select: none;
}

.modal .modal__box .box__tabs ul {
	margin-bottom: -2px;
}

.modal .modal__box .box__tabs ul li {
	display: inline-block;
	padding: 20px 2px;
	cursor: pointer;
	font-weight: bold;
	margin-right: 25px;
	color: rgba(255,255,255,0.6);
}

.modal .modal__box .box__tabs ul li:hover {
	color: rgba(255,255,255,0.9);
}

.modal .modal__box .box__tabs ul li.selected {
	color: #247afb;
	position: relative;
}

.modal .modal__box .box__tabs ul li.selected:after {
	content: '';
	position: absolute;
	background: #247afb;
	bottom: 0px;
	left: 0px;
	right: 0;
	height: 2px;
}

/*
* Modal Upload
*/
.modal .modal__box.modal__box--upload {
	padding-top: 10px;
	margin-top: 100px;
	width: 600px;
}

.modal .modal__box.modal__box--upload input[type=file] {
	display: none;
}

.modal .modal__box.modal__box--upload .box__content {
	border: 3px rgba(255,255,255,0.1) dashed;
	display: block;
	margin: 0 10px 10px 10px;
	padding: 25px 20px;
	min-height: 100px;
}

.modal .modal__box.modal__box--upload .box__content .upload-box {
	display: flex;
	margin-bottom: 30px;
}

.modal .modal__box.modal__box--upload .box__content .upload-box .upload-box__preview {
	width: 120px;
	height: 120px;
	flex: 0 0 120px;
	background: #505050;
	border-radius: 4px;
	display: block;
	margin-top: -80px;
	margin-right: 20px;
    background-size: cover;
    background-position: center;
}

.modal .modal__box.modal__box--upload .box__content .upload-box .upload-box__filename {
	flex: 1 0;
	font-weight: bold;
}


/*
* Modal Search
*/
.modal-search {
	border-radius: 6px;
	border: 1px rgba(255,255,255,0.1) solid;
	height: 42px;
	margin-bottom: 20px;
	position: relative;
}

.modal-search.focus {
	border-color: #0d42fb;
	box-shadow: 0px 0px 0px 3px rgba(26,118,255,0.2);
}

.modal-search:before {
	content: '\ea04';
	font-family: 'SL-Icons';
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.5);
	position: absolute;
	font-size: 20px;
}

.modal-search input {
	background: transparent;
	border: 0;
	height: 40px;
	width: 100%;
	padding: 0 20px 0 46px;
}

.modal-search .clear {
	display: none;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.6);
	font-size: 15px;
	cursor: pointer;
	height: 40px;
	width: 40px;
	line-height: 40px;
	text-align: center;
}

.modal-search.filled .clear {
	display: block;
}

.modal-search .clear:hover {
	color: rgba(255,255,255,0.8);
}

.modal-search .clear:active {
	color: rgba(255,255,255,0.7);
}

.modal-search .clear:before {
	content: '\ea19';
	font-family: 'SL-Icons';
}


/*
* Modal Item List
*/
.modal-item-list {
	padding: 20px;
}

.modal-item-list > div {
	background: rgba(255,255,255,0.05);
	margin-bottom: 7px;
	padding: 20px;
	padding-left: 60px;
	border-radius: 4px;
	cursor: pointer;
	border: 2px transparent solid;
	position: relative;
}

.modal-item-list > div.item-screener:before {
	content: '\ea74';
	font-family: 'SL-Icons';
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: rgba(255,255,255,0.2);
	position: absolute;
}

.modal-item-list > div.selected {
	border-color: #1a76ff;
}

.modal-item-list > div.selected:after {
	content: '\ea1d';
	display: block;
	font-family: 'SL-Icons';
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	color: #fff;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	background: #1a76ff;
	text-align: center;
	font-size: 10px;
}

.modal-item-list > div:hover {
	background: rgba(255,255,255,0.075);
}

.modal-item-list > div:last-child {
	margin-bottom: 0;
}

.modal-item-list > div .title {
	font-weight: bold;
}

.modal-item-list > div .subtitle {
	margin-top: 7px;
	color: rgba(255,255,255,0.5);
	font-size: 0.84615384615rem;
}

.modal-item-list > div .delete {
	display: none;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #ea272b;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.modal-item-list > div.selected .delete {
	right: 50px;
}

.modal-item-list > div .delete:hover {
	color: #fb1422;
}

.modal-item-list > div:hover .delete {
	display: block;
}

.modal-item-list > div .delete:before {
	content: '\ea5d';
	font-family: 'SL-Icons';
}


/*
* Screener
*/
.screener-results.screener-results--hidden {
	display: none;
}

/*
* Screener filter list
*/
.modal .modal__box .box__content--menu ul.modal-filter-list {
	padding: 10px;
}

.modal .modal__box ul.modal-filter-list {
	display: block;
}

.modal .modal__box ul.modal-filter-list li {
	width: 33%;
	display: inline-block;
	padding: 6px 10px;
	overflow: hidden;
}

.modal .modal__box ul.modal-filter-list li .checkbox > div {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.modal .modal__box ul.modal-filter-list li.item--hidden {
	display: none;
}


/*
* Seasonality Breakdown Header
*/
.seasonality-breakdown-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.seasonality-breakdown-header .breakdown-change {
	background: rgba(0,0,0,0.2);
	border-radius: 5px;
	flex: 0 0 30%;
	padding: 25px 30px;
	margin-right: 20px;
}

.seasonality-breakdown-header .breakdown-change .label {
	color: rgba(255,255,255,0.5);
	margin-bottom: 10px;
}

.seasonality-breakdown-header .breakdown-change .value {
	font-size: 2rem;
	font-weight: bold;
}

.seasonality-breakdown-header .breakdown-chart {
	flex: 0 0 30%;
	position: relative;
	margin: 5px;
	margin-right: 20px;
}

.seasonality-breakdown-header .breakdown-chart canvas {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


/*
* Form Elements
*/
.form {

}

.form .form__group {
	display: flex;
}

.form .form__row,
.form .form__group {
	margin-bottom: 20px;
}

.form .form__group .form__row {
	flex: 1 0;
	margin-right: 15px;
	margin-bottom: 0;
}

.form .form__group .form__row:last-child {
	margin-right: 0;
}

.form > div:last-child {
	margin-bottom: 0;
}

.form .form__row .row__label {
	color: rgba(255,255,255,0.6);
	font-size: 0.923076923rem;
}

.form .form__row > div {
	margin-bottom: 8px;
}

.form .form__row > div:last-child {
	margin-bottom: 0;
}

.form .form__row .row__checkbox {
	margin-top: 10px;
	color: rgba(255,255,255,0.6);
}

.form .form__row .row__switcher {
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
	line-height: 20px;
	display: inline-block;
	font-weight: 500;
	font-size: 11px;
	user-select: none;
}

.form .form__row .row__switcher > div {
	display: inline-block;
	border-radius: 3px;
	padding: 0 7px;
	color: rgba(255,255,255,0.6);
	cursor: pointer;
}

.form .form__row .row__switcher > div:hover {
	color: rgba(255,255,255,0.8);
}

.form .form__row .row__switcher > div.selected {
	background: #0036ff;
	color: #fff;
}

.input-error-msg {
	color: #cc2222;
	font-weight: 500;
	font-size: 12px;
	margin-top: 3px;
}


/*
* Buy/Sell Buttons
*/
.buy-sell-buttons {
	width: 100%;
	display: flex;
}

.buy-sell-buttons > div {
	flex: 0 0 50%;
	margin-right: 5px;
	border-radius: 2px;
	padding: 14px;
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.75);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.846153846rem;
	cursor: pointer;
    transition: background 50ms ease-in-out;
    user-select: none;
}

.buy-sell-buttons > div:hover {
	background: rgba(255,255,255,0.125);
	color: rgba(255,255,255,0.9);
}

.buy-sell-buttons > div:active {
	background: rgba(255,255,255,0.09);
}

.buy-sell-buttons > div:last-child {
	margin-right: 0;
}

.buy-sell-buttons > div.button__buy.button--active {
	background: #2aa81c;
	color: rgba(255,255,255,1);
}

.buy-sell-buttons > div.button__sell.button--active {
	background: #cd2327;
	color: rgba(255,255,255,1);
}

/*
* Inputs
*/
.input {
	background: transparent;
	border: 1px rgba(255,255,255,0.2) solid;
	background: rgba(255,255,255,0.04);
	border-radius: 3px;
	width: 100%;
	line-height: 20px;
	padding: 13px 15px;
}

.input.password {
	-webkit-text-security: disc;
}

.input[disabled] {
	cursor: not-allowed;
	color: rgba(255,255,255,0.5);
}

.input:focus,
.input.StripeElement--focus {
	border-color: #1a76ff;
	box-shadow: 0px 0px 0px 3px rgba(26,118,255,0.2);
}

.input.error {
	border-color: #cc2222;
}

.input.error:focus {
	box-shadow: 0px 0px 0px 3px rgba(204,34,34,0.2);
}


/*
* Buttons
*/
.button {
	user-select: none;
	border-radius: 4px;
	border: 0;
	padding: 0 22px;
	height: 36px;
	line-height: 36px;
	font-size: 0.928rem;
	font-weight: 600;
	cursor: pointer;
	background: transparent;
	transition: background-color 80ms ease;
	position: relative;
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.button.big {
	width: 100%;
	text-align: center;
	display: block;
	padding: 6px 22px;
	height: 48px;
}

.button--icon {
	width: 42px;
}

.button--grey {
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.6);
}

.button--grey:hover {
	background: rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.8);
}

.button--grey:active {
	background: rgba(255,255,255,0.1);
}

.button--blue,
.button.primary {
	background: #0036ff;
	color: #fff;
}

.button--blue:active,
.button.primary:active {
	background: #0731ce;
}

.button--white,
.button--white:hover {
	background: #fff;
	color: #000;
}

.button:before {
	font-family: 'SL-Icons';
	display: inline-block;
	font-size: 1.2em;
	vertical-align: top;
	margin-right: 7px;
	margin-left: -5px;
}

.button--icon:before {
	margin: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: block;
}

.button.button--load,
.button.load {
	font-size: 0;
	position: relative;
	min-width: 60px;
}

.button.button--load:after,
.button.load:after,
.loading-state:after,
.load:after {
	content: '';
	background-image: url('../img/loader.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 26px auto;
	position: absolute;
	width: 26px;
	height: 26px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	opacity: 0.5;
}

.button.button--load:after,
.button.load:after {
	opacity: 1;
}

.button[disabled] {
	background: rgba(255,255,255,0.05);
	color: rgba(255,255,255,0.5);
}


/*
* Delete Control
*/
.delete-button {
	height: 36px;
	line-height: 20px;
	padding: 8px;
	font-weight: bold;
	color: #ea272b;
	cursor: pointer;
}

.delete-button:before {
	content: '\ea5d';
	font-family: 'SL-Icons';
	margin-right: 6px;
	vertical-align: top;
	display: inline-block;
}

.delete-button:hover {
	color: #ff0a10;
}


/*
* Autocomplete
*/
.input-autocomplete {
	position: relative;
	z-index: 9999;
}

.input-autocomplete .autocomplete__box {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #31343a;
	border: 1px #595d6a solid;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
	border-radius: 3px;
	margin-top: 3px;
	display: none;
}

.input-autocomplete.input-autocomplete--active.has-items .autocomplete__box {
	display: block;
}

.input-autocomplete.input-autocomplete--selected input {
	display: none;
}

.input-autocomplete .autocomplete__box ul li {
	padding: 11px 14px;
	margin: 5px;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
}

.input-autocomplete .autocomplete__box ul li > * {
	flex: 1 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.input-autocomplete .autocomplete__box ul li > .label {
	font-weight: 600;
	color: rgba(255,255,255,0.9);
}

.input-autocomplete .autocomplete__box ul li > .description {
	font-size: 0.846153846rem;
	color: rgba(255,255,255,0.5);
	margin-left: 7px;
	text-align: right;
}

.input-autocomplete .autocomplete__box ul li.item--focus {
	background: rgba(255,255,255,0.09);
}

.input-autocomplete .autocomplete__value {
	background: rgba(255,255,255,0.1);
	border-radius: 2px;
	width: 100%;
	padding: 0 15px;
	position: relative;
	line-height: 40px;
	user-select: none;
}

.input-autocomplete .autocomplete__value > * {
	display: inline-block;
	vertical-align: top;
}

.input-autocomplete .autocomplete__value .label {
	font-weight: bold;
}

.input-autocomplete .autocomplete__value .description {
	color: rgba(255,255,255,0.6);
	font-size: 0.846153846rem;
	margin-left: 10px;
}

.input-autocomplete .autocomplete__value .value__close {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 40px;
	display: block;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
}

.input-autocomplete .autocomplete__value .value__close:hover {
	color: rgba(255,255,255,0.75);
}

.input-autocomplete .autocomplete__value .value__close:active {
	color: rgba(255,255,255,0.5);
}

.input-autocomplete .autocomplete__value .value__close:before {
	content: '\ea19';
	font-family: 'SL-Icons';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}


/*
* Search Box
*/
.search-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.75);
	z-index: 9999999999999;
}

.search-overlay .search-close {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	cursor: pointer;
	color: rgba(255,255,255,0.8);
}

.search-overlay .search-close:hover {
	color: rgba(255,255,255,1);
}

.search-overlay .search-close:after {
	content: '\ea19';
	font-family: 'SL-Icons';
	font-size: 24px;
}

.search-box {
	position: absolute;
	left: 50%;
	top: 100px;
	width: 500px;
	transform: translateX(-50%);
	border-radius: 5px;
	box-shadow: 1px 1px 7px -1px rgba(0,0,0,0.2);
	z-index: 99999;
}

.app.mobile .search-box {
	width: 90%;
}

.search-box.search-box--display-suggestions.search-box--focus .search-field {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.search-box .search-field {
	border-radius: 5px;
	background-color: rgba(255,255,255,1);
	display: block;
	height: 46px;
	padding-left: 35px;
	position: relative;
	border: 1px #d7d7d7 solid;
}

.search-box .search-field:after {
	content: '\ea3e';
	font-family: 'SL-Icons';
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: rgba(0,0,0,0.5);
	font-size: 20px;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999999;
}

.search-box .search-field input[type=text] {
	background: transparent;
	border: 0;
	color: #fff;
	width: 100%;
	height: inherit;
	padding: 0 15px;
	font-size: 13px;
	display: inline-block;
	vertical-align: top;
}

.app.mobile .search-box .search-field input[type=text] {
	font-size: 16px;
}

.search-box.search-box--focus .search-field input[type=text] {
	color: #141414;
}

.search-box .search-field button[type=submit] {
	background: transparent;
	width: 50px;
	height: 42px;
	border: 0;
	display: inline-block;
	vertical-align: top;
	margin-right: -50px;
	cursor: pointer;
	position: relative;
}

.search-box .search-field button[type=submit]:after {
	content: '';
	background-position: 0px 0px;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 0.6;
}

.search-box .search-field button[type=submit]:hover:after {
	opacity: 0.8;
}

.search-box.search-box--focus .search-field button[type=submit]:after {
	background-position: -28px 0px;
}

.search-box .search-suggestions {
	display: none;
	background: #fff;
	border: 1px #d7d7d7 solid;
	border-top: 0;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.search-box.search-box--display-suggestions.search-box--focus .search-suggestions {
	display: block;
}

.search-box .search-suggestions ul li {
	padding: 10px 15px 10px 55px;
	border-bottom: 1px #ececec solid;
	cursor: pointer;
	position: relative;
}

.search-box .search-suggestions ul li:before {
	content: '\ea07';
	font-family: 'SL-Icons';
	position: absolute;
	width: 34px;
	height: 34px;
	line-height: 34px;
	font-size: 18px;
	text-align: center;
	display: block;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: #4a8bed;
	color: #fff;
	border-radius: 4px;
}

.search-box .search-suggestions ul li.type-crypto:before {
	background: #26bc57;
}

.search-box .search-suggestions ul li:hover {
	background: rgba(24,141,251,0.075);
}

.search-box .search-suggestions ul li.search--selected,
.search-box .search-suggestions ul li.search--selected:hover {
	background-color: rgba(24,141,251,0.2) !important;
}

.search-box .search-suggestions ul li:last-child {
	border-bottom: 0;
}

.search-box .search-suggestions ul li .load-placeholder {
	background: rgba(0,0,0,0.1);
	width: 100px;
	margin-bottom: 7px;
	height: 14px;
	animation: loadPlaceholderOpacity 1.25s infinite;
}

.search-box .search-suggestions ul li .load-placeholder:last-child {
	margin-bottom: 0px;
}

.search-box .search-suggestions ul li .load-placeholder.load-placeholder--symbol {
	width: 60px;
}

.search-box .search-suggestions ul li .load-placeholder.load-placeholder--name {
	width: 120px;
}

.search-box .search-suggestions ul li .symbol-short {
	color: #188dfb;
	font-weight: bold;
	margin-bottom: 2px;
	line-height: 16px;
}

.search-box .search-suggestions ul li .symbol-name {
	color: rgba(0,0,0,0.75);
	overflow: hidden;
    white-space: nowrap;
	line-height: 16px;
}


/*
* Header controls
*/
.header-bar .header-bar__controls {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
}


/*
* Header menu
*/
.header-bar .header-bar__controls .header-icons {
	padding: 15px 0;
}

.header-bar .header-bar__controls .header-icons .header-icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 15px;
	position: relative; cursor: pointer;
}

.header-bar .header-bar__controls .header-icons .header-icon:after {
	content: '';
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	display: block;
	position: absolute;
	opacity: 0.7;
}

.header-bar .header-bar__controls .header-icons .header-icon:hover:after {
	opacity: 0.9;
}

.header-bar .header-bar__controls .header-icons .header-icon--dm:after {
	background-position: 0px -16px;
	width: 20px;
	height: 17px;
}

.header-bar .header-bar__controls .header-icons .header-icon--notifications:after {
	background-position: 0px -33px;
	width: 17px;
	height: 20px;
}

/*
* User info
*/
.header-bar .user-info {
	padding: 15px 20px;
	cursor: pointer;
}

.header-bar .user-info .user-avatar {
	display: inline-block;
	width: 30px;
	height: 30px;
	position: relative;
	vertical-align: top;
	margin-right: 10px;
}

.header-bar .user-info .user-avatar .user-avatar--image {
	width: 30px;
	height: 30px;
	overflow: hidden;
	border-radius: 50%;
	background: rgb(55,55,55);
	background: linear-gradient(45deg, rgba(55,55,55,1) 0%, rgba(62,62,62,1) 100%);
}

.header-bar .user-info .user-avatar .user-avatar--image img {
	width: 30px;
	height: 30px;
}

.header-bar .user-info .user-avatar .user-status {
	width: 14px;
	height: 14px;
	display: block;
	position: absolute;
	right: -4px;
	bottom: -4px;
	border-radius: 50%;
	border: 2px #0b0b0b solid;
}

.header-bar .user-info .user-avatar .user-status--online {
	background: #51dd13;
}

.header-bar .user-info .user-name {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	font-weight: 500;
	color: rgba(255,255,255,0.9);
}

.header-bar .user-info .user-name .user-rank--premium {
	border: 1px #2390ff solid;
	color: #2390ff;
	border-radius: 2px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 9px;
	padding: 3px 6px;
	margin-left: 7px;
	vertical-align: top;
}


/*
* Main
*/
.main {
	display: flex;
	position: relative;
	flex: 1 0;
	overflow-y: hidden;
}

.main .primary {
	flex: 1 0;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.main .primary .content {
	flex: 1 0;
	position: relative;
	overflow: hidden;
	overflow-y: scroll;
}

.main .primary .content::-webkit-scrollbar {
	width: 0 !important;
}

.main .content .content__basic {
	padding: 22px 25px;
	margin: 0 auto;
	overflow: hidden;
}

.app.mobile .main .content .content__basic {
	padding: 15px;
}

/*
* Content View
*/
.content-view {
	display: flex;
}

.app.mobile .content-view {
	display: block;
}

.content-view .menu {
	flex: 0 0 210px;
	margin-right: 20px;
}

.app.mobile .content-view .menu {
	margin-right: 0;
	margin-bottom: 20px;
}

.content-view .menu .list {
	position: relative;
}

.app.mobile .content-view .menu .list {
	display: flex;
	overflow: hidden;
	overflow-x: scroll;
	white-space: nowrap;
}

.content-view .menu .list > * {
	padding: 8px 20px;
	line-height: 20px;
	height: 36px;
	position: relative;
	cursor: pointer;
	color: rgba(255,255,255,0.6);
	display: block;
	user-select: none;
	font-weight: 500;
}

.app.mobile .content-view .menu .list > * {
	padding: 10px 20px;
	height: 46px;
}

.content-view .menu .list > .placeholder:before {
	content: '';
	display: block;
	width: 50%;
	height: 20px;
	border-radius: 3px;
	background: rgba(255,255,255,0.075);
}

.content-view .menu .list > .placeholder:nth-child(2n+2):before {
	width: 75%;
}

.content-view .menu .list > .placeholder:nth-child(3n+3):before {
	width: 40%;
}

.content-view .menu .list > *:hover {
	color: rgba(255,255,255,0.9);
}

.content-view .menu .list > *:active {
	color: rgba(255,255,255,0.7);
}

.content-view .menu .list:before {
	content: '';
	display: block;
	width: 2px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 1px;
	background: rgba(255,255,255,0.1);
}

.app.mobile .content-view .menu .list:before {
	width: auto;
	height: 2px;
	top: auto;
	right: 0;
}

.content-view .menu .list > .selected {
	color: #fff;
	font-weight: 500;
}

.content-view .menu .list > .selected:before {
	content: '';
	display: block;
	position: absolute;
	border-radius: 2px;
	width: 4px;
	background: #0d42fb;
	left: 1px;
	top: 0;
	bottom: 0;
}

.app.mobile .content-view .menu .list > .selected:before {
	bottom: 0px;
	left: 0;
	right: 0;
	height: 4px;
	top: auto;
	width: auto;
}

.content-view .view {
	flex: 1 0;
}


/*
* Sticky News
*/
.main .primary .sticky-news {
	flex: 1 0;
	max-height: 10px;
	background: #1d1d23;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	z-index: 999;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	border: 1px rgba(255,255,255,0.1) solid;
	border-bottom: 0px;
	position: relative;
}

.main .primary .sticky-news.active {
	max-height: 150px;
}

.main .primary .sticky-news .news-list {
	overflow-y: scroll;
	padding: 10px;
	display: block;
	height: 100%;
}

.main .primary .sticky-news.active .news-list {
	display: block;
}

.main .primary .sticky-news .handle {
	position: absolute;
	top: -1px;
	right: 0px;
	left: 0px;
	height: 1px;
	display: block;
	border-radius: 2px;
	z-index: 9999;
	cursor: pointer;
}

.main .primary .sticky-news.active .handle {
	opacity: 0;
}

.main .primary .sticky-news.active .handle.hover {
	opacity: 1;
}

.main .primary .sticky-news .handle:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -5px;
	height: 13px;
}

.main .primary .sticky-news .handle:before {
	content: '\ea26';
	font-family: 'SL-Icons';
	color: #fff;
	font-size: 9px;
	display: block;
	width: 23px;
	height: 13px;
	line-height: 11px;
	text-align: center;
	border-radius: 3px;
	top: -6px;
	left: 50%;
	position: absolute;
	background: #1d1d23;
	border: 1px rgba(255,255,255,0.2) solid;
}

.main .primary .sticky-news .handle.hover:before {
	border-color: rgba(255,255,255,0.4);
}

.main .primary .sticky-news.active .handle:before {
	content: '\ea25';
}


/*
* Content Menu
*/
.main .content .content__menu {
	display: flex;
	height: 100%;
	overflow: hidden;
}

.main .content .content__menu .menu__column {
	flex: 0 0 240px;
	padding: 30px 16px;
	background: #0f0f13;
	overflow-y: auto;
}

.main .content .content__menu .menu__column .title {
	font-weight: bold;
	padding: 0 5px;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: 20px;
	color: rgba(255,255,255,0.6);
}

.main .content .content__menu .menu__column > ul > li {
	margin-bottom: 5px;
}

.main .content .content__menu .menu__column > ul > li > a {
	padding: 12px 14px;
	display: block;
	border-radius: 4px;
	color: rgba(255,255,255,0.6);
	position: relative;
	padding-left: 40px;
}

.main .content .content__menu .menu__column > ul > li > a:hover {
	color: rgba(255,255,255,0.9);
	background: rgba(255,255,255,0.05);
}

.main .content .content__menu .menu__column > ul > li.item--selected > a {
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,1);
	font-weight: 600;
}

.main .content .content__menu .menu__column > ul > li > a:before {
	font-family: 'SL-Icons';
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	color: rgba(255,255,255,0.5);
}

.main .content .content__menu .menu__column > ul > li.item--selected > a:before {
	color: rgba(255,255,255,0.8);
}

.main .content .content__menu .menu__column > ul > li.item--profile > a:before {
	content: '\ea7a';
}

.main .content .content__menu .menu__column > ul > li.item--profile.item--selected > a:before {
	content: '\ea79';
}

.main .content .content__menu .menu__column > ul > li.item--preferences > a:before {
	font-family: "Material Icons";
	content: "invert_colors";
	font-size: 1.25em;
	align-items: left;
}

.main .content .content__menu .menu__column > ul > li.item--preferences.item--selected > a:before {
	font-family: "Material Icons";
	content: 'invert_colors';
	font-size: 1.25em;
	align-items: left;
}

.main .content .content__menu .menu__column > ul > li.item--billing > a:before {
	content: '\ea7c';
}

.main .content .content__menu .menu__column > ul > li.item--billing.item--selected > a:before {
	content: '\ea7b';
}

.main .content .content__menu .menu__content {
	flex: 1 0 auto;
	padding: 30px;
	overflow-y: scroll;
}

.main .content .content__menu .menu__content .content-box {
	max-width: 850px;
	margin-right: auto;
	margin-left: auto;
}

/*
* Error
*/
.error-content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.error-content .error-box {
	flex: 0 0 450px;
	transform: translateY(-100px);
}

.error-content .error-title {
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 15px;
}

.error-content .error-description {
	font-size: 1.23076923rem;
	margin-bottom: 25px;
	line-height: 1.8rem;
	color: rgba(255,255,255,0.85);
}


/*
* Side menu
*/
.side-menu {
	background: #0c0c10;
	flex: 0 0 72px;
	position: relative;
	z-index: 99999;
}

.app.mobile .side-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9999999999;
}

.app.mobile div.side-menu.open {
	display: block;
}

.side-menu.expanded {
	flex-basis: 240px;
}

.side-menu div.user-profile {
	height: 40px;
	padding: 0px 0px 0px 0;
	display: flex;
	bottom: 20px;
	left: 16px;
	right: 16px;
	position: absolute;
	cursor: pointer;
}

.side-menu .user-profile .user-avatar {
	margin: 3px;
	flex: 0 0 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	border: 3px #141419 solid;
}

.side-menu .user-profile:hover .user-avatar {
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.3);
}

.side-menu .user-profile:active .user-avatar {
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.15);
}

.side-menu .user-profile.selected .user-avatar {
    box-shadow: 0px 0px 0px 2px #247afb;
}

.side-menu .user-profile .user-avatar img {
	width: 100%;
	height: auto;
}

.side-menu .user-profile .user-name {
	transition: opacity 200ms ease-in-out;
}

.side-menu .user-profile .user-name {
	height: 38px;
	line-height: 20px;
	padding: 9px 0;
	flex: 1 0;
	font-weight: 500;
	margin-left: 10px;
	font-size: 1.07692307692rem;
	color: rgba(255,255,255,0.6);
	display: none;
	opacity: 0;
}

.side-menu.expanded .user-profile .user-name {
	display: block;
}

.side-menu.expanded.expanded-text .user-profile .user-name {
	opacity: 1;
}

.side-menu .logo {
	position: absolute;
	color: #fff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: block;
	top: 22px;
	left: 16px;
	cursor: pointer;
}

.app.mobile .side-menu .logo {
	display: none;
}

.side-menu .logo:before {
	font-family: 'SL-Icons';
	content: '\ea33';
	font-size: 22px;
}

.side-menu.expanded .logo:after {
	content: '';
	display: block;
	position: absolute;
	left: 100%;
	margin-left: 4px;
	top: 0;
	bottom: 4px;
	width: 92px;
	background-image: url('../img/sl-logo-text.svg');
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 100ms ease-in-out;
	opacity: 0;
}

.side-menu .logo .beta {
	display: none;
	transition: opacity 100ms ease-in-out;
	opacity: 0;
	position: absolute;
	text-transform: uppercase;
	border-radius: 3px;
	padding: 4px 6px;
	background: rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.75);
	line-height: normal;
	top: 50%;
	left: 147px;
	transform: translateY(-50%);
	font-weight: bold;
	font-size: 9px;
}

.side-menu.expanded .logo .beta {
	display: block;
}

.side-menu .logo .beta:before {
	content: 'beta';
}

.side-menu.expanded.expanded-text .logo:after {
	opacity: 1;
}

.side-menu.expanded.expanded-text .logo .beta {
	opacity: 1;
}

.side-menu ul {
	padding: 0;
	top: 72px;
	position: absolute;
	padding: 10px 16px 0 16px;
	left: 0;
	right: 0;
}

.app.mobile .side-menu  ul{
	top: 10px;
}

.side-menu ul li {
	position: relative;
	z-index: 1000;
	margin: 2px 0;
}

.side-menu ul li:last-child {
	margin-bottom: 0px;
}

.side-menu ul li a,
.side-menu .user-notifications > a,
.side-menu .user-profile {
	display: block;
	position: relative;
	height: 40px;
	line-height: 38px;
	font-size: 19px;
	z-index: 10;
	border-radius: 8px;
	border: 1px transparent solid;
}

.side-menu ul li a:before,
.side-menu .user-notifications a:before {
	font-family: 'SL-Icons';
	color: rgba(255,255,255,0.6);
	width: 38px;
	height: 38px;
	text-align: center;
	display: inline-block;
}

.side-menu.expanded ul li a,
.side-menu.expanded .user-notifications a {
	font-size: 18px;
}

.side-menu .user-notifications {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 76px;
	user-select: none;
}

.side-menu .user-notifications .count {
	display: none;
	width: 20px;
	height: 20px;
	line-height: 16px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	top: 0px;
	left: 22px;
	background: #247afb;
	border-radius: 50%;
	position: absolute;
	z-index: 9999;
	border: 2px #141419 solid;
}

.side-menu .user-notifications.unread .count {
	display: block;
}

.side-menu .user-notifications.selected.unread .count {
	border-color: #26262a;
}

.side-menu .user-notifications a:before {
	content: '\ea54';
	font-size: 1.15789473684em;
}

.side-menu .user-notifications.selected a:before {
	content: '\ea53';
}

.side-menu ul li a:hover:before,
.side-menu .user-notifications a:hover:before {
	color: rgba(255,255,255,0.85);
}

.side-menu ul li.selected a,
.side-menu .user-notifications.selected a {
	background: rgba(255,255,255,0.075);
}

.side-menu ul li.selected a:before,
.side-menu .user-notifications.selected a:before {
	color: rgba(255,255,255,1);
	vertical-align: top;
}

.side-menu ul li.menu-dashboard a:before {
	content: '\ea49';
	font-size: 1.05em;
}

.side-menu ul li.menu-dashboard.selected a:before {
	content: '\ea43';
}

.side-menu ul li.menu-search {
	margin-bottom: 20px;
}

.side-menu.expanded ul li.menu-search {
	background: rgba(255,255,255,0.075);
	border-radius: 6px;
}

.side-menu.expanded ul li.menu-search:after {
	content: '/';
	width: 16px;
	height: 18px;
	font-weight: 500;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	color: rgba(255,255,255,0.6);
	border: 1px rgba(255,255,255,0.15) solid;
	border-radius: 4px;
	display: block;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}

.side-menu ul li.menu-search a:before {
	content: '\ea3e';
	font-size: 1.11428571em;
}

.side-menu ul li.menu-industries a:before {
	content: '\ea46';
	font-size: 1.13888889em;
}

.side-menu ul li.menu-industries.selected a:before {
	content: '\ea40';
}

.side-menu ul li.menu-screener a:before {
	content: '\ea45';
	font-size: 0.85em;
}

.side-menu ul li.menu-screener.selected a:before {
	content: '\ea4b';
}

.side-menu ul li.menu-chat a:before {
	content: '\ea4c';
	font-size: 1.02em;
}

.side-menu ul li.menu-chat.selected a:before {
	content: '\ea3f';
}

.side-menu ul li.menu-watchlists a:before {
	content: '\ea4a';
	font-size: 0.825em;
}

.side-menu ul li.menu-watchlists.selected a:before {
	content: '\ea41';
}

.side-menu ul li.menu-portfolios a:before {
	content: '\ea6d';
	font-size: 1.05em;
}

.side-menu ul li.menu-portfolios.selected a:before {
	content: '\ea6c';
}

.side-menu ul li.menu-dportfolios a:before {
	content: '\ea6d';
	font-size: 1.05em;
}

.side-menu ul li.menu-dportfolios.selected a:before {
	content: '\ea6c';
}

.side-menu ul li.menu-market a:before {
	content: '\ea48';
	font-size: 1.05em;
}

.side-menu ul li.menu-news a:before {
	content: '\ea47';
	font-size: 0.823529412em;
}

.side-menu ul li.menu-news.selected a:before {
	content: '\ea42';
}

.side-menu ul li.menu-quantboard a:before {
	font-family: "Material Icons Outlined";
	content: "data_exploration";
	font-size: 1.25em;
	align-items: left;
}

.side-menu ul li.menu-quantboard.selected a:after {
	font-family: "Material Icons";
	content: "data_exploration";
	font-size: 1.25em;
	align-items: left;
}

.side-menu ul li.menu-mlsectors a:before {
	font-family: "Material Icons Outlined";
	content: "bubble_chart";
	font-size: 1.25em;
	align-items: left;
}

.side-menu ul li.menu-mlsectors.selected a:before {
	font-family: "Material Icons";
	content: "bubble_chart";
	font-size: 1.25em;
	align-items: left;
}

.side-menu ul li.menu-options a:before {
	font-family: "Material Icons Outlined";
	content: "flood";
	font-size: 1.25em;
	align-items: left;
}

.side-menu ul li.menu-options.selected a:before {
	font-family: "Material Icons";
	content: "flood";
	font-size: 1.25em;
	align-items: left;
}


.side-menu ul li.menu-screenersearch a:before {
	content: '\ea8f';
}

.side-menu ul li.menu-screenersearch.selected a:before {
	content: '\ea8e';
}

.side-menu ul li.menu-chat {
	margin-top: 20px;
}

.side-menu ul li a:hover {
	color: #0a2941;
}

.side-menu ul li a:active {
	background: rgba(255,255,255,0.025);
}

.side-menu ul li a > div,
.side-menu .user-notifications > a > div {
	line-height: normal;
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translate(2em, -50%);
	background: #31333a;
	border: 1px #45474e solid;
	padding: 10px 14px;
	border-radius: 2px;
	color: rgba(255,255,255,0.99);
	display: none;
	white-space: nowrap;
	z-index: 5;
	font-weight: bold;
	color: rgba(255,255,255,0.9);
	margin-left: 10px;
	font-size: 1rem;
	box-shadow: 1px 1px 8px rgba(0,0,0,0.2);
	opacity: 0;
	animation: side-menu-tooltip 50ms ease-out forwards;
}

@keyframes side-menu-tooltip {
	to {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

.side-menu.expanded ul li a > div,
.side-menu.expanded .user-notifications > a > div {
	display: inline-block;
	position: relative;
	left: auto;
	top: auto;
	background: none;
	transform: none;
	padding: 0;
	line-height: 38px;
	vertical-align: top;
	border-radius: 0;
	margin-left: 6px;
	font-size: 14px;
	font-weight: 400;
	color: rgba(255,255,255,0.6);
	transition: opacity 200ms ease-in-out;
	opacity: 0;
	border: 0;
	animation: none;
	box-shadow: none;
	user-select: none;
}

.side-menu.expanded.expanded-text ul li a > div,
.side-menu.expanded.expanded-text .user-notifications > a > div {
	opacity: 1;
}

.side-menu.expanded ul li a:hover > div,
.side-menu.expanded .user-notifications > a:hover > div {
	color: rgba(255,255,255,0.8);
}

.side-menu.expanded ul li.selected a > div,
.side-menu.expanded .user-notifications.selected > a > div {
	color: rgba(255,255,255,1);
}

.side-menu.expanded ul li a > div:before,
.side-menu.expanded ul li a > div:after,
.side-menu.expanded .user-notifications > a > div:before,
.side-menu.expanded .user-notifications > a > div:after {
	display: none;
}

.side-menu ul li a > div:before,
.side-menu .user-notifications > a > div:before {
	z-index: 20;
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 6px 6px 0;
	border-color: transparent #31333a transparent transparent;
	left: -6px;
	top: 50%;
	transform: translateY(-50%);
}

.side-menu ul li a > div:after,
.side-menu .user-notifications > a > div:after {
	z-index: 10;
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 8px 0;
	border-color: transparent #45474e transparent transparent;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
}

.side-menu ul li.hover a > div,
.side-menu .user-notifications.hover > a > div {
	display: inline-block;
}


/*
* Expand Side Menu
*/
.side-menu .expand-menu {
	display: block;
	opacity: 0;
	position: absolute;
	right: -1px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(255,255,255,0.05);
}

.app.mobile .side-menu .expand-menu {
	display: none;
}

.side-menu .expand-menu.hover,
.side-menu.expanded .expand-menu {
	opacity: 1;
	cursor: pointer;
}

.side-menu .expand-menu:after {
	display: block;
	position: absolute;
	content: '';
	width: 10px;
	left: -4px;
	top: 0px;
	bottom: 0px;
	z-index: -5;
}

.side-menu .expand-menu > div {
	display: block;
	width: 13px;
	height: 23px;
	line-height: 21px;
	text-align: center;
	border-radius: 50%;
	background: #0c0c10;
	border: 1px rgba(255,255,255,0.2) solid;
	border-radius: 3px;
	bottom: 100px;
	left: -6px;
	position: absolute;
}

.side-menu .expand-menu:hover {
	background: rgba(255,255,255,0.15);
}

.side-menu .expand-menu:hover > div {
	border-color: rgba(255,255,255,0.3);
}

.side-menu .expand-menu > div:before {
	content: '\ea20';
	font-family: 'SL-Icons';
	color: #fff;
	font-size: 11px;
	color: rgba(255,255,255,0.8);
}

.side-menu.expanded .expand-menu > div:before {
	content: '\ea7f';
	margin-right: 2px;
}


/*
* Event Date Picker
*/
.event-date-picker {
	height: 120px;
	border-radius: 4px;
	border: 1px rgba(255,255,255,0.1) solid;
	display: flex;
	padding: 10px 7px;
}

.event-date-picker > * {
	border-radius: 4px;
	cursor: pointer;
	border: 1px transparent solid;
	margin-right: 7px;
	user-select: none;
}

.event-date-picker > *:last-child {
	margin-right: 0;
}

.event-date-picker .prev,
.event-date-picker .next {
	flex: 0 0 40px;
	display: block;
	position: relative;
	font-size: 22px;
	color: rgba(255,255,255,0.5);
}

.event-date-picker .prev:hover,
.event-date-picker .next:hover {
	background: rgba(255,255,255,0.1);
}

.event-date-picker .prev:active,
.event-date-picker .next:active {
	background: rgba(255,255,255,0.075);
}

.event-date-picker .prev:before,
.event-date-picker .next:before {
	font-family: 'SL-Icons';
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
}

.event-date-picker .prev:before {
	content: '\ea7f';
}

.event-date-picker .next:before {
	content: '\ea20';
}

.event-date-picker .date {
	flex: 1 0;
	display: block;
	background: rgba(255,255,255,0.04);
	padding: 12px;
}

.event-date-picker .date.placeholder,
.event-date-picker .date.placeholder:hover {
	background: rgba(255,255,255,0.04);
}

.event-date-picker .date:hover {
	border-color: rgba(255,255,255,0.3);
}

.event-date-picker .date:active {
	border-color: rgba(255,255,255,0.1);
}

.event-date-picker div.date.selected {
	border-color: #0d42fb;
	box-shadow: 0px 0px 0px 3px rgba(13,66,251,0.15);
	cursor: pointer;
}

.event-date-picker .date.disabled {
	color: rgba(255,255,255,0.6);
	border-color: transparent;
	cursor: default;
}

.event-date-picker .date .time {
	font-size: 1.15384615385rem;
	margin-bottom: 3px;
}

.event-date-picker .date .day {
	color: rgba(255,255,255,0.6);
	font-size: 0.92307692307rem;
	margin-bottom: 10px;
}

.event-date-picker .date .time span {
	font-weight: bold;
}

.event-date-picker .date .event-count {
	background: #0d42fb;
	color: #fff;
	font-weight: 500;
	font-size: 0.84615384615rem;
	border-radius: 4px;
	padding: 6px 8px;
	display: inline-block;
}


/*
* User Menu
*/
.user-menu {
	background: #28292f;
	border: 1px rgba(255,255,255,0.05) solid;
	border-radius: 6px;
	left: 100%;
	bottom: 20px;
	margin-left: 10px;
	width: 220px;
	box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
	position: absolute;
	padding: 5px;
	transition: transform 100ms ease-in-out, opacity 50ms ease-in-out;
	transform: scale(0.97);
	opacity: 0;
	display: none;
}

.user-menu.active {
	display: block;
}

.user-menu.active.display {
	transform: scale(1);
	opacity: 1;
}

.user-menu a {
	padding: 11px 12px;
	padding-left: 35px;
	display: block;
	font-weight: 500;
	color: rgba(255,255,255,0.8);
	position: relative;
	border-radius: 4px;
}

.user-menu a:hover {
	background: rgba(255,255,255,0.06);
}

.user-menu a:active {
	background: rgba(255,255,255,0.04);
}

.user-menu a:before {
	font-family: 'SL-Icons';
	display: block;
	position: absolute;
	left: 7px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: rgba(255,255,255,0.5);
}

.user-menu a.item-profile:before {
	content: '\ea79';
}

.user-menu a.item-settings:before {
	content: '\ea84';
}

.user-menu a.item-help:before {
	content: '\ea90';
}

.user-menu a.item-logout:before {
	content: '\ea19';
}


/*
* Notifications Box
*/
.notifications-box {
	background: #141419;
	border-radius: 6px;
	border: 1px #2c2e36 solid;
	left: 100%;
	bottom: 15px;
	margin-left: 10px;
	width: 310px;
	height: 370px;
	position: absolute;
	box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
	display: none;
	flex-direction: column;
	transition: transform 100ms ease-in-out, opacity 50ms ease-in-out;
	transform: scale(0.97);
	opacity: 0;
}

.notifications-box.active {
	display: flex;
}

.notifications-box.active.display {
	transform: scale(1);
	opacity: 1;
}

.notifications-box .head {
	flex: 0 0 45px;
	line-height: 25px;
	padding: 10px 15px;
}

.notifications-box .head .title {
	font-weight: bold;
}

.notifications-box .body {
	padding: 0 12px 12px 12px;
	overflow: hidden;
	overflow-y: auto;
	flex: 1 0;
}

.notifications-box .body > div {
	background: rgba(255,255,255,0.05);
	border-radius: 4px;
	padding: 12px;
	padding-left: 38px;
	line-height: 1.3rem;
	margin-bottom: 7px;
	cursor: pointer;
	font-size: 0.92307692307rem;
	position: relative;
}

.notifications-box .body > div .time {
	color: #107bff;
	font-size: 0.84615384615rem;
	margin-top: 2px;
	font-weight: 500;
}

.notifications-box .body > div:hover {
	background: rgba(255,255,255,0.075);
}

.notifications-box .body > div:active {
	background: rgba(255,255,255,0.06);
}

.notifications-box .body > div span {
	font-weight: bold;
}

.notifications-box .body > div:before {
	font-family: 'SL-Icons';
	left: 6px;
	top: 6px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: absolute;
	color: rgba(255,255,255,0.6);
}

.notifications-box .body > div.type-watchlist:before {
	content: '\ea41';
}

.notifications-box .body > div.type-portfolio:before {
	content: '\ea6c';
	font-size: 15px;
}

.notifications-box .body > div .trade {
	margin: 4px 0;
	line-height: 20px;
	padding: 8px;
	font-weight: normal;
	background: rgba(0,0,0,0.15);
	border-radius: 4px;
	display: block;
	max-width: 80%;
	overflow: hidden;
	white-space: nowrap;
	display: flex;
}

.notifications-box .body > div .trade .symbol {
	font-weight: bold;
	margin-right: 5px;
}

.notifications-box .body > div .trade .name {
	color: rgba(255,255,255,0.5);
	font-size: 12px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.notifications-box .body > div .trade:before {
	flex: 0 0 20px;
	height: 20px;
	line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.846153846rem;
    padding: 0;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
    border-radius: 4px;
    color: rgba(255,255,255,0.9);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.15);
}

.notifications-box .body > div .trade.buy:before {
	content: 'B';
	background: rgba(75, 189, 84, 0.4);
}

.notifications-box .body > div .trade.sell:before {
	content: 'S';
	background: rgba(239, 27, 25, 0.4);
}

.notifications-box.empty .body {
	display: none;
}

.notifications-box .empty-body {
	display: none;
}

.notifications-box.empty .empty-body {
	flex: 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notifications-box .empty-body .msg {
	color: rgba(255,255,255,0.3);
	font-weight: 500;
	text-align: center;
	padding-bottom: 40px;
}

.notifications-box .empty-body .msg:before {
	content: '\ea8d';
	font-family: 'SL-Icons';
	display: block;
	font-size: 50px;
	margin-bottom: 10px;
	font-weight: normal;
}


/*
* Tab menu
*/
ul.tab-menu {
	display: block;
	margin: 0 -3px 25px -3px;
	position: relative;
	user-select: none;
	overflow: hidden;
	overflow-x: scroll;
	white-space: nowrap;
}

ul.tab-menu:after {
	content: '';
	display: block;
	background-color: rgba(255,255,255,0.1);
	left: 0;
	right: 0;
	bottom: 0px;
	height: 2px;
	position: absolute;
	border-radius: 1.5px;
}

ul.tab-menu li {
	display: inline-block;
	margin-right: 20px;
}

ul.tab-menu li.hidden {
	display: none;
}

ul.tab-menu li:last-child {
	margin-right: 0;
}

ul.tab-menu li a {
	display: block;
	padding: 7px 4px 18px 4px;
	color: rgba(255,255,255,0.6);
	font-weight: 500;
	font-size: 1.07692307692rem;
	position: relative;
}

ul.tab-menu li a:hover {
	color: rgba(255,255,255,1);
}

ul.tab-menu li.tab-menu__item--selected a {
	color: #fff;
}

ul.tab-menu li.tab-menu__item--selected a:after {
	content: '';
	display: block;
	background-color: #0d42fb;
	left: 0;
	right: 0;
	bottom: 0px;
	height: 4px;
	position: absolute;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	z-index: 9999;
}


/*
* Top Bar
*/
.top-bar {
	height: 20px;
	line-height: 20px;
	margin-bottom: 5px;
	display: flex;
}

.top-bar > * {
	margin-right: 10px;
	padding-right: 14px;
	position: relative;
}

.top-bar > *:last-child {
	margin-right: 0;
	padding-right: 0;
}

.top-bar > *:after {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255,255,255,0.35);
	position: absolute;
	display: block;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.top-bar > *:last-child:after {
	display: none;
}

.top-bar .user-info {
	display: flex;
	color: rgba(255,255,255,0.6);
	cursor: pointer;
}

.top-bar .user-info:hover {
	color: rgba(255,255,255,0.9);
}

.top-bar .user-info .avatar {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: rgba(255,255,255,0.2);
	margin-right: 5px;
	overflow: hidden;
}

.top-bar .user-info .avatar img {
	width: 100%;
	height: auto;
}

.top-bar .user-info .username {
	font-weight: 500;
	font-size: 0.92307692307rem;
	line-height: 20px;
}

.top-bar .back-button {
	height: 20px;
	line-height: 20px;
	color: rgba(255,255,255,0.7);
	position: relative;
	padding-left: 17px;
	font-weight: 500;
}

.top-bar .back-button:hover {
	color: rgba(255,255,255,0.9);
}

.top-bar .back-button:before {
	content: '\ea7f';
	font-family: 'SL-Icons';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}


/*
* Content Head
*/
.content-head {
	margin-bottom: 10px;
	display: flex;
	height: 36px;
}

.content-head .head__title > * {
	vertical-align: top;
	display: inline-block;
}

.content-head .head__title > h1,
.content-head .head__title > h3,
.content-head .head__title > ul > li {
	font-weight: bold;
	font-size: 22px;
	display: inline-block;
	line-height: 36px;
	color: rgba(255,255,255,1);
	height: 36px;
}

.content-head .head__title > ul > li,
.content-head .head__title > ul > li > a {
	color: rgba(255,255,255,0.75);
}

.content-head .head__title > ul > li > a:hover {
	text-decoration: underline;
}

.content-head .head__title > ul > li:last-child {
	color: rgba(255,255,255,1);
}

.content-head .head__title > ul > li {
	position: relative;
	padding-right: 22px;
	margin-right: 5px;
}

.content-head .head__title > ul > li:last-child {
	padding-right: 0;
	margin-right: 0;
}

.content-head .head__title > ul > li:after {
	font-family: 'SL-Icons';
	content: '\ea20';
	color: rgba(255,255,255,0.4);
	text-decoration: none !important;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
}

.content-head .head__title > ul > li:last-child:after {
	display: none;
}

.content-head .head__title .short-title {
	width: 30px;
	line-height: 30px;
	background: rgba(255,255,255,0.05);
	margin: 3px 0;
	/*border: 2px solid rgba(255,255,255,0.1);*/
	border-radius: 4px;
	display: inline-block;
	text-align: center;
	font-size: 14px;
	vertical-align: top;
	text-decoration: none;
	user-select: none;
}

.content-head .head__title .short-title:hover {
	background: rgba(255,255,255,0.075);
	text-decoration: none;
}

.content-head .head__title .title__placeholder {
	width: 120px;
	height: 24px;
	margin: 6px 0;
	background: rgba(255,255,255,0.05);
	border-radius: 2px;
	display: inline-block;
	vertical-align: top;
}

.content-head .head__title .title-value {
	line-height: 20px;
	padding: 4px 8px;
	height: 28px;
	min-width: 50px;
	margin: 4px 0px;
	margin-left: 10px;
	display: inline-block;
	color: rgba(255,255,255,0.75);
	font-size: 16px;
	background: rgba(255,255,255,0.075);
	border-radius: 4px;
}

.content-head .head__title .title-price-change {
	line-height: 20px;
	margin: 8px 0px;
	margin-left: 10px;
	font-weight: bold;
	font-size: 16px;
	display: inline-block;
}

.content-head .head__title .is-private {
	position: relative;
	padding-left: 25px;
}

.content-head .head__title .is-private:before {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	content: '\ea6b';
	font-family: 'SL-Icons';
	margin-right: 5px;
	color: rgba(255,255,255,0.3);
	font-size: 16px;
}


/*
* Content Title Follow
*/
.content-head .head__follow {
	height: 36px;
	margin-left: auto;
	display: none;
}

.content-head .head__follow.active {
	display: block;
}

.content-head .head__follow > div {
	height: 36px;
	line-height: 36px;
	padding: 0 30px;
	font-weight: bold;
	border-radius: 18px;
	cursor: pointer;
	user-select: none;
	font-size: 0.92307692307rem;
}

.content-head .head__follow > div.button-unfollow {
	display: none;
}

.content-head .head__follow.has-follow > div.button-unfollow {
	display: block;
}

.content-head .head__follow.has-follow > div.button-follow {
	display: none;
}


/*
* Content Title Controls
*/
.content-head .head__controls {
	margin-left: auto;
}

.content-head .head__controls.hidden {
	display: none;
}

.content-head .head__controls > * {
	display: inline-block;
	margin-right: 10px;
}

.content-head .head__controls > *:last-child {
	margin-right: 0;
}

.content-head .head__controls > .button {
	padding: 0 20px;
	height: 36px;
	line-height: 36px;
}
.content-head .head__controls > .switch-box .switch {
	padding: 0 2px;
/*	height: 0px;
	line-height: 36px;*/
/*	vertical-align: center;*/
}


/*
* Content Grid
*/
:root {
	--spacing: 20px;
}

.content-grid {
	display: grid;
	user-select: none;
	grid-gap: var(--spacing);
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 180px;
	grid-auto-flow: row dense;
}

.content-grid > div.grid__big {
	grid-area: span 2/span 2;
	margin: 0;
}

.content-grid > div.grid__small {
	grid-area: span 2/span 1;
	margin: 0;
}

.content-grid > div.content-box--placeholder {
	border: 2px rgba(255,255,255,0.1) dashed;
}

.content-grid .content-box {
	position: relative;
}

.content-grid .content-box .content-box__body {
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
}

/*
* Grid Widget: Top Mover
*/
.grid__widget.widget--top_mover .content-box__body {
	display: flex;
    align-items: 'stretch';
}

.grid__widget.widget--top_mover .body__performer {
	flex: 0 0 50%;
	height: 100%;
	padding: 25px;
	overflow: hidden;
}

.grid__widget.widget--top_mover .body__performer:last-child {
	border: 0;
}

.grid__widget.widget--top_mover .body__performer .performer__title {
	font-size: 0.846153846rem;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	margin-bottom: 20px;
}

.grid__widget.widget--top_mover .body__performer ul.performer__list	li {
	height: 24px;
	line-height: 24px;
	display: flex;
	margin-bottom: 12px;
}

.grid__widget.widget--top_mover .body__performer ul.performer__list	li .item__rank {
	flex: 0 0 24px;
	height: 24px;
	border: 2px rgba(255,255,255,0.075) solid;
	border-radius: 50%;
	line-height: 20px;
	font-weight: bold;
	margin-right: 15px;
	text-align: center;
	font-size: 0.923076923rem;
	color: rgba(255,255,255,0.6);
	display: none;
}

.grid__widget.widget--top_mover .body__performer ul.performer__list	li .item__symbol {
	background: rgba(36,122,251,0.1);
    color: rgba(36,122,251,1);
    flex: 0 0 60px;
    height: 24px;
    font-weight: bold;
    padding: 0 10px;
    border-radius: 2px;
    font-size: 0.923076923rem;
	margin-right: 15px;
	text-align: center;
}

.grid__widget.widget--top_mover .body__performer ul.performer__list	li .item__name {
	color: rgba(255,255,255,0.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 10px;
	font-size: 0.923076923rem;
}

.grid__widget.widget--top_mover .body__performer ul.performer__list	li .item__change {
	margin-left: auto;
	font-size: 0.923076923rem;
}

/*
* Grid Widget: Breadth
*/
.grid__widget.widget--breadth .content-box__body {
	display: flex;
	flex-direction: column;
}

.grid__widget.widget--breadth .content-box__body .body__chart {
	flex: 1 0;
	border-bottom: 1px rgba(255,255,255,0.075) solid;
	overflow: hidden;
	position: relative;
}

.grid__widget.widget--breadth .content-box__body .body__chart div {
	width: 160px;
	height: 160px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.grid__widget.widget--breadth .content-box__body .body__stats {
	flex: 0 0 120px;
	display: flex;
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col {
	border-right: 1px rgba(255,255,255,0.075) solid;
	flex: 0 0 50%;
	position: relative;
	padding: 20px;
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col:last-child {
	border-right: 0;
	flex: 0 0 50%;
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col .col__icon {
	width: 45px;
	height: 45px;
	position: relative;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col .col__text {
	font-weight: bold;
	margin-top: 10px;
	display: block;
	text-align: center;
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col--up {
	color: rgba(69,190,78,1);
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col--up  .col__icon {
	background: rgba(69,190,78,0.1);
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col--down {
	color: rgba(241,20,50,1);
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col--down  .col__icon {
	background: rgba(241,20,50,0.1);
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col .col__icon:before {
	content: '\ea07';
	font-family: 'SL-Icons';
	font-size: 24px;
	position: absolute;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col--up .col__icon:before {
	content: '\ea07';
}

.grid__widget.widget--breadth .content-box__body .body__stats .stats__col--down .col__icon:before {
	content: '\ea08';
}

/*
* Grid Widget: Chart
*/
.grid__widget.widget--chart .content-box__body > div {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
}

/*
* Grid Widget: Large Caps Bullish
*/
.grid__widget.widget--large_caps_bullish .content-box__body {
	display: flex;
	flex-direction: column;
}

.grid__widget.widget--large_caps_bullish .content-box__body .body__chart {
	flex: 1 0;
	border-bottom: 1px rgba(255,255,255,0.075) solid;
	overflow: hidden;
	position: relative;
}

.grid__widget.widget--large_caps_bullish .content-box__body .body__chart div {
	width: 160px;
	height: 160px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}


/*
* Add Symbols Box
*/
div.symbols-add-box {
	position: relative;
}

.symbols-add-box .box__modal {
	width: 330px;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 5px;
	z-index: 999;
	background: #202020;
	border: 1px #323232 solid;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	border-radius: 2px;
	display: none;
}

.symbols-add-box.symbols-add-box--open .box__modal {
	display: block;
}

.symbols-add-box .box__modal .modal__search {
	border-bottom: 1px #323232 solid;
	padding: 5px;

}

.symbols-add-box .box__modal .modal__search .search__input {
	border-radius: 2px;
	background: rgba(255,255,255,0.075);
	position: relative;
	padding-left: 25px;
}

.symbols-add-box .box__modal .modal__search .search__input.search__input--focus {
	background: rgba(255,255,255,0.1);
}

.symbols-add-box .box__modal .modal__search .search__input:before {
	content: '\ea04';
	font-family: 'SL-Icons';
	position: absolute;
	left: 10px;
	top: 50%;
	font-size: 18px;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.5);
}

.symbols-add-box .box__modal .modal__search .search__input input {
	background: transparent;
	border: 0;
	width: 100%;
	padding: 12px 15px;
}

.symbols-add-box .box__modal .modal__list ul {
	padding: 5px 0;
}

.symbols-add-box .box__modal .modal__list ul li {
	padding: 5px 10px;
	position: relative;
	cursor: pointer;
	display: flex;
}

.symbols-add-box .box__modal .modal__list ul li.item--loading {
	opacity: 0.5;
}

.symbols-add-box .box__modal .modal__list ul li .item__symbol {
	background: rgba(36,122,251,0.1);
	color: rgba(36,122,251,1);
	padding: 0 8px;
	line-height: 25px;
	height: 25px;
	border-radius: 2px;
	font-weight: bold;
	margin-right: 10px;
	font-size: 0.923076923rem;
	flex: 0 0 60px;
	text-align: center;
}

.symbols-add-box .box__modal .modal__list ul li .item__name {
	color: rgba(255,255,255,0.65);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 0;
	line-height: 25px;
	height: 25px;
	margin-right: 10px;
	font-size: 0.923076923rem;
}

.symbols-add-box .box__modal .modal__list ul li:hover .item__name {
	color: rgba(255,255,255,0.85);
}

.symbols-add-box .box__modal .modal__list ul li .item__add-button {
	flex: 0 0 25px;
	width: 25px;
	height: 25px;
	background: rgba(255,255,255,0.075);
	border-radius: 2px;
	cursor: pointer;
	position: relative;
}

.symbols-add-box .box__modal .modal__list ul li:hover .item__add-button {
	background: rgba(255,255,255,0.085);
}

.symbols-add-box .box__modal .modal__list ul li .item__add-button:active {
	background: rgba(255,255,255,0.065);
}

.symbols-add-box .box__modal .modal__list ul li .item__add-button:before {
	content: '\ea03';
	font-family: 'SL-Icons';
	color: rgba(255,255,255,0.4);
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
	font-size: 16px;
}

.symbols-add-box .box__modal .modal__list .list__empty {
	padding: 80px;
	text-align: center;
	color: rgba(255,255,255,0.3);
}

.symbols-add-box .box__modal .modal__list ul li.item--placeholder > div {
	height: 25px;
	background: rgba(255,255,255,0.05);
	border-radius: 2px;
}

.symbols-add-box .box__modal .modal__list ul li.item--placeholder > div.placeholder__symbol {
	flex: 0 0 60px;
	margin-right: 10px;
}

.symbols-add-box .box__modal .modal__list ul li.item--placeholder > div.placeholder__name {
	flex: 1 0;
	margin-right: 60px;
}

.symbols-add-box .box__modal .modal__list ul li.item--placeholder:nth-child(2n+2) > div.placeholder__name {
	margin-right: 80px;
}

.symbols-add-box .box__modal .modal__list ul li.item--placeholder:nth-child(3n+3) > div.placeholder__name {
	margin-right: 40px;
}

.symbols-add-box .box__modal .modal__list ul li.item--placeholder > div.placeholder__add-button {
	flex: 0 0 25px;
}


/*
* Portfolio Trade Form
*/
.portfolio-add-trade-form .trade-preview {
	margin-top: 20px;
}

.portfolio-add-trade-form .trade-preview .title {
	text-transform: uppercase;
	font-size: 0.84615384615rem;
	font-weight: 500;
	margin-bottom: 5px;
	color: rgba(255,255,255,0.4);
	font-weight: 500;
}

.portfolio-add-trade-form .trade-preview .box {
	background: rgba(255,255,255,0.075);
	border-radius: 4px;
	padding: 10px;
	padding-left: 52px;
	position: relative;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.portfolio-add-trade-form .trade-preview .box:before {
	content: '';
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-weight: 500;
	border-radius: 3px;
	display: block;
	font-size: 0.84615384615rem;
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
}

.portfolio-add-trade-form .trade-preview.long .box:before {
	content: 'L';
	background: #305c38;
}

.portfolio-add-trade-form .trade-preview.short .box:before {
	content: 'S';
	background: #6f1e23;
}

.portfolio-add-trade-form .trade-preview .box .info {
	line-height: 20px;
}

.portfolio-add-trade-form .trade-preview .box .info .symbol {
	font-weight: bold;
	display: inline-block;
	margin-right: 5px;
}

.portfolio-add-trade-form .trade-preview .box .info .name {
	display: inline-block;
	font-size: 0.92307692307rem;
	color: rgba(255,255,255,0.5);
}

.portfolio-add-trade-form .trade-preview .box .details {
	line-height: 20px;
	font-size: 0.84615384615rem;
}

.portfolio-add-trade-form .trade-preview .box .details .shares {
	display: inline-block;
	font-weight: 500;
	color: rgba(255,255,255,0.75);
}

.portfolio-add-trade-form .trade-preview .box .details .size {
	display: inline-block;
	margin-left: 5px;
	color: rgba(255,255,255,0.5);
}

.portfolio-add-trade-form .trade-preview .box .details .closing {
	font-size: 0.84615384615rem;
	font-weight: 500;
	line-height: 20px;
	color: #ff3737;
	display: inline-block;
}

.portfolio-add-trade-form .trade-preview .box .details .closing:before {
	content: '\ea86';
	font-family: 'SL-Icons';
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
}


/*
* Portfolio Balance Box
*/
.portfolio-balance-box {
	margin: 20px -30px -30px -30px;
	padding: 20px 30px;
	border-top: 1px rgba(255,255,255,0.1) solid;
}

.portfolio-balance-box .top {
	margin-bottom: 5px;
	justify-content: space-between;
	display: flex;
	line-height: 16px;
}

.portfolio-balance-box .top .title {
	font-weight: bold;
	font-size: 0.84615384615rem;
}

.portfolio-balance-box .top .debt-msg {
	display: none;
}

.portfolio-balance-box.debt .top .debt-msg {
	display: block;
	font-size: 0.84615384615rem;
	color: #ff9600;
}

.portfolio-balance-box.debt .top .debt-msg:before {
	content: '\ea86';
	font-family: 'SL-Icons';
	margin-right: 5px;
	display: inline-block;
	vertical-align: top;
}

.portfolio-balance-box .graph {
	display: flex;
	align-items: center;
}

.portfolio-balance-box .graph .value {
	font-size: 0.84615384615rem;
	margin-right: 10px;
	font-weight: 500;
	color: #69d123;
	min-width: 70px;
}

.portfolio-balance-box.debt .graph .value {
	color: #ff9600;
}

.portfolio-balance-box .graph .bar {
	flex: 1 0;
	background: rgba(255,255,255,0.1);
	height: 7px;
	border-radius: 3px;
	display: block;
	overflow: hidden;
}

.portfolio-balance-box .graph .inner {
	height: inherit;
	display: none;
	background: #69d123;
	transition: 200ms width ease;
}

.portfolio-balance-box.debt .graph .inner {
	background: #ff9600;
}

.portfolio-balance-box.init .graph .inner {
	display: block;
}



/*
* Empty Box
*/
.empty-box {
	text-align: center;
	padding: 150px 0;
	border-radius: 4px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.075);
	display: none;
}

.empty-box.active {
	display: block;
}

.empty-box:before {
	content: '\ea85';
	font-family: 'SL-Icons';
	font-size: 42px;
	margin-bottom: 5px;
	display: inline-block;
	color: rgba(255,255,255,0.8);
}

.empty-box .title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
	color: rgba(255,255,255,0.8);
}

.empty-box .subtitle {
	font-size: 15px;
	color: rgba(255,255,255,0.6);
}


/*
* Content Box
*/
.content-box {
	background: #0e0e12;
	border: 1px rgba(255,255,255,0.075) solid;
	border-radius: 5px;
	margin-bottom: 20px;
	position: relative;
	transition: border 200ms ease;
}

.content-box2 {
	background: #0e0e12;
	border: 10px rgba(255,255,255,0.075) solid;
	border-radius: 5px;
	margin-bottom: 20px;
	position: relative;
	transition: border 200ms ease;
}

.content-box.highlighted {
	border-color: rgba(26,118,255,1);
}

.content-box .close-box {
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	right: 14px;
	top: 14px;
	position: absolute;
	border-radius: 15px;
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.6);
	cursor: pointer;
}

.content-box .close-box:hover {
	background: rgba(255,255,255,0.15);
}

.content-box .close-box:active {
	background: rgba(255,255,255,0.12);
}

.content-box .close-box:before {
	font-family: 'SL-Icons';
	content: '\ea19';
}

.content-box.content-box--hidden {
	display: none;
}

.content-box .content-box__head {
	height: 50px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px rgba(255,255,255,0.04) solid;
}



.content-box .content-box__chart {
	border-bottom: 1px rgba(255,255,255,0.1) solid;
	padding: 0px;
}

.content-box .content-box__gauge {
	height: 200px;
	border-bottom: 1px rgba(255,255,255,0.075) solid;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content-box .content-box__gauge .gauge-content {
	width: 200px;
}

.content-box--hscroll {
	padding-left: 120px;
}

.content-box--hscroll .content-box--hscroll__inner {
	overflow-x: scroll;
}

.content-box.content-box--chart .content-box__body {
	position: relative;
	height: 280px;
}

.content-box.content-box--chart2 .content-box__body {
	position: relative;
	height: 280px;
	color: rgba(0,0,255,1);
}

.content-box.content-box--gauge .content-box__body {
	padding: 50px 100px;
}

.content-box.content-box--chart .content-box__body .chart-container {
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0;
}

.content-box.content-box--chart2 .content-box__body .chart-container {
	color: rgba(0,0,255,1);
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0;
}

.content-box .content-box__head .head__title {
	line-height: 26px;
	height: 50px;
	font-weight: 500;
	color: rgba(255,255,255,1);
	font-size: 1.07692307692rem;
	padding: 12px 20px;
}

.app.mobile .content-box .content-box__head .head__title {
	padding: 12px 16px;
}

.content-box .content-box__head  a.head__title {
	display: block;
	position: relative;
	padding-right: 18px;
}

.content-box .content-box__head  a.head__title:hover {
	color: rgba(255,255,255,0.9);
}

.content-box .content-box__head a.head__title:after {
	content: '\ea20';
	font-family: 'SL-Icons';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin-top: 1px;
	color: rgba(255,255,255,0.5);
}

.content-box .content-box__head .head__controls {
	height: 50px;
	padding: 7px 15px;
}

.app.mobile .content-box .content-box__head .head__controls {
	padding: 7px;
}

.content-box .content-box__head .head__controls .control__settings {
	height: 50px;
	width: 50px;
	position: relative;
	cursor: pointer;
}

.content-box .content-box__head .head__controls .control__settings:before {
	content: '\ea06';
	font-family: 'SL-Icons';
	opacity: 0.5;
	font-size: 21px;
	position: absolute;
	color: rgba(255,255,255,0.75);
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
}

.content-box .content-box__head .head__controls .control__settings:hover:before {
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.9);
}

.content-box .content-box__head .head__controls .control__settings:active:before {
	background: rgba(255,255,255,0.075);
}

.content-box.content-box--empty {
	background: rgba(0,0,0,0.25);
	border: 1px rgba(0,0,0,0.1) solid;
	padding: 120px 20px;
	text-align: center;
}

.content-box.content-box--empty .box--empty__title {
	font-size: 1.53846154rem;
	font-weight: 600;
	margin-bottom: 15px;
}

.content-box.content-box--empty .box--empty__text {
	color: rgba(255,255,255,0.6);
}

.content-box.content-box--empty .box--empty__controls {
	margin-top: 30px;
}

.content-box.content-box--loading .content-box__body {
	position: relative;
}

.content-box.content-box--loading .content-box__body:before {
	position: absolute;
	content: '';
	background-image: url('../img/loader.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 30px 30px;
	width: 30px;
	height: 30px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	opacity: 0.5;
}

.content-box .more-link {
	padding: 15px 20px;
	display: block;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.923076923rem;
	border-top: 1px rgba(255,255,255,0.1) solid;
	text-align: center;
	line-height: 20px;
	color: rgba(255,255,255,0.5);
	background: rgba(0,0,0,0.05);
}

.content-box .more-link:hover {
	color: rgba(255,255,255,0.75);
}

.content-box .more-link.link-screener:before {
	content: '\ea74';
	font-family: 'SL-Icons';
	display: inline-block;
	margin-right: 5px;
	height: 20px;
	width: 20px;
	text-align: center;
	vertical-align: top;
}

.content-box .more-link:after {
	content: '\ea20';
	font-family: 'SL-Icons';
	display: inline-block;
	height: 20px;
	width: 20px;
	text-align: center;
	vertical-align: top;
}

.content-box .empty-content {
	width: 100%;
	display: none;
	text-align: center;
	align-items: center;
	justify-content: center;
	padding: 80px 0;
}

.content-box .empty-content > div:before {
	content: '\ea85';
	font-family: 'SL-Icons';
	font-size: 40px;
	margin-bottom: 7px;
	display: block;
	color: rgba(255,255,255,0.6);
}

.content-box .empty-content .title {
	font-weight: 500;
	font-size: 1rem;
	color: rgba(255,255,255,0.6);
}

.content-box .empty-content .subtitle {
	margin-top: 10px;
	color: rgba(255,255,255,0.4);
}

.content-box .empty-content.active {
	display: flex;
}

.content-box .pagination {
	margin-bottom: 0;
	padding: 15px 0;
	border-top: 1px rgba(255,255,255,0.05) solid;
}


/*
* Chart Preview Box
*/
.chart-preview-box {
	display: block;
	height: 150px;
	position: relative;
	overflow: hidden;
	user-select: none;
	border: 1px transparent solid;
}

.chart-preview-box:hover {
	cursor: pointer;
	border-color: rgba(255,255,255,0.1);
}

.chart-preview-box .info {
	position: relative;
	z-index: 10;
	padding: 25px;
}

.chart-preview-box .info .label {
	margin-bottom: 7px;
	color: rgba(255,255,255,0.75);
	font-weight: 500;
	font-size: 1.07692307692rem;
}

.chart-preview-box .info .value {
	display: flex;
	align-items: center;
	color: rgba(255,255,255,1);
}

.chart-preview-box .info .value .price,
.chart-preview-box .info .value .chg {
	font-family: 'Arimo', sans-serif;
}

.chart-preview-box .info .value .price {
	font-weight: bold;
	font-size: 2rem;
	margin-right: 10px;
}

.chart-preview-box .info .value .chg {
	font-weight: 500;
	font-size: 16px;
	color: #45bf4e;
}

.chart-preview-box .breadth {
	background: #27272a;
	color: rgba(255,255,255,0.9);
	padding: 0px 8px;
	font-weight: 500;
	display: inline-block;
	margin-top: 10px;
	font-size: 0.84615384615rem;
	position: absolute;
	right: 10px;
	top: 5px;
	z-index: 999999999;
	line-height: 24px;
	border-radius: 4px;
}

.chart-preview-box .chart {
	position: absolute;
	top: 0;
	left: 0;
	right: -1%;
	bottom: 0;
}


/*
* Content Box Item list
*/
.content-box.box-list-box .content-box__body {
	display: flex;
	overflow: hidden;
}

.app.mobile .content-box.box-list-box .content-box__body {
	display: block;
}

.content-box.box-list-box .empty-content {
	flex: 1 0;
}

.content-box.box-list-box .content-box__body > div {
	border-right: 1px rgba(255,255,255,0.1) solid;
}

.app.mobile .content-box.box-list-box .content-box__body > div {
	border-right: 0;
}

.content-box.box-list-box .content-box__body > div:last-child {
	border-right: 0;
}

.content-box.box-list-box .content-box__body .box-select {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex: 1 0 50%;
}

.app.mobile .content-box.box-list-box .content-box__body .box-select {
	border-bottom: 1px rgba(255,255,255,0.1) solid;
}

.content-box.box-list-box .content-box__body .box-preview {
	flex: 1 0 50%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	justify-content: center;
}

.app.mobile .content-box.box-list-box .content-box__body .box-select,
.app.mobile .content-box.box-list-box .content-box__body .box-preview {
	height: 450px;
}

.content-box.box-list-box .content-box__body .box-preview .preview-message {
	color: rgba(255,255,255,0.5);
	align-self: center;
}

.content-box.box-list-box .content-box__body .box-preview .list-table {
	overflow: hidden;
	flex: 1 0;
	display: flex;
	flex-direction: column;
}

.content-box.box-list-box .content-box__body .box-preview .list-table .list-table__body {
	overflow: hidden;
	overflow-y: scroll;
}

.content-box.box-list-box .box-list {
	padding: 15px;
	overflow-y: auto;
	position: relative;
	flex: 1 0;
}

.content-box.box-list-box .box-list > div {
	background: rgba(255,255,255,0.05);
	border-radius: 5px;
	padding: 15px 20px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	cursor: pointer;
	border: 2px transparent solid;
}

.content-box.box-list-box .box-list > div.selected,
.content-box.box-list-box .box-list > div.selected:hover {
	border-color: rgba(255,255,255,0.1);
	background: rgba(255,255,255,0.1);
}

.content-box.box-list-box .box-list > div:hover {
	background: rgba(255,255,255,0.075);
}

.content-box.box-list-box .box-list > div:last-child {
	margin-bottom: 0;
}

.content-box.box-list-box .box-list > div > .attributes {
	flex: 1 0;
}

.content-box.box-list-box .box-list > div .title {
	line-height: 26px;
}

.content-box.box-list-box .box-list > div .title > * {
	display: inline-block;
}

.content-box.box-list-box .box-list > div .title .name {
	font-size: 1.15384615385rem;
	font-weight: bold;
}

.content-box.box-list-box .box-list > div .title .change {
	padding: 0;
	border-radius: 3px;
	color: rgba(255,255,255,0.5);
	font-weight: 500;
	margin-left: 10px;
	font-weight: bold;
}

.content-box.box-list-box .box-list > div .infos {
	font-size: 0.84615384615rem;
	color: rgba(255,255,255,0.4);
	line-height: 24px;
	height: 24px;
}

.content-box.box-list-box .box-list > div .infos > span {
	margin-right: 12px;
	position: relative;
}

.content-box.box-list-box .box-list > div .infos > span:after {
	content: '';
	display: block;
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	right: -7px;
	top: 50%;
	transform: translateY(-50%);
}

.content-box.box-list-box .box-list > div .infos > span:last-child {
	margin-right: 0;
}

.content-box.box-list-box .box-list > div .infos > span:last-child:after {
	display: none;
}

.content-box.box-list-box .box-list > div .user {
	height: 36px;
	line-height: 34px;
	border: 1px rgba(255,255,255,0.05) solid;
	padding: 0 15px 0 10px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.content-box.box-list-box .box-list > div .user:hover {
	border: 1px rgba(255,255,255,0.1) solid;
}

.content-box.box-list-box .box-list > div .user .avatar {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	margin-right: 7px;
	overflow: hidden;
}

.content-box.box-list-box .box-list > div .user .avatar img {
	width: 100%;
	height: auto;
}

.content-box.box-list-box .box-list > div .user .username {
	font-weight: bold;
	columns: rgba(255,255,255,0.55);
	font-size: 0.92307692307rem;
}


/*
* Algo Mode
*/
.algo-mode {
	display: none;
}

.algo-mode.active {
	display: block;
}


/*
* Content Box OBOS
*/
.content-obos-box {
	display: flex;
	min-height: 358px;
}

.app.mobile .content-obos-box {
	display: block;
}

.content-obos-box .obos-side {
	flex: 0 0 30%;
	border-right: 1px rgba(255,255,255,0.1) solid;
	padding: 22px;
	position: relative;
}

.app.mobile .content-obos-box .obos-side {
	border-right: 0;
	padding: 15px;
	border-bottom: 1px rgba(255,255,255,0.1) solid;
}

.content-obos-box .obos-title {
	font-size: 1.23076923rem;
	font-weight: 600;
	margin-bottom: 15px;
	color: rgba(255,255,255,0.8);
}

.content-obos-box .obos-score-container > div {
	border-radius: 4px;
	background: rgba(255,255,255,0.04);
	margin-bottom: 12px;
	padding: 22px 22px;
	cursor: pointer;
	position: relative;
	border: 2px transparent solid;
}

.content-obos-box .obos-score-container > div:last-child {
	margin-bottom: 0px;
}

.content-obos-box .obos-score-container > div.selected,
.content-obos-box .obos-score-container > div.selected:hover {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.1);
}

.content-obos-box .obos-score-container > div:hover {
	background: rgba(255,255,255,0.06);
}

.content-obos-box .obos-score-container > div:active {
	background: rgba(255,255,255,0.05);
}

.content-obos-box .obos-score-container > div .label {
	margin-bottom: 10px;
	font-weight: 500;
	color: rgba(255,255,255,0.75);
}

.content-obos-box .obos-score-container > div .value {
	display: flex;
	line-height: 24px;
}

.content-obos-box .obos-score-container > div .value .score {
	font-weight: bold;
	font-size: 22px;
}

.content-obos-box .obos-score-container > div .value .change {
	font-weight: 500;
	font-size: 14px;
	color: rgba(255,255,255,0.5);
	margin-left: 10px;
}

.content-obos-box .obos-chart {
	flex: 1 0;
	display: flex;
	flex-direction: column;
	position: relative;
}

.app.mobile .content-obos-box .obos-chart {
	min-height: 358px;
}

.content-obos-box .obos-chart-controls {
	flex: 0 0 61px;
	border-bottom: 1px rgba(255,255,255,0.1) solid;
	display: flex;
}

.content-obos-box .obos-controls {
	height: 36px;
	display: flex;
	margin-bottom: 20px;
	padding: 12px;
	margin-left: auto;
}

.content-obos-box .obos-controls > * {
	margin-right: 10px;
	flex: 1 0 0;
}

.content-obos-box .obos-controls > *:last-child {
	margin-right: 0;
}

.content-obos-box .obos-chart-content {
	flex: 1 0;
	position: relative;
}

.content-obos-box .obos-score-thresholds {
	height: 47px;
	padding: 10px 15px;
	font-size: 0.846153846rem;
	font-weight: 600;
	position: absolute;
	top: 60px;
	left: 0px;
	display: none;
}

.content-obos-box .obos-score-thresholds.visible {
	display: block;
}

.content-obos-box .obos-score-thresholds > * {
	display: inline-block;
}

.content-obos-box .obos-score-thresholds > .label {
	color: rgba(255,255,255,0.6);
	margin-right: 10px;
}

.content-obos-box .obos-score-thresholds > .value {
	background: rgba(255,255,255,0.05);
	color: rgba(255,255,255,0.75);
	border-radius: 13px;
	padding: 0 15px;
	padding-left: 25px;
	line-height: 26px;
	margin-right: 5px;
	position: relative;
}

.content-obos-box .obos-score-thresholds > .value:before {
	content: '';
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	left: 10px;
}

.content-obos-box .obos-score-thresholds > .value.os:before {
	background: #1787fc;
}

.content-obos-box .obos-score-thresholds > .value.ob:before {
	background: #fc2e1c;
}


/*
* Tab Switcher Switcher
*/
.tab-switcher {
	padding: 13px;
	overflow: hidden;
	overflow-y: scroll;
	white-space: nowrap;
}

.tab-switcher > div {
	display: inline-block;
	font-weight: 500;
	line-height: 30px;
	border-radius: 10px;
	padding: 2px 15px;
	margin-right: 6px;
	cursor: pointer;
	color: rgba(255,255,255,0.6);
	user-select: none;
}

.tab-switcher > div:hover {
	color: rgba(255,255,255,0.9);
	background: rgba(255,255,255,0.1);
}

.tab-switcher > div:active {
	background: rgba(255,255,255,0.15);
}

.tab-switcher > div.selected {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

.content-box .tab-switcher {
	border-bottom: 1px rgba(255,255,255,0.05) solid;
}

.tab-switcher2 {
	padding: 8px;
	overflow: hidden;
	white-space: nowrap;
}

.tab-switcher2 > div {
	display: inline-block;
	font-weight: 500;
	line-height: 30px;
	border-radius: 10px;
	padding: 2px 15px;
	margin-right: 6px;
	cursor: pointer;
	color: rgba(255,255,255,0.6);
	user-select: none;
}

.tab-switcher2 > div:hover {
	color: rgba(255,255,255,0.9);
	background: rgba(255,255,255,0.1);
}

.tab-switcher2 > div:active {
	background: rgba(255,255,255,0.15);
}

.tab-switcher2 > div.selected {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

.content-box .tab-switcher2 {
	border-bottom: 1px rgba(255,255,255,0.05) solid;
	
}

.qb-industry-select {
	padding: 16px;
	overflow: hidden;
	white-space: nowrap;
	border-radius: 7px;
	margin-bottom: 7px;
}















/*
* Keystats Slider
*/
.keystats-slider {
	height: 81px;
    position: relative;
}

.keystats-slider .slider-content {
	padding: 10px 15px;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll;
}

.keystats-slider .next-button,
.keystats-slider .prev-button {
	content: '';
	position: absolute;
	display: none;
	top: 0;
	bottom: 0;
	width: 60px;
	cursor: pointer;
}

.keystats-slider .prev-button {
	left: 0;
	background: linear-gradient(90deg, rgba(14,14,18,1) -1%, rgba(14,14,18f,0) 60%);
}

.keystats-slider .next-button {
	right: 0;
	background: linear-gradient(90deg, rgba(14,14,18,0) -1%, rgba(14,14,18,1) 60%);
}

.keystats-slider .next-button:before,
.keystats-slider .prev-button:before {
	font-family: 'SL-Icons';
	font-size: 16px;
	color: #000;
	display: block;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	background: rgba(255,255,255,1);
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.keystats-slider .prev-button:before {
	content: '\ea7f';
}

.keystats-slider .next-button:before {
	content: '\ea20';
}

.keystats-slider.next-button-active .next-button {
	display: block;
}

.keystats-slider.prev-button-active .prev-button {
	display: block;
}

.keystats-slider .next-button:active:before,
.keystats-slider .prev-button:active:before {
	background: rgba(255,255,255,0.8);
}

.keystats-slider .slider-content::-webkit-scrollbar {
	display: none;
}

.keystats-slider .slider-content > div {
	min-width: 120px;
	height: 60px;
	background: rgba(255,255,255,0.05);
	border: 1px transparent solid;
	border-radius: 4px;
	display: inline-block;
	margin-right: 10px;
	padding: 10px 12px;
	position: relative;
}

.keystats-slider .slider-content > div.selected,
.keystats-slider .slider-content > div.selected:hover {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.1);
}

.keystats-slider > div .label {
	color: rgba(255,255,255,0.75);
	font-size: 0.92307692307rem;
	margin-bottom: 5px;
	line-height: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.keystats-slider > div .value {
	font-weight: bold;
	font-size: 18px;
	line-height: 20px;
}


/*
* Keystats Widget
*/
.keystats-widget {
	height: 400px;
}

.keystats-widget .keystats-slider {
	border-bottom: 1px rgba(255,255,255,0.05) solid;
}

.keystats-widget .keystats-slider .slider-content > div {
	cursor: pointer;
}

.keystats-widget .keystats-slider .slider-content > div:hover {
	background: rgba(255,255,255,0.1);
}

.keystats-widget .keystats-chart {
	height: 310px;
}


/*
* KeyStats List
*/
.keystats-box {
	padding: 15px 20px;
	overflow: hidden;
}

.keystats-box ul li {
	min-width: 110px;
	display: inline-block;
	padding: 10px 12px;
	margin-right: 7px;
	overflow: hidden;
	background: rgba(255,255,255,0.075);
	border-radius: 4px;
}

.keystats-box ul li > div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.keystats-box ul li .label {
	font-size: 0.846153846rem;
	color: rgba(255,255,255,0.45);
	margin-bottom: 5px;
	height: 13px;
	font-weight: 500;
}

.keystats-box ul li .value {
	font-size: 1.61538462rem;
	color: #fff;
	font-weight: bold;
	height: 25px;
	font-family: 'Arimo', sans-serif;
}

.keystats-box ul li.load-placeholder > div {
	background: rgba(255,255,255,0.1);
	display: block;
}

.keystats-box ul li.load-placeholder .label {
	width: 60px;
}

.keystats-box ul li.load-placeholder .value {
	width: 70px;
}


/*
* Profile Box
*/
.profile-box {
	padding: 25px;
}

.profile-box > * {
	margin-bottom: 20px;
}

.profile-box > *:last-child {
	margin-bottom: 0;
}

.profile-box .profile-categories {
	display: flex;
	line-height: 1.2rem;
}

.profile-box .profile-categories a {
	flex: 1 0;
	margin-right: 10px;
	background: rgba(255,255,255,0.05);
	border-radius: 2px;
	padding: 15px;
	padding-right: 40px;
	display: block;
	position: relative;
	overflow: hidden;
}

.profile-box .profile-categories a:before {
	content: '\ea20';
	font-family: 'SL-Icons';
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.3);
	position: absolute;
	font-size: 1.07692308rem;
}

.profile-box .profile-categories a:hover {
	background: rgba(255,255,255,0.075);
}

.profile-box .profile-categories a:active {
	background: rgba(255,255,255,0.06);
}

.profile-box .profile-categories a .label {
	font-size: 0.846153846rem;
	color: rgba(255,255,255,0.5);
	margin-bottom: 5px;
}

.profile-box .profile-categories a .value {
	font-size: 1rem;
	font-weight: bold;
	color: rgba(255,255,255,0.75);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-box .profile-categories a:last-child {
	margin-right: 0;
}

.profile-box .profile-list {
	padding: 5px;
}

.profile-box .profile-list > * {
	position: relative;
	padding-left: 30px;
	display: block;
	margin-bottom: 15px;
}

.profile-box .profile-list > *:last-child {
	margin-bottom: 0;
}

.profile-box .profile-list div {
	color: rgba(255,255,255,0.75);
}

.profile-box .profile-list p {
	margin-bottom: 7px;
}

.profile-box .profile-list p:last-child {
	margin-bottom: 0;
}

.profile-box .profile-list > *:before {
	position: absolute;
	left: 0;
	top: 1px;
	font-family: 'SL-Icons';
	font-size: 1rem;
}

.profile-box .profile-list > div:before {
	color: rgba(255,255,255,0.5);
}

.profile-box .profile-list .address:before {
	content: '\ea21';
}

.profile-box .profile-list .employees:before {
	content: '\ea22';
}

.profile-box .profile-list .ceo:before {
	content: '\ea27';
}

.profile-box .profile-list .website:before {
	content: '\ea23';
}

.profile-box .profile-list .phone:before {
	content: '\ea24';
}

.profile-box .profile-description {
	color: rgba(255,255,255,0.5);
}

.profile-box .profile-description p {
	display: -webkit-box;
	font-size: 0.923076923rem;
	line-height: 1.4rem;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: rgba(255,255,255,0.75);
	text-overflow: ellipsis;
}

.profile-box .profile-description .view-description-link {
	margin-top: 10px;
	display: inline-block;
	color: rgba(255,255,255,0.5);
	font-size: 0.923076923rem;
	position: relative;
	padding-right: 15px;
}

.profile-box .profile-description .view-description-link:hover {
	color: rgba(255,255,255,0.75);
}

.profile-box .profile-description .view-description-link:after {
	content: '\ea20';
	font-size: 1rem;
	font-family: 'SL-Icons';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}


/*
* Score OBOS Markup
*/
.score-label-obos {
	position: relative;
}

.score-label-obos:before {
	font-family: 'SL-Icons';
	position: absolute;
	left: 1px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	margin-top: 1px;
}

.score-label-obos--ob {
	color: #45be4e !important;
}

.score-label-obos--ob:before {
	content: '\ea26';
}

.score-label-obos--os {
	color: #ea1b38 !important;
}

.score-label-obos--os:before {
	content: '\ea25';
}

.score-label-obos .score-timeframes > div {
	/*border: 1px rgba(247,51,51,0.6) solid;*/
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.6);
}

.score-label-obos .score-timeframes > div {
	border-radius: 2px;
	display: inline-block;
	margin-left: 3px;
	vertical-align: top;
}

.score-label-obos .score-timeframes {
	display: inline-block;
	margin-left: 2px;
	vertical-align: top;
}


/*
* Scores Summary List
*/
.scores-summary-list {
	padding: 15px;
}

.scores-summary-list > div {
	padding: 20px 30px;
	border-radius: 6px;
	background: rgba(255,255,255,0.05);
	margin-bottom: 7px;
}

.scores-summary-list > div:last-child {
	margin-bottom: 0;
}

.scores-summary-list > div .score-title {
	font-weight: 500;
	color: rgba(255,255,255,0.6);
}

.scores-summary-list > div .score-meter {
	margin: 0 auto;
	display: flex;
	width: 100%;
	max-width: none;
	align-items: center;
}

.scores-summary-list > div .score-meter > div {
	flex: 1 0;
}

.scores-summary-list > div .score-meter > .score,
.scores-summary-list > div .score-meter:before {
	font-size: 2rem;
	text-align: left;
}

.scores-summary-list > div .score-meter > .box {
	flex: 0 0 70%;
}


/*
* Content Box Settings
*/
.content-box.content-box--settings .content-box__body {
	padding: 30px;
}

.content-box.content-box--settings .content-box__body .body__group {
	margin-bottom: 50px;
}

.content-box.content-box--settings .content-box__body .body__group:last-child {
	margin-bottom: 0;
}

.content-box.content-box--settings .content-box__body h3 {
	font-size: 1.2rem;
	color: rgba(255,255,255,0.8);
	font-weight: 600;
	margin-bottom: 20px;
}

.content-box.content-box--settings .content-box__body .form {
	padding-top: 5px;
}

.content-box--settings .edit-account-box {
	border-radius: 5px;
	background: rgba(255,255,255,0.05);
	border: 2px rgba(255,255,255,0.05) solid;
	position: relative;
}

.content-box--settings .edit-account-box .box__content {
	display: flex;
	padding: 25px;
}

.content-box--settings .edit-account-box .box__avatar {
	flex: 0 0 110px;
	position: relative;
}

.content-box--settings .edit-account-box .box__avatar label {
	position: relative;
	display: block;
}

.content-box--settings .edit-account-box.edit-account-box--active .box__avatar {
	cursor: pointer;
}

.content-box--settings .edit-account-box .box__avatar .avatar__img {
	background: rgba(255,255,255,0.075);
	width: 110px;
	height: 110px;
	border-radius: 50%;
	overflow: hidden;
    background-size: cover;
    background-position: center;
}

.content-box--settings .edit-account-box .box__avatar input[type=file] {
	display: none;
}

.content-box--settings .edit-account-box .box__avatar .avatar__add {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 50%;
	display: block;
	background: #0d42fb;
	position: absolute;
	right: 0;
	bottom: 0;
	cursor: pointer;
	display: block;
}

.content-box--settings .edit-account-box .box__avatar label:active .avatar__add,
.content-box--settings .edit-account-box .box__avatar .avatar__add:active {
	background: #0f39cb;
}

.content-box--settings .edit-account-box .box__avatar .avatar__add:after {
	font-family: 'SL-Icons';
	content: '\ea03';
	color: #fff;
	font-size: 1.38461538rem;
}

.content-box--settings .edit-account-box .box__avatar .avatar__remove {
	padding: 8px 0;
	font-weight: bold;
	text-align: center;
	font-size: 0.846153846rem;
	color: rgba(255,255,255,0.5);
	display: block;
	cursor: pointer;
	margin-top: 5px;
}

.content-box--settings .edit-account-box .box__avatar .avatar__remove:hover {
	color: rgba(255,255,255,0.75);
}

.content-box--settings .edit-account-box .box__avatar.box__avatar--empty .avatar__remove {
	display: none;
}

.content-box--settings .edit-account-box .box__details {
	flex: 1 0 auto;
	padding-top: 5px;
	margin-left: 30px;
}

.content-box--settings .edit-account-box.edit-account-box--active .box__details {
	display: none;
}

.content-box--settings .edit-account-box .box__details .details__field {
	margin-bottom: 20px;
}

.content-box--settings .edit-account-box .box__details .details__field:last-child {
	margin-bottom: 0;
}

.content-box--settings .edit-account-box .box__details .details__field .field__label {
	text-transform: uppercase;
	font-size: 0.846153846rem;
	font-weight: bold;
	color: rgba(255,255,255,0.5);
	margin-bottom: 3px;
}

.content-box--settings .edit-account-box .box__details .details__field .field__value {
	font-size: 1.07692308rem;
	color: rgba(255,255,255,0.75);
}

.content-box--settings .edit-account-box .box__edit-button {
	position: absolute;
	right: 15px;
	top: 15px;
}

.content-box--settings .edit-account-box.edit-account-box--active .box__edit-button {
	display: none;
}

.content-box--settings .edit-account-box .box__form {
	flex: 1 0 auto;
	margin-left: 30px;
	display: none;
}

.content-box--settings .edit-account-box.edit-account-box--active .box__form {
	display: block;
}

.content-box--settings .edit-account-box .box__controls {
	padding: 20px 25px;
	border-top: 1px rgba(255,255,255,0.05) solid;
	display: none;
	justify-content: flex-end;
}

.content-box--settings .edit-account-box.edit-account-box--active .box__controls {
	display: flex;
}

.content-box--settings .edit-account-box .box__controls .controls__right {
	flex: 0 0 50%;
	text-align: right;
}

.content-box--settings .edit-account-box .box__controls > * > * {
	margin-right: 10px;
}

.content-box--settings .edit-account-box .box__controls > * > *:last-child {
	margin-right: 0;
}

.content-box--settings .select-list {
	margin-bottom: 20px;
}

.content-box--settings .select-list:last-child {
	margin-bottom: 0;
}


/*
* Tradingview Light Chart
*/
.content-box--lightchart .content-box__body {
	display: flex;
	flex-direction: column;
	height: 350px;
}

.content-box--lightchart .content-box__body .timeframes {
	flex: 0 0 60px;
	border-bottom: 1px rgba(255,255,255,0.05) solid;
}

.content-box--lightchart .content-box__body .chart {
	padding: 0 5px 10px 0;
	flex: 1 0;
}

.content-box--lightchart .content-box__body .empty {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	margin: 0;
}

.content-box--lightchart-big div.content-box__body {
	height: 400px;
}


/*
* Tradingview Chart
*/
.content-box.content-box--tradingview {
	overflow: hidden;
}

.content-box.content-box--tradingview .content-box__body {
	height: 500px;
}

.content-box--tradingview.content-box--loading #tradingview-chart {
	display: none;
}

.content-box--tradingview #tradingview-chart {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	overflow: hidden;
	height: 100%;
}

@keyframes add-box-open {
	to {
		transform: translateY(0);
	}
}


/*
* Content Box Bar
*/
.content-box .content-box__controls {
	height: 50px;
	display: block;
	border-bottom: 1px rgba(255,255,255,0.15) solid;
	background: rgba(0,0,0,0.5);
}

.content-box .content-box__controls ul.controls__labels-select-list {
	padding-left: 10px;
}

.content-box .content-box__controls ul.controls__labels-select-list > li {
	vertical-align: top;
	display: inline-block;
	margin: 10px 7px 10px 0;

}

.content-box .content-box__controls ul.controls__labels-select-list > li > div.item__label {
	height: 30px;
	line-height: 30px;
	padding: 0 15px;
	border-radius: 2px;
	background: rgba(255,255,255,0.075);
	display: block;
	font-size: 0.923076923rem;
	font-weight: 600;
	position: relative;
	cursor: pointer;
	color: rgba(255,255,255,0.9);
}

.content-box .content-box__controls ul.controls__labels-select-list > li > div:hover {
	background: rgba(255,255,255,0.09);
}

.content-box .content-box__controls ul.controls__labels-select-list > li > div:active {
	background: rgba(255,255,255,0.1);
}

.content-box .content-box__controls ul.controls__labels-select-list > li.item > div.item__label {
	padding-left: 28px;
}

.content-box .content-box__controls ul.controls__labels-select-list > li.item-add {
	position: relative;
	z-index: 999;
}

.content-box .content-box__controls ul.controls__labels-select-list > li.item-add > div.item__label {
	padding-left: 0;
	padding-right: 0;
	width: 30px;
	z-index: 9999;
	display: block;
}

.content-box .content-box__controls ul.controls__labels-select-list > li.item .item__bullet {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	display: block;
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.3);
}

.content-box .content-box__controls ul.controls__labels-select-list > li.item-add > div.item__label:after {
	content: '';
	background-position: -92px -66px;
	display: block;
	width: 9px;
	height: 9px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
	opacity: 0.8;
}

/*
* Chart Item Add Box
*/
.content-box .content-box__controls ul.controls__labels-select-list > li.item-add .item-add__box {
	position: absolute;
	width: 320px;
	padding: 15px;
	background: #1c1c1c;
	top: 100%;
	left: 0;
	border-radius: 2px;
	margin-top: 5px;
	display: none;
}

.content-box .content-box__controls ul.controls__labels-select-list > li.item-add.item-add--open .item-add__box {
	display: block;
}

.content-box .content-box__controls ul.controls__labels-select-list > li.item-add .item-add__box ul li {
	padding: 5px 5px;
	color: rgba(255,255,255,0.7);
	font-weight: 600;
	font-size: 0.923076923rem;
	cursor: pointer;
}

.content-box .content-box__controls ul.controls__labels-select-list > li.item-add .item-add__box ul li.item-add__box__item--selected,
.content-box .content-box__controls ul.controls__labels-select-list > li.item-add .item-add__box ul li.item-add__box__item--selected:hover {
	color: #4ba3f7;
}

.content-box .content-box__controls ul.controls__labels-select-list > li.item-add .item-add__box ul li:hover {
	color: rgba(255,255,255,0.9);
}

/*
* Grid view
*/
.grid-view {
	display: flex;
	margin: -10px -10px 10px -10px;
	flex-wrap: wrap;
}

.grid-view-highlight .content-box {
	height: 900px;
	display: flex;
	flex-direction: column;
}

.app.mobile .grid-view-highlight .content-box {
	height: auto;
	min-height: 450px;
}

.grid-view-dashboard .content-box {
	height: 450px;
	display: flex;
	flex-direction: column;
}

.app.mobile .grid-view-dashboard .content-box {
	height: auto;
	min-height: 450px;
}

.grid-view-dashboard .content-box .content-box__body {
	flex: 1 0;
}

.grid-view.grid-view-algo .grid-view__column {
	max-width: calc(50% - 20px);
}

.grid-view .grid-view__column {
	flex-shrink: 0;
	flex-grow: 1;
	flex-basis: 0;
	margin: 10px;
	overflow: hidden;
}

.grid-view .grid-view__column:first-child {
	padding-left: 0;
}

.grid-view .grid-view__column:last-child {
	padding-right: 0;
}

.grid-view .grid-view__column.grid-view__column--1 {
	max-width: calc(100% - 20px);
	flex-basis: 100%;
}

.grid-view .grid-view__column.grid-view__column--2 {
	flex-basis: 45%;
	max-width: calc(50% - 20px);
	flex-grow: 1;
}

.grid-view .grid-view__column.grid-view__column--3 {
	flex-basis: 33.33%;
	flex-grow: 0;
}

.grid-view .grid-view__column.grid-view__column--4 {
	flex-basis: 25%;
	flex-grow: 0;
}

.grid-view .grid-view__column.grid-view__column--5 {
	flex-basis: 20%;
	flex-grow: 0;
}

.grid-view .grid-view__column > .content-box:last-child {
	margin-bottom: 0;
}

.grid-view.dual .grid-view__column {
	flex-basis: 45%;
	max-width: calc(50% - 20px);
	flex-grow: 1;
}

.grid-view.dual .grid-view__column:nth-child(-n+2) {
	max-width: none;
}

@media only screen and (max-width: 1000px) {
	.grid-view > div.grid-view__column {
		flex-basis: calc(100% - 20px) !important;
		flex-grow: 1 !important;
		max-width: none !important;
	}
}


/*
* Summary Box
*/
.summary-box {
	padding: 25px;
}

.summary-box .summary-label {
	font-size: 1rem;
	color: rgba(255,255,255,0.6);
	margin-bottom: 5px;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.summary-box .summary-label .load-placeholder {
	width: 60%;
	background: rgba(255,255,255,0.1);
	height: 20px;
	display: block;
	border-radius: 2px;
}

.summary-box .summary-value {
	font-size: 2rem;
	font-weight: bold;
}

/*
* Score view
*/
.score-view {
	display: flex;
	padding: 20px;
	height: 160px;
}

.score-view .score-view__list {
	flex: 0 0 40%;
	order: 1;
	font-size: 0.923076923rem;
	margin-right: 10px;
}

.score-view .score-view__list ul li {
	line-height: 20px;
	height: 20px;
	position: relative;
	margin-bottom: 5px;
	padding-right: 25px;
}

.score-view .score-view__list ul li:last-child {
	margin-bottom: 0px;
}

.score-view .score-view__list ul li .score-view__list__label {
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgba(255,255,255,0.5);
}

.score-view .score-view__list ul li .score-view__list__label span:hover {
	color: rgba(255,255,255,0.9);
}

.score-view .score-view__list ul li .score-view__list__score {
	height: 20px;
	min-width: 30px;
	border-radius: 10px;
	display: block;
	line-height: 20px;
	text-align: center;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: bold;
	font-size: 0.846153846rem;
	padding: 0 5px;
}

.score-view .score-view__list ul li.score--loading .score-view__list__score {
	background: rgba(255,255,255,0.1);
	animation: loadPlaceholderOpacity 1.25s infinite;
}

.score-view .score-view__gauge {
	flex: 1 0 0;
	order: 2;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.score-view .score-view__list ul li.score--value-0 .score-view__list__score {
	background-color: rgba(255,255,255,0.15);
}

.score-view .score-view__list ul li.score--value-1 .score-view__list__score {
	background-color: hsla(1, 100%, 50%, 0.15);
}

.score-view .score-view__list ul li.score--value-2 .score-view__list__score {
	background-color: hsla(30, 100%, 50%, 0.15);
}

.score-view .score-view__list ul li.score--value-3 .score-view__list__score {
	background-color: hsla(60, 100%, 50%, 0.15);
}

.score-view .score-view__list ul li.score--value-4 .score-view__list__score {
	background-color: hsla(89, 100%, 50%, 0.15);
}

.score-view .score-view__list ul li.score--value-5 .score-view__list__score {
	background-color: hsla(1191, 100%, 50%, 0.15);
}

.score-view .score-view__gauge .score-view__gauge__label {
	background: rgba(255,255,255,0);
	color: rgba(255,255,255,0.5);
	border-radius: 2px;
	padding: 0 8px;
	height: 22px;
	line-height: 22px;
	display: inline-block;
	margin-top: 10px;
	font-size: 0.923076923rem;
	overflow: hidden;
}

.score-view .score-view__gauge .score-view__gauge__label.score-label-obos {
	padding-left: 16px;
	font-weight: bold;
}

.score-view .score-view__gauge .score-view__gauge__label.score-label-obos:before {
	font-size: 0.769230769rem;
}

.score-view .score-view__gauge .score-view__gauge__label.score-label-obos .score-timeframes > div {
	height: 22px;
	line-height: 14px;
	font-size: 0.846153846rem;
	padding: 4px 5px;
}


/*
* Gauge
*/
.gauge {
  padding: 0;
}

.gauge svg {
  max-width: 100%;
}

.gauge path {
  stroke-width: 75;
  fill: none;
}

.gauge path.bg {
  stroke: rgba(255,255,255,0.2);
}

.gauge text {
  fill: #fff;
  font-weight: bold;
  text-anchor: middle;
  alignment-baseline: middle;
  font-size: 150px;
}


/*
* Gauge
*/
.gauge-box {
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
}

.gauge-box:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

/*.gauge-box.gauge--load .gauge-wrap .gauge-bg,
.gauge-box.gauge--load .gauge-wrap.gauge--load .gauge-wrap-after,
.gauge-box.gauge--load .gauge-wrap .gauge-wrap-before {
	animation: loadPlaceholderOpacity 1.25s infinite;
}*/

.gauge-wrap {
    width: 170px;
    height: 85px;
    margin-bottom: 7px;
    display: inline-block;
    position: relative;
	vertical-align: middle;
}

.gauge-wrap .gauge-value {
 	position: absolute;
 	transform: translateX(-50%);
 	color: #fff;
 	left: 50%;
 	bottom: 0px;
 	font-weight: bold;
 	font-size: 2.2rem;
 	z-index: 20;
}

.gauge-wrap .gauge-wrap-before {
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: -7px;
    left: 0px;
    clip: rect(8px, 16px, 16px, 0px);
    border-radius: 8px;
	z-index: 15;
	background: #363636;
	display: none;
}

.gauge-wrap .gauge-wrap-after {
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: -7px;
    right: 0px;
    clip: rect(8px, 16px, 16px, 0px);
    border-radius: 8px;
	z-index: 5;
	background: #363636;
	display: none;
}

.gauge-wrap .gauge-core {
    position: relative;
    height: inherit;
    width: inherit;
	z-index: 10;
	overflow: hidden;
}

.gauge-wrap .gauge-core .gauge-bg {
    position: absolute;
    width: 170px;
    height: 85px;
	border-radius: 170px 170px 0px 0px;
	z-index: 0;
	background: #363636;
}

.gauge-wrap .gauge-core .gauge-cap {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 142px;
    height: 71px;
	border-radius: 71px 71px 0px 0px;
	z-index: 5;
	background: #141414;
}

.gauge-wrap .gauge-core .gauge-active-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 170px;
    height: 170px;
    overflow: hidden;
    border-radius: 85px;
    transform: rotate(0deg);
    transition: transform 400ms ease-in-out;
}

.gauge-wrap .gauge-core .gauge-active-wrap .gauge-active {
    top: 85px;
    position: absolute;
    width: 170px;
    height: 85px;
    overflow: visible;
	border-radius: 0px 0px 170px 170px;
	z-index: 1;
}

.gauge-wrap .gauge-core .gauge-active-wrap .gauge-active .gauge-active-before {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: inherit;
    top: -7px;
    left: 0px;
    clip: rect(0px, 16px, 8px, 0px);
    border-radius: 8px;
	z-index: 7;

	display: none;
}


/*
* Filter Button Box
*/
.filter-button-box {
	display: inline-block;
	position: relative;
}

.filter-button-box .filter-count {
	position: absolute;
	width: 24px;
	height: 24px;
	line-height: 20px;
	text-align: center;
	right: -8px;
	top: -8px;
	font-weight: bold;
	border-radius: 50%;
	background: #fff;
	z-index: 10;
	background: #0d42fb;
	border: 2px #222429 solid;
	font-size: 0.846153846rem;
	display: none;
}

.filter-button-box.filter-button-box--show .filter-count {
	display: block;
}


/*
* Filter list
*/
.modal__box ul.filter-list {
	padding: 5px 0;
}

ul.filter-list--hidden {
	display: none;
}

ul.filter-list > li {
	display: flex;
	border-bottom: 1px rgba(255,255,255,0.05) solid;
	align-items: center;
	position: relative;
	border-radius: 2px;
	padding: 10px 0;
	padding-right: 60px;
}

ul.filter-list > li.item--hidden {
	display: none;
}

ul.filter-list > li.filter--selected {
	background: rgba(36,122,251,0.075);
}

ul.filter-list > li:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

ul.filter-list li > .item__label {
	flex: 0 1 35%;
	padding: 10px 30px;
	padding-right: 0;
	color: rgba(255,255,255,0.75);
	font-weight: bold;
	font-size: 0.923076923rem;
	position: relative;
}

ul.filter-list li > .item__label .label__note {
	background: rgba(255,255,255,0.1);
	border-radius: 2px;
	padding: 4px 8px;
	display: inline-block;
	color: rgba(255,255,255,0.75);
	margin-left: 10px;
	font-size: 0.846153846rem;
}

ul.filter-list li > .item__label .label__info {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
}

ul.filter-list li > .item__label .label__info:hover {
	color: rgba(255,255,255,0.7);
}

ul.filter-list li > .item__label .label__info:after {
	content: '\ea05';
	font-family: 'SL-Icons';
}

ul.filter-list li > .item__value {
	flex: 1 0;
	height: 36px;
	display: none;
	padding-left: 10px;
}

ul.filter-list li > div.item__value--active {
	display: flex;
}

ul.filter-list li > div.item__value.input-field {
	display: block;
}

ul.filter-list li > div.item__value.input-field > input[type=text] {
	width: 250px;
}

ul.filter-list li > .item__value > * {
	display: inline-block;
	vertical-align: top;
	margin-right: 5px;
}

ul.filter-list li > .item__reset {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	font-size: 15px;
	border-radius: 2px;
	color: rgba(36,122,251,1);
	cursor: pointer;
	display: none;
	border-radius: 50%;
}

ul.filter-list li > .item__reset:hover {
	background-color: rgba(36,122,251,0.1);
}

ul.filter-list li > .item__reset:active {
	background-color: rgba(36,122,251,0.05);
}

ul.filter-list > li.filter--selected > .item__reset {
	display: block;
}

ul.filter-list li > .item__reset:before {
	content: '\ea1c';
	font-family: 'SL-Icons';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

ul.filter-list li > .item__reset:active {
	color: rgba(36,122,251,0.75);
}

ul.filter-list li .item__value input[type=text] {
	border: 0;
	padding: 10px;
	width: 80px;
	height: 36px;
	background: transparent;
	border: 1px rgba(255,255,255,0.2) solid;
	border-radius: 4px;
	display: inline-block;
	position: relative;
}

ul.filter-list li.is-percent input[type=text]:after {
	content: '%';
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
}

ul.filter-list li .item__value input[type=text]:focus {
	border-color: #237afb;
}

ul.filter-list li .slider-box {
	flex: 1 0;
	align-items: center;
	display: none;
}

ul.filter-list li .slider-box .box__slider {
	flex: 1 0;
	min-width: 50px;
	margin: 0 20px;
}

ul.filter-list li .slider-box.element--active {
	display: flex;
}

ul.filter-list li .single-input {
	display: none;
}

ul.filter-list li .single-input.element--active {
	display: block;
}

ul.filter-list li.is-percent .from-value,
ul.filter-list li.is-percent .to-value,
ul.filter-list li.is-percent .single-input {
	position: relative;
}

ul.filter-list li.is-percent .from-value:after,
ul.filter-list li.is-percent .to-value:after,
ul.filter-list li.is-percent .single-input:after {
	content: '%';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.7);
}

ul.filter-list li.is-percent .from-value input,
ul.filter-list li.is-percent .to-value input,
ul.filter-list li.is-percent .single-input input {
	padding-right: 25px;
}

ul.filter-list li > .item__keywords {
	flex: 1 0;
	height: 36px;
	padding-left: 10px;
	display: flex;
}

ul.filter-list li > .item__keywords .add {
	width: 36px;
	height: 36px;
	line-height: 20px;
	padding: 8px;
	text-align: center;
	display: block;
	border-radius: 4px;
	background: rgba(255,255,255,0.1);
	font-size: 0.923076923rem;
	font-weight: 600;
	cursor: pointer;
}

ul.filter-list li > .item__keywords .add:hover {
	background: rgba(255,255,255,0.15);
}

ul.filter-list li > .item__keywords .add:active {
	background: rgba(255,255,255,0.125);
}

ul.filter-list li > .item__keywords .add:before {
	content: '\ea03';
	font-family: 'SL-Icons';
	font-size: 14px;
	vertical-align: top;
}

ul.filter-list li > .item__keywords .add span {
	display: none;
	line-height: 20px;
	margin-left: 5px;
	vertical-align: top;
}

ul.filter-list li > .item__keywords.empty .add {
	width: auto;
	padding-left: 12px;
	padding-right: 17px;
}

ul.filter-list li > .item__keywords.active .add {
	display: none;
}

ul.filter-list li > .item__keywords.empty .add span {
	display: inline-block;
}

ul.filter-list li > .item__keywords .list {
	display: block;
}

ul.filter-list li > .item__keywords .list div {
	background: rgba(36,173,251,0.15);
    color: rgba(36,173,251,1);
    font-weight: bold;
    user-select: none;
    height: 36px;
    line-height: 20px;
    padding: 8px 26px 8px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 5px;
    font-size: 0.92307692307rem;
    position: relative;
    cursor: pointer;
}

ul.filter-list li > .item__keywords .list div:hover {
	background: rgba(36,173,251,0.2);
}

ul.filter-list li > .item__keywords .list div:active {
	background: rgba(36,173,251,0.175);
}

ul.filter-list li > .item__keywords .list div:after {
	content: '\ea19';
	font-family: 'SL-Icons';
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
    color: rgba(36,173,251,0.7);
}

ul.filter-list li > .item__keywords .list div:hover:after {
    color: rgba(36,173,251,0.9);
}

ul.filter-list li > .item__keywords.empty .list {
	display: none;
}

ul.filter-list li > .item__keywords .keyword-input {
	display: none;
	height: 36px;
	border: 1px rgba(255,255,255,0.2) solid;
	border-radius: 4px;
	margin-right: 7px;
}

ul.filter-list li > .item__keywords .keyword-input.focus {
	border-color: #237afb;
}

ul.filter-list li > .item__keywords .keyword-input input {
	background: transparent;
	border: 0;
	height: 34px;
	padding-left: 10px;
	display: inline-block;
	width: 80px;
	vertical-align: top;
}

ul.filter-list li > .item__keywords .keyword-input .submit {
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
	font-size: 0.92307692307rem;
}

ul.filter-list li > .item__keywords .keyword-input .submit:before {
	content: '\ea1d';
	font-family: 'SL-Icons';
}

ul.filter-list li > .item__keywords .keyword-input .submit:hover {
	color: rgba(255,255,255,0.7);
}

ul.filter-list li > .item__keywords .keyword-input .submit:active {
	color: rgba(255,255,255,0.6);
}

ul.filter-list li > .item__keywords.active .keyword-input {
	display: block;
}


/*
* Create Item Button
*/
.create-item-button {
	border: 2px solid rgba(255,255,255,0.1);
	border-radius: 4px;
	margin-bottom: 7px;
	padding: 18px 23px;
	position: relative;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.07692308rem;
	color: rgba(255,255,255,0.75);
	margin-bottom: 20px;
}

.create-item-button:hover {
	border-color: rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.9);
}

.create-item-button:active {
	border-color: rgba(255,255,255,0.15);
}

.create-item-button:after {
	content: '\ea03';
	font-family: 'SL-Icons';
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	color: rgba(255,255,255,0.5);
	text-align: center;
	font-size: 20px;
	border: 0;
}

.create-item-button:hover:after {
	color: rgba(255,255,255,0.7);
}


/*
* Select List
*/
.select-list > div {
	user-select: none;
	background: rgba(255,255,255,0.075);
	border-radius: 6px;
	margin-bottom: 7px;
	padding: 20px 25px;
	position: relative;
	cursor: pointer;
	border: 2px transparent solid;
}

.select-list > div:last-child {
	margin-bottom: 0px !important;
}

.select-list.big > div {
	padding: 25px 30px;
	margin-bottom: 10px;
}

.select-list.small {
	display: flex;
}

.select-list.small > div {
	flex: 1 0;
	margin: 0;
	margin-right: 15px;
	padding: 15px 20px;
	text-align: center;
}

.select-list.small > div .title {
	font-weight: bold;
}

.select-list.small > div:last-child {
	margin-right: 0;
}

.select-list > *:hover {
	background: rgba(255,255,255,0.1);
}

.select-list > *:active {
	background: rgba(255,255,255,0.09);
}

.select-list > *:after {
	content: '';
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px rgba(255,255,255,0) solid;
}

.select-list.small > *:after {
	right: 15px;
}

.select-list > *:last-child {
	margin: 0;
}

.select-list > .selected {
	border-color: #247afb;
	color: rgba(255,255,255,0.9);
}

.select-list > *.selected:after {
	content: '\ea1d';
	font-family: 'SL-Icons';
	color: rgba(255,255,255,1);
	background-color: #247afb;
	line-height: 18px;
	text-align: center;
	font-size: 8px;
	border: 0;
}

.select-list .title {
	font-weight: 600;
	font-size: 1.07692308rem;
	color: rgba(255,255,255,0.85);
}

.select-list.big .title {
	font-size: 1.23076923077rem;
}

.select-list .subtitle {
	color: rgba(255,255,255,0.5);
	margin-top: 5px;
}

.select-list > .is-private .title:before {
	content: '\ea6b';
	font-family: 'SL-Icons';
	margin-right: 7px;
	color: rgba(255,255,255,0.4);
}

.select-list .label {
	position: absolute;
	border-radius: 2px;
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.6);
	padding: 6px 12px;
	font-weight: 600;
	display: inline-block;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.846153846rem;
	text-transform: uppercase;
}

.select-list .selected .label {
	right: 47px;
}


/*
* Subscription Detail
*/
.subscription-box {
	margin: 20px;
	position: relative;
}

.subscription-box.load {
	height: 250px;
}

.subscription-box .detail {
	background: rgba(255,255,255,0.05);
	border: 1px transparent solid;
	padding: 25px;
	border-radius: 4px;
	display: flex;
	align-items: center;
}

.subscription-box .detail .info {
	flex: 1 0;
}

.subscription-box .detail .controls .button {
	font-weight: bold;
	display: inline-block;
	height: 46px;
	padding: 5px 30px;
	font-size: 13px;
}

.subscription-box .detail .product {
	display: flex;
	line-height: 28px;
}

.subscription-box .detail .product .name {
	font-weight: 500;
	font-size: 15px;
	margin-right: 8px;
}

.subscription-box .detail .product .cycle {
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
	padding: 0 10px;
	font-weight: 500;
}

.subscription-box .detail .meta {
	font-size: 15px;
	margin-top: 8px;
}

.subscription-box .detail .discount {
	line-height: 22px;
	margin-top: 12px;
	display: flex;
	font-size: 12px;
}

.subscription-box .detail .discount .percent {
	border-radius: 3px;
	background: rgba(53,158,252,0.1);
	color: rgba(53,158,252,1);
	padding: 0 8px;
	display: inline-block;
	font-weight: 500;
}

.subscription-box .detail .discount .undiscounted {
	margin-left: 5px;
	text-decoration: line-through;
	color: rgba(255,255,255,0.4);
}

.subscription-box .payment {
	padding: 20px 25px 20px 50px;
	border: 1px rgba(255,255,255,0.075) solid;
	border-radius: 4px;
	position: relative;
	font-weight: 500;
	color: rgba(255,255,255,0.6);
	margin-top: 10px;
}

.subscription-box .payment .edit-credit-card {
	position: absolute;
	right: 10px;
	padding: 8px 12px;
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.subscription-box .payment .edit-credit-card:hover {
	background: rgba(255,255,255,0.15);
}

.subscription-box .payment .edit-credit-card:active {
	background: rgba(255,255,255,0.12);
}

.subscription-box .payment:before {
	font-family: 'SL-Icons';
	left: 25px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	font-size: 16px;
	color: rgba(255,255,255,0.5);
}

.subscription-box .payment.paypal:before {
	content: '\ea8a';
}

.subscription-box .payment.credit-card:before {
	content: '\ea8b';
}

.subscription-box .subscription-cancel {
	border-radius: 4px;
	border: 1px rgba(255,255,255,0.075) solid;
	color: #e72f17;
	padding: 20px;
	text-align: center;
	font-weight: 500;
	margin-top: 20px;
	cursor: pointer;
	user-select: none;
}

.subscription-box .subscription-cancel:hover {
	border-color: rgba(255,255,255,0.15);
}

.subscription-box .subscription-cancel:active {
	border-color: rgba(255,255,255,0.1);
}


/*
* Plan List
*/
.plan-list {
	display: flex;
}

.plan-list > div {
	flex: 1 0;
	margin: 0;
	margin-right: 20px;
}

.plan-list > div:after {
	right: 15px;
	top: 25px;
}

.plan-list > div .title {
	font-size: 20px;
	font-weight: bold;
}

.plan-list > div .subtitle {
	font-size: 15px;
}

.plan-list > div .price {
	font-size: 24px;
	margin-top: 15px;
	font-weight: bold;
}


/*
* Filter Bar
*/
.filter-bar {
	display: flex;
}


/*
* Filter add
*/
.filter-add {
	padding: 15px 25px;
	flex: 1 0 50%;
}

.filter-add .filter-add--button > * {
	display: inline-block;
	vertical-align: top;
}

.filter-add .filter-add--button {
	display: inline-block;
	cursor: pointer;
}

.filter-add .filter-add--button:hover .button--icon {
	background: rgba(35,122,251,0.15);
}

.filter-add .filter-add--button .button--icon {
	height: 26px;
	width: 26px;
	background: rgba(35,122,251,0.1);
	display: inline-block;
	border-radius: 3px;
	cursor: pointer;
	margin-right: 10px;
	position: relative;
}

.filter-add .filter-add--button .button--icon:before {
	content: '';
	background-position: -16px -55px;
	width: 10px;
	height: 10px;
	display: block;
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;
}

.filter-add .filter-add--button .button--text {
	height: 26px;
	line-height: 26px;
	color: #237afb;
	font-weight: 600;
	font-size: 0.923076923rem;
}


/*
* Filter buttons
*/
.filter-buttons {
	padding: 15px 25px;
	border-top: 1px rgba(255,255,255,0.1) solid;
}

.filter-buttons button {

}


/*
* OBOS Labels
*/
.obos-label {
	position: relative;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	border-radius: 3px;
	height: 22px;
	line-height: 20px;
	padding: 0 8px 0 21px;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
	display: inline-block;
}

.obos-label:before {
	font-family: 'SL-Icons';
	font-size: 10px;
	display: block;
	text-align: center;
	width: 20px;
	height: 20px;
	position: absolute;
	line-height: 20px;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
}

.obos-label.ob {
	border: 1px rgba(252,46,28,0) solid;
	background: rgba(252,46,28,0.7);
}

.obos-label.ob:before {
	content: '\ea7d';
}

.obos-label.os {
	border: 1px rgba(23,135,252,0) solid;
	background: rgba(23,135,252,0.7);
}

.obos-label.os:before {
	content: '\ea1f';
}


/*
* OBOS Row
*/
.obos-row.ob > div {
	background: rgba(158,25,45,0.15);
}

.obos-row.os > div {
	background: rgba(41,101,152,0.15);
}

.obos-row.ob:hover > div {
	background-color: rgba(158,25,45,0.3) !important;
}

.obos-row.os:hover > div {
	background-color: rgba(41,101,152,0.3) !important;
}

.obos-row .obos-label {
	margin-right: 5px;
}


/*
* Locked
*/
.locked {
	font-family: 'SL-Icons';
	color: rgba(255,255,255,0.5);
	cursor: pointer;
}

.locked:hover {
	color: rgba(255,255,255,0.7);
}

.locked:active {
	color: rgba(255,255,255,0.6);
}

.locked:before {
	content: '\ea6b';
}


/*
* Symbols Table
*/
.symbols-table-box {
	padding-right: 60px;
	padding-left: 200px;
}

/*.app.mobile .symbols-table-box {
	padding-right: 0;
}*/

.symbols-table-box.empty .empty-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 60px;
}

.symbols-table {
	overflow: hidden;
	overflow-x: auto;
	min-height: 450px;
}

.symbols-table > * {
	display: none;
}

.symbols-table.symbols-table--loading:before {
	position: absolute;
	content: '';
	background-image: url('../img/loader.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 30px 30px;
	width: 30px;
	height: 30px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	opacity: 0.5;
}

.symbols-table.symbols-table--init {
	min-height: 0;
}

.symbols-table.symbols-table--init > * {
	display: flex;
	position: static;
	left: 0;
	right: 0;
	width: 4000px;
}

.symbols-table-box.empty div.symbols-table {
	min-height: 450px;
}

.symbols-table > .header {
	user-select: none;
}

.symbols-table > .header,
.symbols-table > .header > *:first-child,
.symbols-table > .header > *:last-child {
	border-bottom: 1px rgba(255,255,255,0.1) solid;
}

/*.app.mobile .symbols-table > .header > *:last-child,
.app.mobile .symbols-table > .row > *:last-child {
	display: none;
}*/

.symbols-table > .header > * {
	height: 60px;
	cursor: pointer;
	user-select: none;
}

.symbols-table > .header > * > .label {
	position: absolute;
	left: 20px;
	top: 15px;
	right: 15px;
	font-weight: bold;
	font-size: 0.923076923rem;
	color: rgba(255,255,255,0.75);
	line-height: 16px;
	height: 16px;
	padding: 0;
}

.symbols-table > .header > * > .label > * {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
	visibility: hidden;
}

.symbols-table > .header > * > .label > .visible {
	visibility: visible;
}

.symbols-table > .header > * > .label:hover {
	color: rgba(255,255,255,0.9);
}

.symbols-table > .header > * > .header-search {
	position: absolute;
	transform: translateY(-50%);
	right: 10px;
	top: 50%;
	background: rgba(255,255,255,0.05);
	border: 1px transparent solid;
	width: 100px;
	height: 26px;
	z-index: 10;
	border-radius: 3px;
	cursor: auto;
	padding-left: 15px;
}

.symbols-table > .header > * > .result-label {
	color: rgba(255,255,255,0.4);
	position: absolute;
	left: 20px;
	bottom: 15px;
	font-size: 0.846153846rem;
}

.symbols-table > .header > * > .header-filter {
	position: absolute;
	right: 5px;
	bottom: 7px;
	left: 5px;
	z-index: 20;
	padding: 3px 8px;
	padding-left: 20px;
	font-weight: bold;
	line-height: 16px;
	color: rgba(255,255,255,0.5);
	font-size: 0.84615384615rem;
	border-radius: 2px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: none;
}

.symbols-table > .header > * > .header-filter:hover {
	color: rgba(255,255,255,0.75);
}

.symbols-table > .header > * > .header-filter.has-filter {
	color: rgba(0,138,255,0.95);
}

.symbols-table > .header > * > .header-filter.has-filter:hover {
	color: rgba(0,138,255,1);
	background: rgba(0,138,255,0.05);
}

.symbols-table > .header > *:hover > .header-filter,
.symbols-table > .header > * > .header-filter.has-filter {
	display: block;
}

.symbols-table > .header > * > .header-filter:before {
	content: '\ea74';
	font-family: 'SL-Icons';
	left: 3px;
	top: 50%;
	height: 16px;
	width: 14px;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	margin-right: 1px;
}

.symbols-table > .header > * > .header-filter.has-filter:before {
	display: none;
}

@keyframes contextMenuOpen {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.filter-context {
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 4px;
	background: #212227;
	border-radius: 4px;
	box-shadow: 0px 1px 6px rgba(0,0,0,0.15);
	border: 1px rgba(255,255,255,0.05) solid;
	z-index: 1000;
	display: block;
	opacity: 0;
	transform: translateY(-0.75em);
	margin-top: 5px;
}

.filter-context.active {
	animation: contextMenuOpen 75ms ease-out forwards;
}

.filter-context .title {
	font-weight: 500;
	color: rgba(255,255,255,0.6);
	padding: 5px 5px 5px 25px;
	font-size: 0.92307692307rem;
	position: relative;
}

.filter-context .title:before {
	content: '\ea74';
	font-family: 'SL-Icons';
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
}

.symbols-table > .header > * > .header-search.header-search--active {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.1);
}

.symbols-table > .header > * > .header-search:before {
	content: '\ea04';
	font-family: 'SL-Icons';
	color: rgba(255,255,255,0.5);
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.15384615rem;
}

.symbols-table > .header > * > .header-search input {
	background: transparent;
	border: 0;
	height: 24px;
	padding: 0 10px;
	width: 100%;
	font-size: 0.923076923rem;
}

.symbols-table > .header > * > .resize-handle {
	position: absolute;
	top: 0;
	right: -10px;
	bottom: 0;
	width: 21px;
	cursor: col-resize;
	z-index: 20;
	display: block;
}

.symbols-table > .header > *.sort:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: #247afb;
	display: block;
}

.symbols-table > .header > *.sort:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 0;
	left: 50%;
}

.symbols-table > .header > *.sort.sort--desc:after {
	margin-bottom: -4px;
	transform: translateX(-50%);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #247afb;
}

.symbols-table > .header > *.sort.sort--asc:after {
	margin-bottom: 3px;
	transform: translateX(-50%);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid #247afb;
}

.symbols-table > .header > *:hover {
	color: rgba(255,255,255,0.9);
}

.symbols-table > .header > * > .resize-handle:after {
	content: '';
	position: absolute;
	display: block;
	top: 10px;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	border-radius: 1px;
	background: rgba(255,255,255,0.1);
}

.symbols-table > .header > * > .resize-handle:hover:after {
	background: #1860cc;
}

.symbols-table > .header > *:first-child > .resize-handle:after {
	display: none;
}

.symbols-table > .header > *:last-child div.add-columns-button {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	border-radius: 50%;
	background: #0d42fb;
	display: block;
}

.symbols-table > .header > *:last-child div.add-columns-button:active {
	background-color: #0731ce;
}

.symbols-table > .header > *:last-child div.add-columns-button:after {
	content: '\ea03';
	font-family: 'SL-Icons';
	color: #fff;
	font-size: 16px;
}

/*.symbols-table > * > *:nth-child(2):before {
	position: absolute;
	display: block;
	content: '';
	width: 8px;
	left: 0;
	top: 0;
	bottom: 0;
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}*/

.symbols-table > * > * {
	flex: 0 0 100px;
	display: block;
	padding: 12px 14px;
	position: relative;
}

.symbols-table > .row {
	border-bottom: 1px rgba(255,255,255,0.05) solid;
}

@keyframes positionUp {
	0% {
		opacity: 0;
		transform: translateY(50%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes positionDown {
	0% {
		opacity: 0;
		transform: translateY(-50%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.symbols-table > .row.position-up > *:first-child:before,
.symbols-table > .row.position-down > *:first-child:before {
	font-family: 'SL-Icons';
	position: absolute;
	right: 10px;
	top: 15px;
	font-size: 9px;
}

.symbols-table > .row.position-up > *:first-child:before {
	content: '\ea75';
	font-family: 'SL-Icons';
	color: #4bbd54;
	animation: positionUp 500ms ease-out forwards;
}

.symbols-table > .row.position-down > *:first-child:before {
	content: '\ea76';
	font-family: 'SL-Icons';
	color: #dd3f14;
	animation: positionDown 500ms ease-out forwards;
}

.symbols-table > .row.highlight,
.symbols-table > .row.highlight > *:first-child,
.symbols-table > .row.highlight > *:last-child {
	background: rgba(44,156,255,0.1) !important;
}

.symbols-table > .row.highlight:hover,
.symbols-table > .row.highlight:hover > *:first-child,
.symbols-table > .row.highlight:hover > *:last-child {
	background: rgba(44,156,255,0.2) !important;
}

.symbols-table > .row.highlight > *:first-child:before {
	content: '';
	display: block;
	background: rgba(44,156,255,1) !important;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 3px;
	border-radius: 1.5px;
	position: absolute;
}

.symbols-table > .row:hover,
.symbols-table > .row:hover > *:first-child,
.symbols-table > .row:hover > *:last-child,
.symbols-table .hover {
	background: rgba(255,255,255,0.02) !important;
}

.symbols-table > .row > * {
	white-space: nowrap;
	text-overflow: ellipsis;
	height: 60px;
	border-right: 1px rgba(255,255,255,0.01) solid;
	overflow: hidden;
}

.symbols-table.light > .row > * {
	height: 44px;
}

.symbols-table > * > *:first-child {
	border-right: 1px rgba(255,255,255,0.1) solid;
	border-bottom: 1px rgba(255,255,255,0.05) solid;
	width: 200px;
	position: absolute;
	z-index: 10;
	left: 0;
	height: 61px;
	padding: 12px 18px;
	box-shadow: 8px 0 5px -2px rgba(0,0,0,0.04);
}

.symbols-table > * > *:last-child {
	border-left: 1px rgba(255,255,255,0.1) solid;
	border-bottom: 1px rgba(255,255,255,0.05) solid;
	width: 60px;
	position: absolute;
	z-index: 10;
	right: 0;
	height: 61px;
}

.symbols-table.light > .row > *:first-child,
.symbols-table.light > .row > *:last-child {
	height: 45px;
}

.symbols-table > * > .align-right {
	text-align: right;
}

.symbols-table > * > *:first-child > a > * {
	line-height: 16px;
}

.symbols-table > * > *:first-child > a div.user {
	display: flex;
	line-height: 16px;
	font-weight: 500;
	color: rgba(255,255,255,0.5);
}

.symbols-table > * > *:first-child > a .user .avatar {
	height: 16px;
	width: 16px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 5px;
}

.symbols-table > * > *:first-child > a .user .avatar img {
	width: 100%;
	height: auto;
}

.symbols-table > * > * a.symbol {
	font-size: 0.923076923rem;
	display: block;
}

.symbols-table > * > * a.symbol .symbol {
	font-weight: bold;
}

.symbols-table > * > * a.symbol .name,
.symbols-table > * > * a.index .subtitle {
	font-size: 0.846153846rem;
	color: rgba(255,255,255,0.6);
	margin-top: 4px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.symbols-table > *:hover > * a.symbol .name {
	padding-right: 15px;
}

.symbols-table > * > * a.category {
	display: block;
	height: 30px;
}

.symbols-table > * > * a.category .name,
.symbols-table > * > * a.index .name {
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.symbols-table > .row > *:last-child > div {
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	line-height: 24px;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	cursor: pointer;
	color: rgba(255,255,255,0.7);
	display: none;
}

.symbols-table > .row:hover > *:last-child > div {
	display: block;
}

.symbols-table > .row > *:last-child > div:hover {
	background: rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.9);
}

.symbols-table > .row > *:last-child > div:active {
	background: rgba(255,255,255,0.15);
}

.symbols-table > .row > *:last-child > div:before {
	font-family: 'SL-Icons';
	content: '\ea19';
	font-size: 12px;
}

.symbols-table > .summary,
.symbols-table > .summary > *:first-child,
.symbols-table > .summary > *:last-child {
	background: rgba(0,0,0,0.2) !important;
	border-bottom: 1px rgba(255,255,255,0.05) solid;
}

.symbols-table > .summary > *:first-child {
	font-size: 0.923076923rem;
	color: rgba(255,255,255,0.6);
}

.symbols-table > .summary > * {
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	height: 50px;
	line-height: 50px;
	border-right: 1px rgba(255,255,255,0.02) solid;
	overflow: hidden;
	padding: 0 16px;
	color: rgba(255,255,255,0.6);
}

.symbols-table > .summary > *:first-child,
.symbols-table > .summary > *:last-child {
	height: 51px;
}

.symbols-table > .row:hover .add-watchlist {
	display: block;
}

/*
* Balance Stats
*/
.symbols-table > .row.balance-stats .balance-head  {
	font-weight: 500;
	line-height: 16px;
	color: rgba(255,255,255,0.5);
	position: relative;
	padding-left: 16px;
	font-size: 0.84615384615rem;
}

.symbols-table > .row.balance-stats .balance-head:before  {
	content: '\ea7c';
	font-family: 'SL-Icons';
	font-size: 11px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.symbols-table > .row.balance-stats .balance-value  {
	line-height: 16px;
	font-weight: bold;
	color: rgba(255,255,255,0.75);
	font-size: 0.92307692307rem;
	margin-top: 4px;
}

.symbols-table > .row.balance-stats .balance-edit {
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 3px;
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.5);
	display: block;
	cursor: pointer;
}

.symbols-table > .row.balance-stats .balance-edit:hover {
	background: rgba(255,255,255,0.15);
}

.symbols-table > .row.balance-stats .balance-edit:active {
	background: rgba(255,255,255,0.12);
}

.symbols-table > .row.balance-stats .balance-edit:before {
	content: '\ea5b';
	font-family: 'SL-Icons';
	font-size: 12px;
}


/*
* Position Type
*/
.symbols-table .position-type {
	border-radius: 2px;
	background: rgba(255,255,255,0.1);
	padding: 5px 6px;
	position: relative;
	color: rgba(255,255,255,1);
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.76923076923rem;
	display: inline-block;
	padding-left: 25px;
}

.symbols-table .position-type:before {
	font-family: 'SL-Icons';
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	font-size: 15px;
}

.symbols-table .position-type.long {
	background: #136a1a;
}

.symbols-table .position-type.long:before {
	content: '\ea07';
}

.symbols-table .position-type.short {
	background: #902216;
}

.symbols-table .position-type.short:before {
	content: '\ea08';
}


/*
* Add Watchlist Button
*/
.add-watchlist {
	display: none;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.add-watchlist:hover {
	background: rgba(255,255,255,0.2);
}

.add-watchlist:active {
	background: rgba(255,255,255,0.15);
}

.add-watchlist:before {
	content: '\ea03';
	font-family: 'SL-Icons';
	color: rgba(255,255,255,0.6);
}

.add-watchlist:hover:before {
	color: rgba(255,255,255,0.8);
}


/*
* Section Title
*/
.section-title {
	font-weight: bold;
	margin-bottom: 6px;
	font-size: 18px;
	color: rgba(255,255,255,0.8);
	padding: 5px 3px;
}


/*
* System Message
*/
.system-message {
	user-select: none;
	background: #0d42fa;
	color: #fff;
	box-shadow: 1px 1px 20px rgba(0,0,0,0.15);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 4px;
	padding: 15px 30px;
	font-weight: 600;
	z-index: 99999;
	animation: systemMessageOpen 200ms normal forwards ease-in-out;
	opacity: 0.95;
	cursor: pointer;
	transition: opacity 0.3s;
	z-index: 9999999999999;
}

.app.mobile .system-message {
	transform: none;
	left: 10px;
	bottom: 10px;
	right: 10px;
	padding: 10px;
}

.system-message {
	opacity: 1;
}

@keyframes systemMessageOpen {
    from {
        bottom: -200px;
    }
    to {
        bottom: 25px;
    }
}



/*
* Performance Bar
*/
.performance-bar {
	display: flex;
}

.performance-bar .performance-bar__graph {
	flex: 1 0 auto;
	height: 6px;
	margin: 14px 0;
}

.performance-bar .performance-bar__graph .performance-bar__inner {
	border-radius: 1px;
	height: inherit;
	display: inline-block;
	vertical-align: top;
}

.performance-bar.performance-bar--positive .performance-bar__graph .performance-bar__inner {
	background: #45be4e;
}

.performance-bar.performance-bar--negative .performance-bar__graph .performance-bar__inner {
	background: #f11432;
}

.performance-bar .performance-bar__value {
	flex: 0 0 90px;
	text-align: left;
	margin-left: 20px;
}


/*
* Tag Filter List
*/
.tag-filter {
	height: 36px;
	display: flex;
}

.tag-filter > div {
	border-radius: 18px;
	padding: 8px 18px;
	line-height: 20px;
	font-weight: 500;
	position: relative;
	font-size: 0.92307692307rem;
	cursor: pointer;
	margin-right: 5px;
}

.tag-filter > div.add {
	font-size: 13px;
	background: rgba(255,255,255,0.075);
	padding-left: 30px;
}

.tag-filter > div.add:hover {
	background: rgba(255,255,255,0.1);
}

.tag-filter > div.add:active {
	background: rgba(255,255,255,0.09);
}

.tag-filter > div.add:before {
	content: '\ea03';
	font-family: 'SL-Icons';
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	color: rgba(255,255,255,0.75);
	font-size: 14px;
}

.tag-filter > div.tag-input {
	border: 1px rgba(255,255,255,0.1) solid;
	padding: 0;
	display: none;
}

.tag-filter > div.tag-input.visible {
	display: block;
}

.tag-filter > div.tag-input.active {
	border-color: rgba(255,255,255,0.15);
}

.tag-filter > div.tag-input > * {
	display: inline-block;
	vertical-align: top;
}

.tag-filter > div.tag-input > input {
	background: transparent;
	border: 0;
	padding: 7px 16px;
	line-height: 20px;
	width: 90px;
}

.tag-filter > div.tag-input > .tag-submit {
	width: 34px;
	height: 34px;
	line-height: 34px;
	margin-right: 3px;
	text-align: center;
	font-size: 11px;
	color: rgba(255,255,255,0.6);
}

.tag-filter > div.tag-input > .tag-submit:hover {
	color: rgba(255,255,255,0.8);
}

.tag-filter > div.tag-input > .tag-submit:active {
	color: rgba(255,255,255,0.7);
}

.tag-filter > div.tag-input > .tag-submit:before {
	content: '\ea1d';
	font-family: 'SL-Icons';
}

.tag-filter > div.tag-value {
	background: rgba(36,173,251,0.15);
	color: rgba(36,173,251,1);
	font-weight: bold;
	user-select: none;
	padding-right: 30px;
}

.tag-filter > div.tag-value:hover {
	background: rgba(36,173,251,0.2);
}

.tag-filter > div.tag-value:active {
	background: rgba(36,173,251,0.175);
}

.tag-filter > div.tag-value:before {
	content: '\ea19';
	font-family: 'SL-Icons';
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	font-size: 11px;
	color: rgba(36,173,251,0.8);
}

.tag-filter > div.tag-value:hover:before {
	color: rgba(36,173,251,0.9);
}



/*
* List table
*/
.list-table {
	display: block;
	font-size: 0.923076923rem;
	overflow: hidden;
	overflow-x: auto;
}

.list-table.list-table--hidden {
	display: none;
}

.list-table span.text {
	max-width: 200px;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	vertical-align: top;
}

.list-table > div > div {
	display: flex;
}

.list-table .list-table__head {
	user-select: none;
}

.list-table > div > div > div {
	flex: 1 0 100px;
	padding: 0px 20px;
	line-height: 36px;
	white-space: nowrap;
	vertical-align: top;
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
}

.list-table > div > div > div.large,
.list-table.large > div > div > div {
	flex-basis: 200px;
}

.list-table div > div > div.align-right {
	text-align: right;
}

.list-table div > div > div.align-center {
	text-align: center;
}

.list-table .list-table__head > div:last-child > div,
.list-table .list-table__body > div:last-child > div {

}

.list-table .list-table__head > div > div:last-child,
.list-table .list-table__body > div > div:last-child {
	border-right: 0;
}

.list-table .list-table__head > div > div {
	font-weight: 600;
	border-bottom: 1px rgba(255,255,255,0.05) solid;
	background: rgba(0,0,0,0.1);
	line-height: 42px;
	position: relative;
}

.list-table .list-table__footer > div:first-child > div {
	border-top: 1px rgba(255,255,255,0.1) solid;
}

.list-table .list-table__footer > div > div:first-child {
	font-weight: bold;
}

.list-table .list-table__footer > div > div {
	background: rgba(255,255,255,0.025);
	color: rgba(255,255,255,0.6);
}

.list-table .list-table__body > div > div {
	border-bottom: 1px solid rgba(255,255,255,0.025);
}

.list-table .list-table__body > div:last-child > div {
	border-bottom: 0;
}

.list-table > .list-table__body > div:hover > div {
	background-color: rgba(255,255,255,0.03);
}

.list-table .list-table__head > div > div {
	color: rgba(255,255,255,0.6);
	position: relative;
}

.list-table .list-table__head > div > div:before {
	content: '';
	width: 1px;
	top: 6px;
	bottom: 6px;
	right: 0;
	position: absolute;
	display: block;
	background: rgba(255,255,255,0.075);
}

.list-table .list-table__head > div > div:last-child:before {
	display: none;
}

.list-table .list-table__head > div > div[data-label] {
	cursor: pointer;
	padding-right: 30px;
}

.list-table .list-table__head > div > div[data-label]:hover {
	color: rgba(255,255,255,0.8);
}

.list-table .list-table__head > div > div.list-table-item__active,
.list-table .list-table__head > div > div.list-table-item__active:hover {
	color: #008dff;
}

.list-table .list-table__head > div > div[data-label]:after {
	content: '\ea25';
	font-family: 'SL-Icons';
	font-size: 9px;
	display: block;
	opacity: 0.4;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.list-table .list-table__head > div > div:hover:after {
	opacity: 0.5;
}

.list-table .list-table__head > div > div.list-table-item__sort--asc:after,
.list-table .list-table__head > div > div.list-table-item__sort--desc:after {
	opacity: 1;
}

.list-table .list-table__head > div > div.list-table-item__sort--asc:after {
	content: '\ea26';
}

.list-table .list-table__body > div.ph > div:after {
	content: '';
}

.list-table .list-table__body > div > div > .load-placeholder,
.list-table .list-table__body > div.ph > div:after {
	width: 60%;
	height: 16px;
	display: inline-block;
	background: rgba(255,255,255,0.075);
	margin: 8px 0;
	vertical-align: top;
}

.list-table .list-table__body > div:nth-child(2n+2) > div > .load-placeholder,
.list-table .list-table__body > div.ph:nth-child(2n+2) > div:after {
	width: 40%;
}

.list-table .list-table__body > div:nth-child(3n+3) > div > .load-placeholder,
.list-table .list-table__body > div.ph:nth-child(3n+3) > div:after {
	width: 50%;
}

.content-box--hscroll .list-table {
    overflow-y: visible;
}

.content-box--hscroll .list-table > div > div > div:first-child {
    position: absolute;
    left: 0px;
    width: 120px;
}

.content-box--hscroll .list-table > div > div > div:first-child:before {
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    right: -9px;
    display: block;
    /*background: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);*/
    border-left: 1px rgba(255,255,255,0.1) solid;
}

.list-table .list-table__body > div:hover > div .add-watchlist {
	display: block;
}


/*
* Label Tooltip
*/
.label-tooltip {
	position: absolute;
	padding: 10px;
	background: #000;
	border: 1px rgba(255,255,255,0.1) solid;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
	border-radius: 5px;
	font-weight: 500;
	font-size: 0.92307692307rem;
	opacity: 0;
	transform: translateY(-0.75em);
}

.label-tooltip.active {
	animation: contextMenuOpen 75ms ease-out forwards;
}

/*
* List Table Progress Bar
*/
.list-table .progress {
	display: inline-block;
	margin: 0 7px;
}

.list-table .progress .bar {
	background: rgba(255,255,255,0.1);
	height: 8px;
	border-radius: 2px;
	width: 70px;
	display: inline-block;
	overflow: hidden;
}

.list-table .progress .bar > div {
	background: #1890fc;
	height: inherit;
	display: block;
}

.list-table .progress .label {
	color: rgba(255,255,255,0.5);
	margin-left: 7px;
	display: inline-block;
}


/*
* Box Empty Element
*/
.content-box .empty,
.list-table .list-table__body > div.empty {
	display: block;
	text-align: center;
	font-weight: 500;
	margin: 150px 0;
	line-height: 30px;
	font-size: 1rem;
}

.content-box .empty:before,
.list-table .list-table__body > div.empty:before {
	display: inline-block;
	vertical-align: top;
	content: '\ea7e';
	font-family: 'SL-Icons';
	margin-right: 7px;
	color: rgba(255,255,255,0.5);
	font-size: 1.07692307692rem;
}


/*
* Options List
*/
.options-list {
	display: flex;
}

.options-list > div {
	user-select: none;
	flex: 1 0;
	border-radius: 6px;
	border: 3px rgba(255,255,255,0.1) solid;
	background: rgba(255,255,255,0.05);
	margin-right: 15px;
	text-align: center;
	color: rgba(255,255,255,0.6);
	padding: 40px 20px 50px 20px;
	font-weight: 500;
	cursor: pointer;
	position: relative;
}

.options-list > div:hover {
	border-color: rgba(255,255,255,0.2);
}

.options-list > div:active {
	border-color: rgba(255,255,255,0.15);
}

.options-list > div:before {
	font-family: 'SL-Icons';
	font-size: 32px;
	height: 40px;
	line-height: 40px;
	display: block;
	margin-bottom: 7px;
	color: rgba(255,255,255,0.8);
}

.options-list > div.option-save:before {
	content: '\ea88';
}

.options-list > div.option-new:before {
	content: '\ea89';
}

.options-list > div:last-child {
	margin-right: 0;
}

.options-list > div.selected {
	border-color: #247afa;
}

.options-list > div.selected:after {
	font-family: 'SL-Icons';
	content: '\ea1d';
	font-size: 11px;
	display: block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	background: #247afa;
	position: absolute;
	top: 12px;
	right: 12px;
}


/*
* Restricted Content Box Elements
*/
.grid-view.restricted .list-table,
.grid-view.restricted .intelligence-breakdown {
	display: none;
}

.restricted-content {
	display: none;
	height: 240px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.restricted-content .pro {
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
	padding: 3px;
	font-weight: 500;
	line-height: 20px;
	padding: 2px 10px;
	margin-right: 8px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 10px;
	color: rgba(255,255,255,0.8);
}

.restricted-content .pro:before {
	content: '\ea6b';
	font-family: 'SL-Icons';
	margin-right: 5px;
	display: inline-block;
	vertical-align: top;
	color: rgba(255,255,255,0.6);
}

.restricted-content .label {
	line-height: 24px;
	font-size: 12px;
	color: rgba(255,255,255,0.6);
}

.restricted-content:hover .label {
	color: rgba(255,255,255,0.8);
}

.restricted-content:active .label {
	color: rgba(255,255,255,0.7);
}

.restricted-content .label:after {
	content: '\ea20';
	font-family: 'SL-Icons';
	display: inline-block;
	vertical-align: top;
	margin-left: 2px;
}

.grid-view.restricted .restricted-content {
	display: flex;
}


/*
* Item List
*/
.item-list {
	margin-bottom: 20px;
}

.item-list li {
	border-radius: 6px;
	background: rgba(255,255,255,0.05);
	border: 1px rgba(255,255,255,0.05) solid;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
	padding: 5px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}

.item-list li:hover {
	background: rgba(255,255,255,0.075);
}

.item-list li.placeholder {
	height: 86px;
}

.item-list li:last-child {
	margin-bottom: 0;
}

.item-list li a.item__title {
	padding: 20px;
	flex: 0 0 300px;
}

.item-list li a.item__title .title__main {
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 1.15384615rem;
	color: #fff;
}

.item-list li a.item__title .title__sub {
	color: rgba(255,255,255,0.4);
	margin-top: 5px;
	font-size: 0.923076923rem;
}

.item-list li a.item__title:hover .title__main {
	color: rgba(255,255,255,0.9);
}

.item-list li .item__author {
	padding: 6px 12px 6px 8px;
	margin-left: auto;
	margin-right: 50px;
}

.item-list li .item__author:hover {
	border-color: rgba(255,255,255,0.3);
}

.item-list li .item__author .author__avatar {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background: rgba(255,255,255,0.1);
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}

.item-list li .item__author .author__avatar img {
	width: 100%;
	height: auto;
}

.item-list li .item__author .author__user {
	height: 24px;
	line-height: 24px;
	margin-left: 7px;
	display: inline-block;
	vertical-align: top;
	color: rgba(255,255,255,0.6);
	font-weight: 500;
}

.item-list li .item__author:hover .author__user {
	color: rgba(255,255,255,0.8);
}

.item-list li .item__time {
	flex: 0 0 250px;
	padding: 20px;
	font-weight: 500;
	font-size: 0.923076923rem;
	color: rgba(255,255,255,0.6);
	text-align: right;
}

.item-list li .item__bar {
	height: 10px;
	flex: 0 0 300px;
	margin-right: 30px;
}

.item-list li .item__keystats {
	display: flex;
}

.item-list li .item__keystats > div {
	width: 120px;
}

.item-list li .item__keystats > div .value {
	font-size: 1.15384615rem;
	font-weight: bold;
}

.item-list li .item__keystats > div .label {
	color: rgba(255,255,255,0.5);
	margin-top: 5px;
	font-size: 0.84615384615rem;
	font-weight: 500;
}


/*
* Sector Bar
*/
.sector-bar .bar {
	height: 10px;
	width: 100%;
	border-radius: 3px;
	background: rgba(255,255,255,0.1);
	display: flex;
}

.sector-bar .bar > div {
	display: block;
	height: inherit;
	opacity: 0.9;
	cursor: pointer;
	transition: margin 100ms ease;
}

.sector-bar .bar > div:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.sector-bar .bar > div:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.sector-bar .bar > div:hover {
	opacity: 1;
	height: auto;
	z-index: 999;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
}

.sector-bar .values {
	height: 10px;
	width: 100%;
	display: flex;
	margin-top: 3px;
}

.sector-bar .values > div {
	display: block;
	height: inherit;
	text-align: center;
	font-weight: 600;
	font-size: 9px;
	color: rgba(255,255,255,0.4) !important;
}

.sector-bar .bar .sector-basic-materials {
	background: #bf6437;
}

.sector-bar .values .sector-basic-materials {
	color: #bf6437;
}

.sector-bar .bar .sector-consumer-goods {
	background: #9cf064;
}

.sector-bar .values .sector-consumer-goods {
	color: #9cf064;
}

.sector-bar .bar .sector-financial {
	background: #a778ee;
}

.sector-bar .values .sector-financial {
	color: #a778ee;
}

.sector-bar .bar .sector-healthcare {
	background: #f9e8d5;
}

.sector-bar .values .sector-healthcare {
	color: #f9e8d5;
}

.sector-bar .bar .sector-industrial-goods {
	background: #f0891a;
}

.sector-bar .values .sector-industrial-goods {
	color: #f0891a;
}

.sector-bar .bar .sector-services {
	background: #f25454;
}

.sector-bar .values .sector-services {
	color: #f25454;
}

.sector-bar .bar .sector-technology {
	background: #66c1eb;
}

.sector-bar .values .sector-technology {
	color: #66c1eb;
}

.sector-bar .bar .sector-utilities {
	background: #f0dc53;
}

.sector-bar .values .sector-utilities {
	color: #f0dc53;
}


/*
* Pagination
*/
.pagination {
	margin-bottom: 20px;
}

.pagination.pagination--hidden {
	display: none;
}

.pagination ul {
	text-align: center;
}

.pagination ul li {
	display: inline-block;
	min-width: 28px;
	height: 28px;
	line-height: 28px;
	padding: 0 6px;
	text-align: center;
	border-radius: 50%;
	margin-right: 5px;
	cursor: pointer;
	font-weight: bold;
	color: rgba(255,255,255,0.6);
	vertical-align: top;
	user-select: none;
}

.pagination ul li:last-child {
	margin-right: 0;
}

.pagination ul li:hover {
	background: rgba(255,255,255,0.1);
}

.pagination ul li.pagination-item--disabled,
.pagination ul li.pagination-item--disabled:hover {
	opacity: 0.5;
	background: none;
	cursor: auto;
}

.pagination ul li.pagination-item--selected {
	background: rgba(255,255,255,0.15);
	color: rgba(255,255,255,1);
}

.pagination ul li.pagination-item--prev,
.pagination ul li.pagination-item--next {
	position: relative;
}

.pagination ul li.pagination-item--prev:after,
.pagination ul li.pagination-item--next:after {
	font-family: 'SL-Icons';
	display: block;
	opacity: 0.7;
}

.pagination ul li.pagination-item--prev:after {
	content: '\ea7f';
}

.pagination ul li.pagination-item--next:after {
	content: '\ea20';
}

.pagination ul li.pagination-separator,
.pagination ul li.pagination-separator:hover {
	font-weight: normal;
	color: rgba(255,255,255,0.5);
	background: none;
	cursor: auto;
}

.pagination ul li.pagination-separator:after {
	content: '\2026';
}

.pagination ul li.load-placeholder,
.pagination ul li.load-placeholder:hover {
	background: rgba(255,255,255,0.1);
	animation: loadPlaceholderOpacity 1.25s infinite;
}


/*
* Chat
*/
.main .content .content__chat {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.main .content .content__chat a:hover {
	text-decoration: underline;
}

.content__chat .chat-sidebar {
	flex: 0 0 240px;
	background: #0f0f13;
	display: flex;
	flex-direction: column;
/*	display: none;*/
}

.content__chat .chat-sidebar .blocks {
	flex: 1 0;
	padding: 24px 16px;
	overflow-y: scroll;
}

.content__chat .chat-sidebar .toggle {
	flex: 0 0 40px;
	position: relative;
	font-size: 16px;
	color: rgba(255,255,255,0.5);
	border-top: 1px rgba(255,255,255,0.05) solid;
	cursor: pointer;
}

.content__chat .chat-sidebar .toggle:hover {
	color: rgba(255,255,255,0.7);
}

.content__chat .chat-sidebar .toggle:active {
	color: rgba(255,255,255,0.6);
}

.content__chat .chat-sidebar .toggle:after {
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	content: '\ea20';
	font-family: 'SL-Icons';
	position: absolute;
	top: 50%;
	right: 23px;
	transform: translateY(-50%) rotate(-180deg);
	transition: transform 300ms ease;
}

.content__chat .chat-sidebar.minimized .toggle:after {
	transform: translateY(-50%);
}

.content__chat .chat-sidebar.minimized {
	flex: 0 0 66px;
	overflow: hidden;
}

.content__chat .chat-sidebar .chat-search {
	background: rgba(255,255,255,0.1);
	height: 36px;
	border-radius: 8px;
	position: relative;
	margin-bottom: 24px;
}

.content__chat .chat-sidebar .chat-search:before {
	content: '\ea3e';
	font-family: 'SL-Icons';
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: rgba(255,255,255,0.4);
}

.content__chat .chat-sidebar .chat-search input {
	background: transparent;
	border: 0;
	height: 36px;
	width: 100%;
	padding-left: 44px;
	font-size: 1.15384615rem;
}

.content__chat .chat-sidebar .block {
	margin-top: 20px;
}

.content__chat .chat-sidebar .block:first-child {
	margin-top: 0;
}

.content__chat .chat-sidebar .title {
	color: rgba(255,255,255,0.5);
	margin-bottom: 10px;
	line-height: 20px;
	position: relative;
	padding-right: 30px;
}

.content__chat .chat-sidebar.minimized .title {
	display: none;
}

.content__chat .chat-sidebar .title .add {
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.75);
	border-radius: 3px;
	cursor: pointer;
	font-size: 16px;
}

.content__chat .chat-sidebar .title .add:hover {
	background: rgba(255,255,255,0.075);
}

.content__chat .chat-sidebar .title .add:active {
	background: rgba(255,255,255,0.06);
}

.content__chat .chat-sidebar .title .add:before {
	content: '\ea03';
	font-family: 'SL-Icons';
}

.content__chat .chat-sidebar .list .item {
	height: 40px;
	line-height: 24px;
	padding: 8px;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	margin-bottom: 5px;
	color: rgba(255,255,255,0.6);
	align-items: center;
	position: relative;
}

.content__chat .chat-sidebar .list div.item:last-child {
	margin-bottom: 0;
}

.content__chat .chat-sidebar.minimized .list .item {
	padding: 0;
	height: 34px;
	margin-bottom: 8px;
}

.content__chat .chat-sidebar .list .item.ph,
.content__chat .chat-sidebar .list .item.ph:hover {
	background: transparent;
}

.content__chat .chat-sidebar .list .item.ph:before {
	content: '';
	display: block;
	background: rgba(255,255,255,0.05);
	flex: 0 0 24px;
	height: 24px;
	border-radius: 50%;
	margin-right: 7px;
	overflow: hidden;
}

.content__chat .chat-sidebar.minimized .list .item.ph:before {
	margin: 2px;
	flex: 0 0 30px;
	height: 30px;
}

.content__chat .chat-sidebar .list .item.ph:after {
	content: '';
	display: block;
	background: rgba(255,255,255,0.05);
	flex: 0 0 60%;
	height: 14px;
	border-radius: 3px;
}

.content__chat .chat-sidebar.minimized .list .item.ph:after {
	display: none;
}

.content__chat .chat-sidebar .list .item:nth-child(2n+2):after {
	flex: 0 0 40%;
}

.content__chat .chat-sidebar .list .item:nth-child(3n+3):after {
	flex: 0 0 50%;
}

.content__chat .chat-sidebar .list .item:hover {
	background: rgba(255,255,255,0.03);
}

.content__chat .chat-sidebar .list .item.selected,
.content__chat .chat-sidebar .list .item.selected:hover {
	background: rgba(255,255,255,0.05);
	color: rgba(255,255,255,1);
}

.content__chat .chat-sidebar.minimized .list .item,
.content__chat .chat-sidebar.minimized .list .item:hover,
.content__chat .chat-sidebar.minimized .list .item:active,
.content__chat .chat-sidebar.minimized .list .item.selected,
.content__chat .chat-sidebar.minimized .list .item.selected:hover  {
	background: transparent;
}

.content__chat .chat-sidebar .list .item .avatar {
	flex: 0 0 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 50%;
	margin-right: 7px;
	overflow: hidden;
}

.content__chat .chat-sidebar .list .item .name {
	transition: opacity 500ms ease;
	opacity: 0;
}

.content__chat .chat-sidebar.extended .list .item .name {
	opacity: 1;
}

.content__chat .chat-sidebar.minimized .list .avatar {
	flex-basis: 34px;
	height: 34px;
	line-height: 30px;
	font-size: 28px;
	margin-right: 0;
	border: 2px #0f0f13 solid;
}

.content__chat .chat-sidebar.extended .list .close {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	display: none;
	color: rgba(255,255,255,0.5);
}

.content__chat .chat-sidebar.extended .list .close:hover {
	color: rgba(255,255,255,0.75);
}

.content__chat .chat-sidebar.extended .list .close:active {
	color: rgba(255,255,255,0.6);
}

.content__chat .chat-sidebar.extended .list .item:hover .close {
	display: block;
}

.content__chat .chat-sidebar.extended .list .close:before {
	font-family: 'SL-Icons';
	content: '\ea19';
}

.content__chat .chat-sidebar.minimized .list .item:hover .avatar {
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.2);
}

.content__chat .chat-sidebar.minimized .list .item:active .avatar {
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.15);
}

.content__chat .chat-sidebar.minimized .list .item.selected .avatar {
    box-shadow: 0px 0px 0px 2px #247afb;
}

.content__chat .chat-sidebar.minimized .list .item div.name {
	opacity: 0;
	display: none;
}

.content__chat .chat-sidebar .list .item .avatar.room {
	text-align: center;
	font-weight: 500;
	background: #3b55ad;
	color: #fff;
	font-size: 12px;
}

.content__chat .chat-sidebar .list .item .avatar.room:before {
	content: '#';
}

.content__chat .chat-sidebar .list .item .avatar.dm {
	background: rgba(255,255,255,0.1);
}

.content__chat .chat-sidebar .list .item .avatar.dm img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.content__chat .chat-sidebar .empty {
	font-size: 12px;
	text-align: center;
	padding: 40px 25px;
	color: rgba(255,255,255,0.3);
	line-height: 1.2em;
	user-select: none;
	display: none;
}

.content__chat .chat-sidebar .block.empty .empty {
	display: block;
}

.content__chat .chat-sidebar .empty:before {
	content: '\ea91';
	font-family: 'SL-Icons';
	font-size: 24px;
	margin-bottom: 15px;
	display: block;
}

.content__chat .chat-sidebar > .add {
	display: none;
}

.content__chat .chat-sidebar.minimized .add {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 28px;
	border: 1px rgba(255,255,255,0.1) solid;
	color: rgba(255,255,255,0.5);
	text-align: center;
	margin: 2px;
	border-radius: 50%;
	cursor: pointer;
	margin-top: 10px;
}

.content__chat .chat-sidebar.minimized .add:hover {
	border-color: rgba(255,255,255,0.3);
	color: rgba(255,255,255,0.75);
}

.content__chat .chat-sidebar.minimized .add:active {
	border-color: rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.6);
}

.content__chat .chat-sidebar.minimized .add:before {
	content: '\ea03';
	font-family: 'SL-Icons';
	font-size: 18px;
}


/*
* Chat Messages
*/
.content__chat .chat-messages {
	flex: 1 0;
	display: flex;
	flex-direction: column;
}

.content__chat .chat-messages .chat-messages__header {
	padding: 22px 22px 0 22px;
	display: flex;
	justify-content: space-between;
}

.content__chat .chat-messages .chat-title {
	font-size: 1.38461538rem;
	font-weight: 600;
	position: relative;
	height: 36px;
	line-height: 36px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.content__chat .chat-messages .chat-title:before {
	content: '';
	color: #fff;
	width: 24px;
	height: 24px;
	margin: 6px 0;
	padding: 0;
	line-height: 24px;
	text-align: center;
	border-radius: 4px;
	font-size: 12px;
	display: inline-block;
	vertical-align: top;
	margin-right: 8px;
}

.content__chat .chat-messages .chat-search {
	background: rgba(255,255,255,0.05);
	border-radius: 4px;
	height: 36px;
	position: relative;
}

.content__chat .chat-messages .chat-search.focus {
	background: rgba(255,255,255,0.125);
}

.content__chat .chat-messages .chat-search:before {
	font-family: 'SL-Icons';
	content: '\ea3e';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: rgba(255,2555,255,0.5);
}

.content__chat .chat-messages .chat-search input {
	background: transparent;
	border: 0;
	height: 36px;
	width: 100%;
	display: block;
	padding-left: 35px;
}

.content__chat .chat-messages .chat-search .clear-search {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 36px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	color: rgba(255,255,255,0.6);
}

.content__chat .chat-messages .chat-search .clear-search:hover {
	color: rgba(255,255,255,0.8);
}

.content__chat .chat-messages .chat-search .clear-search:before {
	font-family: 'SL-Icons';
	content: '\ea19';
}

.content__chat .chat-messages .chat-search.active .clear-search {
	display: block;
}

.content__chat.type-room .chat-messages .chat-title:before {
	content: '#';
	background: #3b55ad;
}

.content__chat.type-dm .chat-messages .chat-title:before {
	content: '@';
	background: #28941f;
}

.content__chat .chat-messages .chat-messages__window {
	flex: 1 0;
	padding: 0 12px 5px 20px;
	overflow: scroll;
    overflow-x: hidden;
	overflow-y: scroll;
	position: relative;
}

.content__chat .chat-messages .chat-messages__window::-webkit-scrollbar {
	width: 8px;
}

.content__chat .chat-messages .chat-messages__window::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.2);
	border-radius: 4px;
}

.content__chat .chat-messages .chat-messages__window::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.6);
	border-radius: 4px;
}

.content__chat .chat-messages .chat-messages__window::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.content__chat .chat-messages .chat-messages__send {
	flex: 0 1 50px;
	border-bottom: 1px solid rgba(255,255,255,0.07);
	margin: 0 20px;
	padding-top: 20px;
	padding-bottom: 30px;
	position: relative;
}

.content__chat .chat-messages .chat-messages__send .users-typing {
	height: 30px;
	line-height: 30px;
	position: relative;
	padding-left: 30px;
	font-size: 0.923076923rem;
	color: rgba(255,255,255,0.8);
	position: absolute;
	right: 0;
	bottom: 0;
	display: none;
}

.content__chat .chat-messages .chat-messages__send .users-typing--active {
	display: none;
}

.content__chat .chat-messages .chat-messages__send .users-typing .users-typing__text {
	display: inline-block;
}

.content__chat .chat-messages .chat-messages__send .users-typing span {
	font-weight: bold;
}

.users-typing .users-typing__loader {
	position: absolute;
	margin: 0 8px;
	display: inline-block;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.users-typing .users-typing__loader,
.users-typing .users-typing__loader:before,
.users-typing .users-typing__loader:after {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	animation-fill-mode: both;
	animation: usersTypingAnimation 1s infinite ease-in-out;
	background-color: rgba(255,255,255,0.7);
}

.users-typing .users-typing__loader:before {
	left: -8px;
	animation-delay: -0.1s;
}

.users-typing .users-typing__loader:after {
	left: 8px;
	animation-delay: 0.1s;
}

.users-typing .users-typing__loader:before,
.users-typing .users-typing__loader:after {
	content: '';
	position: absolute;
	top: 0;
	display: block;
}

@keyframes usersTypingAnimation {
	0%,
	100% {
		background-color: rgba(255,255,255,0.2);
	}
	50% {
		background-color: rgba(255,255,255,0.7);
	}
}

.content__chat .chat-messages .chat-message-box {
	/* DarkSL Toggle  */
	background: rgba(255,255,255,0.1);
	border: 1px rgba(255,255,255,0.1) solid;
	border-radius: 8px;
	width: 100%;
	transition: border 50ms ease-in-out;
	position: relative;
	display: flex;
	z-index: 999;
}

.content__chat .chat-messages .chat-message-box.message-active {
	border-color: rgba(255,255,255,0.25);
}

.content__chat .chat-messages .chat-message-box .chat-user-tags {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #333539;
	border: 1px rgba(255,255,255,0.1) solid;
	border-radius: 8px;
	padding: 6px;
	margin-top: 8px;
	box-shadow: 0 1px 1px 0 #1e1e24;
	display: none;
}

.content__chat .chat-messages .chat-message-box.message-active.user-tags-active .chat-user-tags {
	display: block;
}

.content__chat .chat-messages .chat-message-box .chat-user-tags > div {
	display: flex;
	cursor: pointer;
	padding: 8px;
	border-radius: 8px;
	height: 40px;
	position: relative;
}

.content__chat .chat-messages .chat-message-box .chat-user-tags > div.ph:before {
	content: '';
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
}

.content__chat .chat-messages .chat-message-box .chat-user-tags > div.selected {
	background: rgba(255,255,255,0.1);
}

.content__chat .chat-messages .chat-message-box .chat-user-tags .avatar {
	flex: 0 0 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	overflow: hidden;
}

.content__chat .chat-messages .chat-message-box .chat-user-tags .avatar img {
	width: 100%;
	height: auto;
}

.content__chat .chat-messages .chat-message-box .chat-user-tags .name {
	flex: 1 0;
	line-height: 24px;
	margin-left: 8px;
	font-size: 1.07692308rem;
	color: rgba(255,255,255,0.9);
}

.content__chat .chat-messages .chat-messages__send .chat-message-box .box__file-upload {
	flex: 0 0 36px;
	margin: 5px;
	cursor: pointer;
	position: relative;
	background: rgba(255,255,255,0.1);
	border-radius: 6px;
	color: rgba(255,255,255,0.5);
}

.content__chat .chat-messages .chat-messages__send .chat-message-box .box__file-upload:before {
	font-family: 'SL-Icons';
	content: '\ea56';
	font-size: 1.3rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
}

.content__chat .chat-messages .chat-message-box .box__file-upload:hover {
	color: rgba(255,255,255,0.7);
}

.content__chat .chat-messages .chat-message-box .box__file-upload:active {
	background: rgba(255,255,255,0.15);
}

.content__chat .chat-messages .chat-message-box .box__file-upload input[type=file] {
	display: none;
}

.content__chat .chat-message-box .chat-message-field {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 14px 10px;
	flex: 1 0;
	font-size: 1.15384615em;
	line-height: 20px;
}

.content__chat .chat-message-box .chat-message-field * {
	display: inline-block;
}

.content__chat .chat-message-box .chat-message-field br {
	display: none;
}

.content__chat .chat-message-box .chat-message-field img.emoji {
	height: 20px;
	width: auto;
	vertical-align: top;
	display: inline-block;
}

.content__chat .chat-message-box .chat-message-field .tag {
	background: rgba(63,140,255,0.15);
	border: 0;
	color: rgba(63,140,255,1);
	border-radius: 3px;
	padding: 0px 2px;
	font-weight: 500;
	display: inline-block;
	cursor: pointer;
	height: 20px;
}

.content__chat .chat-message-box .chat-message-field .tag:hover {
	background: rgba(63,140,255,0.8);
	color: rgba(255,255,255,1);
}

.content__chat .chat-message-box .chat-message-field ul {
   list-style: disc inside;
}

.content__chat .chat-message-box .chat-message-field ol {
   list-style-type: decimal;
   list-style-position: inside;
}

.content__chat .chat-message-box .chat-message-field ul ul,
.content__chat .chat-message-box .chat-message-field ol ul {
   list-style-type: circle;
   list-style-position: inside;
   margin-left: 15px;
}

.content__chat .chat-message-box .chat-message-field ol ol,
.content__chat .chat-message-box .chat-message-field ul ol {
   list-style-type: lower-latin;
   list-style-position: inside;
   margin-left: 15px;
}

.content__chat .chat-message-box .chat-message-field:empty:not(:focus):before{
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.5);
}

.content__chat .chat-message-box .chat-emoji {
	flex: 0 0 45px;
	position: relative;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
}

.content__chat .chat-message-box .chat-emoji:hover {
	color: rgba(255,255,255,0.7);
}

.content__chat .chat-message-box .chat-emoji:active {
	color: rgba(255,255,255,0.5);
}

.content__chat .chat-message-box .chat-emoji:before {
	content: '\ea55';
	font-family: 'SL-Icons';
	position: absolute;
	left: 50%;
	top: 50%;
	height: 28px;
	width: 28px;
	line-height: 28px;
	text-align: center;
	font-size: 18px;
	transform: translate(-50%,-50%);
}

.content__chat .chat-message-box .chat-tools {
	padding: 6px 16px 12px 16px;
	border-top: 1px rgba(255,255,255,0.1) solid;
	height: 38px;
	display: flex;
	justify-content: space-between;
}

.content__chat .chat-message-box .chat-tools .tool {
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	border-radius: 3px;
	margin-right: 13px;
	display: inline-block;
	cursor: pointer;
	vertical-align: top;
	font-size: 14px;
	opacity: 0.5;
	transition: opacity 100ms ease-in-out;
}

.content__chat .chat-messages .chat-message-box.message-active .chat-tools .tool {
	opacity: 1;
}

.content__chat .chat-message-box .chat-tools .tool--attachment {
	opacity: 1;
}

.content__chat .chat-message-box .chat-tools .tool:hover,
.content__chat .chat-message-box .chat-tools .tool.tool--active {
	background: rgba(0,0,0,0.5);
}

.content__chat .chat-message-box .chat-tools .tool:active {
	background: rgba(0,0,0,0.25);
}

.content__chat .chat-message-box .chat-tools .tool:before {
	content: '';
	font-family: 'SL-Icons';
	color: rgba(255,255,255,0.5);
}

.content__chat .chat-message-box .chat-tools .tool--attachment:before {
	content: '\ea56';
}

.content__chat .chat-message-box .chat-tools .tool--bold:before {
	content: '\ea57';
}

.content__chat .chat-message-box .chat-tools .tool--italic:before {
	content: '\ea58';
}

.content__chat .chat-message-box .chat-tools .tool--list:before {
	content: '\ea59';
}

.content__chat .chat-message-box .chat-tools .tool--tag:before {
	content: '\ea5a';
}

.content__chat .chat-message-box .chat-tools .tool--emoji:before {
	content: '\ea55';
}

.content__chat .chat-message-box .chat-tools .tool:last-child {
	margin-right: 0;
}

.content__chat .chat-message-box .chat-tools .tool.tool--active:before {
	color: rgba(255,255,255,1);
}

/*
* Emoji Context Menu
*/
.emoji-context-menu {
	position: absolute;
	z-index: 999999;
	width: 280px;
	background: #222429;
	border-radius: 6px;
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.24);
	border: 1px #2f3034 solid;
	overflow: hidden;
	margin-top: 5px;
	margin-left: -280px;
}

.emoji-context-menu .context-head {
	background: #2f3034;
	height: 36px;
	display: flex;
	padding: 0 5px;
}

.emoji-context-menu .context-body {
	padding: 14px;
	height: 300px;
	overflow-y: scroll;
}

.emoji-context-menu .context-body .content-group .group-title {
	font-size: 0.846153846rem;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.emoji-context-menu .context-body .content-group {
	margin-bottom: 10px;
}

.emoji-context-menu .context-body .content-group:last-child {
	margin-bottom: 0;
}

.emoji-context-menu .context-body .content-group .group-content > div {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	border-radius: 2px;
	cursor: pointer;
}

.emoji-context-menu .context-body .content-group .group-content > div:hover {
	background: rgba(0,0,0,0.2);
}

.emoji-context-menu .context-body .content-group .group-content > div img {
	width: 20px;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

.emoji-context-menu .context-head > div {
	flex: 0 0 30px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
	position: relative;
}

.emoji-context-menu .context-head > div:hover {
	color: rgba(255,255,255,0.7);
}

.emoji-context-menu .context-head > div.selected {
	color: rgba(255,255,255,1);
}

.emoji-context-menu .context-head > div.selected:after {
	content: '';
	bottom: 0;
	left: 3px;
	right: 3px;
	height: 2px;
	background: rgba(255,255,255,1);
	position: absolute;
	display: block;
}

.emoji-context-menu .context-head > div:before {
	content: '\ea61';
	font-family: 'SL-Icons';
	font-size: 17px;
}

.emoji-context-menu .context-head > div.item-recent:before {
	content: '\ea61';
}

.emoji-context-menu .context-head > div.item-people:before {
	content: '\ea60';
}

.emoji-context-menu .context-head > div.item-nature:before {
	content: '\ea5f';
	font-size: 17px;
}

.emoji-context-menu .context-head > div.item-food:before {
	content: '\ea64';
	font-size: 16px;
}

.emoji-context-menu .context-head > div.item-activities:before {
	content: '\ea65';
}

.emoji-context-menu .context-head > div.item-travel:before {
	content: '\ea62';
	font-size: 15px;
}

.emoji-context-menu .context-head > div.item-objects:before {
	content: '\ea5e';
	font-size: 15px;
}

.emoji-context-menu .context-head > div.item-symbols:before {
	content: '\ea63';
	font-size: 15px;
}

.emoji-context-menu .context-head > div.item-flags:before {
	content: '\ea66';
	font-size: 16px;
}


/*
* Chat Mentions Title
*/
.chat-symbol-title {
	font-size: 1rem;
	color: rgba(255,255,255,0.85);
	font-weight: 500;
	position: relative;
	height: 24px;
	line-height: 24px;
	margin-bottom: 20px;
}

.chat-symbol-title.loading span:before {
	content: '';
	width: 20px;
	height: 12px;
	margin: 6px 0;
	border-radius: 3px;
	background: rgba(255,255,255,0.1);
	display: inline-block;
	vertical-align: top;
}

.chat-symbol-title:before {
	content: '$';
	color: #fff;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	background: #5e75cb;
	border-radius: 50%;
	font-size: 13px;
	display: inline-block;
	vertical-align: top;
	margin-right: 8px;
}


/*
* Chat Search Results
*/
.chat-search-results {
	border-top: 1px rgba(255,255,255,0.1) solid;
	margin-top: 15px;
	display: block;
}

.chat-search-results .results-title {
	height: 60px;
	border-bottom: 1px rgba(255,255,255,0.1) solid;
	padding: 14px 20px;
	display: flex;
}

.chat-search-results .results-title .results-close-button {
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	position: relative;
	border-radius: 4px;
	cursor: pointer;
}

.chat-search-results .results-title .results-close-button:hover {
	background: rgba(255,255,255,0.15);
}

.chat-search-results .results-title .results-close-button:active {
	background: rgba(255,255,255,0.125);
}

.chat-search-results .results-title .results-close-button:before {
	content: '\ea7f';
	font-family: 'SL-Icons';
	font-size: 18px;
	color: rgba(255,255,255,0.6);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.chat-search-results .results-title .results-text {
	line-height: 32px;
	font-size: 1.30769230769rem;
	color: rgba(255,255,255,0.6);
	font-weight: bold;
	margin-left: 15px;
}

.chat-search-results .results-title .results-text span.search-term {
	color: rgba(255,255,255,0.9);
}

.chat-search-results .results-body {
	padding: 20px;
	flex: 1 0;
	overflow: hidden;
	overflow-y: scroll;
}

.search-results {
	margin-bottom: 20px;
}

.search-results > div {
	background: rgba(255,255,255,0.075);
	border-radius: 4px;
	margin-bottom: 10px;
	padding: 15px 20px;
	display: flex;
	position: relative;
}

.search-results > div.placeholder {
	height: 70px;
}

.search-results > div:last-child {
	margin-bottom: 0;
}

.search-results > div .avatar {
	flex: 0 0 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 15px;
}

.search-results > div .avatar img {
	width: 100%;
	height: auto;
}

.search-results > div .username {
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 1.15384615385rem;
	margin-right: 10px;
	cursor: pointer;
	color: #fff;
}

.search-results > div .username:hover {
	text-decoration: underline;
}


.search-results > div .head {
	line-height: 20px;
}

.search-results > div .head > * {
	display: inline-block;
	vertical-align: top;
}

.search-results > div .time {
	color: rgba(255,255,255,0.4);
	font-size: 0.923076923rem;
	position: relative;
	padding-left: 10px;
}

.search-results > div .time:before {
	content: '';
	display: block;
	background-color: rgba(255,255,255,0.4);
	width: 2px;
	height: 2px;
	border-radius: 50%;
	left: -1px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}

.search-results > div .text {
	font-size: 1.07692307692rem;
	line-height: 1.6rem;
}

.search-results > div .text .mark {
	color: #267eff;
	font-weight: bold;
}

.chat-messages .chat-search-results {
	display: none;
}

.chat-messages.search-state .chat-search-results {
	display: flex;
	flex-direction: column;
	flex: 1 0;
	overflow: hidden;
}

.chat-messages.search-state .chat-messages__send,
.chat-messages.search-state .chat-messages__window {
	display: none;
}

.search-results > div .delete-message {
	position: absolute;
	right: 10px;
	top: 10px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	width: 24px;
	display: block;
	color: rgba(233,68,71,1);
	background: rgba(233,68,71,0.2);
	border-radius: 3px;
	cursor: pointer;
	display: none;
}

.search-results > div:hover .delete-message {
	display: block;
}

.search-results > div .delete-message:hover {
	background: rgba(233,68,71,0.3);
}

.search-results > div .delete-message:active {
	background: rgba(233,68,71,0.2);
}

.search-results > div .delete-message:before {
	content: '\ea5d';
	font-family: 'SL-Icons';
	font-size: 12px;
}


/*
* Chat Message Element
*/
.chat-messages__window .message-element {
	border-bottom: 1px solid rgba(255,255,255,0.04);
	padding: 15px 0;
}

.chat-messages__window .message-element > div {
	display: flex;
	padding: 5px 0;
	margin-left: -20px;
	margin-right: -12px;
	padding-left: 20px;
	padding-right: 12px;
	position: relative;
}

.chat-messages__window .message-element > div:hover,
.chat-messages__window .message-element > div.message-item--contextopen {
	background: rgba(255,255,255,0.04);
}

.chat-messages__window .message-element:last-child {
	border-bottom: 0;
}

.chat-messages__window .message-element .message-side {
	flex: 0 0 40px;
	margin-right: 20px;
}

.chat-messages__window .message-element .message-side > div.message-time {
	font-size: 0.692307692rem;
	color: rgba(255,255,255,0.5);
	text-align: center;
	line-height: 15px;
	display: none;
}
.chat-messages__window .message-element > div:hover div.message-time {
	display: block;
}

.chat-messages__window .message-element .message-body {
	flex: 1 0;
}

.chat-messages__window .message-element .message-side > div.message-avatar {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.2);
}

.chat-messages__window .message-element .message-side > div.message-avatar > img {
	width: 100%;
	height: auto;
}

.chat-messages__window .message-element .message-body .message-head {
	margin-bottom: 5px;
	height: 20px;
	line-height: 20px;
}

.chat-messages__window .message-element .message-body .message-head > div {
	display: inline-block;
	vertical-align: top;
}

.chat-messages__window .message-element .message-body .message-head .message-username {
	font-weight: 600;
	margin-right: 10px;
	color: #fff;
	font-size: 1.15384615rem;
	cursor: pointer;
	user-select: none;
}

.chat-messages__window .message-element .message-body .message-head .message-username:hover {
	text-decoration: underline;
}

.chat-messages__window .message-element .message-body .message-head .message-head-time {
	color: rgba(255,255,255,0.4);
	font-size: 0.923076923rem;
	position: relative;
	padding-left: 10px;
}

.chat-messages__window .message-element .message-body .message-head .message-head-time:before {
	content: '';
	display: block;
	background-color: rgba(255,255,255,0.4);
	width: 2px;
	height: 2px;
	border-radius: 50%;
	left: -1px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}

.chat-messages__window .message-element .message-body .message-text,
.profile-modal .chat-info .chat-text {
	color: rgba(255,255,255,0.8);
	line-height: 20px;
	font-size: 1.15384615rem;
}

.chat-messages__window .message-element .message-body .message-text > *,
.profile-modal .chat-info .chat-text > * {
	vertical-align: baseline;
	word-break: break-word;
}

.chat-messages__window .message-element .message-body .message-text a,
.profile-modal .chat-info .chat-text a {
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-messages__window .message-element .message-body .message-text span.bold {
	font-weight: bold;
}

.chat-messages__window .message-element .message-body .message-text span.italic {
	font-style: italic;
}

.chat-messages__window .message-element .message-body .message-text .message-is-edit {
	color: rgba(255,255,255,0.5);
	font-size: 0.846153846rem;
	margin-left: 5px;
	display: none;
}

.chat-messages__window .message-element > div.message-item--edited .message-body .message-text .message-is-edit {
	display: inline-block !important;
}

.chat-messages__window .message-element .message-body .message-text .tag,
.profile-modal .chat-info .chat-text .tag,
.search-results > div .text .mark .tag {
	background: rgba(63,140,255,0.15);
	color: rgba(63,140,255,1);
	border-radius: 3px;
	padding: 0px 4px;
	line-height: 21px;
	margin: -3px 0;
	font-weight: bold;
	display: inline-block;
	cursor: pointer;
	user-select: none;
	transition: background 30ms ease;
}

.chat-messages__window .message-element .message-body .message-text .tag:hover,
.profile-modal .chat-info .chat-text .tag:hover,
.search-results > div .text .mark .tag:hover {
	background: rgba(63,140,255,0.25);
}

.chat-messages__window .message-element .message-body .message-text .emoji,
.profile-modal .chat-info .chat-text .emoji {
	height: 15px;
	width: auto;
	display: inline-block;
	vertical-align: top;
}

.chat-messages__window .message-element .message-body .message-text .ticker,
.profile-modal .chat-info .chat-text .ticker {
	cursor: pointer;
}

.chat-messages__window .message-element .message-body .message-attachment {
	margin-top: 10px;
	max-width: 200px;
}

.profile-body .chat-body .chat-info .chat-attachment > div > img,
.profile-body .chat-body .chat-info .message-preview-image > div > img,
.results-body .search-results .message-preview-image > div > img,
.results-body .search-results .chat-attachment > div > img {
	margin-top: 10px;
	max-width: 300px;
}

.chat-messages__window .message-element .message-body .message-edit {
	margin-right: 50px;
	display: none;
}

.chat-messages__window .message-element .message-body .message-edit-msg {
	display: none;
	font-size: 0.769230769rem;
	margin-top: 3px;
	color: rgba(255,255,255,0.5);
}

.chat-messages__window .message-element .message-body .message-edit-msg span {
	color: #247afb;
	cursor: pointer;
}

.chat-messages__window .message-element .message-body .message-edit-msg span:hover {
	text-decoration: underline;
}

.chat-messages__window .message-element > div.message-item--edit .message-text {
	display: none;
}

.chat-messages__window .message-element > div.message-item--edit .message-edit {
	display: flex;
}

.chat-messages__window .message-element > div.message-item--edit .message-edit-msg {
	display: block;
}

.chat-messages__window .message-element .message-body .message-preview {
	position: relative;
	max-width: 550px;
	margin-top: 10px;
	padding: 7px;
	padding-left: 20px;
	font-size: 1.15384615rem;
}

.chat-messages__window .message-element .message-body .message-preview .message-preview-author {
	margin-bottom: 7px;
	font-weight: 600;
	color: rgba(255,255,255,0.7);
	font-size: 1rem;
}

.chat-messages__window .message-element .message-body .message-preview .message-preview-text {
	color: rgba(255,255,255,0.6);
}

.chat-messages__window .message-element .message-body .message-preview .message-preview-source {
	color: rgba(255,255,255,0.6);
	padding-left: 20px;
	position: relative;
	margin-top: 10px;
	font-size: 1rem;
	color: rgba(255,255,255,0.5);
}

.chat-messages__window .message-element .message-body .message-preview .message-preview-source:before {
	content: '\ea32';
	font-family: 'SL-Icons';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #3f8cff;
}

.chat-messages__window .message-element .message-body .message-preview .message-preview-image {
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
	overflow: hidden;
	display: block;
	margin-top: 10px;
	position: relative;
}

.chat-messages__window .message-element .message-body .message-preview .message-preview-image div {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.chat-messages__window .message-element .message-body .message-preview .message-preview-image div img {
	width: 100%;
	height: auto;
}

.chat-messages__window .message-element .message-body .message-preview:before {
	content: '';
	position: absolute;
	width: 4px;
	border-radius: 2px;
	background-color: #3f8cff;
	left: 0;
	top: 0;
	bottom: 0;
}

.chat-messages__window .message-element .message-body .message-attachment > div {
	width: 100%;
	background: rgba(255,255,255,0.075);
	border-radius: 3px;
	overflow: hidden;
	display: block;
	position: relative;
}

.chat-messages__window .message-element .message-body .message-attachment > div:before {
	position: absolute;
	content: '';
	background-image: url('../img/loader.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 30px 30px;
	width: 30px;
	height: 30px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	opacity: 0.5;
}

.chat-messages__window .message-element .message-body .message-attachment > div > img {
	vertical-align: top;
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

.chat-messages__window .message-element .message-tools {
	position: absolute;
	right: 12px;
	top: -16px;
	height: 32px;
	padding: 2px;
	border-radius: 6px;
	border: solid 1px rgba(100, 105, 110, 0.5);
	background-color: #222429;
	display: none;
}

.chat-messages__window .message-element .message-tools .tool {
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
	font-size: 13px;
	border-radius: 4px;
}

.chat-messages__window .message-element .message-tools .tool:hover {
	background: rgba(255,255,255,0.075);
	color: rgba(255,255,255,0.75);
}

.chat-messages__window .message-element .message-tools .tool:active {
	background: rgba(255,255,255,0.05);
}

.chat-messages__window .message-element .message-tools .tool:before {
	font-family: 'SL-Icons';
}

.chat-messages__window .message-element .message-tools .tool.tool-edit:before {
	content: '\ea5b';
}

.chat-messages__window .message-element .message-tools .tool.tool-more:before {
	content: '\ea5c';
}

.chat-messages__window .message-element .message-tools:before {
	content: '';
	position: absolute;
	display: block;
	width: 50px;
	left: -50px;
	top: 0;
	bottom: 0;
}

.chat-messages__window .message-element > div:hover .message-tools,
.chat-messages__window .message-element > div.message-item--contextopen .message-tools {
	display: block;
}

.chat-messages__window .message-element > div.message-item--edit .message-tools {
	display: none;
}


/*
* Message Tools Context Menu
*/
@keyframes context-menu-open {
	to {
		transform: translateX(0);
	}
}
.message-tools-context {
	position: absolute;
	width: 185px;
	margin-left: -190px;
	display: block;
	border-radius: 6px;
	background: #18191c;
	padding: 8px;
	left: 0;
	top: 0;
	z-index: 999999;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
	transform: translateX(-0.5em);
	animation: context-menu-open 150ms ease-out forwards;
}

.message-tools-context > div {
	height: 32px;
	line-height: 20px;
	padding: 6px 8px;
	border-radius: 3px;
	font-weight: 500;
	cursor: pointer;
	margin-bottom: 3px;
	color: rgba(255,255,255,0.7);
	position: relative;
}

.message-tools-context > div.tool--delete,
.message-tools-context > div.tool--delete:hover,
.message-tools-context > div.tool--delete:hover:after,
.message-tools-context > div.tool--delete:after {
	color: #e94447;
}

.message-tools-context > div:after {
	position: absolute;
	font-family: 'SL-Icons';
	content: '';
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	font-size: 15px;
	color: rgba(255,255,255,0.35);
}

.message-tools-context > div:hover:after {
	color: rgba(255,255,255,0.45);
}

.message-tools-context > div.tool--edit:after {
	content: '\ea5b';
}

.message-tools-context > div.tool--delete:after {
	content: '\ea5d';
}

.message-tools-context > div:last-child {
	margin-bottom: 0px;
}

.message-tools-context > div:hover {
	background: rgba(255,255,255,0.05);
	color: rgba(255,255,255,0.85);
}


/*
* Chat Databar
*/
.content__chat .chat-databar {
	flex: 0 0 320px;
	background: #0f0f13;
	padding: 28px 16px;
	overflow-x: scroll;
	position: relative;
}

.app.mobile .content__chat .chat-databar {
	display: none;
}

.content__chat .chat-databar .price-data {
	display: flex;
}

.content__chat .chat-databar .price-data > * {
	margin-right: 10px;
	background: rgba(255,255,255,0.05);
	border-radius: 4px;
	flex: 1 0;
	padding: 15px;
	border: 1px transparent solid;
}

.content__chat .chat-databar .price-data > a {
	cursor: pointer;
}

.content__chat .chat-databar .price-data > a:hover {
	border: 1px rgba(255,255,255,0.15) solid;
	text-decoration: unset;
}

.content__chat .chat-databar .price-data > * .label {
	margin-bottom: 6px;
	color: rgba(255,255,255,0.5);
	font-size: 11px;
	font-weight: 500;
}

.content__chat .chat-databar .price-data > * .value {
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	color: #fff;
}

.content__chat .chat-databar .price-data > * .value .change {
	margin-left: 3px;
	font-size: 12px;
	line-height: 20px;
	display: inline-block;
	vertical-align: top;
}

.content__chat .chat-databar .price-data > div:last-child {
	margin-right: 0;
}

.content__chat .chat-databar .sidebar-data-box {
	margin-bottom: 20px;
}

.content__chat .chat-databar .sidebar-data-box:last-child {
	margin-bottom: 0;
}

.content__chat .chat-databar .sidebar-data-box .title {
	font-weight: bold;
	position: relative;
	padding-left: 22px;
	margin-bottom: 15px;
	display: block;
	color: #fff;
}

.content__chat .chat-databar .sidebar-data-box .title:before {
	font-family: 'SL-Icons';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.6);
}

.content__chat .chat-databar .sidebar-data-box.box-fishmarket .title:before {
	content: '\ea82';
	color: rgba(255,255,255,0.6);
}

.content__chat .chat-databar .sidebar-data-box.box-indices .title:before {
	content: '\ea80';
}

.content__chat .chat-databar .sidebar-data-box.box-trending .title:before {
	content: '\ea83';
}

.content__chat .chat-databar .sidebar-data-box.box-algo .title:before {
	content: '\ea7d';
}

.content__chat .chat-databar .sidebar-data-box.contest .title:before {
	content: '\ea65';
}

.content__chat .chat-databar .sidebar-data-box .symbols > * {
	display: block;
	border-radius: 4px;
	background: rgba(255,255,255,0.05);
	padding: 12px 14px;
	margin-bottom: 6px;
	cursor: pointer;
	user-select: none;
}

.content__chat .chat-databar .sidebar-data-box .symbols > *:hover {
	background: rgba(255,255,255,0.075);
	text-decoration: none;
}

.content__chat .chat-databar .sidebar-data-box .symbols > *:active {
	background: rgba(255,255,255,0.06);
}

.content__chat .chat-databar .sidebar-data-box .symbols > * > div {
	display: flex;
	justify-content: space-between;
}

.content__chat .chat-databar .sidebar-data-box .symbols > * > div > * {
	flex: 0 0 50%;
	overflow: hidden;
    white-space: nowrap;
	text-overflow: ellipsis;
}

.content__chat .chat-databar .sidebar-data-box .symbols > * > div > *:last-child {
	text-align: right;
}

.content__chat .chat-databar .sidebar-data-box .symbols > * > div:first-child {
	margin-bottom: 5px;
}

.content__chat .chat-databar .sidebar-data-box .symbols > * > div .symbol {
	font-weight: bold;
	color: #0084ff;
}

.content__chat .chat-databar .sidebar-data-box .symbols > * > div .price {
	font-weight: 500;
	color: rgba(255,255,255,0.9);
}

.content__chat .chat-databar .sidebar-data-box .symbols > * > div .name {
	color: rgba(255,255,255,0.6);
	font-size: 0.92307692307rem;
}

.content__chat .chat-databar .sidebar-data-box .symbols > * > div .change {
	font-size: 0.92307692307rem;
	font-weight: bold;
}

.content__chat .chat-databar .sidebar-data-box .score-meter {
	padding: 15px 20px;
	display: flex;
	width: auto;
	max-width: none;
	align-items: center;
	background: rgba(255,255,255,0.05);
	border-radius: 4px;
}

.content__chat .chat-databar .sidebar-data-box .score-meter > div {
	flex: 1 0;
}

.content__chat .chat-databar .sidebar-data-box .score-meter > .score,
.content__chat .chat-databar .sidebar-data-box.score-meter:before {
	font-size: 1.8rem;
	text-align: left;
}

.content__chat .chat-databar .sidebar-data-box .score-meter > .box {
	flex: 0 0 70%;
}


/*
* Upgrade Modal
*/
.upgrade-modal {
	padding: 54px !important;
}

.upgrade-modal .title {
	font-weight: 900;
	font-size: 30px;
	margin-bottom: 30px;
}

.upgrade-modal .subtitle {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6em;
	margin-bottom: 30px;
	color: rgba(255,255,255,0.9);
	background: rgba(255,255,255,0.05);
	border: 1px rgba(255,255,255,0.05) solid;
	padding: 20px 25px 20px 80px;
	border-radius: 6px;
	position: relative;
}

.upgrade-modal .subtitle:before {
	content: '\ea6b';
	font-family: 'SL-Icons';
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	position: absolute;
	color: rgba(255,255,255,0.6);
}

.upgrade-modal .list {
	margin-bottom: 50px;
	padding: 10px;
}

.upgrade-modal .list > div {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 500;
	position: relative;
	padding-left: 40px;
	line-height: 22px;
}

.upgrade-modal .list > div:last-child {
	margin-bottom: 0;
}

.upgrade-modal .list > div:before {
	display: block;
	font-family: 'SL-Icons';
	content: '\ea1d';
	background: #3d9b14;
	color: #fff;
	width: 22px;
	height: 22px;
	line-height: 22px;
	font-size: 9px;
	border-radius: 50%;
	text-align: center;
	margin-right: 10px;
	position: absolute;
	left: 0;
	top: 0;
}

.upgrade-modal .payment-cycles {
	display: flex;
	margin: 50px 0;
}

.upgrade-modal .payment-cycles > div {
	flex: 1 0;
	margin-right: 15px;
	background: rgba(255,255,255,0.05);
	border-radius: 4px;
	padding: 20px 24px;
	user-select: none;
	border: 3px transparent solid;
	cursor: pointer;
	position: relative;
}

.upgrade-modal .payment-cycles > div:hover {
	background: rgba(255,255,255,0.075);
}

.upgrade-modal .payment-cycles > div:active {
	background: rgba(255,255,255,0.06);
}

.upgrade-modal .payment-cycles > div.selected {
	border-color: #0d42fa;
}

.upgrade-modal .payment-cycles > div.selected:after {
	content: '\ea1d';
	font-family: 'SL-Icons';
	width: 26px;
	height: 26px;
	right: -10px;
	top: -10px;
	font-size: 10px;
	line-height: 26px;
	text-align: center;
	border-radius: 50%;
	background: #0d42fa;
	color: #fff;
	position: absolute;
	display: block;
}

.upgrade-modal .payment-cycles > div:last-child {
	margin-right: 0;
}

.upgrade-modal .payment-cycles > div .label {
	font-weight: 500;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 500;
	color: rgba(255,255,255,0.9);
}

.upgrade-modal .payment-cycles > div .coupon {
	display: flex;
	line-height: 20px;
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 12px;
}

.upgrade-modal .payment-cycles > div .coupon .name {
	border-radius: 3px;
	background: #3d9b14;
	color: #fff;
	padding: 0 5px;
}

.upgrade-modal .payment-cycles > div .coupon .old-price {
	text-decoration: line-through;
	margin-left: 5px;
	color: rgba(255,255,255,0.5);
}

.upgrade-modal .payment-cycles > div .price {
	font-size: 24px;
	font-weight: bold;
}

.upgrade-modal .payment-cycles > div .discount {
	display: inline-block;
	font-size: 11px;
	color: rgba(110,198,15,0.9);
	border-radius: 4px;
	line-height: 12px;
	margin-top: 8px;
	vertical-align: top;
	font-weight: 500;
}

.upgrade-modal .refund-notice {
	margin-top: 25px;
	color: rgba(255,255,255,0.5);
	text-align: center;
}

.upgrade-modal #paypal-button {
	height: 54px;
}



/*
* Context Menu
*/
.context-menu {
	display: block;
	width: 185px;
	border-radius: 4px;
	background: #000;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
	position: absolute;
	padding: 8px;
	z-index: 99999999999;
}

.context-menu > div {
	border-radius: 3px;
	padding: 4px 8px;
	height: 32px;
	line-height: 24px;
	cursor: pointer;
	color: rgba(255,255,255,0.75);
	margin-bottom: 3px;
}

.context-menu > div:last-child {
	margin-bottom: 0px;
}

.context-menu > div:hover {
	background: rgba(255,255,255,0.1);
}

/*
* Control bar
*/
.control-bar {
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
	height: 36px;
}

.control-bar > * {
	/*overflow: hidden;*/
}

.control-bar .bar__left {
	margin-right: 15px;
	flex: 1 0;
}

.app.mobile .control-bar {
	height: auto;
	display: block;
}

.app.mobile .control-bar > div {
	margin-bottom: 10px;
}

.app.mobile .control-bar > div:last-child {
	margin-bottom: 0;
}

.control-bar > div {
	display: flex;
}

.control-bar > div > * {
	margin-right: 10px;
	vertical-align: top;
}

.control-bar > div > *:last-child {
	margin-right: 0;
}

.control-bar .button {
	height: 36px;
	line-height: 36px;
}

.control-bar .control-bar__item {
	height: 36px;
	line-height: 36px;
	display: inline-block;
	background: rgba(255,255,255,0.1);
	border-radius: 2px;
	position: relative;
	margin-right: 10px;
	vertical-align: top;
	z-index: 99;
}

.control-bar .control-bar__item:last-child {
	margin-right: 0;
}

.control-bar .switch-box .switch,
.search-control-bar .switch-box .switch{
	margin: 8px 4px;
}

.control-bar .button-link {
	cursor: pointer;
	border-radius: 4px;
	background: rgba(255,255,255,0.1);
	height: 30px;
	line-height: 20px;
	padding: 5px 27px 5px 14px;
	margin-top: 3px;
	margin-bottom: 3px;
	font-weight: 500;
	position: relative;
	margin-right: 15px;
	user-select: none;
}

.control-bar .button-link:hover {
	background: rgba(255,255,255,0.125);
}

.control-bar .button-link:active {
	background: rgba(255,255,255,0.1);
}

.control-bar .button-link:after {
	content: '\ea20';
	font-family: 'SL-Icons';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1rem;
	color: rgba(255,255,255,0.5);
}

.control-bar .control-title {
	font-weight: bold;
	font-size: 22px;
	line-height: 36px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.control-bar .control-save {
	display: block;
	flex: 0 0 32px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: 4px;
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.75);
	font-size: 12px;
	margin: 5px 0;
	cursor: pointer;
	position: relative;
}

.control-bar .control-save.unsaved:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	right: -3px;
	top: -3px;
	background: #ff6000;
	display: block;
	border-radius: 50%;
}

.control-bar .control-save:hover {
	background: rgba(255,255,255,0.15);
}

.control-bar .control-save:active {
	background: rgba(255,255,255,0.125);
}

.control-bar .control-save:before {
	content: '\ea87';
	font-family: 'SL-Icons';
	display: block;
}

.control-bar .control-user {
	flex: 0 0 30px;
	height: 30px;
	margin-top: 3px;
	margin-bottom: 3px;
	background: rgba(255,255,255,0.1);
	border-radius: 50%;
	display: none;
	overflow: hidden;
	border: 3px #222429 solid;
	box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.15);
	cursor: pointer;
}

.control-bar .control-user:hover {
	box-shadow: 0px 0px 0px 1px #188dfc;
}

.control-bar .control-user img {
	width: 100%;
	height: auto;
}

.control-bar .control-user.active {
	display: block;
}

/*
* Search Controls
*/
.search-control-bar {
	height: 36px;
	display: flex;
	margin-bottom: 15px;
}

.search-control-bar > div {
	margin-right: 15px;
}

.search-control-bar > div:last-child {
	margin-right: 0;
}

.search-control-bar .search-bar {
	flex: 1 0;
}

.app.mobile .search-control-bar {
	flex-wrap: wrap;
	height: auto;
}

.app.mobile .search-control-bar .search-bar {
	flex: 1 0 100%;
	margin: 0;
	margin-bottom: 10px;
}

.app.mobile .search-control-bar .multi-select {
	flex: 1 0 100%;
	margin: 0;
	margin-bottom: 10px;
}

.app.mobile .search-control-bar .multi-select > div {
	flex: 1 0;
}

.app.mobile .search-control-bar .control-search-time {
	margin-left: auto;
}


/*
* Search bar
*/
.search-bar {
	height: 36px;
	border-radius: 4px;
	background: rgba(255,255,255,0.1);
	border: 1px rgba(255,255,255,0.1) solid;
	display: flex;
}

.search-bar.focus {
	border-color: #2b7ef8;
}

.search-bar input {
	background: transparent;
	border: 0;
	height: 34px;
	width: auto;
	padding: 0 10px;
	flex: 1 0;
}

.search-bar .submit {
	flex: 0 0 28px;
	height: 28px;
	margin: 3px;
	text-align: center;
	line-height: 28px;
	display: block;
	font-size: 16px;
	color: rgba(255,255,255,0.6);
	cursor: pointer;
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
}

.search-bar .submit:hover {
	color: rgba(255,255,255,0.8);
	background: rgba(255,255,255,0.15);
}

.search-bar .submit:active {
	background: rgba(255,255,255,0.12);
}

.search-bar .submit:before {
	content: '\ea03';
	font-family: 'SL-Icons';
}

.search-bar .tags {
	padding: 3px;
}

.search-bar.empty .tags {
	display: none;
}

.search-bar .tags div {
	height: 28px;
	line-height: 28px;
	padding: 0 20px 0 8px;
	background: #2442fb;
	display: inline-block;
	margin-right: 4px;
	border-radius: 3px;
	user-select: none;
	cursor: pointer;
	font-weight: 500;
	position: relative;
}

.search-bar .tags div:after {
	content: '\ea19';
	font-family: 'SL-Icons';
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	font-size: 10px;
}

.search-bar .tags div:last-child {
	margin-right: 0px;
}


/*
* Multi-select Control
*/
.multi-select {
	height: 36px;
	display: flex;
	border-radius: 4px;
	overflow: hidden;
	white-space: nowrap;
}

.multi-select > div {
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.8);
	font-weight: 500;
	padding: 8px 14px 8px 10px;
	line-height: 20px;
	cursor: pointer;
	border-right: 1px rgba(255,255,255,0.1) solid;
	user-select: none;
	text-overflow: ellipsis;
	overflow: hidden;
}

.multi-select > div:last-child {
	border-right: 0;
}

.multi-select > div:before {
	content: '';
	width: 18px;
	height: 18px;
	line-height: 18px;
	margin: 1px;
	text-align: center;
	border-radius: 3px;
	background: rgba(255,255,255,0.1);
	display: inline-block;
	vertical-align: top;
	margin-right: 5px;
	text-align: center;
}

.multi-select > div.selected {
	color: rgba(255,255,255,1);
}

.multi-select > div.selected:before {
	content: '\ea1d';
	font-family: 'SL-Icons';
	font-size: 10px;
	background: #247afb;
	color: #fff;
}


/*
* Date Box
*/
.date-box-range {
	display: inline-block;
	white-space: normal;
}

.date-box-range > * {
	display: inline-block;
	margin-right: 0;
}

.date-box-range > *:first-child {
	display: inline-block;
	margin-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.date-box-range > *:first-child:after {
	content: '';
	position: absolute;
	width: 1px;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(255,255,255,0.1);
	display: block;
}

.date-box-range > *:last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.date-box {
	position: relative;
	height: 36px;
	line-height: 36px;
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
	display: inline-block;
	z-index: 999;
	user-select: none;
}

.date-box .label {
	cursor: pointer;
	font-size: 0.923076923rem;
	font-weight: 600;
	padding: 0 40px 0 20px;
	height: inherit;
	overflow: hidden;
    white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	min-width: 120px;
	max-width: 250px;
}

.date-box .label:before {
	content: '\ea25';
	font-family: 'SL-Icons';
	color: rgba(255,255,255,0.5);
	font-size: 10px;
	display: block;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.date-box.date-box--open .label:before {
	content: '\ea26';
}

.date-box .label:hover:before {
	color: rgba(255,255,255,0.75);
}

.date-box .calendar {
	position: absolute;
	width: 300px;
	top: 100%;
	left: 0;
	margin-top: 5px;
	background: #31333a;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	border-radius: 4px;
	transform: translateY(-0.5em);
	display: none;
}

.date-box.date-box--open .calendar {
	animation: add-box-open 150ms ease-out forwards;
	display: block;
}

.date-box .calendar .calendar-head {
	border-bottom: 1px #3d3f46 solid;
	display: flex;
	height: 51px;
}

.date-box .calendar .calendar-head .prev,
.date-box .calendar .calendar-head .next {
	margin: 5px;
	flex: 0 0 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
	border-radius: 3px;
}

.date-box .calendar .calendar-head .prev:hover,
.date-box .calendar .calendar-head .next:hover {
	color: rgba(255,255,255,0.75);
	background-color: rgba(255,255,255,0.1);
}

.date-box .calendar .calendar-head .prev:active,
.date-box .calendar .calendar-head .next:active {
	background-color: rgba(255,255,255,0.075);
}

.date-box .calendar .calendar-head .prev {
	transform: rotate(180deg);
}

.date-box .calendar .calendar-head .prev:after,
.date-box .calendar .calendar-head .next:after {
	font-family: 'SL-Icons';
	content: '\ea20';
	font-size: 16px;
}

.date-box .calendar .calendar-head .controls {
	flex: 1 0;
	display: flex;
	padding: 10px 0;
}

.date-box .calendar .calendar-head .controls > label {
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
	flex: 1 0;
	margin-right: 5px;
	cursor: pointer;
	position: relative;
}

.date-box .calendar .calendar-head .controls > label.month {
	flex: 0 0 55%;
}

.date-box .calendar .calendar-head .controls > label > select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	height: 30px;
	line-height: 30px;
	border-radius: 0;
	padding: 0 15px;
	display: block;
	width: 100%;
	cursor: pointer;
	position: relative;
	z-index: 999;
	font-weight: 500;
	color: #fff;
}

.date-box .calendar .calendar-head .controls > label:hover {
	background: rgba(255,255,255,0.15);
}

.date-box .calendar .calendar-head .controls > label:after {
	content: '\ea25';
	font-family: 'SL-Icons';
	right: 15px;
	font-size: 10px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	color: rgba(255,255,255,0.5);
}

.date-box .calendar .calendar-head .controls > label:last-child {
	margin-right: 0;
}

.date-box .calendar .calendar-body {
	padding: 10px;
}

.date-box .calendar .calendar-body > * {
	width: calc(100% / 7);
	display: inline-block;
	height: 34px;
	line-height: 34px;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
}

.date-box .calendar .calendar-body > div {
	color: rgba(255,255,255,0.5);
}

.date-box .calendar .calendar-body > a {
	font-weight: bold;
	color: rgba(255,255,255,0.75);
	border-radius: 3px;
}

.date-box .calendar .calendar-body > .grey {
	color: rgba(255,255,255,0.3);
}

.date-box .calendar .calendar-body > a:hover {
	font-weight: bold;
	color: rgba(255,255,255,0.9);
	border-radius: 3px;
}

.date-box .calendar .calendar-body > a:hover {
	background-color: rgba(255,255,255,0.08);
}

.date-box .calendar .calendar-body > a:active {
	background-color: rgba(255,255,255,0.05);
}

.date-box .calendar .calendar-body > a.selected,
.date-box .calendar .calendar-body > a.selected:hover {
	background: #247afb;
	color: #fff;
}

/*
* Icon Switcher
*/
.icon-switcher {
	border-radius: 4px;
	background: rgba(255,255,255,0.1);
	height: 36px;
	display: block;
}

.icon-switcher > div {
	border-radius: 4px;
	width: 45px;
	height: 36px;
	line-height: 34px;
	text-align: center;
	display: inline-block;
	border: 1px transparent solid;
	cursor: pointer;
	font-size: 1.07692307692rem;
	position: relative;
}

.icon-switcher > div:hover {
	background: rgba(255,255,255,0.05);
}

.icon-switcher > div:active {
	background: rgba(255,255,255,0.025);
}

.icon-switcher > div.selected {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.1);
}

.icon-switcher > div:before {
	font-family: 'SL-Icons';
	color: rgba(255,255,255,0.7);
}

.icon-switcher > div.selected:before {
	color: rgba(255,255,255,0.9);
}

.icon-switcher > div.switcher-list:before {
	content: '\ea81';
}

.icon-switcher > div.switcher-chart:before {
	content: '\ea80';
}

.icon-switcher > div > div {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


/*
* Select Box
*/
.select-box {
	cursor: pointer;
	position: relative;
	height: 36px;
	line-height: 36px;
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
	display: inline-block;
	user-select: none;
}

.select-box.select-box--init {
	min-width: 0;
}

.select-box .select-box__label {
	font-size: 0.923076923rem;
	font-weight: 600;
	padding: 0 40px 0 20px;
	height: inherit;
	overflow: hidden;
    white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	max-width: 120px;
}

.select-box.select-box--empty .select-box__label {
	color: rgba(255,255,255,0.5);
}

.select-box .select-box__label:after {
	content: '';
	left: 8px;
	top: 8px;
	bottom: 8px;
	right: 35px;
	background: rgba(255,255,255,0.1);
	display: block;
	border-radius: 3px;
	position: absolute;
	animation: loadPlaceholderOpacity 1.25s infinite;
}

.select-box.select-box--init .select-box__label:after {
	display: none;
}

.select-box:hover {
	background: rgba(255,255,255,0.125);
}

.select-box.select-box--init .select-box__label:before {
	content: '\ea25';
	font-family: 'SL-Icons';
	color: rgba(255,255,255,0.5);
	font-size: 10px;
	display: block;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.select-box.select-box--hide-label .select-box__label {
	padding: 0;
	width: 42px;
}

.select-box {
	min-width: auto;
}

.select-box.select-box--hide-label .select-box__label:before {
	left: 50%;
	right: auto;
	transform: translate(-50%,-50%);
}

div.select-box.select-box--hide-label div.select-box__label:after {
	display: none !important;
}

.select-box.select-box--open {
	background: rgba(255,255,255,0.15);
	z-index: 9999999;
}

.select-box.select-box--open .select-box__label:before {
	content: '\ea26';
}

.select-box > div:last-child {
	display: none;
	transform: translateY(-0.5em);
	background: #1a1b1d;
	border: 1px rgba(255,255,255,0.05) solid;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	border-radius: 4px;
	color: #000;
	min-width: 200px;
	z-index: 9999;
}

.select-box.select-box--open > div:last-child {
	display: block;
	top: 100%;
	left: 0;
	position: absolute;
	margin-top: 5px;
	animation: add-box-open 50ms ease-out forwards;
}

.select-box.select-box--open > div:last-child > ul {
	padding: 7px 0;
	max-height: 280px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.select-box.select-box--open > div:last-child > ul li {
	padding: 8px 15px 8px 41px;
	font-size: 0.923076923rem;
	font-weight: 600;
	line-height: normal;
	color: rgba(255,255,255,0.6);
	position: relative;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.select-box.select-box--open > div:last-child > ul li:hover {
	color: rgba(255,255,255,0.8);
}

.select-box.select-box--open > div:last-child > ul li:active {
	color: rgba(255,255,255,0.7);
}

.select-box > div:last-child > ul li:before {
	content: '';
	width: 17px;
	height: 17px;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	border: 2px solid rgba(255,255,255,0.4);
	transition: border 0.1s;
	box-sizing: border-box;
	background: transparent;
}

.select-box.select-box--type-select > div:last-child > ul li:before {
	border-radius: 50%;
}

.select-box.select-box--type-multiple > div:last-child > ul li:before {
	border-radius: 2px;
}

.select-box.select-box--type-select > div:last-child > ul li:after {
	content: '\ea1d';
	font-family: 'SL-Icons';
	width: 17px;
	height: 17px;
	line-height: 17px;
	font-size: 9px;
	text-align: center;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.1s;
	opacity: 0;
	color: #fff;
}

.select-box.select-box--type-multiple > div:last-child > ul li.selected:after {
	content: '\ea1d';
	font-family: 'SL-Icons';
	font-size: 9px;
	color: #fff;
	position: absolute;
	left: 19px;
	top: 50%;
	transform: translateY(-50%);
}

.select-box.select-box--type-select > div:last-child > ul li.selected:after {
	opacity: 1;
}

.select-box > ul li:hover:before {
	border-color: rgba(255,255,255,0.6);
}

.select-box.select-box--type-select > div:last-child > ul li.selected:before {
	border-color: #0d42fb;
	border-width: 8.5px;
}

.select-box.select-box--type-multiple > div:last-child > ul li.selected:before {
	border-width: 8.5px;
	border-color: #1a76ff;
}

.select-box > div:last-child > ul li.selected {
	color: rgba(255,255,255,1);
}

.select-box > div:last-child > .link-box {
	border-bottom: 1px rgba(255,255,255,0.1) solid;
}

.select-box > div:last-child > .link-box > div {
	position: relative;
	padding: 12px 20px 12px 46px;
	font-size: 0.923076923rem;
	font-weight: 600;
	line-height: normal;
	color: rgba(255,255,255,0.6);
}

.select-box > div:last-child > .link-box > div:hover {
	color: rgba(255,255,255,0.8);
}

.select-box > div:last-child > .link-box > div:active {
	color: rgba(255,255,255,0.7);
}

.select-box > div:last-child > .link-box > div:before {
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	font-size: 1.15384615rem;
	left: 22px;
}

.select-box > div:last-child > .link-box > div.link--save:before {
	content: '\ea1e';
	font-family: 'SL-Icons';
}


/*
* Tab Buttons
*/
.control-bar .tab-buttons {
	display: inline-block;
	height: 36px;
}

.control-bar .tab-buttons > div {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0 14px;
	margin: 3px 0;
	border-radius: 2px;
	background: rgba(255,255,255,0.00);
	color: rgba(255,255,255,0.6);
	margin-right: 7px;
	font-size: 0.923076923rem;
	font-weight: bold;
	cursor: pointer;
}

.control-bar .tab-buttons > div:hover {
	background: rgba(255,255,255,0.075);
}

.control-bar .tab-buttons > div.tab--selected {
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.8);
}


/*
* Submenu bar
*/
.submenu-bar {
	height: 30px;
	margin: 3px 0;
}

.submenu-bar ul {
	font-size: 0.923076923rem;
}

.submenu-bar ul li {
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	padding: 0 15px;
	height: 30px;
	line-height: 30px;
	color: rgba(255,255,255,0.6);
	cursor: pointer;
	border-radius: 4px;
	font-weight: bold;
	user-select: none;
}

.submenu-bar ul li:hover {
	background: rgba(255,255,255,0.05);
	color: rgba(255,255,255,0.75);
}

.submenu-bar ul li.submenu-bar__item--selected,
.submenu-bar ul li.submenu-bar__item--selected:hover {
	color: rgba(255,255,255,0.95);
	background: rgba(255,255,255,0.1);
}


/*
* Instrumental detail
*/
.page-tree {
	margin-bottom: 15px;
	color: rgba(255,255,255,0.4);
}

.content-instrument-detail .instrument-title {
	margin-bottom: 10px;
	height: 36px;
	display: flex;
}

.content-instrument-detail .instrument-title > * {
	vertical-align: top;
	display: inline-block;
}

.content-instrument-detail .instrument-symbol {
	background: rgba(255,255,255,0.075);
	color: rgba(255,255,255,1);
	border-radius: 3px;
	padding: 8px 15px;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: bold;
	display: inline-block;
	margin-right: 10px;
	height: 36px;
	line-height: 20px;
}

.content-instrument-detail .instrument-name {
	font-weight: bold;
	font-size: 18px;
	height: 36px;
	line-height: 36px;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.content-instrument-detail .instrument-status {
	margin: 14.5px 6px;
	border-radius: 50%;
	background: #6eb010;
	width: 7px;
	height: 7px;
	display: inline-block;
	opacity: 0.85;
	cursor: pointer;
}

.content-instrument-detail .instrument-status.open {
	background: #6eb010;
}

.content-instrument-detail .instrument-status.closed {
	background: rgba(255,255,255,0.3);
}

.content-instrument-detail .instrument-status.premarket,
.content-instrument-detail .instrument-status.afterhours {
	background: #fa5f0a;
}

.content-instrument-detail .instrument-status:hover {
	opacity: 1;
}

.content-instrument-detail .instrument-title .instrument-intraday-score {
	flex: 0 0 100px;
	display: none;
	margin-left: auto;
	height: 36px;
}

.content-instrument-detail .instrument-title .instrument-intraday-score .score-bar {
	flex: 1 0;
	height: 6px;
	margin: 15px 0;
	margin-right: 10px;
	border-radius: 3px;
	background: rgba(255,255,255,0.1);
	display: block;
	overflow: hidden;
}

.content-instrument-detail .instrument-title .instrument-intraday-score .score-bar .score-bar__inner {
	display: block;
	height: 6px;
	background: rgba(255,255,255,0.1);
	transition: width 100ms ease-in-out;
}

.content-instrument-detail .instrument-title .instrument-intraday-score .score-value {
	flex: 0 0 30px;
	margin: 8px 0;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 0.923076923rem;
	color: rgba(255,255,255,0.75);
}

.content-instrument-detail .instrument-title .instrument-controls {
	margin-left: auto;
}

.content-instrument-detail .instrument-title .instrument-controls > .button {
	margin-right: 7px;
}

.content-instrument-detail .instrument-title .instrument-controls > .button:last-child {
	margin-right: 0;
}

.content-instrument-detail .instrument-exchange {
	font-size: 12px;
	color: rgba(255,255,255,0.5);
}

.content-instrument-detail .instrument-info {
	margin-bottom: 15px;
	display: flex;
    justify-content: space-between;
}

.app.mobile .content-instrument-detail .instrument-info {
	flex-wrap: wrap;
}

/*
* Instrument Price
*/
.content-instrument-detail .instrument-price {
	display: inline-block;
}

.app.mobile .content-instrument-detail div.instrument-price {
	flex: 1 0 50%;
	margin-left: 0;
	margin-bottom: 10px;
}

.content-instrument-detail .instrument-price .info {
	display: flex;
	height: 36px;
	font-family: 'Arimo', sans-serif;
}

.content-instrument-detail .instrument-price .time {
	color: rgba(255,255,255,0.7);
	font-size: 11px;
}

.content-instrument-detail .instrument-price .time .label {
	padding: 4px 6px;
	border-radius: 3px;
	background: rgba(255,255,255,0.05);
	display: inline-block;
	font-weight: 500;
}

.content-instrument-detail .instrument-price.up .info .value {
	animation: numberChangeUp 0.4s normal forwards ease-in-out;
}

.content-instrument-detail .instrument-price.down .info .value {
	animation: numberChangeDown 0.4s normal forwards ease-in-out;
}

.content-instrument-detail .instrument-price .info .value {
	font-size: 30px;
	font-weight: bold;
	display: inline-block;
	line-height: 36px;
}

.content-instrument-detail .instrument-price.price-secondary {
	margin-left: 10px;
	display: none;
}

.content-instrument-detail .instrument-price.price-secondary.visible {
	display: block;
}

.content-instrument-detail .instrument-price.price-secondary .info .value {
	font-size: 22px;
}

.content-instrument-detail .instrument-price .info .change {
	display: inline-block;
	margin: 5px 0 5px 5px;
	padding: 0 10px;
	border-radius: 4px;
	height: 26px;
	line-height: 26px;
	font-weight: 600;
	font-size: 16px;
}

.content-instrument-detail .instrument-price .info .change.up {
	color: #45be4e;
	background: rgba(69,190,78,0.0);
}

.content-instrument-detail .instrument-price .info .change.down {
	color: #fc3641;
	background: rgba(238,19,39,0.0);
}

.content-instrument-detail .instrument-categories {
	display: inline-block;
	margin-left: auto;
	height: 36px;
}

.content-instrument-detail .instrument-categories a {
	display: inline-block;
	border-radius: 3px;
	border: 1px solid transparent;
	background: rgba(255,255,255,0.05);
	height: 26px;
	line-height: 24px;
	color: rgba(255,255,255,0.5);
	padding: 0 8px;
	margin: 5px 20px 5px 0;
	font-weight: 600;
	font-size: 0.846153846rem;
	position: relative;
}

.content-instrument-detail .instrument-categories a:hover {
	border-color: rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.75);
}

.content-instrument-detail .instrument-categories a:first-child:before {
	content: '\ea20';
	font-family: 'SL-Icons';
	position: absolute;
	right: -17px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.4);
}

.content-instrument-detail .instrument-categories a:last-child {
	margin-right: 0;
}

.instrument-info .instrument-datasets {
	display: inline-block;
	height: 36px;
	margin-left: 20px;
}

.app.mobile .instrument-info .instrument-datasets {
	margin-left: 0;
}

.instrument-info .instrument-datasets .instrument-datasets__item {
	display: inline-block;
	margin-left: 10px;
	padding: 0 12px;
	border-radius: 2px;
	line-height: 26px;
	height: 26px;
	vertical-align: middle;
	margin: 5px 0;
	background: rgba(255,255,255,0.075);
}

.instrument-info .instrument-datasets .instrument-datasets__item > div {
	display: inline-block;
	font-size: 0.846153846rem;
}

.instrument-info .instrument-datasets .instrument-datasets__item > .item__label {
	margin-right: 5px;
	color: rgba(255,255,255,0.5);
	font-weight: 600;
}

.instrument-info .instrument-datasets .instrument-datasets__item > .item__value {
	color: rgba(255,255,255,0.85);
	font-weight: 500;
}


/*
* News List
*/
.news-list > * {
	height: 40px;
	display: block;
	border-radius: 6px;
	background: rgba(255,255,255,0.03);
	padding: 10px 20px 10px 12px;
	margin-bottom: 3px;
	display: flex;
	opacity: 0;
	transition: opacity 900ms ease;
	position: relative;
}

.news-list > .item-hidden {
	opacity: 0.5;
}

.news-list > *.item-display,
.news-list > div.load-placeholder {
	opacity: 1;
}

.news-list > div.load-placeholder:before {
	content: '';
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
	left: 12px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: rgba(255,255,255,0.1);
}

.news-list > a:hover {
	background: rgba(255,255,255,0.05);
}

.news-list > *:last-child {
	margin-bottom: 0;
}

.news-list > * .news-logo {
	flex: 0 0 20px;
	height: 20px;
	border-radius: 10px;
	background-size: cover;
	margin-right: 10px;
	background-color: rgba(255,255,255,0.1);
}

.news-list > * .news-time {
	flex: 0 0 50px;
	color: rgba(255,255,255,0.6);
	line-height: 20px;
	margin-right: 20px;
	white-space: nowrap;
	font-size: 0.923076923rem;
}

.news-list > * .news-text {
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: rgba(255,255,255,0.85);
	position: relative;
	padding-right: 20px;
	transition: padding 500ms ease;
	font-size: 1.07692308rem;
}

.news-list > * .news-text:before {
	position: absolute;
	content: '';
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: #247afb;
	border-radius: 5px;
	display: block;
	opacity: 0;
	transition: opacity 300ms ease;
}

.news-list > *.item-new .news-text {
	padding-left: 16px;
	font-weight: bold;
}

.news-list > *.item-new .news-text:before {
	position: absolute;
	content: '';
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: #247afb;
	border-radius: 5px;
	display: block;
	opacity: 1;
}

.news-list > * .news-text:after {
	content: '\ea20';
	font-family: 'SL-Icons';
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	color: rgba(255,255,255,0.5);
	margin-top: 1px;
	transition: right 100ms ease;
}

.news-list > * .news-medium {
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.3);
	display: none;
}

.news-list > *:hover .news-medium {
	color: rgba(255,255,255,0.5);
}

.news-list > * .news-medium:before {
	content: '\ea32';
	font-family: 'SL-Icons';
}

.news-list > *:hover .news-text {
	color: rgba(255,255,255,0.95);
}

.news-list > *:hover .news-text:after {
	right: 0;
}

.news-list > *:hover .news-text:after {
	right: 0;
}

.news-list > * .news-text .highlight {
	color: #247afb;
	font-weight: bold;
}

.news-list > * .news-pin {
	position: absolute;
	font-family: 'SL-Icons';
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	font-size: 14px;
	color: rgba(255,255,255,0.5);
	display: none;
}

.news-list > * .news-pin:hover {
	color: rgba(255,255,255,0.75);
}

.news-list > * .news-pin:after {
	content: '\ea3a';
}

.news-list > * .news-hide {
	position: absolute;
	font-family: 'SL-Icons';
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	font-size: 18px;
	color: rgba(255,255,255,0.5);
	display: none;
}

.news-list > * .news-hide:hover {
	color: rgba(255,255,255,0.75);
}

.news-list > * .news-hide:after {
	content: '\ea3b';
}


/*
* News Content
*/
.news-content .close-box {
	display: none;
}

.news-content.multiple .close-box {
	display: block;
}


/*
* News Box
*/
.news-box {
	height: calc(100vh - 90px);
	display: flex;
	flex-direction: column;
}

.news-box .tag-filter {
	flex: 0 0 56px;
	padding: 10px;
	border-bottom: 1px rgba(255,255,255,0.05) solid;
}

.news-box .news-list {
	flex: 1 0;
	overflow: hidden;
	overflow-y: scroll;
	padding: 10px;
}


/*
* Profile
*/
.profile-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.75);
	z-index: 999999;
}

.profile-overlay .profile-modal {
	width: 800px;
	background: #222429;
	border-radius: 6px;
	position: absolute;
	left: 50%;
	top: 50px;
	bottom: 50px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.profile-overlay .profile-modal .profile-close {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	top: 10px;
	right: 10px;
	position: absolute;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
}

.profile-overlay .profile-modal .profile-close:hover {
	color: rgba(255,255,255,0.75);
}

.profile-overlay .profile-modal .profile-close:before {
	content: '\ea19';
	font-family: 'SL-Icons';
	font-size: 20px;
}

.profile-overlay .profile-modal .profile-top {
	width: 100%;
	background: rgba(0,0,0,0.2);
	display: flex;
	flex-direction: column;
}

.profile-overlay .profile-modal .profile-top .profile-header {
	flex: 1 0;
	padding: 25px;
	display: flex;
	align-items: center;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-more {
	height: 36px;
	line-height: 36px;
	text-align: center;
	width: 30px;
	display: inline-block;
	color: rgba(255,255,255,0.4);
	cursor: pointer;
	margin-left: 5px;
	display: none;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-more:hover {
	color: rgba(255,255,255,0.6);
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-more:active {
	color: rgba(255,255,255,0.4);
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-more:before {
	content: '\ea6a';
	font-family: 'SL-Icons';
	font-size: 24px;
}

.profile-overlay .profile-modal .profile-top .profile-menu {
	flex: 0 0 61px;
	padding: 0 30px;
	border-top: 1px rgba(255,255,255,0.07) solid;
	user-select: none;
}

.profile-overlay .profile-modal .profile-top .profile-menu > div {
	display: inline-block;
	line-height: 30px;
	padding: 15px 7px;
	height: 60px;
	cursor: pointer;
	font-weight: 600;
	color: rgba(255,255,255,0.7);
	position: relative;
	margin-right: 20px;
}

.profile-overlay .profile-modal .profile-top .profile-menu > div:hover {
	color: rgba(255,255,255,0.9);
}

.profile-overlay .profile-modal .profile-top .profile-menu > div.selected {
	color: #fff;
}

.profile-overlay .profile-modal .profile-top .profile-menu > div.selected:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 3px;
	background-color: #fff;
	display: block;
	border-radius: 1.5px;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-avatar {
	flex: 0 0 100px;
	height: 100px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	overflow: hidden;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-avatar img {
	width: 100%;
	height: auto;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info {
	flex: 1 0;
	margin-left: 25px;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-username {
	font-weight: bold;
	font-size: 22px;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-username > div {
	display: inline-block;
	position: relative;
	padding-right: 16px;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-username .profile-status {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: block;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-social {
	margin-top: 15px;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-social a {
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	display: inline-block;
	color: rgba(255,255,255,0.6);
	font-size: 16px;
	margin-right: 6px;
	border-radius: 3px;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-social a:hover {
	color: rgba(255,255,255,0.9);
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-social a:before {
	content: '';
	font-family: 'SL-Icons';
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-social a.twitter:before {
	content: '\ea32';
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-social a.facebook:before {
	content: '\ea67';
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-social a.instagram:before {
	content: '\ea68';
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-info .profile-social a.web:before {
	content: '\ea69';
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-actions .profile-follow {
	display: inline-block;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-actions .profile-unfollow {
	display: none;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-actions.has-follow .profile-follow {
	display: none;
}

.profile-overlay .profile-modal .profile-top .profile-header .profile-actions.has-follow .profile-unfollow {
	display: inline-block;
}

.profile-overlay .profile-modal .profile-body {
	flex: 1 0;
	position: relative;
	display: flex;
	overflow: hidden;
}

.profile-overlay .profile-modal .profile-body .profile-body-title {
	margin-bottom: 20px;
	font-weight: 500;
	color: rgba(255,255,255,0.5);
}

.profile-overlay .profile-modal .profile-body > .profile-content {
	overflow-y: scroll;
	padding: 25px;
	height: 100%;
	flex: 1 0;
	position: relative;
}

.profile-overlay .profile-modal .profile-body .empty-content {
	font-size: 0.923076923rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: rgba(255,255,255,0.4);
	text-align: center;
	display: none;
}

.profile-overlay .profile-modal .profile-body .empty-content.active {
	display: block;
}

.profile-overlay .profile-modal .profile-body .empty-content:before {
	font-family: 'SL-Icons';
	content: '\ea85';
	display: block;
	margin-bottom: 10px;
	font-size: 5rem;
}

.profile-overlay .profile-modal .profile-body > .profile-details {
	width: 300px;
	background: rgba(0,0,0,0.05);
	border-left: 1px rgba(255,255,255,0.1) solid;
	padding: 25px 30px;
}

.profile-overlay .profile-modal .profile-body .pagination {
	margin-top: 15px;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div,
.profile-overlay .profile-modal .profile-body .profile-item-list > div {
	background: rgba(255,255,255,0.075);
	border-radius: 6px;
	margin-bottom: 5px;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div {
	padding: 15px;
	display: flex;

}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div .chat-avatar {
	flex: 0 0 30px;
	height: 30px;
	margin-right: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	overflow: hidden;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div .chat-avatar img {
	width: 100%;
	height: auto;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div .chat-info {
	flex: 1 0;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div .chat-head {
	margin-bottom: 3px;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div .chat-head > div {
	display: inline-block;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div .chat-info {
	overflow: hidden;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div .chat-info .chat-username {
	font-weight: bold;
	margin-bottom: 3px;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div .chat-info .chat-time {
	color: rgba(255,255,255,0.4);
	font-size: 0.923076923rem;
	position: relative;
	padding-left: 10px;
	margin-left: 10px;
}

.profile-overlay .profile-modal .profile-body .profile-chat-list > div .chat-info .chat-time:before {
	content: '';
	display: block;
	background-color: rgba(255,255,255,0.4);
	width: 2px;
	height: 2px;
	border-radius: 50%;
	left: -1px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}

.profile-overlay .profile-modal .profile-body .profile-item-list > div {
	padding: 20px;
	cursor: pointer;
}

.profile-overlay .profile-modal .profile-body .profile-item-list > div.is-private .item-title:before {
	content: '\ea6b';
	font-family: 'SL-Icons';
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.5);
	margin-right: 7px;
}

.profile-overlay .profile-modal .profile-body .profile-item-list > div:hover {
	background: rgba(255,255,255,0.1);
}

.profile-overlay .profile-modal .profile-body .profile-item-list > div .item-title {
	font-weight: bold;
}

.profile-overlay .profile-modal .profile-body .profile-item-list > div .item-subtitle {
	margin-top: 5px;
	color: rgba(255,255,255,0.5);
}

.profile-overlay .profile-modal .profile-body .profile-detail-list > div {
	margin-bottom: 17px;
	position: relative;
	padding-left: 30px;
	color: rgba(255,255,255,0.7);
}

.profile-overlay .profile-modal .profile-body .profile-detail-list > div:before {
	font-family: 'SL-Icons';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2em;
	color: rgba(255,255,255,0.3);
}

.profile-overlay .profile-modal .profile-body .profile-detail-list > div.detail-location:before {
	content: '\ea72';
}

.profile-overlay .profile-modal .profile-body .profile-detail-list > div.detail-age:before {
	content: '\ea6e';
}

.profile-overlay .profile-modal .profile-body .profile-detail-list > div.detail-education:before {
	content: '\ea6f';
}

.profile-overlay .profile-modal .profile-body .profile-detail-list > div.detail-occupation:before {
	content: '\ea70';
}

.profile-overlay .profile-modal .profile-body .profile-detail-list > div.detail-joined:before {
	content: '\ea71';
}


/*
* Portfolio Trades list
*/
.trades-list {
	margin-bottom: 20px;
}

.trades-list > div {
	background: rgba(0,0,0,0.2);
	margin-bottom: 3px;
	font-size: 0.923076923rem;
	padding: 10px;
	display: flex;
	border-radius: 4px;
	height: 44px;
}

.trades-list > div:last-child {
	margin-bottom: 3px;
}

.trades-list > div > * {
	line-height: 24px;
}

.trades-list > div .trade-side {
	flex: 0 0 24px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.846153846rem;
	padding: 0;
	display: inline-block;
	margin-right: 15px;
	text-align: center;
	border-radius: 4px;
	color: rgba(255,255,255,0.9);
	box-shadow: 0px 0px 6px rgba(0,0,0,0.15);
}

.trades-list > div.side-buy .trade-side {
	background: rgba(75, 189, 84, 0.4);
}

.trades-list > div.side-sell .trade-side {
	background: rgba(239, 27, 25, 0.4);
}

.trades-list > div .trade-symbol {
	flex: 0 0 170px;
	font-weight: 600;
	color: rgba(255,255,255,0.9);
}

.trades-list > div .trade-name {
	flex: 0 0 20%;
	color: rgba(255,255,255,0.5);
	margin-left: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 30px;
}

.trades-list > div .trade-price {
	width: 100px;
	position: relative;
	margin-right: 15px;
}

.trades-list > div .trade-price:before {
	content: '@';
	color: rgba(255,255,255,0.4);
	margin-right: 3px;
}

.trades-list > div .trade-manual {
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 12px;
	background: #fb7013;
	text-align: center;
	font-weight: 600;
	color: #fff;
	font-size: 14px;
}

.trades-list > div .trade-type {
	flex: 0 0 24px;
	height: 24px;
	border-radius: 3px;
	background: rgba(255,255,255,0.1);
	text-align: center;
	font-weight: 600;
	color: rgba(255,255,255,0.6);
	font-size: 0.846153846rem;
}

.trades-list > div .trade-pnl {
	margin-left: 10px;
	font-weight: 600;
	font-size: 0.846153846rem;
}

.trades-list > div .trade-pnl .pnl-label {
	color: rgba(255,255,255,0.4);
	margin-right: 3px;
}

.trades-list > div .trade-time {
	flex: 1 0;
	text-align: right;
	color: rgba(255,255,255,0.4);
	font-size: 0.846153846rem;
	margin-right: 5px;
}

.trades-list > div .trade-edit {
	flex: 0 0 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	color: rgba(255,255,255,0.5);
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
	margin-left: 10px;
}

.trades-list > div .trade-edit:before {
	content: '\ea5b';
	font-family: 'SL-Icons';
	font-size: 12px;
}

.trades-list > div .trade-edit:hover {
	background: rgba(255,255,255,0.15);
}

.trades-list > div .trade-edit:active {
	background: rgba(255,255,255,0.12);
}


/*
* User Status
*/
.online {
	background: #23b214;
}

.idle {
	background: #f8a532;
}

.offline {
	background: #757f8d;
}



/*
* Symbol Preview Tooltip
*/
.symbol-preview {
	width: 230px;
	height: 160px;
	background: #222429;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	position: absolute;
	z-index: 9999;
	flex-direction: column;
	display: flex;
}

.symbol-preview .preview-info {
	padding: 10px;
	border-bottom: 1px rgba(255,255,255,0.05) solid;
	display: flex;
	font-size: 0.923076923rem;
	line-height: 18px;
}

.symbol-preview .preview-info > div {
	flex: 0 0 50%;
	overflow: hidden;
}

.symbol-preview .preview-info > div > div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.symbol-preview .preview-info > div:last-child {
	text-align: right;
}

.symbol-preview .symbol {
	font-weight: bold;
}

.symbol-preview .name {
	color: rgba(255,255,255,0.6);
}

.symbol-preview .price {
	font-weight: bold;
}

.symbol-preview .preview-chart {
	flex: 1 0;
}

.symbol-preview.loading-state > div {
	visibility: hidden;
}


/*
* Tour Tooltip
*/
.tour-tooltip {
	position: absolute;
	background: #272732;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	padding: 20px;
	border-radius: 4px;
	width: 250px;
	height: 150px;
	z-index: 99999;
}


/*
* Tooltip
*/
[tooltip] {
	position: relative;
	cursor: pointer;
}

.tooltip {
	z-index: 99999999999;
	text-align: left;
	padding: 15px;
	border-radius: 6px;
	background: #31333a;
	color: #fff;
	font-size: 12px;
	line-height: 1.4rem;
	word-wrap: break-word;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
	max-width: 300px;
	max-height: 260px;
	overflow-y: scroll;
	position: absolute;
	opacity: 0;
	transform: translateY(-0.75em);
}

.tooltip.active {
	animation: contextMenuOpen 75ms ease-out forwards;
}

/*

[tooltip]::before,
[tooltip]::after {
	user-select: none;
	pointer-events: none;
	position: absolute;
	display: none;
	opacity: 0;
}

[tooltip]::before {
	content: '';
	border: 5px solid transparent;
	z-index: 999999;
}

[tooltip]::after {
	content: attr(tooltip);
	text-align: left;
	padding: 10px 15px;
	font-weight: 500;
	border-radius: 4px;
	background: #31333a;
	color: #fff;
	z-index: 99999;
	font-size: 12px;
	line-height: 1.4rem;
	white-space: nowrap;
	word-wrap: break-word;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

[tooltip].long::after {
	min-width: 350px;
	max-width: 500px;
	padding: 15px;
	font-weight: normal;
	white-space: normal;
}

[tooltip]:hover::before,
[tooltip]:hover::after {
	display: block;
}

[tooltip='']::before,
[tooltip='']::after {
	display: none !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
	bottom: 100%;
	border-bottom-width: 0;
	border-top-color: #31333a;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
	bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
	left: 50%;
	transform: translate(-50%, -.5em);
}

[tooltip][flow^="down"]::before {
	top: 100%;
	border-top-width: 0;
	border-bottom-color: #31333a;
}

[tooltip][flow^="down"]::after {
	top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
	left: 50%;
	transform: translate(-50%, .5em);
}

[tooltip][flow^="left"]::before {
	top: 50%;
	border-right-width: 0;
	border-left-color: #31333a;
	left: calc(0em - 5px);
	transform: translate(-1em, -50%);
}

[tooltip][flow^="left"]::after {
	top: 50%;
	right: calc(100% + 5px);
	transform: translate(-1em, -50%);
}

[tooltip][flow^="right"]::before {
	top: 50%;
	border-left-width: 0;
	border-right-color: #31333a;
	right: calc(0em - 10px);
	transform: translate(1em, -50%);
}

[tooltip][flow^="right"]::after {
	top: 50%;
	left: calc(100% + 10px);
	transform: translate(1em, -50%);
}

@keyframes tooltips-vert {
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

@keyframes tooltips-horz {
	to {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
	animation: tooltips-vert 50ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
	animation: tooltips-horz 50ms ease-out forwards;
}*/


/*! nouislider - 14.1.1 - 12/15/2019 */
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
.noUi-connect {
  height: 100%;
  width: 100%;
}
.noUi-origin {
  height: 10%;
  width: 10%;
}
/* Offset direction
 */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.noUi-touch-area {
  height: 100%;
  width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.1s;
  transition: transform 0.1s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 6px;
}
.noUi-horizontal .noUi-handle {
  width: 14px;
  height: 14px;
  right: -7px;
  top: -4px;
  cursor: pointer;
}
.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  top: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}
.noUi-connects {
  border-radius: 3px;
}
.noUi-connect {
  background: #247afb;
}
/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}
.noUi-handle {
  border-radius: 50%;
  background: #fff;
  cursor: default;
}
.noUi-active {
  box-shadow: inset 0 0 1px #000, 0 3px 6px -3px #000;
}

/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-pips {
  position: absolute;
  color: #999;
}
/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}
.noUi-marker-sub {
  background: #AAA;
}
.noUi-marker-large {
  background: #AAA;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}
.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}
.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}
.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

.content__chat .chat-messages .user-filter {
	background: rgba(255,255,255,0.05);
	border-radius: 4px;
	height: 36px;
	position: relative;
	margin-left: 9px;
    margin-right: 6px;
	float: right;
}

.content__chat .chat-messages .user-filter.focus {
	background: rgba(255,255,255,0.125);
}

.content__chat .chat-messages .user-filter:before {
	font-family: 'SL-Icons';
	content: '\ea8f';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: rgba(255,2555,255,0.5);
}

.content__chat .chat-messages .user-filter input {
	background: transparent;
	border: 0;
	height: 36px;
	width: 100%;
	display: block;
	padding-left: 35px;
}

.content__chat .chat-messages .user-filter .clear-filter {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 36px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	color: rgba(255,255,255,0.6);
}

.content__chat .chat-messages .user-filter .clear-filter:hover {
	color: rgba(255,255,255,0.8);
}

.content__chat .chat-messages .user-filter .clear-filter:before {
	font-family: 'SL-Icons';
	content: '\ea19';
}
.content__chat .chat-messages .user-filter.active .clear-filter {
	display: block;
}

.chat-messages.filter-state .chat-search-results {
	display: flex;
	flex-direction: column;
	flex: 1 0;
	overflow: hidden;
}

.chat-messages.filter-state .chat-messages__send,
.chat-messages.filter-state .chat-messages__window {
	display: none;
}

@media screen and (min-width: 200px) {
	.users-list-div {
		left: calc(19% + 39px);
	}
}

@media screen and (min-width: 400px) {
	.users-list-div {
		left: calc(19% + 39px);
	}
}

@media screen and (min-width: 600px) {
	.users-list-div {
		left: calc(19% + 54px);
	}
}

@media screen and (min-width: 700px) {
	.users-list-div {
		left: calc(19% + 78px);
	}
}

@media screen and (min-width: 800px) {
	.users-list-div {
		left: calc(19% + 108px);
	}
}

@media screen and (min-width: 900px) {
	.users-list-div {
		left: calc(19% + 140px);
	}
}

@media screen and (min-width: 1000px) {
	.users-list-div {
		left: calc(19% - 15px);
	}
}

@media screen and (min-width: 2000px) {
	.users-list-div {
		left: calc(19% + 59px);
	}
}

.users-list-div {
	position: absolute;
    margin-top: 37px;
	width: 50%;
    z-index: 9999 !important;
    border: 0;
	color: #fff;
	margin-bottom: 5px;
	border-radius: 4px;
	background-color:#14141a;
}

.users-list-div .users-list {
	width: 100%;
	margin-bottom: 0;
}

.users-list-div .users-list > div .username {
	font-weight: bold;
	margin-bottom: 5px;
	margin-right: 10px;
	cursor: pointer;
	color: #fff;
}

.users-list-div .users-list > div .username:hover {
	text-decoration: underline;
}

.users-list-div .users-list > div .head {
	line-height: 20px;
}

.users-list-div .users-list > div .head > * {
	display: inline-block;
	vertical-align: top;
}

.users-list-div .users-list .item {
	background: rgba(255,255,255,0.075);
	border-radius: 6px;
	display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    position: relative;
    margin: 6px;
}

.users-list-div .users-list .item:hover {
	background: rgba(104,104,105,1);
}




.quantgrid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 600px [col] 600px [col] 560px ;
  grid-template-rows: [row] 415px ;
  background: rgba(255,255,255,0.0);
  color: #444;
}



.quantgrid .box {
  
  color: #fff;
  border-radius: 5px;
  padding: 0px;
  font-size: 100%;

}

.quantgrid .box .a {
	
  grid-column: col;
  grid-row: row ;
}


.quantgrid .box .b {
  grid-column: col 2;
  grid-row: row ;
}

.quantgrid .box c {
  grid-column: col 3;
  grid-row: row ;
}


.options-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 680px [col] 400px;
  grid-template-rows: [row] 415px ;
  background: rgba(255,255,255,0.0);
  color: #444;
}


.options-grid .box {
  
  color: #fff;
  border-radius: 5px;
  padding: 0px;
  font-size: 100%;

}

.options-grid .box .a {
	
  grid-column: col;
  grid-row: row ;
}


.options-grid .box .b {
  grid-column: col 2;
  grid-row: row ;
}

.soptions-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 680px [col] 400px;
  grid-template-rows: [row] 415px ;
  background: rgba(255,255,255,0.0);
  color: #444;
}


.soptions-grid .box {
  
  color: #fff;
  border-radius: 5px;
  padding: 0px;
  font-size: 100%;

}

.soptions-grid .box .a {
	
  grid-column: col;
  grid-row: row ;
}


.soptions-grid .box .b {
  grid-column: col 2;
  grid-row: row ;
}


.ai-sector-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 800px [col] 500px [col] 100px ;
  grid-template-rows: [row] 200px [row] 400px;
  background: rgba(200,200,200,0.0);
  color: #444;
}



.ai-sector-grid .box {
  
  color: #fff;
  border-radius: 5px;
  padding: 0px;
  font-size: 100%;

}

.ai-sector-grid .box .a {
	background: rgba(100,100,100,0.5);
  grid-column: col;
  grid-row: row ;
}


.ai-sector-grid .box .b {
  grid-column: col 2;
  grid-row: row 2;
}

.ai-sector-grid .box .c {
  grid-column: col 3;
  grid-row: row ;
}


/*
* Options List Table
*/

.options-contracts-table .list-table__head {
	user-select: none;
}

.options-contracts-table .list-table__head > div > div:hover:after {
	opacity: 0.5;
	color: rgba(0,0,255,0.9);
}

.notifications-sidebar {
	flex: 0 0 240px;
	background: #0f0f13;
	display: flex;
	flex-direction: column;
/*	display: none;*/
}


/* Watchlists */
.watchlist-controls .switch-box .switch{
	margin: 8px 0px;
}

.watchlist-controls .add-watchlist-symbols-button{
	margin: -8px 0px;
}

.portfolio-controls .switch-box .switch{
	margin: 8px 0px;
}

.sector-head .switch-box .switch{
	margin: 8px 240px;
}



/*.portfolio-controls .add-watchlist-symbols-button{
	margin: -8px 0px;
}*/





.content-box-settings {
	background: #0e0e12;
	border: 1px rgba(255,255,255,0.075) solid;
	border-radius: 5px;
	margin-bottom: 20px;
	position: relative;
	transition: border 200ms ease;
}

.content-box-settings .content-box__head {
	height: 50px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px rgba(255,255,255,0.04) solid;
}

.content-box-settings .content-box__head .head__title {
	line-height: 26px;
	height: 50px;
	font-weight: 500;
	color: rgba(255,255,255,1);
	font-size: 1.07692307692rem;
	padding: 12px 20px;
	justify-content: space-between;
}

.content-box-settings .control-bar .select-box {
	cursor: pointer;
	position: relative;
/*	left: 20px;*/
	height: 36px;
	line-height: 36px;
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
	display: flex;
	user-select: none;
	justify-content: space-between;
}

.content-box-settings .control-bar .btn-group {
	
	position: relative;
	display: flex; 
	justify-content: space-between;

}

/*.content-box-settings .control-bar .play-tone-button {
	position: relative;
	left: 0px;
}

.content-box-settings .control-bar  .set-tone-button{
	position: relative;
	left: -100px;
}*/